JavaScript *

Привет, Хабр!
В этой статье я коротко расскажу о библиотеке Editable for Bootstrap, позволяющей вводить данные на страницу методом edit-in-place и основанной на компонентах Bootstrap. Я использую ее в админ-части проектов, либо когда нужно оперативно сделать интерфейс с возможностью пользовательского ввода.
Подробности под катом.

В этой статье я детально исследую примеси в JavaScript, и покажу менее общепринятую, но, на мой взгляд, более естественную стратегию «примешивания», которую, надеюсь, вы найдете полезной. Закончу я матрицей результатов профилирования, подводящей итог влиянию на производительность каждой техники. (Большое спасибо блистательному @kitcambridge за ревью и улучшение кода, на котором основан этот пост!)

Повторное использование функций

В JavaScript каждый объект ссылается на объект-прототип, из которого он может наследовать свойства. Прототипы — отличные инструменты для повторного использования кода: один экземпляр прототипа может определять свойства бесконечного числа зависимых сущностей. Прототипы могут так же наследоваться от других прототипов, формируя, таким образом, цепочки прототипов, которые более-менее повторяют иерархии наследования «классовых» языков типа Java and C++. Многоэтажные иерархии наследования иногда бывают полезны при описании природного порядка вещей, но, если первичным мотивом служит повторное использование кода, такие иерархии могут быстро стать искривленными лабиринтами бессмысленных субклассов, утомительных избыточностей и неуправлямой логики («кнопка — это прямоугольник или контрол? Вот что, давайте унаследуем Button от Rectangle, а Rectangle может наследоваться от Control… так, стоп…»).

Есть сейчас такая тенденция — делать в сайтах поддержку планшетов iPad и других устройств на iOS: iPhone, iPod. Но если для сайтов это достаточно просто, при хорошей верстке, можно добавить пару тегов в head и готово, то для веб-приложений, где есть сессии с использованием Cookies, все обстоит сложнее и есть подводные камни. Итак, возможно, еще не все знают, что в мобильном Safari можно нажать кнопку меню (со стрелкой, как на рисунке) и выбрать там «Добавить в Домой» / «Add to Home Screen», тогда для сайта появится иконка на рабочем столе. Но иконка будет просто запускать Safari с этим сайтом, а вот если добавить пару известных тегов (см. ниже), то все элементы управления Safar будут скрыты и приложение будет работать на полный экран, как обычные нативные приложения iOS. Так вот основная выявленная проблема в том, что в этом режиме сессия все время сбрасывается. Стоит переключится на другое приложение или рабочий стол, даже просто перейти по ссылке, и опять вернуться в веб-приложение, как страница перегрузится и сессионной Cookie уже не будет, нужно логиниться заново. Эту проблему то мы и решим.

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

Так как на одном из проектов, так же использовался формат разметки BBCode, то я начал свою работу над удобным WYSIWYG редактором BBCode. В результате получился продукт под названием WysiBB.

Доброго времени суток!
Этот небольшой обзор, я бы хотел посвятить насущной для некоторых разработчиков проблеме по работе с jabber сервером через long polling соединение по протоколу BOSH.

Mousetrap — маленькая библиотека (1.4 KB) для обработки клавиатурных нажатий.

// single keys
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// combinations
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// gmail style sequences
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

Как видно, поддерживаются как одиночные нажатия, так и сочетания и клавиатурные комбо.

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice

В JavaScript по умолчанию есть один тип чисел — Number. Хотя он конечно делится на Int и Float, хотя выражается это в немногом (например, в функциях parseInt — parseFloat).
При этом большие числа (и Int и Float) укорачиваются, а дроби приводятся к десятичным и округляются. И то и другое не всегда хорошо, так что появились библиотеки, которые предлагают новые классы для необычных чисел.

Предисловие

Пришла мне в голову смелая мысль, взяться за написание туториала по разработке на node.js (что-то наподобие ruby.railstutorial.org). Так как я первый раз берусь за подобный труд то для для меня очень важен любой фидбэк. Нужно это — не нужно. Что стоит убрать а на чем остановиться подробнее, в общем любая конструктивная критика. Надеюсь что дело пойдет и вам понравится, в этом случае по мере написания буду выкладывать главы на хабр.

