Демка 1, Демка 2

Демку выложил Marek Brodziak в своем блоге, там же можно почитать рассказ о разработке. Жалко не сделал такой скринсейвер. 

Как реализовать long polling с помощью Nginx и Javascript в сети достаточно много материала. Но полного руководства я ещё не встречал. То возникают проблемы с компиляцией модуля под Nginx, то в браузере вертится иконка загрузки при long poll запросах. Под катом, полный материал как же все таки это сделать правильно.

https://habrahabr.ru/company/cackle/blog/167895/

Пригодиться для создания чатов или для любого другого случая, когда надо что-то постоянно менять в браузере. 

Идея следующая. Да, у нас много JavaScript, да он как-то разбит, да нам надо подключать часть его на страницах по каким-то правилам. Пусть результирующий HTML, который получился в результате отработки всей нашей логики, и будет конфигом того, что нужно подключить. 

Поясню. У нас есть тег div, включающий какой-нибудь законченный блок — допустим, это будет список папок, т. е. в этом диве лежит список папок. Первый шаг, мы помечаем с помощью класса — этот див является компонентом. Это означает, что js-движок будет искать его по этой отметке. Вторая строчка — onclick, там указан return, и какой-то хеш. В этом хеше находится описание того, что это за компонент.

В результате нам надо найти компонент в DOM-дереве. Определить, что это за компонент (в моем случае информация о типе находится в onclick). Подключить js-файлы, чтобы все это заработало.

Первая задача решается, по крайней мере в современных браузерах, очень легко. CSS-селекторы работают много где нативно, а там, где не нативно, у вас есть в распоряжении соответствующие библиотеки.

Теперь самая интересная часть, то что записано в onclick. Там можно зашить любую информацию, которая вам нужна для инициализации. В моем случае это тип компонента, по содержимому хеша я понимаю, что это компонент по работе с папками. Достать его очень легко.

Как не утонуть в мегабайтах javascript кода? 

Действительно очень удобное и мастштабируемое решение. Как будет шанс попробую его в своих проектах. 

Когда надо по-быстрому сделать что-нибудь красивое, то очень помогает Twitter Bootstrap. Что это такое? Это файлики .css и .js, которые помогут сделать ваши элементы интерфейса как у твиттера. То есть кнопки, списки, поля ввода и так далее станут выглядеть круто, современно и красиво при минимальных усилиях с вашей стороны.

Подробное описание на английском, вместе с примерами: https://twitter.github.com/bootstrap/ 

Также имеется поддержка Less.