Пульс веб-платформы 14.02.2025

Новости

  • вышел Chrome 133:
    • допилили popover в HTML и JS
    • поддержали обновление функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством
    • добавили псевдокласс :open для открытых <dialog>, <details>, <select> и <input>
    • заработали @container-запросы, управляющие скроллом @container scroll-state((stuck: top) and (stuck: left))
    • поддержали семейство «подрезающих» свойств text-box, text-box-trim, text-box-edge
    • в Animation API появилось свойство overallProgress, показывающее прогресс анимации
    • у нод появился метод Node.prototype.moveBefore, позволяющий перемещать DOM-ноду в другое место без потери состояния (<iframe> не перезагружается, активный элемент остаётся в фокусе, анимации/транзишны продолжают проигрываться) (в React тоже собираются оперативно поддержать)
    • добавлена возможность включать несколько import maps в один документ, браузер смерджит их сам
    • появился интерфейс FileSystemObserver, который может оповещать сайт об изменениях в файловой системе, к которой был выдан доступ
  • у JSR (альтернативный npm-реестр от создателей Deno) появился совет директоров в крайне интересном составе (Evan You, Isaac Schlueter, James Snell, Luca Casonato, Ryan Dahl), поэтому возможно в обозримом будущем вы таки начнёте пользоваться JSR
  • вышла новая версия Prettiter 3.5: добавлена пара новых опций и поддержан ts-формат конфига (с началом экспериментальной поддержки TS в Node.js видимо многие будут переводить конфиги на .ts)
  • вышли результаты опроса State of React:
    • многим доставляет боль использование forwardRef (видимо потому что в основном используют 18 версию React для SPA), указание зависимостей в useEffect, а также сложность Next.js и Server Components
    • самые популярные либы: Zustand, семейство TanStack, Astro, shadcn/ui, Radix, React Aria, Jotai; самые непопулярные: CRA, Redux, Gatsby, Reaact Bootstrap; для анимаций пользуются Motion, React-Spring, GSAP; для работы с формами React Hook Form, Formik; для тестов Jest и Testing Library; для валидации Zod, Yup; для аутентификации Auth0, Auth.js, Passport

Проекты

  • smartbundle — тула для сборки приложений без дополнительных конфигов: команда smartbundle сгенерит CJS- и ESM-сборки, автоматически трансформирует JSX, не забудет о сорсмапах
  • get-value — аналог lodash-евского _.get, чтобы достать значение объекта по строке a.b.c.d
  • Style Observer — обзёрвер изменения значений CSS-свойств и кастомных свойств на основе transition-behavior: allow-discrete
  • sorted-colors — проект для тех, кто испытывает необъяснимую симпатию к именованным цветам в CSS, позволяет увидеть их все по оттенку

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

JS

  • про разбиение лонг-тасков в JS уже писал ранее, но тут автор собрал в одной статье почти все рецепты: setTimeout, async/await + Promise, scheduler.postTask(), scheduler.yield(), requestAnimationFrame() и даже экзотический MessageChannel() — если послать туда сообщение, то оно сразу же выполнится (разве что не упомянуто о queueMicrotask и requestIdleCallback)
  • сравнительная таблица текстовых редакторов, если вам нужно сделать этот выбор в 2025: фреймворкоориентированность, многопользовательский режим + комментарии (сразу предостережение — ProseMirror с React не дружит)
  • и в догонку сравнительная таблица web-to-desktop-фреймворков (Electron, Tauri…): язык, движок, зависимости, фичи, интеграция во фреймворки, поддержка ОС, размер приложений, расход памяти, время билда и старта
  • если вам приходится сознательно заглушать ошибки в TS, то лучше использовать @ts-expect-error, чем @ts-ignore, так вы явно заметите заглушенное место, когда ошибка перестанет происходить и сможете убрать заглушку
  • никогда не поздно вдруг понять, что npm ci это «clean install», а не «continuous integration»
  • оператор satisfies в TS может быть полезен для:
    • уточнения, что объект с неполным набором полей — это ок satisfies Partial<Record<key, val>>
    • типизации при преобразовании в JSON-строку JSON.stringify({ /*···*/ } satisfies SomeType)
    • типизации default-экспорта export default ((str) => str.toUpperCase()) satisfies StringCallback;

CSS

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  h1 {
    font-weight: 100;
  }
}

HTML

Платформа