Дайджест новостей №3
Привет! Это третий выпуск нашего еженедельного дайджеста новостей. Его веду я, Андрей Романов, фронтенд-разработчик в Avito и автор сообщества For Web. Напомню, что основная идея этого дайджеста — собрать в одном месте наиболее важные и полезные материалы прошедшей недели, сопроводив их небольшим описанием. Не стесняйтесь делиться предложениями по улучшению дайджеста в комментариях.
Русскоязычные материалы
Анимации на 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
.
Why Inline SVG is Best SVG
Бесплатный скринкаст Frontend Center от Глена Маддерна, в котором он рассказывает о способах вставки SVG на страницу и демонстрирует преимущества инлайн SVG на примере создания анимированных полей с индикаторами для формы.