JavaScript *

Сегодня существует множество браузеров и все они как-то борются друг с другом ради рынка. Основные игроки: Internet Explorer, Mozilla Firefox, Google Chrome, Safari. И на сегодня они друг у друга копируют внешний вид (все пытаются походить на Google Chrome) и все поголовно хвалятся кто из них лучше соответствует HTML 5, правда главное, что они в нем нахваливают — это тэг canvas.

Вот и получается, что все они практически одинаковы, но как-то ведь им надо выделяться, чтобы быть лучшими? А здесь есть еще кое-что, что они всегда нахваливают — скорость работы. Лет 10 назад под скоростью работы браузера подразумевалась скорость загрузки страницы (например, часть армии поклонников Opera как раз из за этой возможности). А вообще на сегодня важна работа Javascript, реализацией которого кичится каждый браузер. Они даже движкам Javascript дают свои имена и это становится их очередной торговой маркой. Вот именно та самая скорость работы Javascript и является сегодня основным достоинством того или другого браузера.

Подведены итоги конкурса скриптов размером 1024 байт или меньше. Ниже список победителей.

1. Legend Of The Bouncing Beholder (автор: @marijnjh)
2. Миниатюрные шахматы (Oscar Toledo G.)
3. Тетрис со звуком (@sjoerd_visscher)
4. WOLF1K и буквы в цветах радуги (@p01)
5. Бинарные часы (tweetable) (@alexeym)
6. Mother fucking lasers (@evilhackerdude)
7. Схема графического движка (Lars Ronnback)
8. Многопользовательский настольный теннис (@feiss)
9. Генератор кода по азбуке Морзе (@chrissmoak)
10. Пульсирующие 3D-провода (@unconed)

Сайт с демками пока лежит, но некоторые из них можно найти на сайтах авторов.

Нашел в коде Javascript библиотеки вот такую вот конструкцию:

if ('is_public' in profile) {
...
}

Очень заинтересовало, как это работает. До этого использовал оператор 'in' только для итерации, а тут вот такая вот проверка интересная. Покопавшись я обнаружил для себя, что оператор 'in' также можно использоваться для проверки существования метода объекта, свойства объекта и индекса элемента в массиве. Ниже несколько примеров:

Задача

При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.

Довольно часто во многих статьях я вижу, как люди захватывают контекст this для использования в анонимной функции и удивляюсь — то, что уже стало стандартом — просто ужасная практика, которая противоречит всем канонам программирования. Вам знакома такая запись?
var self = this;
Может вам тоже стоит переосмыслить этот аспект?

Одним из компонентов нашего проекта Shopium.ua является административный интерфейс, который строится как полностью выполняющийся на клиенте rich internet application.

Для отрисовки данных приходящих с сервера в HTML нам часто нужен Javascript-шаблонизатор.

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

К хорошему быстро привыкаешь, и мы быстро привыкли к синтаксису шаблонов Jinja2 который мы используем для генерации HTML на стороне сервера. И захотели такой же, но с перламутровыми пуговицамино для Javascript.

И сформировали к нему такие требования:

Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 

В замечательном браузере Chromium (я думаю, это так же относится и к Google Chrome) события клавиатуры, которые можно обрабатывать JavaScript'ом, почему-то ведут себя очень странным, как по мне, образом. Я столкнулся с двумя интересными его проявлениями:

1. Событие onkeyup генерируется сразу же после события onkeydown, при этом при «зажатии» клавиши эта пара событий начинает генерироваться с завидной частотой в 25 миллисекунд, однако с некоторой паузой в начале.
2. Если после нажатия и удержания одной клавиши нажать следующую — происходит пауза ~500мс, и затем пара onkeydown/onkeyup уже генерируется для новой клавиши.

Ниже приведу свой способ обходить такие «милые» баги реализации.
CAUTION! Способ не идеален, и по большей части это dirty hack, чем работающее решение.

Идея генерации html с помощью javascript меня не отпустила. Напомню eе суть с помощью jQuery

$("<div>", {"class":"something",id:10})


но так как читаемость оставляет желать лучшего, была реализована небольшая библиотека.

Сейчас, после выхода стабильной версии Node.JS 0.2.0, я решил начать цикл статей по программированию с его использованием.

Основная концепция Node.JS — любые операции ввода-вывода по умолчанию реализованы как асинхронные, после выполнения операции будет вызвана функция обратного вызова, первым параметром которой будет являться ошибка или null.

Скрываем асинхронную вложенность

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

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

Приглашаю уважаемых разработчиков к участию в мастер-классах по профессиональному Javascript-программированию, AJAX/COMET, оптимизации, jQuery.

Они пройдут — в Ярославле (24-25 сентября), Новосибирске (3-4 октября), Казани (9-10 октября), Минске(16-17 октября), Днепропетровске (23-24 октября), Одессе (30-31 октября) и Самаре (13-14 ноября).

Возможно, кому-то будет полезной такая мысль.

