#Пульс_веб_платформы 26.04.2024

Новости
- обновился pnpm до версии v9.0.0: дропнули поддержку Node.js v16 и 17 (кстати, у pnpm есть standalone-версия с нодой прямо в бандле); добавлена совместимость с Corepack; обновлены параметры конфигов и изменён формат лок-файлов (для более лучшего разрешения git-конфликтов); улучшен процесс разрешения вложенных зависимостей
- выпущена Node.js 22: обновлён V8; появился синхронный require() ESM-модулей пока за флагом; добавлена команда node --run для запуска скриптов из package.json в обход npm и встроенный вотчер изменений файлов node --watch; поддержка WebSocket выведена из-под флага; в node:fs добавлены паттерн-матчеры glob и globSync
- обещанная блокировка 3d-party cookies в Chrome откладывается на конец года: сообщество и британская антимонопольная служба проверяет эту прекрасную затею
- первый минорный апдейт в ESLint v9.1.0: в основном багфиксы, но печаль в том, что плагинная экосистема ещё совсем не готова к новому формату, переход будет долгим
- вышла React 19 Beta: всё, что обещали раньше (useTransition, useActionState, useFormStatus, useOptimistic, use, ref as a prop, <Context> as a provider, поддержка <meta>-тегов, API для предзагрузки prefetchDNS, preconnect, preload, preinit), а также вроде как новое: сleanup functions for refs, useDeferredValue, атрибут precedence для <link> (вроде как нестандартный), поддержка асинхронных скриптов и кастомных элементов
- выпущен Biome v1.7 (форматтер и линтер, 2 в 1): включает тулу для миграции с ESLint и Prettier (соблазнительно в момент, когда ESlint в переходном состоянии)

Проекты
- react-phone-number-input — инпут для ввода телефонного номера в различных международных форматах
- imaskjs — ещё один «маскировщик» инпутов, но уже более широкого формата: есть даты, адреса, деньги
- The Front End Developer/Engineer Handbook 2024 — большой сборник по современным технологиям фронтенда: помню, что в 2018-2019 часто к нему прибегал, когда составлял карты обучения
- ripl — общий API для создания 2d-графики в SVG и canvas
- testplane (aka Hermione) — браузерное тестирование с mocha и WebdriverIO на борту
- devalue — JSON.stringify, который не ломается на циклических референсах, undefined, Infinity, NaN, -0, датах, Map, Set и BigInt

Статьи и демки

JS
- атрибуты и свойства DOM-элементов — разные вещи: атрибуты сериализуются, свойства могут быть любого типа, атрибуты нечувствительны к кейсу; иногда изменения свойств отражаются в атрибуты, иногда нет; в целом, атрибуты — для конфигурации, а свойства — для хранения состояния
- пропоузал TC39 signals завернули в Реакт-хук и сравнили с useState: даже сейчас уже выглядит приятно
- как работает тришейкинг в Webpack: местами непонятно, но суть улавливается
- Райан Даль настойчиво зовёт вас воспользоваться JSR, новым npm-совместимым реестром (esm-only, ts-first), обещает, что не придётся жонглировать package.json и tsconfig, всё заработает само

CSS
- для определения включенности скриптов есть @media (scripting: enabled | none) (если вы считаете, что такое ещё возможно в современном вебе)
- плиточная раскладка (masonry) — это всё же часть гридов или отдельный вариант display? Вот и разработчики не могут выбрать и просят вас помочь
- с помощью режимов наложения mix-blend-mode: difference и plus-lighter, применённых к видео, можно детектить движение

HTML
- напоминание, как писать alt к изображениям: представьте, что картинка — это часть окружающего текста и опишите содержимое картинки (не нужно писать, что это картинка; лучше включить знаки препинания; в декоративных изображениях alt не стоит писать; alt можно не писать, если рядом уже есть текст содержимого картинки, например, имя пользователя)
- использование атрибута maxlength у инпутов — антипаттерн: текст обрезается, иногда сложно угадать точное количество символов, которые обрезать безопасно; вместо этого лучше показать ошибку о превышении длины

Платформа
- если взять страницу с 1mb HTML, CSS и JS, а потом открыть её по 3G, то только на соединение и парсинг потратится 0.5s (также приводятся другие метрики)

@web_platform | Поддержать канал 🤝