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

Новости

  • вышел Chrome 135:
    • появились атрибуты command и commandfor для кнопок, чтобы декларативно описывать взаимодействие с поповерами и диалогами
    • добавили псевдоэлементы ::scroll-button() и ::scroll-marker для «нативных» каруселей
    • CSS-функция shape() позволяет описывать в clip-path параметрические SVG-like-формы
    • добавлена возможность стилизации псевдоэлемента внутри псевдоэлемента ::before::marker
    • поддержали Observable API и fetchLater() для отложенного запуска fetch
  • вышел Safari 18.4:
    • внедрили новый декларативный формат Web Push
    • также поддержали CSS-функцию shape()
    • обновили <input type="color" />, теперь поддерживает атрибуты alpha и colorspace
    • поддержали Cookie Store API
  • вышел Firefox 137: из интересного только выкатили группировку табов, а в ночных сборках появляется поддержка PWA
  • выпустили React 19.1.0: появилась фича Owner Stack для более детального отслеживания в дев-режиме иерархии рендера компонентов, а также подфиксили баги в React и React DOM
  • вышел Express 5.1.0, эта версия становится LTS
  • поддержка Node.js 18 заканчивается 30 апреля 2025, время обновить ваши .nvmrc
  • выпущен Material UI v7:
    • улучшилась поддержка ESM
    • устаканилось API slots и slotProps
    • впилили поддержку @layer для упрощения интеграции с другими либами
  • вышел отчёт State of Vue.js 2025:
    • хотят по-прежнему дожать Vapor Mode с обратной совместимостью
    • по популярности Vue всё ещё отстаёт от React, но количество сайтов на Vue явно больше Angular
    • треть проектов всё ещё на Vue 2, хоть он больше и не поддерживается (миграция вызывает сложности)
    • Pinia — доминирующий стейт-менеджер
    • комьюнити не хватает библиотек компонентов (как MUI или Radix) под Vue
    • Nuxt v4 уже неподалёку
  • со стороны WebKit появилось предложение объединить пересекающиеся части flexbox и grid в новом семействе свойств item-direction, item-wrap, item-pack, item-slack (чтобы наконец перестать вспоминать каждый раз, что эти align-smthng значат)

Проекты

  • ls-lint — линтер названий файлов и директорий в файловой системе

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

JS

  • кольцевые зависимости между модулями в JS не отлавливаются на уровне языка/среды, но они могут потенциально приводить к ошибкам типа ReferenceError: Cannot access 'a' before initialization, так как к содержимому из одного модуля может обращаться другой модуль до его инициализации и полного выполнения; беспорядочные кросс-импорты в «шареной» зоне проекта нуждаются в особом внимании, для этого есть сторонние либы для отслеживания корректности импортов madge и eslint-plugin-import
  • мемоизация в React изначально спроектирована довольно хрупко: простое заворачивание пропсов в useMemo/useCallback не повлияет на ререндеры компонента, нужно ещё замемоизировать сам компонент в React.memo, а также следить, что внутри нет спреда пропсов <Child {...props} />, нет немемоизированного прокидывания { children } (они пересоздаются каждый раз), нет дополнительных дочерних компонентов без мемоизации

CSS

  • аутлайн по клавиатурному фокусу на ссылках никогда не повредит:
a:focus-visible {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}
  • про тени: три вида теней — box-shadow, filter: drop-shadow() и text-shadow —могут не только статически применяться, но и анимироваться, причём благодаря @property возможна анимация только одного из параметра тени, например, box-shadow: inset 0 0 0 var(--l) var(--c), что делает тени мощным декоративным элементом
  • прикольный, но хрупкий голографический эффект на скролле, построенный на режимах наложения, background-attachment: fixed и линейных градиентах
  • а пока создатели CSS размышляют не схлопнуть ли flex и grid в единое свойство, разработчикам как-то нужно жить и решать, что использовать в каждом конкретном юзкейсе: вот у одного есть мнение, что в решении, что взять, нужно следовать в порядке grid/inline-grid → block → flex
  • об анимации движения по линии с помощью offset-path вы уже наверняка слышали, но тут идею развили поглубже и творят прям интересные экземпляры (правда с использованием css-doodle), так что есть чем вдохновиться

Платформа

  • бездумный вайб-кодинг хорош для чего-то небольшого и одноразового, так как быстро раздувает количество кода и поддержка этого дела начинает упираться в комплексность; а самый хороший способ понять систему — вдумчиво её порефакторить