Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 12–18 сентября.

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

Подробное руководство по WAI-ARIA. Когда и как правильно использовать ARIA так, чтобы это было полезно для людей, использующих дополнительные технологии для навигации в интернете.

Что нового в HTML-формах. Появилось несколько полезных дополнений по работе с формами: requestSubmit(), submitter, formdata event, showPicker(), Inert attribute.

Почему input type="number" это худший способ ввода?

🧬 HTML и CSS

Демо: создание навигации с учётом повышения доступности и всех самых лучших практик.

Пространство, сетки и лайоуты: организация полезного пространсва вашего контента. Много простой математики и принципов дизайна.

line-height: как подобрать стандартное значение и повысить доступность.

Упростите свою цветовую палитру с помощью color-mix(). Смешивает всего два цвета, но может быть мощным инструментом для упрощения работы с цветами.

🎓 UX, дизайн

Фотография или илюстрация: что лучше для вашего сайта? Какое из двух средств работает лучше и в каких ситуациях

Лучший UX для вашей кнопки.

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

🏗 JavaScript

10 проблем в JS, с которыми все сталкиваются ежедневно.

Эти методы JavaScript вы не знаете. Редкоиспользуемые API, которые иногда спасают, а некоторые лучше никогда не использовать.

Рекомендации по созданию современного npm-пакета: пишите юнит-тесты, добавляйте дополнительные тесты в github actions, создайте сборку для ESM ил CJS модулей, используйте правильные пути, добавьте проверки пакета от гитхаб.

Седьмой способ вызова функции без скобок. В реальной работе не понадобится, но позволяет получше узнать базовые возможности JS.

Многопоточность с помощью веб-воркеров.

Руководство по округлению чисел. Что выбрать среди множества Math-функций округления: round, floor, ceil, trunc, toFixed, toPrecision?

🚀 React

useSyncExternalStore: недооцененный хук React для подписки на внешние источники данных. Оказалось, что его можно использовать для уменьшения повторов рендеринга.

Если ещё не пробовали Remix, то эта статья поможет вам сделать первый шаг.

Узнайте о композиции функций.

Почему Create React App устарел в 2022

Когда использовать useImperativeHandle и forwardRefs в React 18?

💽 Node.js

Крупное обновление, повышающее безопасность для 14.x, 16.x, 18.x. Обязательно обновитесь, так как решены проблемы, имеющие «высокую» опасность для Node.js-приложения.

Об автоматическом поиске ошибок в экосистеме Node.js. Краткий обзор поиска ошибок с помощью графа зависимостей

v18.9.0 (Current) уже тут. Совсем небольшое обновление без новых API.

Защите своё приложение с помощью JSON веб-токенов.

🕸 Браузеры

Safari 16.0: добавили поддержку Passkeys, расширили Web Inspector, добавили выражения от контейнера и сабгриды, Shared Workers, и многое-многое другое.

Подробно об обновлении.

👨 Доступность

Реальность и мифы о контрасте и цвете. Основы цветовой модели, физика цветовосприятия, цветовые глюки и отображение на дисплее.

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

Memlab — платформа для поиска утечек памяти в JavaScript, в основном, для SPA-приложений.

Fuite — ещё одна маленькая библиотека для поиска утечек памяти.

npm-check-updates — инструмент для отслеживания и обновления npm-зависимостей проекта.

Кристоф Наказава, работающий над Jest и Yarn, рассказал, как он настраивает свои новые Mac-компьютеры.

Favicons 7.0 — генератор фавиконок.

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

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