Здравствуйте уважаемые посетители IнTересностей. Представляю вам очередной выпуск IнTересных ссылок. В этом выпуске: ссылки, видео и немного юмора. Итак, приступим. [IнTересные ссылки] Очень интересная статья о зарплатах в Украине – Чья зарплата больше: не пора ли сменить профессию?. Сравнительный анализ и примеры зарплат по должностям. Сравнение с зарплатами европейцев. История Интернета одной (большой) картинкой. История [...]

Сегодня, в продолжение экспериментов с HTML5 и CSS3, я решил разобраться со свойством transform. На самом деле, я уже разбирался с этим свойством на примере функции rotate. Тогда я писал о CSS, а вот изменять его с помощью JS-кода не пробовал.

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

На пути к созданию этого инструмента мне встретились некоторые затруднения. Например, как с помощью JavaScript менять свойство transform?
Также как и при описании в CSS, в JS-движках предусмотрены специальные свойства стандартного style.
Вот пример установки этих свойств:
style.MozTransform = 'matrix(1, 0, 0, 1, 1em, 1em)';  // Gecko (Firefox)
style.WebkitTransform = 'matrix(1, 0, 0, 1, 10, 10)'; // Webkit (Chrome, Safari)
style.OTransform = 'matrix(1, 0, 0, 1, 10, 10)';      // Presto (Opera)
style.transform = 'matrix(1, 0, 0, 1, 10, 10)';       // Все остальные, на всякий случай.

Но самое интересное, что если для Webkit и Gecko эту информацию можно найти, то для Presto (Opera) я обыскался. CSS описание есть, а вот для обращений из js нет примеров. Получается я первый! =)

Комментарии, вопросы, поправки и пожелания - приветствуются.

Будет странно не дать ссылки на чтение о transform:
Спецификация w3c
-moz-transform
-webkit-transform
-o-transform
частично можно трансформации делать даже в ie

старенькая статейка на русском языке

UPD: Добавил в инструмент другие функции: rotate, scale, skew, translate. С ними можно поиграть, а получившееся CSS-описание скопировать куда-нибудь к себе.

Кроме WebWorkers в HTML5 есть WebSockets. Включены на данный момент они только в Chrome, но из-за каких-то неполадок сокеты там сразу закрываются и в результате срабатывает только обработчик onclose. Наверно это скоро починят, а может у меня просто не совсем прямые руки.

В Firefox 3.6 и Opera 10.53 не включены. Про IE вы и сами все знаете, обещают только в IE9.

Мой скромный тестик увы не срабатывает, но я надеюсь, что скоро он заработает.

Материалы по теме:
Солидный материал на хабре
Пара записей о WebSockets в блоге Chromium

Сегодня утром я прочитал статью о работающем FileReader в Firefox 3.6 и сразу решил попробовать.

Суть FileReader в том, что он позволяет работать с локальными файлами до их попадания на сервер. Где это может быть полезно?
Самый попсовый пример: просмотр изображений перед тем, как отправлять их на сервер. У Яндекса это сделано в варианте flash-приложения, а в будущем можно будет обходиться без этого.

Кратко и по делу:
if (!!FileReader) {
    var reader = new FileReader();
    reader.onload = function() {
        // reader.result - вот тут содержится загруженная информация
    }
    reader.readAsDataURL(f); // В параметре f передается сам файл
}

Что это за параметр такой "f"?
var f = document.getElementById("data").files[0];
где контрол на сайте выглядит так:
<input type="file" id="data" />

Работающий пример

Прочитать про DataURL чтобы понять пример (если вдруг кто еще не в курсе)

Заметка про FileAPI в Firefox

Предыстория

Раньше, когда деревья были большими, во всех браузерах у JavaScript был только один поток вычисления. Иными словами, если мы запускали что-нибудь очень тяжелое, то теряли управление до тех пор, пока все не выполнится. Продвинутые разработчики естественно:

• выносили весь JS-код во внешние файлы,
• учитывали сколько потоков загрузки с домена может быть у браузера одновременно и объединяли несколько файлов в один,
• использовали маленький загрузчик, который в свою очередь по setTimeout уже подгружал оставшиеся 30-40Кб кода (таким образом удавалось раньше отобразить страницу, пусть и с ограниченным функционалом),
• тяжелые операции разбивали на сегменты и выполняли их через интервал времени (setInterval),
• написание offline приложений вообще было отдельным искусством, а уж если приходилось писать приложения для неустойчивых соединений, то это уж совсем шаманство.

Однако суровые времена средневековья проходят. Теперь, в наиболее современных браузерах, появляется поддержка HTML5 и в частности Web Workers. Потоков вычисления может быть несколько.

Обновленные подробности о Web Workers