Дайджест новостей №3

Привет! Это третий выпуск нашего еженедельного дайджеста новостей. Его веду я, Андрей Романов, фронтенд-разработчик в Avito и автор сообщества For Web. Напомню, что основная идея этого дайджеста — собрать в одном месте наиболее важные и полезные материалы прошедшей недели, сопроводив их небольшим описанием. Не стесняйтесь делиться предложениями по улучшению дайджеста в комментариях.

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

Инспектор слоёв в инструментах разработчика Chrome

Анимации на GPU: делаем это правильно

Сергей Чикуёнок опубликовал очень подробное исследование анимаций на GPU в вебе: как браузеры отрисовывают элементы на странице, как работает композиция слоёв, почему GPU-анимации предпочтительнее CPU-анимаций, как оптимизировать потребление ресурсов и многое другое.

Краткая запись CSS как антипаттерн

Как часто вы пишете background: black вместо background-color: black? Гарри Робертс считает, что использование краткой записи свойств это антипаттерн, из-за которого мы непроизвольно сбрасываем значения других более специфических свойств вроде background-image или background-position, что может привести к неочевидным проблемам.

На 100% правильный способ делать контрольные точки в CSS

Дэвид Гилбертсон рассказывает о распространённой ошибке при выборе контрольных точек и приводит несколько практических советов, которые упростят ваш код.

Грядут гриды!

Эта статья была в прошлом выпуске дайджеста, но в англоязычном варианте. На этой неделе ребята из CSS-Live перевели её. Эрик Мейер отвечает в статье на волнующие вопросы о CSS-гридах: когда и где будут поддерживаться гриды, как быть со старыми браузерами, какие проблемы решаются гридами и по каким материалам учиться.

Обзор средств хранения данных на клиентской стороне

Cookies, Local/Session Storage, IndexedDB, WebSQL… Ире Адеринокун сделала обстоятельный обзор клиентских хранилищ данных: отличия друг от друга, преимущества и недостатки, поддержка браузерами.

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

Resilient web design

Новая бесплатная книга от Джереми Кита об истории веб-дизайна, в которой он предлагает изучать не код, а подходы, проверенные временем. Книга доступна онлайн, в PDF и аудио.

Free-Rotate an Element in 3D Space with CSS Variables

Руководство по созданию вращающегося в пространстве за курсором блока. Хороший пример применения CSS-переменных и динамического обновления их значений через JavaScript.

The State of Babel

Генри Жу об истории создания Babel, нынешних задачах и планах на будущее. И да, в конце статьи есть раздел о том, чем вы можете помочь проекту — отличная возможность поучаствовать в опенсорсе и сделать мир лучше.

Prefer DEFER Over ASYNC

Стив Саудерс рассказал, почему важно загружать некритичные скрипты асинхронно и почему для этого лучше использовать атрибут defer, а не async.

Плюсы и минусы разных способов вставки SVG на страницу

Why Inline SVG is Best SVG

Бесплатный скринкаст Frontend Center от Глена Маддерна, в котором он рассказывает о способах вставки SVG на страницу и демонстрирует преимущества инлайн SVG на примере создания анимированных полей с индикаторами для формы.