Новости

• вышел 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 для бинарного поиска проблемного коммита