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

Новости
- вышел Safari TP 190: поддерживается style container queries, ключевое слово safe во флексбоксах, getComputedStyle() теперь работает с ::highlight(), атрибут shadowrootclonable для разрешения кловирования shadow root
- вышла Turborepo 1.13: новый ui-терминал, команда scan для определения подходящих настроек на вашей машине, улучшенное логирование на CI
- веб-компонентный ui-кит Shoelace теперь называется Web Awesome (так как их купил Font Awesome): хорошая новость — у кита будет финансовая поддержка, плохая — полностью бесплатным кит не будет
- в V8 у итераторов появились новые методы map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find, позволяющие, например, не приводить к массиву коллекцию Nodelist, чтобы её обойти const posts = document.querySelectorAll('a').values().find()
- обновился Chrome до версии 123: функция light-dark() для упрощённого задания цветовой темы; Long Animation Frames API для отслеживания избыточных перерисовок в PerformanceObserver; Service worker Static Routing API для указания, какие ресурсы через Service worker гонять не нужно, а всегда брать из сети; стили для picture-in-picture версии сайта @media (display-mode: picture-in-picture)

Проекты
- gitpkg — тула, чтобы сделать папку github-репозитория отдельной npm-зависимостью
- tzdb — либа с всегда актуальными мировыми таймзонами (данные берутся с geonames.org)
- changesets — тула для составления чейнджлогов в репах и монорепах
- microdiff — мини-либа без зависимостей для сравнения объектов в JS, в том числе new Date() и new RegExp(), а также объектов с циклическими ссылками

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

JS
- документалка о истории Node.js: не смотрел, но одобряю
- чем отличаются JS движок и JS рантайм: движок (V8, SpiderMonkey, JavaScriptCore) имплементит спецификацию ECMAScript, а рантайм (браузеры, Node, Deno, Bun) — это хост, в котором запускается движок + дополнительная инфраструктура для работы (DOM для браузеров, доступ в файловой системе в Node, event loop)
- походы для двустороннего и одностороннего общения сервер-клиент с WebSockets, Server-Sent-Events, Long-Polling, WebRTC и WebTransport: WebSockets ок, но сложны в реализации, SSE — только в направлении сервер->клиент, WebTransport работает на протоколе HTTP/3 QUIC и пока не везде поддерживается, WebRTC больше для клиент-клиент соединений, Long-Polling ок, но хак
- обзор всех полей package.json: скорее всего они уже описаны в доке npm, но тут как-то приятно собрано и описано всё вместе

CSS
- идея использовать scroll-snap не в горизонтальной карусели, а для скролл-навигации по заголовкам текста в вертикальном направлении: чем-то напомнило вертикально листающиеся по свайпу «карточки»
- как создать фича-флаги на CSS с помощью @container style(--is-mobile: true): я предполагал, что это станет можно делать в 2025, и кажется прогноз сбудется, так как хоть style container queries и появились в Safari TP 190, но в FF ещё нет
- мастеркласс по приготовлению веб-компонента круглого прогресс-бара: в меню инкапсуляции с выделением открытых «ручек» на кастомных свойствах, обзёрвабл атрибутов (реактивность!), на десерт размеры в container unit-ах и гриды
- найдено малоизвестное CSS-свойство text-emphasis для выделения символов в тексте: кажется, может сгодиться, например, для подсветки «неверных» слов в тексте
- 5 примеров разной анимации бордеров: строится на вращении фонового псевдоэлемента с сокрытием лишнего overflow: hidden, размытии фильтром, outline или анимации stroke-dashoffset у SVG
- найден юзкейс единицы измерения turn — «докрутка» элемента при остановке анимации
- псевдокласс :empty не учитывает текстовые ноды, а вот :not(:has(*)) чинит это
- отсюда можно просто взять и скопипастить popover-модалку

Платформа
- незаслуженно неизвестные современные команды git: switch для переключения веток, restore для отката правок в файле, sparse-checkout для частичного чакаута, worktree для чекаута одновременно двух веток, bisect для бинарного поиска проблемного коммита

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