Дайджест новостей c 30 ноября по 5 декабря 2016 года

Мы решили провести эксперимент и сделать еженедельник. Основная идея — собрать в одном месте все наиболее интересные и полезные материалы за прошедшую неделю, добавив к ним небольшое описание — что это за материал и чем он интересен. Выход следующих выпусков зависит только от вас: если идея вам нравится и вы хотите читать такие еженедельники, напишите об этом в комментарии. Также приветствуются любые пожелания по поводу формата еженедельника. Пока что еженедельник выходит в виде статьи на нашем сайте, но при достаточной заинтересованности мы сделаем его рассылкой на электронную почту.

Русскоязычные материалы

@supports изменит вашу жизнь

Перевод статьи Шарлотты Джексон о новой CSS-директиве @supports, позволяющей проверять поддержку каких-либо возможностей CSS браузером. Отличный инструмент для прогрессивного улучшения.

Иконочные шрифты и почему они не нужны

Почему стоит отказаться от иконочных шрифтов в пользу SVG и как это сделать безболезненно? Отвечает Николай Громов.

Как использовать веб-шрифты и не сойти с ума

Техдиректор Медузы Самат Галимов рассказал о том, как бороться с главными проблемами загрузки веб-шрифтов: невидимым текстом и морганием при переключении шрифтов. Спойлер: единственное нормальное решение (Font Loading API) можно будет использовать только через пару лет, когда большинство браузеров начнут его поддерживать.

Я совсем забыл о стилях для печати

Перевод статьи Мануэля Матуцовика о техниках и приёмах подготовки страниц к печати.

AMP, Instant Articles, Instant View, whut?

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

Стек технологий JavaScript с нуля

Перевод пошагового руководства по современному стеку технологий во фронтенде: от основ (менеджеры пакетов, сборщики, ES6, линтинг) до продвинутых тем (React, Redux, ImmutableJS, тестирование, статическая типизация).

Англоязычные материалы

Frameworks without the framework: why didn’t we think of this sooner?

Что, этот фреймворк требует своего присутствия в рантайме? Спасибо, я пас.
— фронтенд-разработчики в 2018 году

Фреймворки удобны: они абстрагируют нас от сложной логики и упрощают разработку приложений. Проблема в том, что эта сложная логика не исчезает — она скрывается в исходном коде фреймворка, который приходится загружать каждому посетителю вашего сайта. Но что, если можно было бы избавиться от прослойки между браузером и кодом вашего приложения? Рич Харрис рассказывает о том, как ему удалось решить эту задачу и сделать фреймворк, не требующий подключения на страницу. Ну и для затравки: его фреймворк быстрее Ангуляра, Реакта, Эмбера и других популярных решений. Кажется, за этим подходом будущее.

Interactive emails

Марк Роббинс рассказал, как применять возможности CSS для вёрстки интерактивных писем с галереями изображений, скрытием/отображением содержимого и даже играми (!).

Conversational form

Ребята из SPACE10 увлеклись диалоговыми интерфейсами и сделали плагин для превращения обычных форм в интерактивные чаты. Демо и анонс плагина.

WAI-ARIA basics

Веб-страницы давно перестали состоять только из текста: теперь в вебе делают целые приложения со сложными элементами управления. Спецификация WAI-ARIA определяет набор атрибутов, позволяющих задать любому элементу определённый семантический смысл. На MDN вышло хорошее введение в WAI-ARIA с необходимой теорией и примерами практического применения этой спецификации.

CSS Reference

Справочник по наиболее популярным CSS-свойствам с наглядными примерами работы каждого свойства.

The Difference Between role="presentation" and aria-hidden="true"

Хорошая статья о том, как следует скрывать элементы из дерева доступности (оно используется вспомогательными технологиями вроде экранных читалок). Автор рассказывает о разнице между role="presentation" и aria-hidden="true", а также приводит примеры их практического использования.

Datalegreya

Figs Lab решили скрестить визуализацию данных и обычный текст, в результате чего появился шрифт Datalegreya со встроенными прямо в текст графиками. Нестандартное применение лигатур!