Когда погружаешься в документацию о CSS3 transform: matrix3d, находишь короткое определение «Задает 3D трансформацию как матрицу 4х4.», сопровождаемое определением функции в виде:

matrix3d(m00, m01, m02, m03,
m10, m11, m12, m13,
m20, m21, m22, m23,
m30, m31, m31, m33)

И если не являешься Богом математики, скорее всего, внутри возникает беспокойство о недостатке документации, за которым следует вопрос, как создать по-настоящему крутую штуку? Описанный подход не претендует называться математическим или полным — я всего лишь пытаюсь заполнить маленькую брешь документации.

демо | первоисточник

Более двух лет прошло после начала продаж iPhone 4 летом 2010 года, и за эти два года сайтостроители привыкли проверять джаваскриптом значение window.devicePixelRatio (или же использовать в CSS медиазапрос device-pixel-ratio) как простое и бесхитростное средство, позволяющее тотчас же выяснить, запущен ли сайт на сетчаточном дисплее (retina display) или нет. Если величина devicePixelRatio равна двойке, то перед нами сетчаточный дисплей (четвёртый iPhone, четвёртый iPod Touch, третий iPad, или более новые устройства, или портативный компьютер «MacBook Pro with Retina Display»); если же величина devicePixelRatio равна единице (или не определена), то перед нами дисплей обычной чёткости.

Чуть сложнее, по сравнению с эппловскими, бывает учёт устройств, работающих под Android: там приходится воспринимать дробные величины, не равные единице или двойке. Peter-Paul Koch сообщил во блогозаписи «More about devicePixelRatio» о том, что (по его наблюдениям) в Nexus One величина devicePixelRatio равна 1,5, тогда как в Galaxy Nexus и в Galaxy Note она равна двум в WebKit и 2,25 в Opera Mobile.

Но эти мелкие отличия не меняют картины в целом: все привыкли думать о значении величины devicePixelRatio как о таком свойстве устройства, которое на одном и том же мобильнике (или планшете, или ноутбуке) остаётся беспрерывно постоянным. В частности, именно на этом были основаны все, все рецепты из хабрахабровских блогозаписей «Адаптируем графику под Retina экран», «Распознаём retina-дисплеи джаваскриптом», «Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet», «Как отличить версию iPad в Safari», «Оптимизация графики для Retina-экранов», «Комплексная подготовка сайта к Retina» и им подобных.

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

Ответ на вопрос, скорее всего, будет отрицательным. И на это есть масса причин. Использование чего либо вроде retina.js в какой то мере облегчает процесс, но можно попробовать и более альтернативный способ.

Как вы обычно сохраняете графику для сайта? Скорее всего делаете .jpg один к одному и сохраняете его с уровнем качества где то в районе 80%. Попробуйте сделать несколько иначе. Сохраните картинку в два раза большего размера чем требуется и сохраните с уровнем качества 20%. Объем изображения скорее всего станет даже меньшей, а результат, вероятно, удивит.

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

UPD. Спасибо IIIEB4YK за ссылку в комментарии.

В последнее время появляется все больше устройств с экранами, плотность пикселей которых очень высока: компания Apple выпустила MacBook с Retina, Google анонсировал Nexus 10 с разрешением 2560x1600 пикселей. Вместе с современными технологиями приходят новые проблемы для разработчиков сайтов. Например, на новых экранах растровые изображения смотрятся не очень хорошо, их необходимо оптимизировать под Retina. В этой подборке представлены некоторые инструменты, помогающие в этом.

Picturefill (демо), автор Scott Jehl

Делает изображения адаптивными и независимыми от разрешения экрана.

Недавно мне пришлось заниматься интернационализацией веб-приложения на Node.js+Express, над которым я сейчас работаю, и, как мне кажется, получилось довольно неплохо (иностранные пользователи очень довольны, и я вижу заметный приток трафика из неанглоязычных стран). Стратегия интернационализации, которую я опишу, не слишком сильно завязана на Node и может подойти любому веб-приложению.

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

Какое-то время назад я решил перепрофилироваться на разработчика под iOS, и решил систематизировать материал. Так сказать, составить свой roadmap. Получился некий обзор, которым я хотел бы поделиться с вами.
Данный обзор не претендует на полноту, непогрешимость и истину в последней инстанции.

Итак, вы приобрёли iPhone или iPad. Чудесные устройства, не правда ли? Какое-то время спустя пришла мысль “а не создать ли мне под него программу, которая завоюет мир?”. Я расскажу вам, с чего начать.

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

