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

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

Новый синтаксис диапазонов для медиавыражений.

Практические советы по цветовому соответствию WCAG 2.1. Как получить правильный цветовой контраст.

Практические советы по цветовому соответствию WCAG 2.1
Источник

Теперь всем мейнтейнерам npm-пакетов с миллионом загрузок в неделю или с более, чем 500 зависимостями, требуется двухфакторная аутентификация.

🧬 HTML и CSS

Как создать доступный компонент всплывающей подсказки.

Вышел новый синтаксис диапазонов для медиавыражений:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}
Новый синтаксис диапазонов для медиавыражений
Пока поддерживается везде, кроме Сафари. Источник

Как использовать цвета HSL в CSS.

🏗 JavaScript

Поговорим о веб-компонентах и сравним их с компонентами из библиотек.

Что такое realm в JS?

Недавно мы сравнивали Bun, Node.js и Deno, а теперь давайте сравним, действительно ли Turbopack в 10 раз быстрее, чем Vite?

Вышел TypeScript 4.9 RC, что в нём нового?

Как показать разницу между двумя датами с помощью IntlAPI. Например, написать «2 минуты назад», «5 месяцев назад» или «1 год назад» на статьях в блоге.

Пример использования дженериков

Обзор промисов для новичков.

🚀 React

Отзывчивые компоненты из Figma в React. Создавайте адаптивные компоненты, генерируя код из Фигмы для Реакта.

Какой фреймворк вам лучше подойдёт: Flutter или React Native?

Покрытие кода с помощью Storybook Test Runner. Storybook теперь может генерировать отчёты покрытия кода тестами.

Как создать 3D-графику с помощью React.

💽 Node.js

Вышли обновления безопасности для всех актуальных версий Node.js

Rust становится популярной заменой пакетов Node.js.

Как создать, протестировать и опубликовать пакет TypeScript npm в 2022 году.

Как использовать модули TypeScript и ECMAScript в Node.js.

Высокопроизводительная обработка изображений Node.js.

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

Состояние цифровой доступности, включая UX, тестирование, мониторинг, инклюзивный дизайн и многое другое.

Пять визуальных приемов, улучшающих доступность.

Пять визуальных приемов, улучшающих доступность
Источник

🕸 Браузеры

«Пора переизобрести браузер». История об усталости от нынешних браузеров и о том, как всё изменить с помощью нового браузера Arc.

Узнайте, почему в Google Chrome отказались от поддержки от JPEG-XL.

🎓 Общее

Как сделать интерфейс подготовленным к управлению жестами.

WebC продолжает развиваться — самое время познакомиться с этой концепцией.

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

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

Прошлые выпуски