[rddt]

Возможно кто-нибудь помнит, что пару месяцев назад на Хабре был пост про радио со скрипичной музыкой.
Работало все тогда через Icecast и крутилось на ирландских серверах Amazon EC2.
К сожалению, на тот момент бесплатный microinstance не выдержал потока посетителей с Хабра и радио умерло, съев все возможные лимиты буквально за несколько часов.

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

Результатом размышлений стал микросайт, доступный сейчас по адресу https://theviolinru.appspot.com/
Данный вариант использует dropbox (для хранения треков) и Google App Engine (в качестве бесплатного надежного хостинга для главной страницы и готового CDN-решения). Вся работа по загрузке и трансляции треков переложена теперь на клиентский javascript (сайт использует html5).
В ближайшие дни планируется подключить нормальное доменное имя второго уровня.

Надеюсь, проект будет кому-то интересен. Если таких человек наберется около сотни — будут и мобильные приложения и расширение для Хрома.

Saizen Media сделали великолепный комикс с использованием html5.
Почитать комикс и увидеть возможности html5 можно по ссылке.

В сети очень много сайтов для подсчета хэшей (MD5, SHA1, SHA2) файлов, однако, все сервисы, что я смог найти, имеют один и тот же недостаток: размер файла ограничен. Также необходимо сначала загрузить файл на сервер, чтобы получить результат вычислений. Это очень неудобно.

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

Картинка и немного информации под катом

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

Некоторое время назад, мы, с private_face участвовали в конкурсе 10k apart(и даже выиграли!), и наши статьи были довольно-таки тепло¹ встречены² на хабре. В комментариях, нас несколько раз просили открыть исходники, и, наконец-то, летучие обезьяны подняли мне веки к обеду, это случилось. Сегодня мы залили всё что было, включая импровизированный «тулчейн» на github. Сильно не ругайте, исхода так себе, а я на js до этого никогда не писал толком :)

Исходники и все инструкции можно получить по ссылке: https://github.com/whoozle/fontanero.

Вышла первая стабильная версия «эмулятора» тега Canvas для Internet Explorer — fxCanvas 0.1a `Mario`.

Самые вкусные особенности:

• в качестве выходного буфера для графики используется флеш, что дает высокую скорость отрисовки;
• близкая к совершенству реализация Canvas API;
• базовая поддержка текста;
• возможность работы с массивом пикселей;
• определение точки-в-контуре;
• возможность загружать картинки в формате data:;

fxCanvas практически полностью реализует Canvas API, но с некоторыми особенностями.

Цепочки комманд и метод invoke

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

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d");

ctx.setFillStyle("#ff0")
    .setStrokeStyle("#0ff")
    .strokeRect(10, 20, 30, 30)
    .fillRect(30, 40, 50, 50)
    .invoke("getImageData", 0, 0, canvas.width, canvas.height, function (imageData) {
        // ... imageData - возвращаемые данные getImageData
    });


В этом примере обработчик вызывается после того, как контекстные команды будут выполнены (и да, это цепочка команд).

Картинки

Для предзагрузки картинок в fxCanvas добавлен метод loadImage:

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d"),
    image_src = "sample.jpg";

canvas.onload = function(img) {
    if (img.src.indexOf(image_src) > -1) {
        ctx.drawImage(img, 10, 10);
    }
}
canvas.loadImage(image_src);


Кроме того, картинки могут быть в формате data: URI.

Карта пикселей

Карта пикселей (image data), вероятно, одна из самых интересных особенностей fxCanvas, так как эта штука предоставляет разработчикам возможность реализовывать различные эффекты «не выходя из браузера». Например вот так:

var canvas = document.getElementById("cv"),
    ctx = canvas.getContext("2d");

