Вечером 30 июня «Мозилла» явилась в Лондон в Англии, чтобы поведать про дополнения («Mozilla Add-Ons») и показать некоторые новые клёвые особенности грядущего Файерфокса 4.

Вероятно, наиболее впечатляющими (если не считать средства создания дополнений «Add-Ons Builder», основанного на «Беспине») оказались следующие будущие возможности Firefox 4:

→  отображение HTML5-видео (<video>)

→  рисование на холсте (<canvas>)

→  манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)

→  технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов

→  HTML5, встраиваемый внутрь SVG (ура!)

→  SVG как <img>

→  SVG как CSS-фон

→  SVG-фильтры, SVG-маски, SVG-контуры обрезки

→  SVG-анимация

→  inline SVG (то есть SVG внутри HTML5)

→  CSS3: селекторы, @font-face, 2D-преобразования (transforms), переходы (transitions), тени, градиенты, вычисления — calc(2em-10px)

→  API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов), веб-труженики (web workers) и сокеты (websockets)

→  контроллер на вебсокетах, запускающий презентацию с мобильника

→  WebGL

Некоторые из этих способностей подтверждались демонстрациями:

→  фильтры CSS3 и маски SVG на HTML5-видео:

Бывают ситуации, когда веб-приложению требуется поднять кучу данных с сервера, раскодировать их и отправить дальше по назначению. Примером этому может быть онлайн 3d редактор, где каждая модель может занимать несколько мегабайт в gzip'аном json'e.

Что же делать когда браузер среднего пользователя подвисает на секунду или даже больше при загрузке и распаковке данных?
1. Придумать что-нибудь на flash (я не уверен на 100%, но некоторые браузеры запускают плагины в основном потоке)
2. Загружать данные кусками, обрабатывать кусками.
3. Попросить пользователя сделать апгрэйд компьютера.

Все 3 варианта не очень, правда?

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

Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — Web Sql Database и Google Gears.

По долгу службы я занимаюсь веб приложением, использующим Local Database и Web Workers.

Итак, что нам требуется:

1. SQL запросы, выбирающие из локальной БД всякие данные
2. Скачивание данных через Ajax в фоновом режиме и запись их в локальную БД
3. Поддержка Firefox, Google Chrome, Safari, IE
4. Поддержка Win, Linux, MacOS, iPad

С первого взгляда ничего страшного, но со второго начинаются проблемы.

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

И так, в соответствии с заявленным сроком выпуска PP-версий для следующих версий IE раз в ~12 недель, мы выпустили очередное обновление. Выглядит IE10 PP2 также как и все предыдущие версии Platform Preview, а самое интересное, как всегда, внутри – обновленный движок Internet Explorer:



⇒ Ссылка на загрузку ⇐

В июне Андреас Гал (Andreas Gal) с коллегами из Mozilla представили движок pdf.js для отображения PDF средствами HTML5/JavaScript. В первоначальной версии он работал неидеально, но разработчики всерьёз взялись за дело и буквально каждый день добавляли функционал: рендеринг графики, GUI и др. Но самое главное, что реализована динамическая загрузка шрифтов TrueType и кардинально улучшена загрузка шрифтов PostScript Type 1.

В итоге, сейчас Андреас Гал решил, что первый тест пройден и pdf.js попиксельно точно* отображает тестовый документ (демо).

Теперь pdf.js присвоен номер версии 0.2 и поставлена новая задача: отрендерить официальные спецификации PDF 1.7 (документ содержит 1310 страниц, файл 31 МБ).

^{*На самом деле «идеальный» рендеринг достигается только в сборке Firefox Nightly под Windows 7 (c рендерингом шрифтов через Direct2D и DirectWrite), в остальных — близкий к идеалу или не очень близкий, в зависимости от браузера и ОС.}

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

Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию.

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

Сегодня я постараюсь объяснить генетические алгоритмы проще и нагляднее, а заодно рассказать вкратце о прототипе очень простого JavaScript-фреймворка для распределенных генетических вычислений degas.js. В двух словах – degas.js запускает генетический алгоритм в виде «треда» в браузере клиента используя web workers и обменивается информацией о полученных в ходе эволюции индивидуумах с сервером и другими клиентами с помощью web sockets. Сервер использует node.js.

Degas.js пока в супер-зародышевом состоянии, функционал еще примитивен, а код некрасив, но если кто-то захочет присоединиться к разработке – было бы здорово.

Основная идея

В процессе изучения способов многопоточной обработки изображений в браузере многие сталкиваются с проблемой отображения результата Web Workers в canvas. В основном это происходит из-за того, что в web worker нельзя передать элементы DOM. Решением может быть использование getImageData(). Данная статья описывает конкретный пример использования данной технологии на примере обработки фильтра blur в отдельном потоке.

Для этого нам понадобится 2 файла: index.html и filter_worker.js

Всем доброго дня!

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

Во всех популярных языках есть потоки (threads). В браузерном javascript для параллельной обработки используются worker-ы.
Под катом рассказ о том, как ими пользоваться, какие ограничения есть в воркерах и об особенностях взаимодействия с ними в разных браузерах.

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.

Как работать с изображениями на клиенте, сохраняя плавность UI? Разработчик интерфейсов Павел Смирнов рассказал об этом на основе опыта разработки поиска по фотографиям на Маркете. Из доклада можно узнать, как правильно использовать Web Workers и OffscreenCanvas.



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