Новости
- вышел релиз библиотеки компонентов React Aria/Spectrum: добавлены компоненты Disclosure and Accordion; что примечательно, под капотом не используется summary/details, видимо ещё не до конца распространилось стабилизировавшееся API; также в React Aria появился компонент ToggleButtonGroup, управляемый с клавиатуры; также либа теперь полностью Typescript Strict-совместима
- выпущен Astro 5.0: всё то же, что было в бете (Content Layer — запрос контента из внешнего ресурса, Server Islands — отложенный рендеринг с сервера,
astro:env — типобезопасный env-ы) + экспериментальные фичи для отображения респонсив-картинок, кропа, а также импорта SVG-компонентов- вышла стабильная версия React 19: помимо новых API теперь одинаковые подключенные стили не будут дублироваться и будут подключаться в указанном порядке, также можно указывать
<meta> без дополнительных либ и ещё полностью поддерживаются кастомные элементы (веб-компоненты)Проекты
- представьте, что вы разработчик нового React-фреймворка и хотите, чтобы приложение, написанное на вашем фреймворке, могло одной кнопкой деплоиться на Vercel, Netlify и ещё многие другие хостинги… Разработка и поддержка всего этого добра сразу навевает тоску. Но выход есть! vinxi. Одной строчкой в Vite-конфиге подключаем поддержку нужного провайдера, как и сделал Tanner Linsley в своём фреймворке TanStack Start
- onlook — oss визуальный редактор React-приложения: ещё одна попытка избавиться от «макетов», чтобы собирать их сразу в коде
- react-verification-input — маск-инпут для ввода пин-кодов, React
- dontfuckwithscroll — не воруйте скролл, наглядное пособие
Статьи и демки
JS
- если вы знаете куда с одной страницы пользователь пойдёт дальше, можно предзагрузить или даже пререндерить этот урл; для этого с помощью Speculation Rules API в скрипте
<script type="speculationrules"> нужно указать секцию prerender и prefetch с возможной настройкой условий запуска (если адрес включает строку, селектор соответствует выражению…); Chromium-only- при создании модалки нужно по-хорошему предусмотреть много вещей: триггерный элемент, кастомный контент и класснеймы, обработчики событий, рендер в Portal-е, управление фокусом; в общем, проще всего взять готовую headless-либу, например, Radix или React Aria и прикрутить свою логику и стили
- если стоит задача заняться перфомансом, то можно начать с
PerformanceObserver, с помощью которого можно программно получить не только разовое значение метрик (FID, CLS, LCP), но и обсёрвить, то есть повторно снимать метрики во время пользования приложением- а что если не рендерить SPA-целиком в
<div id="root">, а подгружать React только в определённый интерактивный островок вашего сайта? Да не, бред какой-то… или нет?- с View Transitions API можно методом
startViewTransition запустить нативную плавную смену двух DOM-нод; но что если как раз императивно запускать не хочется, а хочется, чтобы DOM-нода добавилась и транзишн автоматом выполнился? Берём MutationObserver и вуаля: нода появилась, обсёрвер триггернулся, колбек запустился, а в нём уже и startViewTransitionCSS
- рецепт, чтобы создать у элемента эффект замёрзшего стекла: взять
backdrop-filter: blur(10px) и насыпать кучу теней для создания глубины; для создания «стеклянной прозрачности» у блока определённой формы можно добавить ещё и mask-image - единицы измерения lh — величина вычисленного значения
line-height, её удобно использовать для задания динамических отступов между тестовыми блоками (rlh — аналог для рутового элемента)- впервые встретился такой UI-элемент — кнопка в трёх состояниях (да, нет, не знаю): её можно реализовать на чекбоксах,
:has(:checked) и pointer-eventsHTML
- в HTML у ссылок
<a> есть атрибут ping — легальный способ отслеживать нажатие по ссылке, отсылая запрос по указанному в значении адресу, которое к тому же сложнее заблочить- напоминание в следующий раз, когда будете собирать форм-визард, использовать
<fieldset> для каждого «шага» с набором полей (правда, если не столкнётесь с проблемой стилизации, хехе)@web_platform Поддержать канал 🤝