Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

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

С версии 0.8.46 в nginx появились опции, позволяющие легко и просто настроить прозрачное кэширование для анонимных пользователей.

Для работы этой схемы от сайта требуется очень мало: достаточно лишь не начинать сессию, то есть не отправлять сессионную куку, без явной на то необходимости. Редкий сайт нельзя довести до такого состояния, а значит большинство сайтов можно защитить от резких всплесков посещаемости с помощью nginx с минимальными затратами сил и времени.

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

Сейчас в рассылке JSMentors JavaScript идет обсуждение книг, который стоит прочитать, чтобы улучшить свои знания. Там было много позитивных отзывов и предложений. Я хочу показать вам те книги и интернет-ресурсы, который я считаю важными и которые помогут вам в обучении. На этой странице я перечислил большое количество источников, разделенных по уровням.

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

Не заставляю вас читать все книги, которые предложены ниже. Эти книги я читал на протяжении многих лет и почерпнул в каждой много полезного. Я их распределяю по категориям, чтобы вам было проще работать с ними. Выберите книги, которые подходят вам.

Около 2-х месяцев назад я и TheShock собирали вопросы по JavaScript в теме FAQ по JavaScript: задавайте вопросы. Первая часть, те вопросы, которые достались мне, появилась буквально через несколько дней JavaScript F.A.Q: Часть 1, а вот вторая часть все не выходит и не выходит. TheShock сейчас переезжает в другую страну и поэтому ему не до ответов. Он попросил меня ответить на его часть. Итак вторая часть ответов — те вопросы, которые достались тоже мне.

Несколько дней назад мы с TheShock создали топик в котором собирали ваши вопросы, касательно JavaScript (архитектура, фрэймворки, проблемы). Настало время ответить на них. Мы получили очень много вопросов, как в комментариях так и по email. Эта первая часть ответов — те вопросы, которые достались мне.

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

1) Жонглирование.

Жонглирование — прекрасная вещь, полезная как для здоровья, так и для души. Какая польза может быть от жонглирования?
Для начала это хорошее упражнение для глаз, снимающее с них напряжение, что немаловажно, учитывая постоянную работу за компьютером. Затем, это физическая нагрузка(пусть и небольшая) как на руки, так и на ноги(в начале придется постоянно нагибаться, чтобы поднимать падающие снаряды). Ну и в конце концов это моральное удовлетворение от того, что у вас получается манипулировать предметами в воздухе. Жонглирование не требует никаких приспособлений. Достаточно трех(для начала двух) предметов такой формы, чтобы удобно было ловить и подкидывать вверх, желательно не слишком легких, но и не тяжелых.

Совсем недавно (3 мая) был зарелизен jQuery 1.6 и вот что нового появилось в этой js-библиотеке давайте и посмотрим.

Самое «веселое» то, что в новом релизе есть важные изменения, которые несовместимы с предыдущими версиями jQuery. И в результате при переходе на новую версию, вполне возможно, что придётся просматривать и изменять уже существующий код.

Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:

// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

31 января вышел релиз jQuery 1.5, одним из ключевых нововведений которого стал инструмент Deferred Object. Именно о нём я и хочу рассказать подробнее в этой статье.

Эта новая функциональность библиотеки направлена на упрощение работы с отложенными (deferred) вызовами обработчиков (callbacks). Deferred Object, аналогично объекту jQuery, «цепочный» (chainable), но имеет свой набор методов. Deferred Object способен регистрировать множество обработчиков в очередь, вызывать зарегистрированные в очереди обработчики и переключать состояние на «завершено» или «ошибка» для синхронных или асинхронных функций.

Вот уже около 3-х лет занимаюсь интернет коммерцией. Работа в основном направлена на зарубежные сайты по продаже электроники. Начинал бизнес с открытия ebay аккаунта и уже тогда вопрос стал ребром, т.к. для работы с ebay нужен верифицированный аккаунт PayPal. Я являюсь гражданином Украины, следовательно, никаких шансов открыть свой собственный аккаунт у меня не было, т.к. PayPal ни тогда ни сейчас не работает с Украиной, поэтому пришлось просить друга, который проживает в Великобритании, открыть аккаунт на его имя. Впринципе, открытие аккаунта в Англии является делом обыденным. Все что требуется, это действующий банковский счет, после чего нужно пройти несколько этапов для того чтобы подтвердить что вы владелец этого счета. Так же вы указываете свой адрес, который могут попросить подтвердить. Для этого достаточно будет отправить так называемый Bank Statement, т.е. выписку из банка. Выглядит она примерно так:

