[Из песочницы] Анимация спрайтов при помощи CSS, JS и Canvas

Всем привет. Пару дней назад совершенно случайно наткнулся в залежах дисков на «Космические рейнджеры 2: Доминаторы». Устанавливать не стал, так как сейчас не хватает времени, чтобы как следует в неё погрузиться. А решил посмотреть, что на диске находится. Посмотрел «Фан-Арт» и там увидел программку для ковыряния ресурсов рейнджеров. Вот и решил посмотреть, из чего же сделаны наши доминаторы. Покликав немного, нашел файлики с анимацией в формате GAI. Начал любоваться той анимацией. Захотел их сохранить в «гифки», но не как не давала та программка сохранить анимацию? Можно либо сохранить текущий кадр, либо все файлы в PNG. Я решил сохранить все кадры, а их было — 150. Картинки все есть, а почему бы не сделать с ними ту же анимацию.

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

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

[Перевод] Характерные особенности языка Dart

Dart был разработан так, чтобы выглядеть знакомо для программистов на таких языках, как Java и JavaScript. Если постараться, можно писать на Dart практически так же, как на одном из них. Если очень постараться — можно даже превратить его в Фортран, но при этом вы упустите множество неповторимых и классных особенностей Dart.



Эта статья поможет вам научиться писать код в стиле Dart. Так как язык всё ещё активно развивается, многие идиомы тоже могут измениться в будущем. В некоторых местах мы пока сами не определились, что является наилучшей практикой (может быть вы нам поможете?) Тем не менее, вот несколько моментов, на которые стоит обратить внимание, чтобы переключить свои мозги из режима Java или JavaScript в режим Dart.

Официальная презентация языка Google Dart

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



На официальном сайте представлен технический обзор языка (перевод на русский от azproduction), спецификации (PDF), список библиотек.



Как объяснялось во внутренней переписке компании, Dart позиционируется в качестве замены/альтернативы Javascript, страдающего от «фундаментальных» изъянов, которые невозможно исправить путём эволюционного развития.

[Перевод] Программирование в облаке: Небольшой обзор Онлайн-IDE

Похоже, что всё сегодня переходит в «облака», которые являются туманным термин для определения программных приложений и хранилищ данных, размещенных на удаленных серверах где-то далеко по всему Интернету. Так что, если всё наше ПО переходит на облака, то почему бы не перейти инструментам, используемым для создания этого ПО? Ну, а некоторые инструменты, есть там прямо сейчас. Черт, даже GitHub недавно добавил базовые возможности редактирования. В этой статье мы рассмотрим некоторые многообещающие Онлайн-IDE.

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

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

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

Нестандартное использование Get и Set в Javascript

Многие в курсе, что в Javascript есть так называемые Getter'ы и Setter'ы. Это конструкции для отслеживания изменения значений свойств объекта, а так же возвращения этих значений. «С изнанки» объекта они выглядят как обычные функции:

var obj = {

   get value() {

     return 0;

   },

   set value(s) {

     alert ("Go screw yourself!")

   }

}



* This source code was highlighted with Source Code Highlighter.

Но раз это функции, их можно использовать как душе угодно!

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

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

Распределенные вычисления на 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 более чем реальны.

Как отобразить страницу в 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 в браузере?

9.94%
(47)

Да

83.93%
(397)

Нет

6.13%
(29)

Другое

Проголосовало 473 человека. Воздержалось 76 человек.

Источник: Хабрахабр - Веб-разработка
Оригинальная страница: [Опрос] Делаете-ли вы специальные версии сайтов, работающие без поддержки JavaScript в браузере?

[Перевод] 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

Запускаем сторонний код в песочнице

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

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

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

Tuple.js — крохотная библиотека для работы с кортежами

Цель библиотеки

Иногда нужно хранить несложные структуры данных например x,y,z точки и в большинстве случаев писать прототип или хранить данные в списке просто не удобно. Я столкнулся с такой же задачей при разработке игры и недолго думая решил написать небольшую библиотеку Tuple.js

PhantomJS: Webkit в консоли

PhantomJS это все плюшки WebKit из консоли с управлением на JS и поддержкой различных стандартов и технологий: DOM, CSS, JSON, Canvas и SVG.

Внутри несколько примеров использования