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

Новости
- обновились LST версии Node.js: в v20.12.0 бэкпортированы crypto.hash(), более быстрый, чем createHash(), загрузка и парсинг переменных окружения с process.loadEnvFile(path) и util.parseEnv(content), стилизация вывода текста util.styleText; в v18.20.0 добавлены импорт-атрибуты import "foo" with { ... }, а также dirent.path заменён на dirent.parentPath (следом доехали секьюрные апдейты v20.12.1 и v18.20.1)
- вышел bun v1.1: теперь поддерживается в Windows 10, также добавлен Bun.Glob для поиска по файловой системе, Bun.Semver для проверки и сортировки версий по semver, новые свойства server.url и server.requestIP() при использовании serve, улучшена совместимость с Node для более бесшовного перехода, много улучшений в работе с Web API и в целом дофига фиксов и изменений
- вышел (олдскулы свело) Gulp v5: разработчикам пришлось отказаться или взять под своё крыло заброшенные зависимости, многое переписать (вызывает чувство уважения с лёгким налётом тщетности бытия)

Проекты
- typed.js — либа для анимации печатающегося текста
- npm-publish — публикация npm-пакетов из GitHub Actions при изменении версии пакета
- runJS — песочница для написания JS- или TS-кода с одновременным выводом результата рядом (как будто каждая строка выводится в консоль, только прямо рядом с кодом, без переключения контекста)

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

JS
- визуальный гайд по работе промисов, из которого можно узнать, что «колбек» на резолве промисов записывается в поле [[PromiseFulfillReactions]] и что «макротасков» нет, а есть просто таски
- если вы захотите на JS собрать CLI-программу, то это можно сделать без всяких дополнительных библиотек на коленке с помощью файла index.js со строкой #!/usr/bin/env node, а также запуска через поле package.json "bin": { "setup-project": "./index.js" }
- а почему бы нам не добавить реактивности в JS, подумали двое ребят и отправили пропоузал сигналов в JS, чтобы можно было создавать new Signal.State и Signal.Computed: внутри рантайма это будет лучше по перфомансу и возможно даже будет интегрировано с DOM (уууу, ну уже тогда проклятому Реакту точно конец!)
- каждая версия Реакта как приход весны: старые хуки перерождаются в новые и жизнь фреймворка выходит на новый круг (useFormState умер, да здравствует useActionState)
- в Реакте при задании значений по умолчанию в аргументах не стоит использовать массивы и объекты, так как каждый раз это будет ссылкой на новый объект, то есть пропсы будут меняться и компонент ререндериться
- попытки ограничить типами передаваемые в children элементы в Реакте заранее обречены, так как все элементы будут всё равно безликими JSX.Element, поэтому если нужен контроль за передаваемыми внутрь компонента данными, лучше воспользоваться пропами
- в браузерах есть механизм bfcache, который позволяет при переходе back и forward загружать страницу не повторно по сети, а из хранящегося снепшота в памяти (чек window pageshow по event.persisted)

CSS
- как на @scope, :scope и all: revert-layer собрать инкапсуляцию стилей в компонентах: как обычно в CSS — многословно, но нативно
- как на :root:has(select option[value="dark"]:checked) собрать современный переключатор светлой/тёмной темы сайта с сохранением в localstorage
- интерактивный гайд по container queries, в котором приводится много юзкейсов примеров использования единиц измерения от «контейнера», а также перечислены ограничения: если блок объявлен как container, то он не может иметь одновременно лейаут грида/флексбокса; container нельзя использовать в query для самого себя, для этого должен быть отдельный элемент
- <marquee> хоть и давно задепрекейчен, «бесконечные» движущиеся полосы в дизайнах с нами, думаю, навсегда, поэтому можно научиться их реализовывать с помощью задержки анимации margin-left для каждого отдельного элемента

Платформа
- как улучшить метрику CLS: предустанавливать размеры для картинок и для мест с инжектящимся контентом, не загружать лениво CSS в зоне видимого интерфейса, не анимировать top/left, подбирать подходящие фолбек-шрифты

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