Пульс веб-платформы 21.02.2025

Новости

• в стабильную Node.js 20 бэкпортирована фича require(esm) (импорт EMS-модулей через синтаксис CJS-require), а это значит, что в апреле 2025, когда закончится поддержка Node.js 18, CJS из сборок можно будет выпиливать
• в апреле 2024 Popover API выкатился во всех браузерах, но по январь 2025 был крит-баг в iOS Safari (до выхода Safari 18.3), который не давал полноценно использовать фичу (так что если вы с новой фичей выкатили баг в прод и сразу его поправили, считайте, что ничего не было)
• обновился Astro 5.3: ускорили, допиливают Session Storage API и интеграцию с Netlify
• обновился моноширинный шрифт Monaspace от Github, теперь в него включены иконки Nerd Fonts
• выработали фокус инициативы Interop на 2025 год, предположительно в этом году у нас появятся во всех браузерах: Anchor positioning, View transitions ,@scope, scrollend event, Core Web Vitals, а также исправятся баги с backdrop-filter, <details>, text-decoration
• ESLint больше не EcmaScriptLint, а ExtremelySuperLint (шутка), а именно стал официально поддерживать линтинг CSS: встроенные в @eslint/css правила проверяют пустые блоки, дублирующиеся импорты, невалидные @-правила, а также способствуют использованию правил baseline и @-layer (не шутка)
• CreateReactApp окончательно и бесповоротно задепрекейчен, так как нет мейнтейнера и плюшек внутри и вообще таки зачем вам голый React, давайте уже скорее устанавливайте метафреймворк

Проекты

• create-tsrouter-app — банда TanStack поджидала момент, когда анонсируют депрекейт CRA, подсуетились и подготовили свою замену с поддержкой JS/TS, TW/CSS и конечно же TanStack Router
• react-bits — React-компоненты с анимациями и красивыми свистелками (меня впечатлили splash-cursor и orb)
• use-context-selector — селектор из React-контекста в стиле Zustand useContextSelector(context, (v) => v[0].count) (от создателя, внезапно, Zustand)

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

JS

• Intl.DurationFormat, который вскоре доедет в оставшийся FF, даёт возможность в разном виде в зависимости от локали форматировать период даты-времени:

const durationFormatter = new Intl.DurationFormat(navigator.language, {
  style: "long",
});

durationFormatter.format(duration);

// 360 minutes, 360m, 0:360:00, 360 Min...

• если для вас в TS дженерики с тернарниками внутри выглядят устрашающе, не пугайтесь, они добрые: если тип с дженериком — это «функция с параметрами», то тернарник внутри — это просто единственный возможный в TS способ описать «условие», в зависимости от которого «функция» будет возвращать то или иное значение:

type Something<T> = T extends number ? never : T;
// «функция» возвращает ничего, если в T передано число, иначе - переданное значение

type Remove<T, R> = T extends R ? never : T;
// «функция» возвращает ничего, если T содержится в R, иначе - переданное значение

type AllColors = "Black" | "White" | "Orange";
type RealColors = Remove<AllColors, "Black" | "White">;
// type RealColors = "Orange"

• если нужно реализовать одностороннюю отправку сообщения с сервера на клиент (а не двустороннее соединение), то можно использовать SSE вместо WebSockets: общение идёт по HTTP, нативно работает во всех браузерах через new EventSource()

CSS

• чтобы создать выезжающие за пределы блока элементы, но при этом чтобы они были в потоке и занимали место, можно воспользоваться гридом с пустыми «рядами», размером auto, чтобы они растянулись на нужное «выпирающее» пространство grid-template-rows: auto [container-start] repeat(4, auto) [container-end] auto;
• селекторы :has и :not не так просты:
  • .card:has(:not(img)) выберет .card, в котором внутри есть любой элемент, кроме img
  • .card:not(:has(img)) выберет .card, в котором вообще нет img
• псевдокласс ::selection меняет фоновый цвет выделенного текста, но прикол в том, что цвет не обязательно делать один для всей страницы:

::selection {
  background-color: var(--brandColor);
}

:nth-child(2n) {
  --brandColor: red;
}

:nth-child(2n + 1) {
  --brandColor: blue;
}

• свойство zoom делает похожую на scale операцию, но при этом «отскейленный» блок не влияет на лейаут (изменяется по сути композитный слой с «картинкой» блока), а «отзумленный» — влияет, то есть вызывает перестроение лейаута

Платформа

• ещё один тейк к сторону того, что AI меняет нашу работу, но не отбирает её: каким бы хорошим и быстрым AI не был для создания прототипов, чтобы пройти путь от протототипа до продакшена нужно учесть краевые случаи, соединить с другими частями системы и, в конце концов, взять ответственность за итоговое решение, а для этого нужны мы с вами (от себя добавлю, что в последнее время отключил ассистента в IDE, со временем задалбывают неостанавливающиеся «советы», порой не хватает интроверсного соло-кодинга)