Обновить
111.14

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Canvas & SVG: работаем с графикой

Время на прочтение8 мин
Количество просмотров35K
В HTML5 представлено два элемента для работы с web графикой: Canvas и SVG. Две эти технологии достаточно сильно отличаются друг от друга. Важно знать об их преимуществах и недостатках, чтобы выбрать наиболее подходящую для конкретной задачи технологию. Элемент SVG позволяет создавать векторную графику, а элемент Canvas предназначен для создания растровых изображений. Элемент Сanvas также используется технологией WebGL для аппаратного ускорения 3D-графики.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №270 (3 — 9 июля 2017)

Время на прочтение3 мин
Количество просмотров20K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Правда ли уже пора использовать CSS Grid Layout?

Время на прочтение7 мин
Количество просмотров31K

Я учусь пилотировать легкие самолеты. Это отвлекает меня от компьютеров. Недавно мне никак не удавалось удержать Сессну-150 на малой высоте, когда мы приближались к аэропорту Бристоля. Меня буквально засосало в облако восходящим потоком. Мой летный инструктор сказал: «Это не ваша вина, но ваша проблема». Он имел в виду, что я обязана была удерживать высоту, пусть даже что-то работало против меня. Мне нужно было узнать, что бывает такая ситуация, и научиться справляться с ней при пилотировании.


Уже после приземления я подумала, что фраза «это не ваша вина, но ваша проблема» отлично подходит практически к любым ситуациям. В этой статье я раскрываю тему поддержки старых браузеров при использовании новых технологий наподобие CSS Grid Layout. Мы, разработчики, часто робеем при обсуждении браузерной поддержки с заказчиками и коллегами, как будто это мы виноваты в том, что сайты не выглядят в IE9 в точности так же, как в новейших Firefox или Chrome. Пора нам уже принять, что это не наша вина. Но обязанность справиться с этим как следует, с пользой для каждого — во многом наша проблема.

Читать дальше →

Нативные переменные в CSS. Уже пора…

Время на прочтение3 мин
Количество просмотров38K

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №269 (26 июня — 2 июля 2017)

Время на прочтение3 мин
Количество просмотров19K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Таблицы! Таблицы? Таблицы…

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров59K

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

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №268 (19 — 25 июня 2017)

Время на прочтение4 мин
Количество просмотров16K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Скрипт статического коллтрекинга

Время на прочтение6 мин
Количество просмотров14K


Описание работы скрипта для подмены на сайте номеров любых операторов. Конструктор для визуальной настройки скрипта. Подмена заголовков, для разных источников трафика.

Читать дальше →

Добавляем реактивность в строковые шаблонизаторы

Время на прочтение3 мин
Количество просмотров3.9K
Одним из преимуществ строковых шаблонизаторов таких как JUST.js, jqueryTmpl или handlebarsjs перед шаблонизаторами на основе виртуального DOM дерева (VUE.js, angular) это низкий порог вхождения и простота в использовании. Ещё как мне кажется со строковыми шаблонизаторами проще интегрировать плагины для jquery.

Однако возможность реактивного связывания данных модели с шаблоном действительно удобный инструмент, и после того как я пробовал VUE.js и angular мне стало очень не хватать этого в моём любимом шаблонизаторе JUST.JS.

В итоге я решил добавить одностороннее реактивное связывание данных в JUST.JS, а в итоге получилось решение которое можно использовать практически с любым строковым шаблонизатором.

Обзор анимации с codepen для страниц загрузки сайта

Время на прочтение14 мин
Количество просмотров27K
Обзор анимации с codepen для страниц загрузки сайта

Программисты проверяют идеи для сайтов на площадках: codepen, jsbin, jsfiddle, cssdesk. Потому что там они мгновенно видят результат написанного кода и могут показать его другим.


Codepen — одна из самых популярных. Там более 500 тыс. готовых решений. Из них половина — хлам: неэффективный код, не работают на планшетах и телефонах, не поддерживают все популярные браузеры. Надо потратить много часов на поиск идеи, которую можно использовать на своем сайте.


Я решил делать подборки полезных решений с codepen. Первую уже выпускал на хабре «Обзор многоуровневых меню». Теперь вторая — «Обзор анимации для страниц загрузки сайта».


Подборку разделил на 3 статьи.


Читать дальше →

HTTP/2 Server Push не так прост, как я думал

Время на прочтение17 мин
Количество просмотров41K


Фото найдено на просторах Википедии


Привет! Меня зовут Макс Матюхин, я работаю PHP-программистом в Badoo. Мы постоянно изучаем различные возможности по ускорению работы нашего приложения и самыми интересными находками, конечно, делимся в нашем блоге на Хабре.


Вторая версия протокола HTTP обещает нам много улучшений, и одной из любопытных особенностей HTTP/2 является поддержка push. Теоретически эта возможность позволяет ускорить загрузку приложения. Недавно Jake Archibald написал большую статью, в которой проанализировал особенности реализации push в различных браузерах, и оказалось, что таких особенностей довольно много.


Мы уже публиковали пост, описывающий базовый функционал HTTP/2 Server Push, а этот будет хорошим дополнением, рассказывающим, как в реальности обстоят дела с поддержкой HTTP/2 Server Push в различных браузерах.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №267 (12 — 18 июня 2017)

Время на прочтение4 мин
Количество просмотров18K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

5 возможностей LESS, о которых вы могли не знать

Время на прочтение3 мин
Количество просмотров15K

LESS


При разработке интерфейсов я уделяю значительное время работе со стилями, написанными на LESS или SCSS. И часто я замечаю, что разработчики используют только ограниченный набор возможностей препроцессора. В этой статье я хочу рассказать о тех возможностях препроцессора LESS, которые редко используются, но при этом могут значительно упростить написание стилей.

Читать дальше →

Ближайшие события

Дайджест свежих материалов из мира фронтенда за последнюю неделю №266 (5 — 11 июня 2017)

Время на прочтение4 мин
Количество просмотров20K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Favicon сегодня: форматы, поддержка, автоматизация

Время на прочтение10 мин
Количество просмотров132K
На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.



Читать дальше →

Отслеживание отправки форм с помощью GTM

Время на прочтение3 мин
Количество просмотров30K
image

Всем привет!

Краткое вступление:

Если у вас есть грамотные разработчики и формы на вашем сайте можно отследить с помощью стандартного триггера “Отправка формы” в Google Tag Manager или встроить событие в обработчик — я вам искренне завидую. Сегодня мы рассматриваем другой случай.

ПРОБЛЕМА:

Последнее время всё реже можно встретить ситуацию, когда после отправки формы пользователь перенаправляется на новую страницу. Все манипуляции обычно происходят по тому же адресу. То есть для отправки данных используется технология AJAX.

Неточные и малоэффективные способы отслеживания статистики будут существовать всегда.
Читать дальше →

Особенности –webkit-box или как «подружить» flexbox со старыми Safari

Время на прочтение3 мин
Количество просмотров60K
Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

image
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №265 (29 мая — 4 июня 2017)

Время на прочтение4 мин
Количество просмотров20K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Анонс RamblerFront& #1

Время на прочтение2 мин
Количество просмотров3.3K


8 июня на Мансарде Rambler&Co состоится первый внешний RamblerFront& meetup, на котором наши сотрудники поделятся прикладными знаниями в области frontend-разработки.
Читать дальше →

11 вещей которые я узнал, читая спецификацию flexbox

Время на прочтение8 мин
Количество просмотров103K

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.


Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?


В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?


Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec


Вот хорошие отрывки.


Читать дальше →