Вступление

Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.

О том, что такое node.js вы можете прочитать на http://nodejs.org/, если коротко — то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции middleware (о том, что это такое, поговорим поподробнее чуть позже)

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

Хочется отметить, что очень большое влияние на меня оказал railstutorial, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.

Ребята из Official.fm Labs задумали совершить настоящую звуковую революцию в вебе: две недели назад они выпустили FLAC.js — декодер аудиофайлов формата FLAC (Free Lossless Audio Codec), а также Aurora.js — фреймворк на CoffeeScript для простого подключения декодеров и создания веб-приложений, работающих со звуком. Таким образом, через Web Audio API теперь можно слушать музыку в идеальном качестве, и все веб-приложения могут обращаться к звуковой карте стандартным образом.

Демо

JavaScript уже так могуч, что браузер декодирует звук, потребляя менее 5% ресурсов CPU. Можно представить, какие крутые звуковые редакторы, миксеры и прочие аудиоприложения появятся в вебе в ближайшее время.

Американский веб-разработчик Мэтт Даймонд (Matt Diamond) написал библиотеку JavaScript под названием FuckItJS. Если вставить в код метод FuckIt, то он заставит исполняться самый плохой скрипт, «нравится это компилятору или нет».

В общем, FuckItJS работает так: из скрипта вырезаются все строчки, на которые выскочили ошибки. Процесс повторяется, пока скрипт (или что там от него осталось) не проходит компиляцию без ошибок. Чтобы выжить в этом жестоком мире, FuckItJS перезагружается после каждой итерации.

На конференции Google I/O 2012 во второй части своего выступления Paul Irish представил проект yeoman.io. Главной целью которого является собрать для разработчика лучшие библиотеки и фреймворки в одном месте и создать идеальную среду для разработки за кратчайшее время.

Очень часто можно столкнуться с тем, что картинки в топике не грузятся и в комментариях пользователи возмущаются, что «надо бы перезалить картинки на HabraStorage». Но не все готовы устанавливать какой-то Adobe FlashPlayer, чтобы пользоваться этим сервисом.

Поэтому я написал небольшой userscript для себя и готов поделиться им со всеми.

• Проект на GitHub
• Прямая ссылка на .js

Очередным редактором HTML, CSS и JavaScript, написанным на HTML, CSS и JavaScript сейчас никого не удивишь. Однако есть несколько причин, по которым стоит обратить внимание на пока ещё совсем зелёный и молодой проект Adobe Brackets. Во-первых, его делает Adobe. Поддержка такой крупной корпорации значит очень много. Во-вторых, Open Source бывает разный. В случае с Brackets это правильный, настоящий Open Source — уровень открытости весьма и весьма высок. Проект был опубликован на Github в начале мая этого года, несмотря на то, что он ещё в совершенно младенческом состоянии. Бэклог проекта тоже открыт для всех — разработка ведётся по методологии scrum спринтами по 2.5 недели. В-третьих — дизайн и архитектура этого IDE заслуживают более подробного рассказа.

Готовясь к конференции DevCon'12 и, помня о Тостере по JavaScript, который проходил буквально на следующий день, мы решили, что было бы очень здорово сделать что-то полезное информационное для веб-разработчиков.

Как результат, родился плакат по современным веб-стандартам, вернее, как это принято в мире веб-разработки, черновик плаката, в который мы включили, как нововведения в самой спецификации HTML5:

В ECMAScript пока отсутствует понятие «класс», в классическом понимании этого термина, однако, в CoffeeScript такое понятие есть, поэтому сегодня мы рассмотрим этот вопрос очень подробно.

Содержание:

1. Основные понятия
2. Члены класса
   2.1. Метод constructor
   2.2. Открытые члены класса
   2.3. Закрытые члены класса
   2.4. Защищенные члены класса
   2.5. Статические члены класса
   2.6. Оператор => (fat arrow)
3. Наследование
4. Дополнительная литература

