JavaScript *

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Вступление

Доброго всем времени суток. Поздравляю вас с праздниками и перехожу к теме.
Когда вы выходите за рамки написания простых фрагментов jQuery и приступаете к разработке более сложных взаимодействий пользователей, ваш код может быстро стать громоздким и трудным для отладки. Эта статья покажет вам начать думать об этих взаимодействий в терминах «частичек поведения» используя паттерн проектирования object literal.

В последние несколько лет, JavaScript библиотеки дали начинающим разработчикам возможность добавлять дополнительные возможности взаимодействия с сайтом. Некоторые из них, например jQuery, имеют синтаксис настолько простой, что люди с нулевым опытом программирования научились быстро добавлять «свистки и колокольчики» на свои страницы. Надо только погуглить плагин, скопировать и вставить несколько десятков строк из пользовательского кода. Результат — клиент впечатлен, и вы добавляете jQuery к вашему резюме.

Но подождите. Допустим, теперь требования изменились. Теперь код, который работал для трех элементов должен работать для десяти. Или ваш код должен быть повторно использован для несколько иного приложения, в котором все идентификаторы разные. Как не потеряться в коде, который является не просто вызовом плагина или парой строчек типа show() и hide()?

Так получилось, что в течение нескольких месяцев я занимался разработкой букмарклетов, сделав их около десятка. Использовал как jQuery, так и native JavaScript. О том, с какими подводными камнями я столкнулся, что нового узнал и нашел — об этом пойдет речь под катом.

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

    По следам моего хабратопика про тестирование ServerSide решил опубликовать небольшой информационный пост о том, как использовать движок Microsoft JScript 9.0 вне IE 9. А точнее самым доступным способом — через Windows Script Host.
     Какая от этого может быть польза? Да хотя бы для тестирования производительности исключительно JavaScript, вне зависимости от рендеринга HTML. Можно протестировать свою будущую <подставь свое>-killer JavaScript библиотеку в более приспособленном для автоматического тестирования окружении. Да мало ли применений может придумать хабрачитатель для свежей версии Javascript движка.
В общем, тем кто заинтересовался, добро пожаловать под кат.

Французская веб-студия Revolver3 создала мультиплеерную игру на HTML5 с использованием серверной технологии NodeJS и Websockets

Играть (нужен ФБ акк)
Мышью ходить, пробел — кидать, любая буква — чат

Сегодня состоялся релиз Impact JS, дважаскриптовый движок, который в взаимодействии с html5 canvas позволит вам создавать игры. Пример такой игры — Biolab Disaster

Немного огорчает стоимость лицензии — 99$. Но уверен в скором будущем появятся бесплатные альтернативы.

Видео по созданию игры на Impact.

Небольшой обзор ImpactJS

Всем привет! Вторая часть про миниатюрный javascript фреймворк Atom (бывший Nano).
Теперь из Core убрано всё лишнее, вес — 1 кб.
Как и прежде — полный отказ от устаревших браузеров.
Dom, Class, Ajax и т.п. — подключаются как плагины.
Поменялся адрес репозитария: github.com/theshock/atomjs
Под катом — расскажу, что нового и опишу, как создавать плагины

Привет, читатель. Есть много прекрасных и мощных JavaScript-фреймворков. JQuery, MooTools, ExtJS, и множество других. Они кроссбраузерны и громадны. И пользоваться ими — одно удовольствие.

Но иногда, бывает, хочется написать какой-нибудь небольшой скриптик на 5 килобайт и как-то совесть мучает подключать JQuery, который весит в сжатом виде 75 килобайт. И каждый раз начинаешь писать свой мини-фреймворк:

var dom = {
	id  : function (id)  { return document.getElementById(id); },
	tag : function (tag) { return document.getElementsByTagName(tag); },
};

Вроде бы, больше для начала и не надо. А потом вспоминаешь про createElement, легкий способ присвоить CSS, наследование, расширение прототип. И в общем каждый раз пишешь свой велосипед.
В этот раз я решил написать миниатюрный фреймворк, который можно было бы без зазрений совести подключать даже к самым маленьким проектам. В сжатом виде он весит всего 4 килобайта (в 20 раз меньше JQuery).
И в нём есть еще одно преимущество по сравнению со всеми современными фреймворками — полный отказ от устаревших браузеров, за счёт чего в эти 4 килобайта вместилася половина JQuery.

Итак, приветствуйте, JavaScript-фреймворк Nano

Читайте актуальную вторую часть!

Сегодня мы представляем вам Crankshaft (коленчатый вал — прим. пер.), новую инфраструктуру компиляции для V8, JavaScript движка Google Chrome. Используя агрессивную оптимизацию, Crankshaft значительно повышает производительность ресурсоёмких JavaScript приложений — часто более чем в два раза! Это делает интернет-страницы и приложения, использующие сложный код, более отзывчивыми и быстрыми для пользователей. Сравним производительность Chrome с Crankshaft и без него на стандартном наборе тестов V8:

Наткнулся на интересный документ в Твиттере.

JavaScript Performance Best Practices

