Подборка статей прочитанных в июне

Frontend

Делаем таблицу с бесконечной прокруткой без event listener
Концепт реализации бесконечного скрола при помощи IntersectionObserver API.

Настройка окружения unit тестирования javascript
Advanced Patterns in React

Backend

Введение в Spring, или что делать, если по всему проекту @Autowired и @Component, а вы не понимаете, что это

Python

Python потребляет много памяти или как уменьшить размер объектов?
Обзор структур данных python по объему требуемой оперативной памяти

Operation Systems

Redox
Redox is a Unix-like Operating System written in Rust, aiming to bring the innovations of Rust to a modern microkernel and full set of applications.

IOT

Вывод информации на дисплей покупателя
Статья про вывод произвольного теста на внешний дисплей Raspberry Pi.

Office trends in 2k2*

Asciidoctor

Текстовый процессор для подготовки документов в различных форматах.

Обзоры инструментов для подготовки презентаций:

1. Современный формат презентаций
2. Презентация как код, или Почему я больше не пользуюсь Powerpoint-ом
3. Basic presentation-on ascii doc
4. A simple markdown-like script language for generating charts from text via javascript. (+ online editor)
5. A Markdown Presentation Writer
6. A simple, in-browser, markdown-driven slideshow tool

Some new interesting repositories

Js library that detects mobile devices https://github.com/hgoebl/mobile-detect.js

Параметризация установки расширения из Chrome Web Store

С благими намерениями Google закрыла для разработчиков возможность установки плагинов за пределами магазина (с небольшим списком исключений).
Поэтому единственный вариант дистрибуции плагина со своего ресурса это публикация ссылки на страницу Chrome Web Store.
Если надо добавить какой нибудь уникальный параметр плагину при установке, то можно добавить параметр в url ссылки на плагин (например в хэш), а затем найти его при помощи history api.
Публикуем подобную ссылку:
https://chrome.google.com/webstore/detail/link-checker-web-console/picifgoheidimhdnaghmacegokgglgeh?hl=ru#hashmark=one_two_three

В расширении при установки ищем в истории ссылку с заданным хешем:

var URL_MARK = '#hashmark=';

chrome.history.search({
 text: URL_MARK,
 maxResults: 10,
}, function(results){
 var  url = results[0] ? results[0].url : '', 
   pos = url.indexOf(URL_MARK), 
   options = pos != -1 && url.substr(pos + URL_MARK.length);
 
 if(options){
  // Do something
 }
});

Статус загрузки страницы в iframe

Ирония в том, что загрузив что то в iframe, нет никаких параметров по которым можно было определить статус загрузки.
Событие onload у iframe сработает в обоих случаях и если страница была успешно загружена или не найдена.

Если в iframe подгружается с того же домена, что и страница то мы можем просто скачать страницу по ajax, получить статус операции.

В примере использую обертку jQuery для загрузку через ajax.

var $frame = $('iframe')

$.get(url).done(function(content, status, x){
var _doc = $frame[0].contentWindow.document; 
_doc.open('text/html', 'replace');
_doc.write(content);
_doc.close();
$frame.css('height', _doc.documentElement.scrollHeight);
}).fail(function(x, status, message){
// Do another magic
});

П.С.
В одном списке вопросов для фронтендеров в качестве ответа на вопрос, когда бы вы использовали метод document.write(), был предложен ответ - никогда (или в 1999-м). Вообщем, это первый случай, когда я нашел применения этому методу.

П. П. С.
Обнаружил один существенный недостаток - невозможно определить когда завершится отрисовка содержимого, вставленного через document.write(). Поэтому полученный размеры контента могут не соответствовать реальным.

Лучшее из прочитанного в августе

Короткий конспект собранных ссылок понравившихся статей.

Браузер - это развитие ОС
http://siliconrus.com/2015/08/browsers-future/