День назад праздновали день рождения Тьюринга, и на сайте Гугла был дудл с джаваскриптовой машинкой Тьюринга. Уже не первый раз поисковик показывает нетривиальные и интересные скрипты, которые потом, после дня празднования, исчезают в небытие. Странно, что на странице всех дудлов о них есть немного слов, но нет работающих моделей, как, например, по рассматриваемому дудлу машины Тьюринга (UPD4 (26.06.2012, 5:20) — по этой ссылке появился живой скрипт, можно играть; но обфусцированный ещё сильнее, чем был на странице). Возможно, они где-то есть, но поиск в интернете не привёл к результату. Такое своевольное поведение стихии интернета начало надоедать, поэтому вчера я без особого напряжения и старания, но решил извлечь работающий код и попытаться им управлять.

Для этого понадобилось деобфусцировать гугловские коды страницы поиска (которую уже и поиском не назовёшь, судя по массе скриптов) и отвязать движок от родительского сайта. Получилось запустить алгоритм счётчика, который зашит в движок по умолчанию, но не работает механизм прохождения логических задач, который, судя по коду, в нём содержится, но не стартует по клику на кнопке с треугольником. Тем не менее, процентов 20 работы сделано, и не хотелось бы, чтобы она пропадала. Возможно, в другое свободное время я им займусь, а, возможно, кто-то подхватит и сделает форк с реквестом, и у него (или у нас вместе) получится запустить задания.

Петербургские разработчики Андрей Мима (amima — ex-Яндекс, ex-ВКонтакте) и Даниил Гительсон (meta4) запустили сервис Qbaka, задачей которого является помощь программистам сайтов и приложений в отслеживании ошибок в коде JavaScript. Сервис пока находится в стадии бета-тестирования, однако уже открыт для всех желающих.

Сервис предельно прост в использовании: программист добавляет несколько строк JS-кода к своему веб-приложению — они асинхронно подгружают ядро «Кубаки», которое собирает ошибки (слушая window.onerror) и отправляет их на сервер.

Всем привет!
Появился русский перевод стандарта EcmaScript 5, http://es5.javascript.ru.

I. Суть проблемы.

В список основных предназначений XMLHttpRequest, конечно, не входит запрос HTML, чаще этот инструмент взаимодействует с XML, JSON или простым текстом.

Однако связка XMLHttpRequest + HTML хорошо работает при создании расширений к браузеру, которые в фоновом режиме опрашивают на предмет новостей сайты, не предоставляющие для этого почтовую подписку, RSS или другие экономные API или предоставляющие эти сервисы с какими-то ограничениями.

При создании нескольких расширений для Firefox я сталкивался с такой необходимостью. Работать с полученным от XMLHttpRequest кодом HTML при помощи регулярных выражений — способ очень ненадёжный и громоздкий. Получить DOM от XMLHttpRequest можно было лишь для правильного XML. Поэтому приходилось следовать хитрым советам на сайте разработчиков. Однако начиная с Firefox 11 появилась возможность непосредственного получения DOM от XMLHttpRequest, а в Firefox 12 была добавлена обработка таймаутов.

Я испытал новую возможность на создании мини-индикаторов новых топиков для двух небольших форумов, и это оказалось очень удобным (50 строчек кода плюс расширение CustomButtons — вот и готовый индикатор за пять минут, с опросами по таймеру и четырьмя состояниями: нет новостей, есть новости, ошибка и таймаут; подробнее можно почитать здесь). Всё работало как часы.

Поэтому я попытался убрать из кода своих расширений все прежние костыли и ввести туда новый удобный парсинг. Однако при работе с сайтом rutracker.org возникла странная проблема (тестирование проходит на последней ночной сборке под Windows XP; очень прошу прощения за все косяки в коде и формулировках: у меня нет программистского образования и опыт мой в этой сфере, к сожалению, очень невелик.).

В частности модули ajax, css, dimensions, effects, offset. Новость уже появилась давно. Коммит с анонсом данной возможности на github-е появился еще 7 июня.
Не так часто, но встречал спор насчет размера и лишнего функционала, да и я сам был бы не проч исключить модули для некоторых проектов. Надеюсь возможность исключить модули появятся и на популярных CDN. Как это можно собрать — под катом или на github-е.