В заголовке указана категория WRT (Nokia Web Runtime or Widget for S60), то есть конкретная Нокиевская платформа, но, думаю, многим интересно будет почитать, возможно найдёте для себя что-то новое. Есть действительно полезные советы, но есть и вредные, особенно в свете современной разработки _под все браузеры_.
Сначала думал оформить как топик-ссылку, но под катом я обращу внимание на некоторые проблемы этой статьи. Статью прочитать стоит но ни в коем случае не относитесь к ней, как к истине в последней инстанции.

Создатели библиотеки хорошо знакомы с готовыми популярными решениями (jQuery, MooTools), но взялись написать свой собственный фреймворк, который не будет перегружен кодом поддержки десктопных браузеров и сосредоточились на главных нуждах разработки под мобильные приложения.

Уже сейчас XUI поддерживает такие мобильные браузеры, как WebKit, Fennec и Opera. В ближайшем будущем поддержка IE Mobile и BlackBerry.

Сайт библиотеки →

Есть javascript код:

1. var A = function () {};
2. A.prototype.b = 100;
3. var a = new A();
4. A.prototype.c = 101;
5. a.c = -100;
6. A.prototype = {};
7. A.prototype.b = 536;
8. /* 1 */ console.log(a.__proto__.constructor.prototype.b === 536);
9. var b = new A();
10. /* 2 */ console.log(a.__proto__.__proto__.constructor === a.__proto__.constructor.prototype.constructor);
11. /* 3 */ console.log(b instanceof A);
12. /* 4 */ console.log(!(a instanceof Object));

Вопрос. Что возвратят выражения 1-4 и почему?

Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)

В последнее время стали очень популярны тесты производительности JavaScript движков, но в основном они касаются Client Side JavaScript. Меня заинтересовал вопрос: как обстоят дела с Server Side? Но тестировать только Google V8 и SpiderMonkey было бы неинтересно. Ясно, что результаты будут схожи с Client Side — движки-то те же. Поэтому нужно было добавить к тестам что-то, что недоступно в браузере, однако достаточно распространено, а также постараться использовать специфичные для серверных задач тесты. Этим недостающим объектом для тестов виделся компилятор JScript из .Net Framework. Однако предварительные результаты тестов стали сюрпризом для меня, и я решил добавить четвертого игрока из той же команды.

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

Задача

Допустим вы хотите выполнить два или более AJAX запроса на сервер и вызвать функцию после того, как все они будут закончены.

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

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

Собственно, этим и занимается мой небольшой класс WaitSync =)

WaitSync.js

Пользоваться элементарно просто:

1. Создаем объект типа WaitSync, передав в конструктор callback функцию, которая будет вызвана после того, как отработают нужные задачи.

	var vulture = new WaitSync(function () {
		console.debug('Start eating: ', arguments);
	});

2. Вместо простого

	$.getJSON(
		'savannah/get_prey', 
		function (data) {
			console.log('... prey found: ' + data);
		}
	);
	
	$.getJSON(
		'savannah/get_other_predators', 
		function () {
			console.log('... predators are done eating');
		}
	);

«заворачиваем» задачи в метод .wrap

	$.getJSON(
		'savannah/get_prey', 
		vulture.wrap( 
			function (data) {
				console.log('... prey found: ' + data);
			}
		)
	);
	
	$.getJSON(
		'savannah/get_other_predators', 
		vulture.wrap(
			function () {
				console.log('... predators are done eating');
			}
		)
	);

3. Все =) Как только будут выполнены оба AJAX запроса, стервятник начнет есть.

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

Итак, мы пишем приложение с кучей асинхронных запросов. Нам надо отправить два асинхронных запроса и обработать их результат только после того, как будет получен результат обоих. Например, это могут быть ассинхронные обращение к файлу и запрос к базе, результат которых надо сложить вместе и обработать. Или два аджакс запроса.
Но особенность асинхронных запросов в том, что мы не знаем, какой из них придёт первым, а какой — последним. Решают это разными способами, но я не видел еще красивого и изящного. В топике я расскажу, как я это вижу.

var process = processFsAndDb.after('fs', 'db');

asyncFsAccess( file, process.fs);
asyncDbAccess(query, process.db);

Javascript — очень изящный язык с кучей интересных возможностей. Большинство из этих возможностей скрыты одним неприятным фактором — Internet Explorer'ом и другим дерьмом, с которым нам приходится работать. Тем не менее, с приходом мобильных телефонов с актуальными браузерами и серверного JavaScript с нормальными движками эти возможности уже можно и нужно использовать прям сейчас. Но по привычке, даже при программировании для node.js мы стараемся писать так, чтобы оно работало в IE6+.

В этой статье я расскажу про интересный и не секретный способ указывать изящные геттеры и сеттеры и немножко покопаемся в исходниках Mootools. Частично это информация взята из статьи John Resig, частично лично мой опыт и эксперименты.

function Foo(bar){
    this._bar = bar;
}

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

Эта статья предназначена для тех, кого бесят мильён левых служб и драйверов, которые ставят любые виртуалки. Тем, кто будут ставить доп. пакеты Node.js
Все остальные могут скачать скомпилированный Node.js node-js.prcn.co.cc
Или же установить Node.js из-под виртуалки nodejs.ru/25

Прошу под кат