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

Новости
- вышел Angular 19: в современном фронтенде, если фреймворк не поддерживает SSR и гидрацию, а также сигналы, конкуренцию среди модной-молодёжной аудитории уже не выдержать; и Angular в этом плане снова с строю: для каждого роута можно задать отдельно режим рендера Server/Client|Prepender; для отрендеренного, но незагидрированного HTML будет записываться события пользователя, чтобы когда доедут скрипты, «проиграть» их заново и запустить
- вышел Firefox 133: поддержана опция keepalive у fetch, так что теперь во всех браузерах можно пользоваться fetch c keepalive вместо Navigator.sendBeacon(), если важно, чтобы определённый запрос завершился, а не прерывался, в случае unload-а страницы
- вышел TypeScript 5.7: улучшена проверка для никогда не инициализируемых переменных; поддержан таргет до es2024; поиск tsconfig.json по родителям теперь не будет останавливаться на первом найденном; поддержано API Node.js 22 module.enableCompileCache() для более быстрого выполнения повторных операций
- вышел Tailwind CSS v4.0 Beta: интересна траектория развития в сторону CSS-first конфигурации (т.е. использование кастомных переменных, слоёв и директив) вместо конфигурации в JS; изначальный спорный подход с вынесением всего в classname уже стреляет по ногам, требуя от разработчиков soul-crushing backward compatibility work — это рано или поздно или приведёт TW в тупик, или заставит переродиться в тулкит с «естественным» набор миксинов, пресетов и ручек для управлениях внутрянкой
- вышедший Deno 2.1 стал первым LTS-релизом и среди прочего включает новую команду deno outdated для проверки устаревших версий пакетов, эмбеддинг «статических» файлов в бинарник при запуске deno compile, а также возможность указать зависимые команды при запуске других команд
- вышел мажор Vite 6.0: для небольших проектов ломающие изменения не выглядят болезненными, скорее добавились новые фичи и апдейтнуты зависимости
- в Node 22 в ближайшее время появится поведение --experimental-require-module без флага

Проекты
- pkg-graph — визуальное исследование зависимостей npm-пакета, строит граф на лету в браузере
- spoiled — компонент спойлера для React, под капотом Paint API (для Safari предусмотрен фолбек)
- dual-range-input — двойной range-инпут, собранный из двух обычных range-инпутов

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

JS
- инфа по базовым типам TS для React собрана в одно месте: чтобы выцепить тип возвращаемого значения функции — <ReturnType> и <Awaited<ReturnType>> — для асинхронной функции; тип ReactNode лучше ReactElement тем, что шире; props: React.ComponentProps<"button"> для типизации базовых пропсов HTML-элемента или компонента; использование as const для типизации tuples, чтобы TS не считал их массивами
- история, как в Reddit в разросшуюся монорепу внедряли Vite, пара интересных фактов: чтобы подружиться с Lit пришлось добавлять ?inline ко всем путям стилей, чтоб не вставлять их в страницу, а инлайнить строками в бандл; чтобы заюзать на полную ESM пришлось во всех модулях добавить export maps, которыми раньше пренебрегали
- favicon — единственно гарантировано видная часть сайта во вкладке браузера, поэтому её можно использовать для индикации неактивности пользователя или нотификации о событии в свёрнутой вкладке

CSS
- когда-то в Safari затащили эффектное свойство background-clip: text для создания «текстурного» текста путём «вырезания» фона, и оно долго работало только с префиксом -webkit, и вот теперь только в Safari появился ещё один вариант — background-clip: border-area — только теперь, чтобы текстура фоновой картинки осталась на месте рамки, а не букв
- oklch удобен тем, что позволяет легко подстроить один из параметров цвета, например, lightness, чтобы сделать один и тот же цвет на тёмном фоне более ярким, а на светлом — более тусклым oklch(calc(0.75 - var(--colorAdjuster)) 0.2 328)

HTML
- с помощью <link rel="preload" as="image"> с атрибутами imagesrcset, imagesizes и type можно прелоадить картинки только в браузере, поддерживающий формат, заданный в type, например, type="image/avif"

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