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