Фронтенд-новости #23
- 12 сентября 2022
- 500
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 5–11 сентября. Но для начала, по традиции, три главные статьи недели.
🔥 Три главные статьи
- Руководство по оценке доступности цифровых продуктов от W3C.
- Доступ к камере с помощью HTML и атрибута
capture
. - История JavaScript с 1994 по настоящее время.

🧬 HTML
Как повысить доступность разметки. Установите язык html lang="ru"
, используйте семантические теги, делайте ориентиры, используйте ARIA.
Компонент, предупреждающий о содержании, например чего-то сломанного или просто информирующий. Или используйте его, чтобы делать спойлеры к «Дому драконов», потому что ну сколько можно.
Должны ли мы думать о том, что использовать — ссылку или кнопку? Да, если хотим повышать доступность.
🖌 CSS
Это модальное окно? Псевдокласс :modal
, который выбирает модальные окна в полноэкранном режиме или использующие showModal
-метод.
Несколько примеров использования:has
для выбора родительских элементов, имеющих несколько дочерних элементов.
🎓 UX, дизайн
Узнайте, как сделать длинные статьи удобными для чтения.
Новый логотип «Rolling Stone» с историей.
Когда лучше использовать «бесконечную прокрутку? Частым решением будет правильно заменить пагинацию и кнопку «Загрузить ещё».
12 микросоветов по UI и UX: смягчайте белый для тёмной темы, добавляйте текст для ошибок, выделяйте выбранные элементы, используйте контрастирующий цвет для текста, делайте формы более очевидными.

🍶 Спецификации
WCAG 2.2 кандидат в рекомендации.
Посмотрите, что нового в WCAG 2.2:
- Фокус: внешний вид фокуса, вид когда фокус перекрыт для АА и АААА.
- Способ ввода: движение перетаскивания, размеры.
- Предсказуемость.
- Помощь при вводе: аутентификация, резервный вход.
Оцените зрелость вашего проекта по увеличению доступности. Почитайте руководство по оценке и улучшению своих бизнес-процессов для создания веб-проектов, доступных для людей с дополнительными требованиями.
🏗 JavaScript
Как использоватьlocalStorage
: простое руководство.
Temporal API: новый подход к управлению датой и временем?
🚀 React
Зачем использовать Storybook в 2022? Для просмотра история развития компонентов, тестирования с меньшими усилиями и документирования.
Знакомимся с Signal, способом выражения состояния, который гарантирует быстродействие приложения.

💽 Node.js
Обзор архитектуры Node.js, цикла обработки событий и многого другого.
🕸 Браузеры
Исходный код WebKit теперь на GitHub.
⚡ Производительность
Критический CSS? Не так быстро! Критический CSS — это отличная практика. Но реальная жизнь показывает, что эта практика не всегда работает хорошо. Разберитесь, во всех подводных камнях использования критического CSS.
🛠 Инструменты
React Native 0.70: новая документация по новой архитектуре, Hermes по умолчанию и многое другое.
JSON Hero: красивое средство просмотра JSON.

JSON Crack: инструмент для практичной визуализации JSON.

Как читать статьи на английском языке
В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.