Пульс веб-платформы 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 у инпутов — антипаттерн: текст обрезается, иногда сложно угадать точное количество символов, которые обрезать безопасно; вместо этого лучше показать ошибку о превышении длины

Платформа