Хочу поделиться с вами одним из способов показать клиенту, что работа выполнена более чем на 100%.

Разрабатывая любой материал, мы передаем результат своей работы в электронном виде на цифровом носителе (CD или DVD-диски) лично клиенту или просто в электронном письме без использования физического носителя. Все зависит от оговоренного способа работы с клиентом.

Суть способа проста — оформляем фирменный конверт для дисков. Такой вариант не только даст впечатление более качественной работы, но и даст возможность вспомнить контактные данные разработчика.

Более месяца назад в статье FAQ по JavaScript: задавайте вопросы был задан вопрос «Подскажите примеры хорошего подхода организации JS кода к сайту на достаточно высоком уровне. Как можно узнать подробнее практики реализации например gmail?».

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

Эта статья о том, как сделать крупное веб-приложение расширяемым и поддерживаемым: архитектура, подходы, правила.

Браузер, который сам ходит по ссылкам, открывает/закрывает табы, парсит или сохраняет весь контент на файловую систему — интересно посмотреть на такое, не так ли? Лично мне интересно было создать что-то подобное. Никакой фантастики! В общем в очередной раз во мне проснулось нечто вроде программистской лени вдохновения и вместо того, чтобы писать обычный crawler (он же spider или по-простому парсер сайта) на PHP, Perl или Ruby, я начал разбираться, как это сделать на FireFox.

Сегодня речь пойдёт об WaterSpout — веб сервере, способном обрабатывать websockets запросы, позволяя общаться в реальном времени между сервером и браузером используя websockets или long polling. Написан он на PHP.

В первую очередь идёт проверка поддерживаются ли websockets (это Chrome, Опера и FF, если включим), если нет, то ничего страшного, будет использоваться long polling.
Преимущества этой технологии: доставка сообщений мгновенна, высокая производительность. Тестировал в Chrome, FF, IE6+.
Демка.

Введение

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

Comet

Модель Comet позволяет создавать асинхронные Web-приложения, реагирующие на данные, которые приходят с сервера в реальном времени. В данном случае для ее реализации используется технология Long-polling на фреймворке Ajax Push Engine (APE). Суть технологии состоит в том, что браузер подключается к серверу и ждет до тех пор, пока не появятся данные. Как только они появляются, клиент их принимает и подключается снова. Если никаких данных не поступает, соединение разрывается после тайм-аута и снова устанавливается.

APE

APE представляет из себя программный комплекс с открытым исходным кодом, предназначенный для Ajax Push. Система включает в себя веб-сервер и Javascript Framework. APE позволяет передавать в браузер любые данные в реальном времени без каких-либо дополнительных приложений на стороне клиента. По заявлениям создателей свободно выдерживает нагрузку в 100000 соединений.

Хочу поделиться своим опытом создания простого Comet-чата. Периодически читал про эту технологию, и сейчас решил попробовать сделать что-либо сам. Получился небольшой чат, интерфейс которого я старался сделать похожим на интерфейс irc-клиента mIRC. Так как подобную вещь пишу первый раз, просьба прокомментировать возможные ошибки в программе и статье и описать более оптимальные пути решения задач. Посмотреть на работающий чат можно здесь: http://94.127.68.84:6884/

Dklab Realplexor — это Comet-сервер, позволяющий держать одновремено сотни тысяч долгоживущих открытых HTTP-соединений с браузерами пользователей. JavaScript-код, запущенный в браузере, подписывается на один или несколько каналов Realplexor-а и вешает обработчик на поступление данных. Сервер может в любой момент записать сообщение в один из таких каналов, и оно будет моментально передано всем подписчикам (хоть одному, хоть тысяче), в режиме реального времени и с минимальной нагрузкой для сервера.

