#Пульс_веб_платформы 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 и линейных градиентах

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

@web_platform | Поддержать платформу 🌀