JavaScript *

В этой заметке расскажу о своем опыте юнит-тестирования JS-кода, опыте использования среды выполнения тестов js-test-driver, ее возможности code coverage и скручивании ежа с ужом, а именно данных о code coverage от js-test-driver и генератора отчетов о покрытии PHP_CodeCоverage. Расскажу и покажу как получить вот такие отчеты о покрытии кода...

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

Сегодня существует множество браузеров и все они как-то борются друг с другом ради рынка. Основные игроки: 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;
Может вам тоже стоит переосмыслить этот аспект?

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

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

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

В топике я расскажу о нюансах использования тега <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. А также есть другие недостатки, которые я освещу под катом.

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

Сегодня наткнулся довольно занятный gist на github'е.

 — Здравствуй *с широко развевающейся по лицу улыбкой* дружок.
 — Ваа! *с ярким блеском в широко распахнутых глазах* Тётя Ася приехала!
 — Да, и у меня есть для тебя новая сказка *присела и взяла малыша за руки* хочешь послушать?
 — Конечно! *слегка смутился и отвёл взгляд* Мне тут дядя такие страшные истории рассказывал…
 — Ну, надеюсь моя история тебя не испугает *потрепала его по волосам* Она должна научить тебя мыслить шаблонно.
 — Эээ? *лицо перекосилось от недопонимания* Это как?
 — М… сейчас узнаешь *подмигнула и взяла на ручки* Вот когда тебе нужно вставить переменные в строку — ты как поступишь?
 — Ну… *взял карандаш и чирканул на лежащей рядом бумажке* примерно так:

var query= 'xxx'
var resultCount= 512
var message= 'По запросу <kbd>' + query + '</kbd> найдено страниц: ' + resultCount

 — Ты ничего не забыл? *победоносно подняла голову*
 — Да вроде нет… *уткнулся носом в код, ещё раз внимательно его проверяя*
 — Что, если пользователь введёт… *выдержала многозначительную паузу и добавила*

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

Увидел недавно топик-ссылку Smokescreen — конвертер flash в html5\js, решил сделать перевод той информации, которую я уже читал в сети про этот новый инструмент. Если коротко: Smokescreen — новый проект с открытыми исходниками, направленный на преобразование Flash в JavaScript/HTML5 для лучшего взаимодействовия с веб-страницей там, где раньше это было невозможно.
С его помощью вы можете расширить поддержку своего проекта на новые платформы без изучения новых инструментов, Flash автоматически преобразуется в JavaScript/HTML5. Smokescreen будет выпущен под open source лицензией и будет распространяться бесплатно. Стоимость поддержки и обслуживания будет низкой, чтобы вы могли убедиться, что Smokescreen работает именно так, как вам необходимо. Библиотека даст вам широкий выбор инструментов для разработки, включая разработку на JavaScript, без использования ActionScript, и разработку с подключением Flash к HTML-страницам проекта.

Данная статья посвящена Appcelerator Titanium — платформе для создания мобильных и десктопных кроссплатформенных приложений на JavaScript (HTML+CSS в придачу). Развитие платформы, особенности, варианты использования, личный опыт