Новости

• состоялось заседание рабочей группы по веб-компонентам W3C, результаты:
  • Declarative Shadow DOM появится в Firefox 123 в конце февраля (эта фича, позволяющая использовать Shadow DOM напрямую в HTML без вызова attachShadow() из JS)
  • начнёт разрабатываться Scoped Element Registries, позволяющий создавать элементы с одинаковым именем в рамках одной страницы
  • Container Style Queries быть во всех движках в ближайшем будущем 🎉
• грядущие нововведения в «клиентском» Реакте:
  • use(Promise) — саспендинг на клиенте
  • use(Context) — такой же, как useContext, но можно вызывать в условиях
  • хуки и апи для работы с формами Form Actions, useFormState, useFormStatus
  • а также useOptimistic — специальный хук, чтобы смотреть на «классический» Реакт с оптимизмом
• обновления в Chrome 121:
  • появились свойства scrollbar-color и scrollbar-width (раньше работало только в FF, так что если у вас были стили только для FF в Хроме тоже внезапно включится!)
  • font-palette для управления цветовыми шрифтами
  • псевдоэлементы ::spelling-error и ::grammar-error для стилизации ошибок
  • Speculation Rules API для программного префетча и пререндера страниц в классических MPA
  • showPicker() для программного выпадения <select> (кажется, я когда-то ждал этого, но так давно, что уже забыл)
• вышел Safari 17.3: пофикшен @supports и цвет каретки на iOS, закольцовывание медиа с нулевой длиной и другие мелочи

Проекты

• bun shell — возможность запускать shell-скрипты в JS (с помощью и во славу Bun)
• workerpool — централизованный способ выгрузить воркеры (если у вас их много разных) в отдельный пул с очередью выполнения
• partytown — запуск 3d-party скриптов в воркере (для выгрузки Google Tag Manager, Google Analytics, Amplitude из основного потока)

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

JS

• как отделить 0 от null и undefined: напоминание про разницу операторов || и ??
• c AbortController.abort() удаляет разом несколько обработчиков событий (не нужно писать множество removeListener, yay!)
• если вы захотите обновиться на 18 Реакт, возможно вам тоже придётся сделать что-то из того, что уже сделали в команде SonarQube
• Реакт-стартеры в 2024: Vite, Next или Astro?
• возможная замена проп-дриллингу — {children}
• туториал по Next.js App Router от мейнтейнера Node.js и webpack: минималистично и интерактивно
• как уменьшить размер бандла — рецепты с разных сторон:
  • мониторинг через Lighhouse, Sentry
  • анализ с помощью Webpack Bundle Analyzer, Statoscope, bundlephobia
  • распространённые приёмы — отключить сорсмапы, оптимизировать импорты библиотек типа lodash, выделение чанков, динамические импорты и фреймворкоспецифичные подходы типа React.lazy

CSS

• частичный фейд текста с помощью градиентов (именно текста, а не покрывающий слой!): способы с mask-image и background-clip: text
• сборник мелких, точных (и злых) «CSS-однострочников», которые уже можно заносить в проекты (и за это не придётся оправдываться): aspect-ratio, object-fit, margin-inline, text-underline-offset…
• ещё одна подборка юзкесов селектора :has(): делаем выборку родителя, предыдущего сиблинга, по количеству элементов, в любом месте или всё, кроме меня
• в догонку к предыдущему пункту демка с плавным переходом между радио-кнопками, которая стала возможна в CSS благодаря :has()
• в 123 Chrome появится свойство field-sizing, авторасширяющее инпуты и текстареа при вводе длинного текста (неужели это когда-нибудь свершится, боже)

SVG

• эффект движущейся линии по скроллу на SVG элементах <linearGradient>, <path> и <clip-path>
• чтобы улучшить метрику CLS достаточно просто один раз в день… задавать размеры <img> в атрибутах width и height (и без px)
• aria-hidden в жизни: для сокрытия визуальных декоративных элементов, скрывает интерактивные элементы не всегда, aria-hidden !== aria-hidden="true"

Платформа

• рецепты как выключить браузерное кеширование в серверных заголовках, HTML, htaccess, PHP и других бэкендах
• каталог известных (и не очень) дизайн-систем на случай, если вам понадобится впечатлить коллег проведённым обширным ресёрчем