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

Новости

• в @xstate/store@3.4.0 (минималистичный стейт-менеджер под капотом xstate, который можно использовать без полного обвеса), добавили «атомарное» API createAtom() с возможностью создавать атомарные хранилища, комбинировать их друг с другом и со сторами
• в техническом комитете Node.js решили исключить corepack из базовой поставки начиная с Node.js 25+ (в более ранних версиях он останется экспериментальной фичей), теперь нужно будет ставить отдельно npm install -g corepack
• библиотека для анимации Motion портирована на Vue, теперь можно во так:

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

• в Next.js найдена уязвимость (больше похожая на бэкдор), позволяющая обходить мидлвары спец-заголовком x-middleware-subrequest, то есть если у вас в мидлваре выполняется что-то важное, например, авторизация, то её сейчас можно скипнуть (если не обновить либу)
• релизнулся Rsdoctor 1.0, webpack-совместимый анализатор бандла, аналог тулов  webpack-bundle-analyzer и Statoscope: с помощью него можно получить ответы на вопросы «почему билд медленный», «как лучше разбить бандл на чанки», «почему увеличился размер бандла»
• в Chrome 135 будут добавлены новые фишки:
  • кастомизируемый элемент <select> с помощью свойства appearance: base-select, в который можно добавить произвольный HTML
  • псевдоэлементы ::scroll-button() и ::scroll-marker() для создания и стилизации «нативных» каруселей
• большое обновление Valibot v1.0.0 (рантайм-валидатора схем) спустя 15 бет и 5 rc, много добавлений/изменений

Проекты

• mise — мультитул для переключения версий node, python, ruby (как nvm) + переключения env-переменных (как direnv) + запуска тасков (как make)
• kaluma — мини-JS-рантайм для Raspberry Pi (вдумайтесь в параметры устройства: 300KB ROM, 64KB RAM)
• http-decision-diagram — блок-схема принятия решения, какой HTTP-статус отдать клиенту
• Parvus — доступный лайтбокс без зависимостей на нативном <dialog>-е с интернализацией

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

JS

• а вы знали, что можно обратиться к текущему выполняющемуся скрипту через  document.currentScript? Это может быть полезно, чтобы, к примеру, динамически заменить скрипт на произвольный контент, получается такой дешёвый движок рантайм-шаблонов для всяких мелочей:

Come on, it’s
<script>
  document.currentScript.replaceWith(new Date().getFullYear());
</script>

CSS

• ещё один юзкейс для нового типизированного attr(): прокидывание значений атрибутов value и max элемента <progress> напрямую в CSS
• mask + repeating-conic-gradient + немного тригонометрии = зигзаг
• если нужно что-то по-быстрому поправить в загруженном сайте без инспектора в дев-тулзах, можно использовать дизайн-режим (ввести document.designMode = "on" в консоли)
• а вот и миксины подвозят в канарейку Chrome, как обычно подождём 3 года и можно будет пользовать:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

.box {
  @apply --box;
}

HTML

• полезные фичи <fieldset> при создании форм: можно дизейблить целиком всю группу полей через атрибут disabled у <fieldset>, а также <fieldset> может находиться отдельно от <form> и быть связанным с формой атрибутом form со значением id формы

Платформа

• если вы игнорите сообщения консоли при запуске проекта Browserslist: caniuse-lite is outdated, то у вас есть шанс существенно уменьшить размер бандла с помощью команды npx update-browserslist-db@latest, так как возможно уберётся много ненужной транспиляции