^{Хотя идейным вдохновителем Realplexor-а был предыдущий проект, dklab_multiplexor, код Realplexor-а не имеет с ним практически ничего общего. Поэтому я и решил сменить название. Несопоставимы также возможности продуктов (см. ниже), да и размер кода увеличился в 7 раз.}

Realtime-направление сейчас довольно активно развивается на Западе, и в нем особенно выделяется продукт Tornado — событийно-ориентированный веб-сервер на языке Python. Правда, Tornado — это не столько Comet-сервер, сколько инструмент, с помощью которого можно запрограммировать «в том числе» и Comet-сервер. Ключевые слова: Comet, Push Server, Long polling, JavaScript, XMLHttpRequest.

Главные преимущества Realplexor-а:

• простота использования: наличие API для JavaScript, API для PHP (в будущем — и для других языков);
• простота конфигурирования;
• широкий функционал (либо отстутствующий, либо недоступный напрямую в аналогах).

Лучше один раз увидеть...

Я сделал отдельную онлайн-песочницу, чтобы продемонстрировать функционал нового Realplexor-а и то, для чего вообще нужны Comet-серверы (кстати, это физически тот же самый демон Realplexor-а, что использует мой новый стартап РуТвит). Песочница реализует что-то типа многоканального чата: зайдя, вы получите как будто бы 2 независимых «браузера», запущенных на разных компьютерах.

• Верхний «браузер» отображает каналы — в них моментально появляются новые сообщения, как только кто-то их туда отправляет на стороне сервера. Конечно же, эту страницу могут просматривать одновременно сотни тысяч пользователей, и они все будут видеть одно и то же (реализовано с использованием Realplexor JavaScript API). Можно «на лету» добавлять новые каналы (подписка) или скрывать уже имеющиеся (отписка).
• Нижний браузер содержит формы, позволяющие добавлять сообщение в произвольный канал, указав его имя. Форма AJAX-ом отправляется на сервер, и уже там PHP-скрипт записывает в Realplexor полученный текст через PHP API. (И да, так можно чатиться.)

По умолчанию на странице открыто 3 канала с именами Alpha, Beta и RuTvit. Но, конечно, вы можете закрыть эти каналы и открыть новые. Вот, например, страница с единственным открытым каналом по имени Habrahabr: http://rutvit.ru/realplexor/demo?ids=Habrahabr.



Песочница демонстрирует следующие функции Realplexor-а:

Начало и оглавление см. в первой части.

Акции у основателей компании и первых инвесторов — это очевидно. А как акции попадают к сотрудникам?

Ещё в самом начале развития стартапа основатель (особенно если он не имеет готовой команды) ищет первых сотрудников/коллег/соучастников, которые зачастую могут стать сооснователями. Станут или нет — зависит от многих факторов: сможет ли основатель обеспечить им зарплату «на уровне», от их commitment-а (помните байку про курицу и свинью, затеявших стартап в виде ресторанчика “Ham and eggs” и заспоривших, кто из них будет involved, а кто committed?), от их требований, наконец… Логично ожидать, что первые коллеги основателя, которые делят с ним в какой-то степени риск (а не просто ходят в офис отрабатывать зарплату), становятся, явно или неявно, сооснователями проекта. И в качестве компенсации за риск, в награду за приверженность делу, или как хороший стимул для красноглазенья без выходных, основатель делится с ними своей долей.

Начало и оглавление см. в первой части.

Так что там про инсайд?

Если ты руководишь компанией, то определённо располагаешь бóльшим объемом информации, чем какой-нибудь миноритарий, купивший её акции на бирже через Интернет.

Но, если ты воспользуешься этим преимуществом, торгуя акциями, это будет нечестно по отношению к обычным покупателям-миноритариям. Согласись, если всё имущество твоей компании состоит из нефтяного танкера, и тебе первому сообщили, что он затонул, столкнувшись в Атлантике с айсбергом, то… ты бросишься на биржу продавать свои акции и останешься при деньгах. А вот акционеры компании, что узнают про затонувший танкер через пару дней из репортажа CNN, останутся с кучей мгновенно подешевевших до уровня фантиков акций на руках. Некрасиво, правда?