Презентация: http://sergey.makoveev.info/2013/01/frontend.js-apis-mobile.presentation/.
Примеры: http://goo.gl/5jv4i.
Исходники: http://goo.gl/YYj0R.

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

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index, равный 1, у остальных двух z-index не задан.

TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.

У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.

Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.

Директивы — это ключевая особенность AngularJS. С помощью директив можно добавлять новое поведение существующим HTML элементам, можно создавать новые компоненты. Примерами директив, добавляющих новое поведения для существующих HTML элементов, могут служить input, select, textarea в связке с ngModel, required и т.п. Перечисленные директивы в основном связаны с валидацией форм в AngularJS. Но тема валидации заслуживает отдельной статьи.

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

Если вы разрабатываете приложение на AngularJS и не создаете директивы, то это уже само по себе немного настораживает. Либо ваше приложение достаточно простое и уложилось в стандартные возможности AngularJS, либо, скорее всего, что-то не так с архитектурой вашего приложения. А если у вас при этом есть работа с DOM-ом в контроллерах или сервисах, то вам однозначно надо разбираться с темой создания директив, т.к. манипуляций с DOM-ом не должно быть нигде, кроме директив.

В данной статье я постараюсь рассмотреть процесс создания собственных директив на нескольких примерах.

Это невероятно захватывает — наблюдать за эволюцией Веб, и 2013 год принесет нам в запасе очень многое. На подходе ряд технологий, имеющих потенциал в течение 2013 года радикально изменить наши способы использовать и разрабатывать Веб.

Настраиваемые фильтры CSS

СSS фильтры уже имеются в Chrome и Safari, и позволяют расширенные настройки стилей, такие как размытие, искривление и модификацию цветовой интенсивности. Однако, это — только начало. Настраиваемые фильтры CSS позволяют вам описать свои собственные вершинные и пиксельные шейдеры в GLSL, языке, который является неотъемлемой частью традиционного 3D-рендеринга уже в течение 10 лет или около того.

На практике это означает то, что вы можете создавать невероятные эффекты. Комбинируя фильтры с CSS-переходами, вы можете делать красивые трансформации, от завитушек на странице до складывающихся элементов. Пределом является лишь ваше воображение!

Так когда вы можете использовать их? Adobe стал новатором этой технологии и Настраиваемые Фильтры уже доступны в Chrome. Ожидается увидеть их в Chrome в начале следующего года. На данный момент, с ними можно поиграть в Canary.

API автозаполнения

Данное API имеет потенциал радикально изменить регистрации и платежи в сети. Автозаполнение разрабатывается для того, чтобы упростить заполнение форм, и даже сейчас имеется спецификация для подсказок, с каким типом данных связаны поля в форме.

Продолжаем дело первой статьи и пытаемся разобраться с тем, что же делает за нас jQuery, когда мы с помощью этой библиотеки создаем DOM-элементы.

В прошлом выпуске мы упомянули, что при передаче в jQuery вместо селектора html-строки, на основе нее функция parseHTML создаст соответствующие элементы и вернет их в привычном jQuery-объекте. Сейчас мы рассмотрим все это более тщательно и затронем кроме core.js еще manipulation.js и attributes.js (мельком).

Что требовалось: добавить кнопки facebook'а и twitter'а на большинство
разделов приложения.
Что было: одностраничное приложение без статичных адресов.

Итак, нам нужно будет сделать 3 действия:

• добавить поддержку «хэшбэнг» адресов;
• сделать статичные страницы для facebook'овского «робота»;
• собственно, расставить кнопки.

Доброго времени суток, хабражители!
Мне очень нравятся барочные элементы. В очередной раз встретив подобный узор на одном из сайтов, представил, как бы он чудесно смотрелся в анимации, картинка бы ожила. Тем более с приходом html5 оживление должно стать гораздо проще в реализации. Но как по точкам нарисовать кривую? Тут как раз кстати вспомнилась кривая Безье!

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

На самом деле, как всегда, надо было лишь уделить немного времени теории. Все оказалось просто и довольно интересно. В итоге получилась реализация кривых на яваскрипте с использованием canvas.
Кому интересно как строится эта извилистая бестия добро пожаловать под кат!

Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего
способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе развлечения кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.

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

Вчера был отличный топик, "История одного хабраспора", о создании «галактики» на HTML5 Canvas, который сам по себе да своими комментариями вдохновил меня на ответный код. Думал, до окончания документации, не писать новых вещей на Хабру, но, как видите, сорвался) Спасибо kibizoidus за это.

В топике вы увидите описание процесс создания звёздной системы на последней версии LibCanvas. Быстро, оптимизированно, кратко.