ctx.invoke("getImageData", 0, 0, canvas.width, canvas.height, function(buf)
{
    for (var y = 0; y < canvas.height; y++)
    {
        for (var x = 0; x < canvas.width; x++)
        {
            var ofs = y * canvas.width + x,
                pixelValue = buf.data[ofs],
                red = pixelValue.charCodeAt(0),
                green = pixelValue.charCodeAt(1),
                blue = pixelValue.charCodeAt(2),
                alpha = pixelValue.charCodeAt(3);

            buf.data[ofs] = String.fromCharCode(red % 32, green % 64, blue % 128, alpha);
        }
    }
    ctx.invoke("putImageData", buf, 0, 0, function () {;
        // ... и распечатаем буфер по завершении операции
        console.log("Image data dump:" + buf);
        // Заметьте, Internet Explorer не отображает текст с символом \x00.
    });
});


И да, это работает достаточно медленно в Internet Explorer, в отличие от его конкурентов (хотя есть некоторое решение этой проблемы, оно будет добавлено в следующей версии).

Кстати, как вы наверно заметили, структура данных отличается от той, что заявлена в спецификации. Новый формат более эффективен по времени обработки и занимаемой памяти.

Точка в контуре?

В Internet Explorer метод isPointInPath(x, y) возвращает положительное значение если x, y находится в границах контура. В остальных браузерах — если внутри заливки контура.

Снимок холста

Можно получить через toDataURL():

var canvas = document.getElementById("cv");
var type = "image/jpg", quality = .4; // качество картинки - необязательный аргумент
canvas.toDataURL(type, quality, function (png_data) {
    // следущий код будет рисовать кусок холста на том же самом холсте
    var ctx = this.getContext("2d");
    this.onload = function (img) {
        ctx.drawImage(img, 0, 0, canvas.width - 100, 0, 100, 100);
    }
    this.loadImage(png_data);
});


Это похоже на вызов invoke, где возращаемое значение передается фунции-обработчику.
Тип картики может быть «image/jpeg» или «image/png» (по умолчанию).

Пример работы с картой пикселей и снимком холста.

Операции смешивания пикселей (composite operations)

В fxCanvas реализованы только source-over и lighter. Но в будущем будут добавлены остальные.

Скачать исходники можно здесь, посмотреть примеры и тесты здесь.

Думаю, что каждый из вас сталкивался с небольшими сайтами, которые не смотря на размер, делают очень важное дело — учат чему-то. При этом всё происходит настолько просто и легко, что после закрытия страницы, ощущаешь приятный зуд в пятках. Я хочу поделиться с вами огромным списком ссылок, но это невозможно, потому как знаю я лишь три подобных сайта.¹ Из-за этого я предлагаю вам вступить в диалог и составить реальный список ликвидаторов безграмотности.

UPD: Цель поста — сконденсировать адреса, которые и себе пригодятся и другим можно кинуть вместо фразы «на гугле забанили?»

• orss.ru — за четыре клика расскажет о RSS.²
• tsya.ru — поможет научиться (или научится?) выбирать между -тся и -ться.
• udarenie.info — договор, творог, каталог и многие другие помогут вам не совершить ORPHOEPIC FAIL.
• therules.ru — жи, ши и все-все-все.^*
• minipedia.ru — советский энциклопедический словарь, lite-версия. (uuser)

Ещё два сайта, хорошие, но всё же не то, что я искал.
diveintohtml5.org — book on web about HTML8… or 6… sorry, that was obvious.^* (dkurilo)
jabberworld.info — А что такое джаббер и что оно даёт? А вдруг оно не курит? А вдруг оно не пьёт?^* (openminded)

Теперь ваш черёд. Хорошие ссылки попадут в пост и будут поощряться тем, о чём нельзя говорить.

Такое чувство что околоодностраничные ресурсы делются только о русском языке.
__________
<sup>1. Надеюсь, что это настоящая причина, потому как если подобных ликвидаторов больше нет, я могу заплакать.
2. Кстати, даже если после этого сайта светловолосая девица не поняла что такое RSS, объяснить и научить уже будет проще.
* Да, эти сайты крупнее остальных, но всё же ими можно отбиться от вопросов «Что такое джаббер?» или «Как пишется: „кованый” или „кованный”?», когда на них нет времени.</sup>