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

Новости
- обновления Chrome 124: возможность фокусироваться клавиатурой на скроллер; атрибут writingsuggestions для включения/отключения браузерных подсказок при запонении полей; заголовок priority для HTTP; блок рендера страницы с помощью rel=expect у ссылок, пока гарантировано не загрузится нужный элемент; новый WebSocketStream API, фиксящий недостатки WebSocket API; методы setHTMLUnsafe и parseHTMLUnsafe для доступа к декларативному shadow DOM из JS; pageswap эвент для реакции на переход по View Transitions
- обновления Safari TP 192: поддержаны View Transitions API, URL.parse(), внесены багфиксы
- обновления Firefox 125: align-content в добавок к гридам и флексбоксам теперь работает и с display: block; поддержан Intl.Segmenter и Popover API
- обновления Next.js до версии 14.2: продолжено впиливание Turbopack; улучшен тришейкинг и потребление памяти при билде; CSS-чанки теперь подключатся в порядке импортов (странно, что это было не так); появились более явные сообщения об ошибках
- рендер JSX в следующей версии React обещает быть быстрее за счёт отказа от клона объекта пропсов в пользу прокидывания его напрямую

Проекты
- svgencode — энкодер SVG в URL, base64 и другие вариации (раньше пользовался энкодером от yoksel, но этот помощнее)
- react-datepicker — доступный, фичастый реакт дейтпикер-компонент
- next-view-transitions — View Transitions API для Next.js App Router (в догонку ко всем, кто уже внедрил у себя VT)
- markdowndown — инструмент для скачивания любого сайта в виде md

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

JS
- как быть со StyledComponents в React Server Components: на сервере context не поддерживается, поэтому SC не могут работать, в принципе; альтернативно можно перейти на compile-time-библиотеки с похожим API — Linaria, Panda CSS или Pigment CSS (основанный на либе, выросшей из Linaria — wyw-in-js)
- песочница, чтоб поиграть с предложенным Signal API в JS (поиграл, ощущения приятные)
- подходы к написанию логики retry: можно увеличивать время повторного запроса по экспоненте, линейно, рандомно, просто фиксировать задержку или обойтись вовсе без неё
- в каких случаях (не) нужен GraphQL: клиенты ломаются при смене API; долгое время загрузки из-за каскадных запросов; сложность поддержки множественных эндпойнтов; нужна тонкая настройка перфоманса и безопасности
- создатели xState отпилили от него лишнее и получился… новый стейт-менеджер @xstate/store, основанный на событийной модели

CSS
- галерея копипаст-градиентов: линейные, круговые и серобуроказявчатые
- в каких ситуациях может не сработать aspect-ratio: когда заданы явно оба размера, блок растягивает флекс-контейнер, что-то форсит расчёт естественной высоты блока
- современные CSS-фишечки в Campfire, используются: oklch для высчитывания оттенков цветов; кастомные свойства в фолбеках кастомных свойств color: var(--btn-color, var(--color-text)); :has для определения наличия внутренних элементов :where(:not([open]):has(.unread)) или их количества :where(:has(> :last-child:nth-child(2)); единственное медиавыражение @media (max-width: 100ch); any-hover: hover для определения нетач-девайсов

Платформа
- как попап об использовании кукис может навредить перфомансу: на самом деле относится к любому попапу или всплывающему элементу: скрипты/стили попапа могут загружать основной поток, хотя это явно должно грузиться асинхронно; поисковой робот может неверно определить LCP-элемент (вместо контента самого сайта — баннер или попап); попап может двигать контент (нехорошо для CLS)
- подборка фишек дев-тулзов: обычно в таких списках всё уже известно, но также попадается 1-2 фишки, которые прям вау; так и в этой статье нашлось кое-что новое интересное — эмуляция фокуса на странице (чтобы при переходе в дев-тулзы не закрывался ховер-элемент) и logpoints — console.log, который можно назначить на строке прям из дебаггера
- оказывается, внутрь PDF можно встраивать JS by design, который можно использовать, например, для XSS-атаки (к счастью, в браузере можно запретить исполнение JS в PDF)

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