Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны front-end разработчика. Все понимают, что наша задача сделать так, чтобы сайт нормально работал и выглядел при любых настройках пользователя, на любых устройствах. Я иногда посматриваю постоянно проверяю как выглядит сайт при отключенном javascript, проверяю работу на touch-устройствах, устройствах с маленьким разрешением итд. итп. После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…
User
JavaScript: проверьте свою интуицию
5 min
37KНа Хабре уже разминались и развлекались кажущимися нелогичностями JavaScript. По-моему, такие примеры отличный способ размять мозги после длительных новогодних праздников, поэтому предлагаю вам подумать над 10 задачками.
Ответы и свой вариант объяснения почему такое поведение логично я буду скрывать под спойлером. Сразу оговорюсь, что не претендую на непоколебимую истину своих версий и буду рад их обсудить. В разгадывании вам может помочь отличный русский перевод спецификации ECMAScript 5 за который большое спасибо iliakan!
+78
Создание превью изображений на клиенте: борьба с прожорливыми браузерами
8 min
33KВсем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.
+87
Анимация SVG-элемента path
5 min
122KTutorial
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media). Это те, где консоли отрисовывались в стиле blueprint'ов:
Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента
Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента
path
— можно узнать под катом.+60
Работа с объектами в JavaScript: теория и практика
15 min
218KВ этой статье я хочу по возможности полно и последовательно рассказать о том, что такое объект в JavaScript, каковы его возможности, какие взаимоотношения могут строиться между объектами и какие способы «родного» наследования из этого вытекают, как это все влияет на производительность и что вообще со всем этим делать :)
В статье НЕ будет ни слова про: эмуляцию традиционной класс-объектной парадигмы, синтаксический сахар, обертки и фреймворки.
Сложность материала будет нарастать от начала к концу статьи, так что для профи первые части могут показаться скучными и банальными, но дальше будет намного интереснее :)
В статье НЕ будет ни слова про: эмуляцию традиционной класс-объектной парадигмы, синтаксический сахар, обертки и фреймворки.
Сложность материала будет нарастать от начала к концу статьи, так что для профи первые части могут показаться скучными и банальными, но дальше будет намного интереснее :)
+102
Сортировка при помощи HTML5 Drag'n'Drop API
5 min
36KSortable.js — минималистичная библиотека для современных браузеров и touch-устройств, не требующая jQuery.
Как вы уже догадались из названия, библиотека предназначена для сортировки элементов при помощи drag’n’drop. Стандартным решением в таких случаях является jQuery UI/Sortable, а это ни много, ни мало 64 кб + 10 кб. Итого 75 кб gzipped в проекте, где jQuery не используется совсем. Относительно недавно на Хабре уже была статья о том, как реализовать похожий функционал, но опять же на jQuery, да и touch-устройства в предлагаемом решении не поддерживаются.
Как вы уже догадались из названия, библиотека предназначена для сортировки элементов при помощи drag’n’drop. Стандартным решением в таких случаях является jQuery UI/Sortable, а это ни много, ни мало 64 кб + 10 кб. Итого 75 кб gzipped в проекте, где jQuery не используется совсем. Относительно недавно на Хабре уже была статья о том, как реализовать похожий функционал, но опять же на jQuery, да и touch-устройства в предлагаемом решении не поддерживаются.
+49
О переменных в CSS и абстракциях в веб-программировании
5 min
21KПредлагаю вашему вниманию перевод статьи из блога популяризатора веб-технологий Криса Койера About Variables in CSS and Abstractions in Web Languages. В статье автор поднимает вопрос о том, действительно ли CSS нуждается в дополнениях, которые делают его сложнее для восприятия, а порог вхождения — выше, когда у разработчиков уже сегодня есть возможность подняться одним уровнем абстракции вверх.
Переменные приходят в CSS. Уже сегодня есть конкретные реализации, так что их теперь не остановить. В Firefox они появились в версии 29, а в Chrome их можно использовать без префиксов в версиях 29 и старше, если у вас в настройках включён флаг Enable experimental Web Platform features (в русской локали «Включить экспериментальные функции веб-платформы» — прим. перев.).
Скажу сразу, можно сколько угодно спорить о том, хорошо это или плохо, но изменить уже ничего нельзя. Однако, так как мне всё же хочется обсудить эту тему, я продолжу.
Переменные приходят в CSS. Уже сегодня есть конкретные реализации, так что их теперь не остановить. В Firefox они появились в версии 29, а в Chrome их можно использовать без префиксов в версиях 29 и старше, если у вас в настройках включён флаг Enable experimental Web Platform features (в русской локали «Включить экспериментальные функции веб-платформы» — прим. перев.).
Скажу сразу, можно сколько угодно спорить о том, хорошо это или плохо, но изменить уже ничего нельзя. Однако, так как мне всё же хочется обсудить эту тему, я продолжу.
+19
Information
- Rating
- Does not participate
- Registered
- Activity