Фронтенд-новости #20
- 22 августа 2022
- 1 092
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 15–21 августа.
🔥 Три главные статьи
🍶 Спецификации
📔 Вероятно, CSS Color Module Level 4 скоро станет стандартом — документ проверили и почти утвердили.
🧬 HTML
📔 Основные понятия HTTP/3. Зачем HTTP/3 появился так быстро и как мы должны использовать новую версию протокола. И вдобавок о том, как HTTP/3 улучшает производительность сайтов.
🖌 CSS
🎥 Креативная раскладка. Доклад про меняющийся набор инструментов, новые функции aspect-ratio
и clamp()
и современные подходы к созданию раскладки в CSS.
📔 Руководство по цвету и контрасту. Теория о цветовом пространстве, восприятии цвета и контрасте.
📔 Гриды и произвольные фигуры. Совместное использование grid
, clip-path
и mask
.
📔 Вы знаете про oveflow: clip? Все используют overflow со значением hidden
, scroll
или auto
. Пора познакомиться со значением clip
.
📔 Outline — ваш друг. Несколько советов по настройке стилей для фокуса с помощью outline
.
🕸 Браузеры
📔 Обновление DevTools в Chrome 105. Пошаговые повторы и поддержка mouse over на панели Recorder, отображение метрики LСP, изменение кода прямо во время отладки и другие обновления.
📔 Вышел Safari Technology Preview 151. Большие изменения в Web Inspector, поддержка CSS-функций color-mix() и других, фиксы в JavaScript и Web API.
⚡ Производительность
📔 Как быстрее загрузить изображение с помощью fetchpriority=high для повышения LCP.
🎓 Общее
📔 Лучший UX для кнопки «Назад». Кнопка «Назад» пугает пользователя тем, что может потерять данные пользователя. Посмотрим, как её улучшить.
📔 Всё, что разработчики должны знать о Figma. Полное руководство по Figma от Smashing Magazine. Там и про auto layout, и про встраивание компонентов, и про стили. Полный набор.
Как читать статьи на английском языке
В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.