Новости

• обновления 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)