JavaScript *

Добрый вечер уважаемые читатели,

На хабре последнее время проскакивало несколько упоминаний о node, быстрой платформе для создания вэб приложений на javascript, обладающей довольно уникальной на сегодняшний день особенностью, неблокирующим I/O (вводом/выводом).

Для начала о nodeJS:

1) В качестве языка используется JavaScript
2) Для выполнения JavaScript используется движок V8 от Google, который работает довольно быстро благодаря компиляции в машинный код перед выполнением.
3) Для реализации неблокирующего I/O используются libev и libeio, (libev показывает более хорошие результаты по сравнению с libevent)
4) Для реализации подключения библиотек выбран синтаксис commonJS
5) Есть возможность писать модули ещё и на C/C++, при этом подключаются они точно так-же как и js модули, это позволит Вам, к примеру, любое узкое место в вашем приложении переписать на C++ без каких либо трудностей.

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

Я разработал хорошую на мой взгляд галерею изображений под названием iLoad. Сегодня опубликовал уже 3 версию. Галерея может достаточно много всего, хотя и работает только с изображениями. Подробнее можно прочитать в большущем посте вот тут или посмотреть на работу галереи на странице скачивания. Надеюсь, вы оцените.

UPD

Подготовил версию 3.2.5. Теперь галерея стабильно работает в IE9. Пофиксены все найденные баги.

Внезапно потребовалось выводить на странице виджет Яндекс.Карт с какими-то накладываемыми слоями. Проблема заключалась в необходимости дать пользователю редактировать эти слои.

Быстрый поиск редакторов накладываемых примитивов дал только конструктор схем проезда от Яндекса и какой-то убогий php'шный конструктор карт (к тому же ещё и платный). А редактор был нужен. По этому пришлось сесть и быстренько написать.

Наткнулся вчера на этот инструмент и не смог пройти мимо, провел ночь за написанием тестов, а теперь хочу поделиться находкой. QUnit — это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Удобна в использовании, ничего лишнего, осваивается за 20 минут, выгода от применения — колоссальная.

Самым нетерпеливым сразу ссылки:
Официальная документация на сайте jquery: docs.jquery.com/QUnit
Реальные примеры тестов (для модулей jquery): view.jquery.com/trunk/jquery/test/unit
Руководство для начинающих (англ): www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit
Система распределенного тестирования (гениально и просто): testswarm.com

Под катом информация о преимуществах юнит-тестирования применительно к js и разбор возможностей библиотеки на примерах.

Те, кто пишут на C# очень хорошо знают и часто используют механизм String.Format, которого сильно не хватает в JavaScript. Несмотря на его простоту и удобство, на просторах Сети мало что можно накопать, в основном вариации на тему sprintf (привет сишникам). Достаточно давно был написан скрипт, который позволял форматировать строки на JavaScript и был похож на String.Format C#. Форматирование стало использоваться коллегами достаточно плотно в скриптах и я решил немного причесать код и опубликовать для тех, кто хочет получить String.Format в JavaScript.

Нашел в закромах свой старый JavaScript шаблонизатор, почитал отзывы в прошлой статье и решил кое-то переделать, изменений не так много, но они вполне существенны, добавил поддержку функций и методов в шаблонах…

Недавно у меня появился ряд задач, связанных с процедурной графикой в вебе, анимацией и механикой.
Став искать простые пути там, где их обычно нет, я наткнулся на чудненькую библиотеку «Bacon And Eggs» от Эндрю Хойера.

В феврале пройдут мастер-классы по javascript в Москве и Санкт-Петербурге.
Даты — 20 и 21 февраля для Москвы, 27 и 28 февраля для Санкт-Петербурга.

• Профессиональное javascript-программирование.
• Сложный AJAX и COMET: тонкости Web 2.0.
• Мастер-класс по клиентской оптимизации.
• Секреты jQuery.

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

Мероприятие платное, но цена очень доступная. Приходите, узнаете много нового.

Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.

Викторина для тех, кто любит JavaScript больше ECMAScript. Главный приз: пирожок на полке.

Update: Пояснение. Для тех кто совсем не в теме. ECMAScript — это стандарт языка, на котором основаны реализации JavaScript в современных браузерах. Именно этот стандарт определяет поведение программ в этой статье. JavaScript является «надстройкой» над ECMAScript.

Пояснение номер 2. Глюки IE не имеют прямого отношения к викторине поскольку это ошибки (ну или «особенности») реализации стандартов.

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

Диаграмма Ганта (англ. Gantt chart, также ленточная диаграмма, график Ганта) — это популярный тип столбчатых диаграмм, который используется для иллюстрации плана, графика работ по какому-либо проекту. Является одним из методов планирования проектов.