Касперский попал под раздачу
http://geektimes.ru/post/259750/
Особенно полезно, что возможное решение сейф браузинга Dr.Web будет иметь похожее воплощение.

Занимательная вероятностная статистика
http://geektimes.ru/post/259090/

Как победить проституцию
http://w-o-s.ru/article/16030

Откуда берется ксенофобия
http://w-o-s.ru/article/14704

"Традиции износилования"
http://w-o-s.ru/article/14823

Чем бороться с локерами/вымогателями
http://geektimes.ru/company/icover/blog/259968/

Исповедь фронтендера в поисках работы. Стоит иногда перечитывать, чтобы приходить в чувства.
http://siliconrus.com/2015/08/kozulya-job/

Mac app store free apps. Листинг скидок в app store
http://appshopper.com/mac/prices/free

В чём истинное предназначение «Косынки» и «Сапёра»
http://geektimes.ru/post/260292/

Небольшой обзор Алисы в стране чудес с точки зрения анализа работы мозга.
Мне всегда нравился сюрриализм в этом произведении, и по всей видимости он не случаен.
http://www.factroom.ru/books/secrets-of-alice-in-wonderland

Мара Сальватруча из Центральной америки
http://lenta.ru/articles/2015/08/18/ms13/?pasa

Реабилитируем селфи
http://www.lookatme.ru/mag/how-to/inspiration-howitworks/216209-psycho-selfie

Признаю, что выработал у себя такую привычку - держать по множеству открытых вкладок.
И две вещи которые вынуждают их закрывать - не читаемость заглавий вкладок и нехватка памяти. Из за физических ограничений монитора и компьютера.
http://www.lookatme.ru/mag/how-to/better-life/216309-lifehack-singletasking

Небольшая история как появился ноль и отрицательные числа
http://www.lookatme.ru/mag/how-to/books/216125-excerpt-negative

Хороший рассказ о выборе фотоаппарата или чем снимать
http://geektimes.ru/company/icover/blog/260740/

Познавательная статья о прослушке (с красочными примерами)
http://habrahabr.ru/company/neuronspace/blog/265457/

VirtualBox: как объединить две виртуальные машину в одну сеть

Было необходимо поправить багу в верстке под IE9, который был доступен из одной ВМ, а сервер был на другой ВМ. Поэтому потребовалось настроить работу двух ВМ в VirtualBox в одной сети.
Составил небольшой конспект, основных действий. Может пригодится в будущем.

Создание виртуальной сети
Переходим по пунктам меню "Файл > Настройки"
Открываем вкладку "Сеть".
Создаем/выбираем сеть
Задаем настройки сети в попапе:

• Имя сети: "NatNetwork"
• CIDR сети: 10.0.2.0/24

IP адресс хоста потом надо будет искать в диапазоне указанного CIDR сети.

Настройка виртуальной машины
Выбираем пункт меню "Настройка" контекстного меню ВМ.
Во вкладке "Сеть" в настройках Адаптера (добавляем новый если требуется).
Выбираем "Тип подключения" - "Сеть NAT", в выпадающем списке "Имя" выбираем созданную сеть.
Задаем такие настройки для всех ВМ, которые надо подключить

Проверка
В ВМ в которой запущен сервер узнаем ip адрес машины
Debian/Ubuntu к примеру
#: ifconfig
В ВМ в которой открыт браузер в адресной строке указываем хост и порт сервера.

Двоеточие в идентификаторе css селектора

Опытным путем нащупал отличия в работе методов document.getElementById() и document.querySelector()
Был в DOM-е элемент с идентификатором layout:rightcol
<div id="layout:rightcol"></div>

Так для него document.getElementById('layout:rightcol') вернет правильный элемент, а для
document.querySelector('#layout:rightcol') и $('#layout:rightcol') будет получено исключение

chrome 40: DOMException: Failed to execute 'querySelectorAll' on 'Document': '#layout:rightcol' is not a valid selector.
firefox 35: SyntaxError: An invalid or illegal string was specified