Фронтенд-новости №2. Новинки CSS в 2022, ShadowRealms и холивары про async/await

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

HTML

• Проектирование лучшей бесконечной прокрутки.

• Как и где отображается доступное описание и имя.

• Лёгкий и доступный способ создания <диалогов>.

• Как построить постепенно расширяемый, доступный, фильтруемый пагинационный список.

• Улучшаем производительность <img>.

• Начинайте с HTML. Статья, напоминающая про прогрессивное улучшение.

• Создаём компонент диалога.

CSS

• Список новинок в CSS на 2022 год. Предыдущий список обнов.

• Стили для "неопределённого" состояния элемента.

• Глубокое погружение в функцию CSS :where().

• Идентификация шрифтов в дикой природе. Определяем шрифт где угодно.

• Новые цветовые функции из модуля CSS Color Module Level 5.

• Анимируем грид-полосы с помощью :has.

JavaScript

• Рекомендации по тестированию JavaScript и node.js в 2022. 50 лучших практик, разделённых на категории с простыми примерами.

• ShadowRealms — предложение ECMAScript для лучшего eval().

• Как компилируется компилятор TypeScript.

• Как тестировать взаимодействие компонентов с помощью Storybook.

• «Почему я избегаю async/await». Осторожно холивары.

• Proposal в ECMASCript: четыре неразрушающих метода массива для копирования:

  .toReversed() - аналог reverse();

  .toSorted() - аналог sort();

  .toSpliced() - аналог splice;

  .with() - аналог arr[index] = value.

• Сортировка с учетом локали.

React

• Redux reducers на Rust.

• Список React-библиотек на 2022 год.

• Как создать кастомные React-хуки.

• Обновляем структуру папок React-приложения до последних стандартов.

• React-хук для обнаружения клика за пределами компонента.

• Как обнаружить жест «долгого нажатия».

Angular

• Новые релизы Angular:

  • 14.0.0-next.12;

  • 14.0.0-next.13;

  • 13.3.3.

• Результаты опроса разработчиков 2021.

Node.js

• Последний node.js 12-версии — Node.js 12.22.12 LTS.

• Возможное появление синтаксического анализатора аргументов командной строки в v18.0.0

• Выпущен v17.9.0 (Current).

• Архитектурное сравнение Express, Fastify и NestJS.

Инструменты

• Firefox 98 включает новую версию панели «Производительность» в панели инструментов DevTools.

• Rome Formatter — инструмент для форматирования JavaScript и TypeScript.

• RedwoodJS 1.0 — фреймворк на базе React и GraphQL для создания чего угодно.

• Swiper 8.1 — обновился слайдер с сенсорным управлением и аппаратным ускорением.

• CSS Checker - проверяем количество похожих и дублирующихся CSS-классов.

• react-cancelable - отменяет ненужные запросы.

• Генератор градиентов.

Оптимизации

• Оптимизация основных показателей в одностраничных приложениях.

Общее

• Как работает режим чтения Firefox?

• Браузер DuckDuckGo для Mac.

• Проектирование хлебных крошек.

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

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