Без малого год назад, я уже писал (http://habrahabr.ru/blogs/javascript/50544/) о самом коротком способе определение браузера Internet Explorer, но вот некто Aleko нашел еще более короткий вариант:

-[1,]

Всего 5 байт. Пример использования:
if(-[1,]){
alert("Not IE!");
}

Опрос показал, что около 42% читателей Хабрахабра используют рождественские выходные дни для того, чтобы потрудиться над своими проектами.

Во блоге Ajaxian сообщают, что точно таким же манером использовал свои выходные разработчик по имени Тим де Конинг, который портировал Flash-версию эмулятора Commodore 64 на чистый джаваскрипт, работающий с холстом (<canvas>). Получился проект, названный им jsc64. Выглядит вот как:



Исходный код раздаётся на GitHub. Там есть даже plugin для jQuery.

Продолжаем тему визуализации данных в интернете.

Предыдущие топики:

• Изумительные диаграммы с новым Chart контролом
• Визуализация направленных графов в вебе
• Список Javascript библиотек для рисования графиков и диаграмм — habrahabr.ru/blogs/javascript/79960 (публикация в блоге — msug.vn.ua/blogs/akrakovetsky/archive/2010/01/04/javascript-charting-libraries.aspx)

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор JavaScript библиотек для рисования графов, диаграмм и прочей красоты.

Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:



Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

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

Нашел интересный ява-скриптовый спецэффект, которым под Новый Год можно украсить страницы сайта. Нет, это не доставшие всех снежинки, это ёлочная гирлянда, лампочки которой весело лопаются при наведении на них курсора мыши. Почти что пупырчатый полиэтилен :)

Посмотреть на результат работы скрипта можно на странице автора. Там же, если заглянуть в исходники, можно легко разобраться как подключить его к своей странице. Также, до старого нового года, результат работы скрипта в условиях приближенных к боевым можно увидеть на моем Зеруте. Скачать гирлянду, вместе со снежинками, можно со страницы www.schillmania.com/projects/snowstorm.

Обратите внимание на вот эту иллюстрацию:



Красиво, правда?

Для меня одним из самых проблемных мест Javascript было управление переменными. Излагаю простым русским языком.

Вышел первый стабильный релиз свободного графического Ajax-фреймворка Qooxdoo (произносится ['ku:ksdu:]), использующего JavaScript и предоставляющего почти всё необходимое для создания web-приложений с десктопоподобным интерфейсом. По словам разработчиков, web-приложения при помощи Qooxdoo можно создавать даже без знания HTML, CSS и DOM модели.

Фреймворк запускается в большинстве браузеров (Internet Explorer, Firefox, Safari, Opera и Chrome). Чтобы получить представление о работе фреймворка можно взглянуть на тестовую среду и демо-приложения, демонстрирующие в интерактивном режиме возможности qooxdoo, такие как многочисленные виджеты, Drag&Drop интерфейс, диспетчеры компоновки, визуальные темы, поддержку организации работы многоязычного интерфейса. Для разработчиков особый интерес представляет поставляемый в составе пакета инструментарий, полностью охватывающий процесс разработки, включая валидацию кода, компиляцию JavaScript, юнит-тесты, автоматическое тестирование GUI и средства отладки аналогичные Firebug.

Как известно, при работе с фреймами для обеспечения безопасности браузеры не позволяют JavaScript-коду обращаться со страницы одного домена на страницу другого домена. В этой краткой статье мы рассмотрим аспекты кросс-доменной работы в JavaScript, опишем один из «хороших» частных случаев, а в конце — я надеюсь в хабракомментах получить ответы на оставшиеся вопросы.

UPD1: те, кто здесь впервые, — обязательно читайте комментарии к этой статье, в них очень много интересного накидали (как я и надеялся). Спасибо!

UPD2: найдено решение задачи авторесайза для всего, кроме Opera < 10.

UPD3: полностью кроссбраузерное решение задачи с ресайзом приводится ниже. Его особенности: а) не портится history, б) работает даже в Опере 7 и IE6, в) для ускорения работы высота фрейма всегда делается кратной N=30 пикселям. Фактически, там 2 алгоритма — для IE (через location.hash) и для «не-IE» (через window.name и «простукивание» возможных высот в цикле). См. также комментарии к статье, там разъяснения, почему так, а не иначе.

UPD4: статья начала принимать черты монументальной, посему она переехала ко мне в Наблы на dkLab: dklab.ru/chicken/nablas/58.html — там же все примеры кода самой последней актуальности. Но, конечно, в случае изменений я буду их и тут тоже анонсировать, добавляя UPD5, UPD6 и т.д.