[Из песочницы] Методы querySelectorAll и querySelector. Так ли они быстры на самом деле?

В современных браузерах реализованы родные методы querySelectorAll и querySelector, которые позволяют простой отбор элементов в DOM в одну строчку используя синтаксис CSS, при этом без подключения jQuery. Во многих статьях в интернете я читал, что этот метод очень оптимизирован и делает очень быстрый перебор элементов. На сколько это правда, решил проверить проведя тесты.

Kerning.js

Свершилось, теперь чудеса типографики стали доступны и нам простым смертным.

Как использовать

Да легко, просто подключаем и используем.

<script src="kerning.js"></script>

Больше ничего не нужно, остальное она сделает сама.

JavaScript Gaming: Часть 1. Box2d и основы Физики

Вместо предисловия.

Я всегда любил и буду любить компьютерные игры. Есть в них какая-то своя внутренняя магия, которая всегда привлекает и завораживает одновременно. За всю свою жизнь я переиграл в десятки игр, начиная с ветеранов Wolfenstein и Dune 2 и заканчивая современными блокбастерами. И теперь, добивая очередной хит и наблюдая за финальным роликом и титрами, в голове все чаще и чаще мелькает мысть «А что, если?..»



А ведь действительно, что если взять и написать собственную игру? Конечно же понятно, что ААА-тайтл сделать в одиночку не получится, и это годы работы и прочая и прочая, но ведь осилит дорогу идущий? Так уж получилось, что в Desktop-программироании я откровенно слаб, и вариантов для практикующего веб-разработчика не так уж много. Но за последние годы все кардинально изменилось, и теперь уже у браузера много общего с кофеваркой, а javascript может спокойно удовлетворять даже нужды военных ведомств, не то что мои собственные.



Вот как раз во время очередных раздумий и достаточно серьезной простуды мне попалась на глаза статья о Box2d в игрологе Ant.Karlov'а. Зачитавшись и замечтавшись я очень быстро нашел JS-порт этой библиотеки, и старая шальная идея сделать что-то маленькое и, главное — свое, начала донимать меня с новыми силами.



В общем, меньше патетики, больше дела. Надеюсь, вам будет интересно. Да простят меня суровые боги за использование Angry Birds в КПДВ ^_^

[Перевод] Область видимости в JavaScript и «поднятие» переменных и объявлений функций

Вы знаете, какое значение выведет этот код на JavaScript?

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    alert(foo); 
} 
bar();

Codecademy: 200 тыс. юзеров, 2,1 млн уроков за первые 72 часа работы

Невероятный успех продемонстрировал стартап Codecademy, который обучает новичков программированию на JavaScript с помощью бесплатных интерактивных уроков. Уроки осуществляются в приложении с простым и интуитивно понятным интерфейсом. Ещё одна особенность проекта — регистрация на сайте не требуется, пока вы не закончите парочку первых уроков.



В первые три дня сайт привлёк 200+ тыс. активных пользователей (считаются те, кто зашёл на сайт и запустил приложение), количество законченных уроков составило ≈2,1 млн, пишет TechCrunch.



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









Источник: Хабрахабр - JavaScript
Оригинальная страница: Codecademy: 200 тыс. юзеров, 2,1 млн уроков за первые 72 часа работы

Ещё один физический движок на JavaScript

На Google Code появился ещё один порт известного физического движка Box2D на JS — box2dweb (по ссылке есть демо). Автор говорит, что уже существует портированная версия Box2dJs, но она давно не обновлялась, так что приходится импортировать большое количество JS-библиотек в каждый проект.



Кроме двух упомянутых, на сегодня список библиотек физики на JavaScript выглядит так:



github.com/thinkpixellab/box2d/ — обработанный компилятором Closure Compiler порт Box2D на JS

