#Пульс_веб_платформы 24.01.2025

Новости
🔡 вышла версия Tailwind 4.0: как уже писал раньше, TW впитывает фичи платформы (что хорошо), но по-прежнему запихивает всё в className, при этом есть и вариант с добавлением «миксинов» с помощью директив @apply, @variant (что в целом ни хорошо, ни плохо, а уже было в SASS)
🔡 поисковая страница Google теперь может требовать у пользователя включить JS, что само по себе ок мув, как и то, что сейчас SPA-страницы индексируются тоже уже ок на равне со статическими
🔡 вышла первая бета Rolldown — замены Rollup + esbuild для Vite: переписанный на Rust новый бандлер Rolldown помимо обратно-совместимого API будет иметь в будущем ещё и фичи, которые Rollup не поддерживает: аналог webpack-овского optimization.splitChunks, HMR, а так же Module Federation
🔡 выпущен Vitest 3.0:
🔵доработан вывод репортов в консоль (стало выглядеть приятнее)
🔵при наличии нескольких проектов, теперь удобно конфигурировать это в поле workspace в vitest.config
🔵добавлена поддержка конфигурации нескольких браузеров, чтобы использовать один сервер для прогона тестов сразу в нескольких браузерах
🔵запуск теста по номеру строки в файле, где он написан

🔡 в Chrome 133+ появится поддержка обновлённой функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством:

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

🔡 вышло январское обновление React Spectrum/Aria:
🔵в компоненте дейт-пикера и календаря добавлен проп firstDayOfWeek
🔵добавлены CSS-транзишны для оверлеев Modal, Popover, Tooltip
🔵выпущена альфа-версия компонента Autocomplete и @react-aria/test-utils — либы с тест-утилитами для компонентов

Проекты
🔡 ohshitgit — набор кейсов, когда у вас случилось что-то нехорошее в git, и как это вернуть взад
🔡 fortune-sheet — либа React / Vue + immer на TS для создания Excel-like-таблиц
🔡 arktype — рантайм валидатор, инферит TS-типы, быстрый

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

JS
🔡 React Query — это не data-fetching-либа, а менеджер состояния, живущего на сервере; именно поэтому, если источник правды приложения сохраняется на бэке, то React Query убирает собой необходимость использования отдельного стейт-менеджера на клиенте
🔡 все либы для работы с хоткеями опираются на задепрекейченные поля, поэтому использовать их нужно осторожно; если ли работать с хоткеями без либ, то нужно использовать поле key, латинские буквы (A-Z) и арабские цифры (0-9), нормализовывать символ с помощью .toLowerCase() и .toUpperCase(), использовать Shift для модификации и не использовать для неё Alt
🔡 разложенный по косточкам tsconfig с вариациями: база, npm-пакет, Node.js, web, запуск ts напрямую (без js), только тайпчекинг
🔡 фишки динамических строковых литералов в TS:

// ключи
interface User {
  customerKey: `cus_${string}`;
}

// версия
type Version = `v${number}.${number}.${number}`;

// расширение
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;

CSS
🔡 ежегодная подборка свежих CSS-фич, которые можно уже использовать: всё, что касается <dialog> и popover, конечно, только для внутренних проектов сгодится, а вот применение @property и linear() для анимаций, которые не страшно, если отвалятся, уже прям маст-хэв
🔡 напоминание, что ссылки не только на #якорь, но и на определённый текстовый фрагмент на странице (а заодно и стилизация выделенного текста по ::target-text) уже работают по всех современных браузерах, для некритичных вещей точно можно тащить в прод
🔡 современные CSS-фичи типа @container(), @container style(), @supports дают возможность старгетироваться на конкретное устройство и это приводит к возможности злонамеренного отслеживания типа устройства, ОС, почтового клиента: решение — предзагружать все «условные» ассеты (картинки, шрифты) заранее, а не только те, которые «подходят» устройству

HTML
🔡 вместо использования role=button, role=link и остальных проще использовать соответствующий HTML-элемент

@web_platform | Поддержать канал 💙