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

Обновился официальный перевод стандарта ECMA-262, 3я редакция.
Исправлены опечатки, а кое-где и сам перевод поправлен.

Последнюю версию вы можете прочитать/скачать для просмотра оффлайн здесь: http://javascript.ru/ecma
Это 3я редакция стандарта, которую поддерживают все основные браузеры.

Пятую редакцию подумываю перевести, несколько позже, когда спецификация устаканится и не будет исправлений типа http://3.ly/ie9es5.

Одним из компонентов нашего проекта 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 используются как сервисы-агрегаторы, получающие динамические данные с других HTTP-источников и формирующие на основе этих данных агрегированный ответ.

Для обработки полученных данных удобно использовать внешние процессы, обрабатывающие исходный набор файлов (например, утилиты ImageMagick или ffmpeg).

Рассмотрим это на примере HTTP-сервера, выполняющего роль backend для сервера nginx, и формирующего CSS-спрайты для набора изображений.
Читать дальше →

Сейчас, после выхода стабильной версии 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 ноября).
Читать дальше →

Polymaps — это Javascript библиотека для создания интерактивных карт. Использует SVG и, по словам разработчиков, эту библиотеку можно использовать совместно с картами Google Maps, OpenStreetMap, Bing и CloudMade.

Здравствуйте! Я предлагаю вам со мной создать небольшую казуальную игру на нескольких человек за одним компьютером на Javascript Canvas.
В статье я пошагово разобрала процесс создания такой игры при помощи MooTools и LibCanvas, останавливаясь на каждом мелком действии, объясняя причины и логику добавления нового и рефакторинга существующего кода.
Читать дальше →

Руководство по массивам в Javascript: что такое массивы в Javascript, как создавать, как узнать количество элементов, как надо перебирать и как не надо перебирать элементы, как добавлять и удалять элементы, как отличать от других объектов со свойством length, особенности различных браузеров.

Претендую на полное описание работы с массивами, поэтому пишите, если какой момент не освещён или есть неточности в тексте, добавлю/поправлю.

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

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

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

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

Здравствуйте. Я продолжаю развитие фреймворка для работы с Javascript Canvas, основанного на MooTools и предназначенного для создания анимаций, игр, ui и всего, что вы пожелаете. И сегодня — очень важный момент для этого фреймворка — публичный запуск официального сайта.

Добро пожаловать на libcanvas.com

К запуску мы с greedykid и Nutochka портировали «Asteroids» — культовую игру восьмидесятых, но с более усовершенствованной графикой, которая работает во всех современных браузерах (да-да, про ie < 9 тут ничего не было). Работа над Астероидами показала мне потенциал этой технологии. Я уверен, что это далеко не предел, у меня есть идеи и даже интересные реализации и потому я продолжу развитие этого фреймворка. Ждите новых интересных приложений.
Читать дальше →

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

Недавно, в ответ на 10-ти килобайтный конкурс, было запущено соревнование скриптов размером всего 1 килобайт.

Участнику конкурса предоставляется один элемент canvas с проставленным id. Использование ajax и "подгрузка" сторонних скриптов запрещена.

Если посмотреть на скрипт, сжатый 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/, все пояснения потом.

Читать дальше →