Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 5–11 сентября. Но для начала, по традиции, три главные статьи недели.

🔥 Три главные статьи

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

Трассировка DevTools Profiler для одного и того же приложения, измеренная дважды
Источник

💽 Node.js

Обзор архитектуры Node.js, цикла обработки событий и многого другого.

🕸 Браузеры

Исходный код WebKit теперь на GitHub.

⚡ Производительность

Критический CSS? Не так быстро! Критический CSS — это отличная практика. Но реальная жизнь показывает, что эта практика не всегда работает хорошо. Разберитесь, во всех подводных камнях использования критического CSS.

🛠 Инструменты

React Native 0.70: новая документация по новой архитектуре, Hermes по умолчанию и многое другое.

JSON Hero: красивое средство просмотра JSON.

Красивое средство просмотра JSON

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

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

Как читать статьи на английском языке

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