Дайджест новостей 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 со встроенными прямо в текст графиками. Нестандартное применение лигатур!