Фронтенд-новости №3. Node.js v18.0.0, аннотации типов в JavaScript, СSS Toggles

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

Спецификации

• Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.

• Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles — декларативный механизм для указания состояния, описывающего поведение.

HTML

• Исправьте распространённые проблемы доступности интерфейсов.

CSS

• Увеличивайте размер шрифта в интерфейсах. 16px уже мало.

• Узнайте про соотношение цвет текста к цвету фона и исправьте низкоконтрастный цвет.

• Условные выражения и использование техники «Что произойдет, если» для создания интерфейса.

• CSS :has() селектор.

JavaScript

• Оптимизируйте свой JavaScript для быстрой загрузки страниц

• Предложение на добавление аннотации типов в коде JavaScript. Это позволит разработчикам не траспилировать TS, Flow и другие надмножества с статической типизацией.

• V8 ускорила инициализацию экземпляров класса

React

• Делайте доступные формы на React

• Создайте многошаговую форму с помощью Formik

• Пишите кроссплатформенные компоненты для веба и React Native

Angular 

• Обновите до v13.3.4

• Просто узнайте, что будет в v14.0.0-next.14

Node.js

• Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре. Новинки: V8 10.1, Fetch на базе Undici.

• Знайте, как работает npm link и старайтесь избегать работу с ним

• Начиная с v18.0.0 пишите нативные юнит-тесты.

Оптимизации

• Оптимизируйте производительность изображений

• Оптимизируйте SVG-паттерны

• Ускорьте загрузку ресурсов с помощью fetchpriority

Общее

• Изучайте терминал, фронтендеры

• Сделайте лучший UX для каруселей

• Посмотрите историю о Kubernetes

  Инструменты

  React-redux v8.0.0

  React-bootstrap v2.3.0

  React Page Visibility, изоморфный HOC «видимости страницы», v7.0

  React Leaflet v4.0.0

  DevTools в Google Chrome 101

  Deno v1.21

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

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