code.google.com/p/bulletjs/ — порт фрагментов Java-библиотеки JBullet (http://jbullet.advel.cz/)

github.com/supereggbert/JigLibJS — порт JigLib на JS

github.com/hapticdata/toxiclibsjs — порт Toxiclibs VerletPhysics на JS

github.com/kripken/ammo.js — порт Bullet на JS









Источник: Хабрахабр - JavaScript
Оригинальная страница: Ещё один физический движок на JavaScript

[Ссылка] JSManipulate

Эта джаваскриптовая библиотека из более чем сорокá эффектов («фильтров»), налагаемых на изображения (при помощи холста — HTML5 canvas), вызывает желание сравнить её с Фотошопом. По мере распространения браузеров, имеющих дело с холстом, она способна революционизировать иллюстративную силу Всемирной Паутины.



Код фильтров открыт.



За отдельные деньги к нему предлагают докупить плагин для jQuery, обеспечивающий анимацию.








Ссылка: http://habrahabr.ru/linker/go/126174/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] JSManipulate

[Перевод] Взаимодействие между web-приложениями через Web Intents

Прим.: Обычно не занимаюсь переводами, но новость проскочила интересная.



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



В Android OS эта проблема решается при помощи Intents^[1] — архитектуры, позволяющей взаимодействовать компонентам одного или нескольких различных приложений. По этой схеме, клиенсткое приложение создает запрос (к примеру, разослать что-нибудь) и задает параметры, которые будут переданы другому приложению-сервису. После этого пользователю предоставляется список приложений, которые регистрировали свою возможность обрабатывать данный тип intent-запроса. Затем выбранное пользователем приложение запускается в новом контексте, и ему передаются параметры, переданные клиентом в некоем, заранее определенном для конкретного типа intent, формате.



На данный момент мы прилагаем большие усилия для создания аналогичной системы для шеЬ: Web Intents. Эта система предоставит те же удобства, что и Intents для Android, но будет адаптирована для web-приложений.

Типизированые массивы

С появлением WebGL появились и несколько новых типов данных, в частности типизированные массивы. Они все обладают похожим интерфейсом и по скорости значительно превосходят обычные массивы, обладают контролем границ и всего двумя методами и одним свойством. На данный момент если я не ошибаюсь то типизированные массивы поддерживаются последними версиями FireFox и Chrome.
Подробнее о типизированных массивах можно почитать в спецификации
Ну, а в статье мы рассмотрим основы основ

Применение Event-driven модели в веб-приложении

Взаимодействие частей приложения друг с другом — важная часть архитектуры любой программы.
И существует немало паттернов для их реализации. Я бы хотел на примере веб-приложения показать применение одного из них, а именно — Event-driven модели.
Она хорошо известна любому frontend-разработчику — всякий раз, работая с событиями DOM, вы используете эту модель. Давайте попробуем построить на ней не маленькое веб-приложение — файловый менеджер.

Распределенные вычисления на JavaScript: Сегодня

В настоящее в время существует огромное количество сетей распределенных вычислений. Я насчитал порядка 30. Наиболее крупные — Folding@home, BOINC, SETI@home, Einstein@Home, Rosetta@home (по результатам их вычислений было написано несколько десятков диссертаций). Вычисляют они все, что только можно вычислять распределено — от подбора md5 паролей до симуляции свертывания белка.
Каждая из эти сетей имеет необычно высокую производительность и включает в себя миллионы нодов. Производительность каждой сравнима с производительностью суперкомпьютера.

• Rosetta@home — более 110 Тфлопс
• Einstein@Home — более 355 Тфлопс
• SETI@home — более 560 Тфлопс
• BOINC — более 5.6 Пфлопс
• Folding@home — более 5.9 Пфлопс
• Bitcoin — более 9.4 Пфлопс

Сравните с суперкомпьютерами:

• Blue Gene/L (2006) — 478.2 Тфлопс
• Jaguar (суперкомпьютер) (2008) — 1.059 Пфлопс
• IBM Roadrunner (2008) — 1.042 Пфлопс
• Jaguar Cray XT5-HE (2009) — 1.759 Пфлопс
• Тяньхэ-1А (2010) — 2.507 Пфлопс
• IBM Sequoia (2012) — 20 Пфлопс

А теперь, давайте, подсчитаем существующий неиспользуемый потенциал пользователей интернет:
По расчетам на конец 2010 года пользователей Инернет было около 2000000000 (2 млрд).
Каждый пользователь имеет хотя бы 1 ядро процессора производительностью не менее 8 Гфлопс (AMD Athlon 64 2,211 ГГц).

По нехитрым математическим расчетам производительность такой сети составит:
8 * 109 * 2 * 109 = 16 эксафлопс (10¹⁸).
Такая сеть в 800 раз производительней, чем ещё не построенная IBM Sequoia (2012), в 1700 раз производительней, чем сеть Bitcoin и производительней всех суперкомьютеров и вычислительных сетей вместе взятых! Сейчас число пользователей ПК и Интерент растет, растет и число ядер. Безусловно, это число (16 эксафлопс) идеальное, никто не будет вычислять 24/7, но если каждый пользователь будет вычислять хотя бы 2 минуты в день (что, впринципе, более чем реально), то такая сеть сравнится с IBM Sequoia.

Сейчас распределенные браузерные вычислительные сети на JavaScript более чем реальны.

[Ссылка] CDNJS — CDN открытый для всех

Данный CDN хостит не только самые популярные js либы, но и просто качественные либы, которые могут быть востребованы достаточно большим количеством людей. Среди либ замечены xuijs, sizzle и многие другие. CDN постоянно пополняется.

Ссылка: http://habrahabr.ru/linker/go/119248/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] CDNJS — CDN открытый для всех

[Ссылка] MicroJS — каталог микро-библиотек

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

Я же нашёл в ней хорошие иллюстрации реализаций различных "рутинных" операций (dom ready, селекторы) а также подходов к организации кода и архитектуре js-приложений.

Ссылка: http://habrahabr.ru/linker/go/118662/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] MicroJS — каталог микро-библиотек

Как отобразить страницу в UTF-8, несмотря на windows-1251 в HTTP-заголовке

Есть у меня старый сайт на Народ.Ру, и недавно я закинул туда несколько статей — как это я теперь делаю в UTF-8. Кодировка была указана в теге meta, но, взглянув на страницы, я увидел крякозябры: «Что-то случилось.» Оказывается, Народ.Ру шлёт HTTP-заголовок Content-Type: text/html; charset=windows-1251 и это на нём никак не отключается. Пользователь может получить читабельный текст — только если догадается вручную переключить кодировку в браузере.

Что делать? Переходить на другой хостинг? Само собой, но пока руки не дошли, хотелось добиться результата тут. Перекодировать тексты? Более достойным и интересным показалось поставить Javascript-«заплатку».

Способа переключить кодировку из Javascript я не нашёл. Остался вариант перекодировать текст скриптом, запускаемым по событию onready документа.

Итак, браузер получает текст в UTF-8, разбивает UTF-последовательности на группы по 8 бит и трактует их как коды символов в кодировке Windows-1251. Чтобы восстановить читаемость текста, нужно получить эти коды, объединить их в UTF-последовательности, а из них — восстановить Unicode-коды символов и вернуть последние посредством числовых ссылок HTML на символы. В этом деле обнаружились несколько закавык.

[Перевод] JavaScript Strict Mode

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

Пока читал эту статью я написал 38 тестов, покрывающих все правила Strict Mode, объявленные в спецификации ES5. Вы можете посмотреть насколько ваш браузер поддерживает эти справила вот тут.



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

Firefox 4 уже полностью поддерживает Strict Mode, а Chrome 11 практически полностью. Strict Mode уже не за горами — давайте изучим его подробнее!

[Ссылка] Компилятор кода будущих версий JavaScript в код текущей версии JavaScript от Google

Вы можете использовать новые фичи ECMAScript.Next уже сейчас! Компилятор транслирует конструкции ECMAScript Harmony, Strawman в ECMAScript 3, 5. Поддерживаются ES7 Strawman: Classes, Traits, Deferred Functions; ES6 Harmony: Modules, Iterators, Generators, Let, Destructuring Assignment, Default Parameters, Rest Parameters, Spread Operator. Практические все фичи, которые были в моей предыдущей ссылке.

Ссылка: http://habrahabr.ru/linker/go/118669/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] Компилятор кода будущих версий JavaScript в код текущей версии JavaScript от Google

ES5 Harmony Proxy — меняем семантику JavaScript внутри самого JavaScript

Прокси — это новые объекты JavaScript для которых программист должен определить своё поведение. Стандартное поведение всех объектов определено в движке JavaScript, который чаще всего написан на C++. Прокси позволяют программисту определить практически любое поведение объекта JavaScript, они полезны для написания базовых объектов или оберток функций или для создания абстракций виртуальных объектов и предоставляют API для мета-программирования. Сейчас Прокси не входит в стандарт, но его стандартизация запланирована в ECMAScript Harmony. Чтобы избежать путаницы уточню, что эти Прокси не имеют ничего общего с прокси серверами.

Где их можно использовать

1. Общие промежуточные абстракции
2. Создание виртуальных объектов: обертки существующих объектов, удаленные(от слова далекий) объекты, ленивое создание объектов (Пример ORM — Ruby ActiveRecord, Groovy GORM)
3. Прозрачное ведение логов, трассировки, профилирования
4. Внедрение предметно-ориентированных языков
5. Динамический перехват несуществующих методов, создание отсутствующих методов (__noSuchMethod__)
6. База для специфичных итераторов

Кроссбраузерные аксессоры в JavaScript

В своём фреймворке AtomJS я активно использую аксессоры — геттеры и сеттеры:

Foo = atom.Class({
    get bar () {
        return this._bar;
    },
    set bar (bar) {
        this._bar = bar;
    }
});

Я уже описывал теорию, но в топике я расскажу о том, как заставить их работать во всех современных браузерах, а именно — как разрулить ситацию с тем, что Internet Explorer 9 ничего не знает о __defineSetter__ и подобных методах.

Эмуляция блокировки видимости с помощью with в JavaScript

За нахождение хорошей фотографии спасибо ant99 а также фотографу.
Некоторое время назад я писал о том, как блокировать видимость в JavaScript с помощью конструкции let. Как оказалось из комментариев, let (как и JavaScript 1.7-1.8.5) поддерживается только браузерами на основе обезьянок и Rhino. Меня постигло разочарование, но минут 15 назад я придумал (хотя это громко сказано, наверное, и до меня было уже придумал кто-то) костыль для не такого красивого, но тем не менее рабочего кода. Он использует конструкцию with (да, я знаю, что она причислена к Bad Parts из-за ненужности и неэффективности, но вот прямо сейчас я опровергну первое утверждение).

Магия JavaScript: arguments

arguments — очень специфическая штука, о которой новички и даже любители знают только то, что это «вроде массив, но какой-то неправильный». На самом деле, у него есть ряд интересных особенностей. Предлагаю в топике пофантазировать на тему TypeHinting, аргументов по-умолчанию и всякого другого.

(function (foo, bar) {
	console.log(typeof arguments); // ?
	
	arguments[0] = 42;
	console.log(foo); // ?
})(10, 20);

А также покажу интересную идею-библиотеку

function test (foo, bar) {
    Args(arguments).defaults(100, 100);

    return [foo, bar];
};

test(      ); // 100, 100
test(15    ); //  15, 100
test(21, 42); //  21,  42