У вас есть большой многостраничный сайт. На разных страницах у вас разные сложные яваскриптовые штуки: красивые галереи, аяксовые листалки, где-то вообще чуть ли не приложение сделано. Все это крутится на каком-нибудь jQuery/Prototype/Mootools/etc., на каждую такую штуку вызывается кипа функций, сложные селекторы айди и классов и т.д. и т.п.
И все эти скрипты вы, как заботящийся о производительности девелопер, аккуратно засунули в один JS-файл и упаковали.

Но есть неприятность: при открытии каждой страницы ваш скрипт будет шерстить DOM, в попытках найти и выбрать все узлы, которые задействованы во всех вышеописанных «штуках». Т.е. сколько у вас в скрипте селекторов вроде $('.myclass'), getElementById и т.п., столько раз после загрузки DOM он будет сканироваться в поисках этих элементов.

А если у вас скрипт на 1.5 тысячи строк и таких селекторов у вас «over 9000»? Это будет тормозить загрузку страницы. Конечно, потери не столь большие, чтоб как-то сильно заморачиваться, но можно очень просто и легко от этого избавиться: заворачивать наборы функций, описывающие работу JS-приложений в проверку наличия этих самых приложений.

Часто попадаются блоки рекламы, где текст, прокручивается вертикально. Для того чтобы сделать такой блок можно использовать несколько технологий: Flash, Silverlight, Javascript. Для решения своей задачи я использовал Javascript. Из плюсов можно выделить то, что нет необходимости ставить дополнительные плагины.

В топике я расскажу о нюансах использования тега <audio> в разных браузерах при разработке игр, о проблемах, с которыми я столкнулся и о том, как их решить. Объяснение будет идти паралельно с написанием обертки для удобной работы.

Если посмотреть на скрипт, сжатый Closure Compiler'ом, YUI Compressor'ом или еще чем-нибудь, можно увидеть бесконечные вереницы повторяющихся ключей: .prototype, .length, offsetParent и так далее. Попробуем избавиться от них на примере плагина jQuery UI Sortable. Скажу сразу, что gzip нам не переплюнуть, но когда его нет под рукой или нельзя им воспользоваться (например, на конкурсе 10K Apart), эта техника сжатия может оказаться весьма полезной.

Недавние посты об алгоритме сборки кубика 5×5 сподвигли меня написать эмулятор кубика на канвас. Автором статей про сборку предлагался свой кубик на OpenGL, но он мне многим не понравился. Надеюсь, с моим кому-нибудь удастся освоить алгоритм быстрее. Некоторые особенности и преимущества:

• Кроссплатформенность, кроссбраузерность (IE за браузер не считаем), ненужность инсталлятора и прочие преимущества веб-приложения.
• Поддержка кубиков от 2×2 и до бесконечности (пока грани не станут сильно маленькими и рендеринг не начнёт жестоко тормозить). В интерфейс вынесено до 11×11, но в библиотеке ограничений нет.
• Псевдообъёмные грани для красоты.
• Бесконечный undo-буфер.
• Возможность замеса кубика (shuffle).
• Слои вращаются легко и интуитивно, быстро привыкаешь. Крутить весь кубик (мышкой с зажатым шифтом или правой кнопкой) не так легко, но тоже можно привыкнуть.
• Вся библиотека компактная, размещается в одном js-файле и не имеет никаких внешних зависимостей.
• Лицензия MIT, а также открытые и не очень страшные исходники позволяют вставить кубик на ваш сайт и доработать по вкусу.

Наигравшись с предыдущей поделкой http://babarun.ru/content/canvas/, {шиза+навязчивая идея} не дали мне остановиться на достигнутом.



Сразу смотрим демо http://esboza.ru/demo/, все пояснения потом.

Потребовалось однажды реализовать пейджер постраничной навигации а-ля дёти.
Далеко в лес ходить я не стал, а решил найти, что же это за зверь такой раскопированный на множестве сайтов, а оказалось, что это детище karaboz. И даже есть аналог, переделанный под jQuery.

Но у каждой версии есть, как мне показалось, огромный недостаток, игнорирование колесика мыши. «Но ведь с этим было бы удобнее!» — воскликнул я и решил немного переписать, чтобы пейджер прокручивался на событие mousewheel. А также есть другие недостатки, которые я освещу под катом.

Надоело каждый раз писать колбеки руками. Написал простенькую скриптину, которая запонимает функцию (функции) с массивом аргументов и контекстом в объекте с методом fire, который не зависит от this, чтобы можно было цеплять колбек не только в «чистом» коде, но и к онклику или таймеру. Набор исполняемых функций и аргументов/контекста к каждой из них произвольный.

Каждый, кому приходилось писать объемные куски осмысленного кода на javascript, рано или поздно понимал, что ему многого не хватает в этом языке или просто неудобны некоторые врожденные конструкции. Для сглаживания шероховатостей применяются jQuery, Prototype, MooTools etc. Кто-то уже мало представляет себе, как можно кодить без них. Сегодня я расскажу о еще одной маааленькой библиотечке, которая делает мир javascript-программиста еще прекраснее. Речь пойдет о Underscore.js