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

Новости
- вышел Million 3 (кастомный компилятор для React): авторы обещают, что просто выполнив npx million@latest можно добиться ускорения работы Реакта с O(n) до O(1)
- вышла jQuery 4.0.0 BETA: без шуток внушительный чейнджлог, в который разве что не влез отказ от IE11
- вышел Vite 5.1: появился экспериментальный режим Vite Runtime API, позволяющий сделать прослойку между сервером и рантаймом и делать там что-то своё, такая мидлваря, но мощная, и отвязанная от сервера; поддержка запуска CSS-препроцессоров в отдельных потоках (перф улушается); более быстрый холодный старт; улучшенная поддержка .css?url и другие фишки
- вышел биндинг GSAP для React @gsap/react, включает удобный хук useGASP()
- вышел Remix v2.6.0, который однажды утром проснулся и обнаружил, что он превратился в Vite-плагин

Проекты
- drab — коллекция headless кастомных элементов (для расширения кругозора, что кастомные элементы можно использовать как обёртку как для ui-элемента, так и для процесса, например, prefetch)
- svgfm — визуальный конструктор SVG-фильтров, позволяющий собирать фильтры в цепочки (написано на JS!)
- baklava — приятная дизайн-система и ui на нативных веб-компонентах без примудростей
- replay — «проигрывание» действий в интерфейсе puppetier-ом с помощью Chrome DevTools Recorder (попробуйте, это вкладка есть в девтулзах Хрома)
- knip — либа для нахождения неиспользуемых файлов, зависимостей и экспортов в проекте
- simple-git-hooks — суперлайтовые и простые гит-хуки, если не нужно сложности и нужна быстрота и простота
- npmgraph — визуальное отображение зависимостей проекта в виде интерактивного графа

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

JS
- типобезопасные id в TS с помощью template literal types (`node_${string}`): в комментариях приводят более общее решение через branded types
- как Deno изменился за 2023 год, а также кое-что под названием JSR (JavaScript Registry), «смутно напоминающий npm», но с нативной интеграция TS и ESM-only пакетами, автоматически генерируемой документацией
- стата о самом востребованном JS-фреймворке: конечно, это React по количеству вакансий; в Бельгии больше всего востребован Vue, а в Швейцарии — Ангуляр (интересно, а отсутствие JS-фреймворка это хоть сколько-нибудь востребовано?)
- оказывается есть не только <input type="color"> (везде), но и цветовой пикер new EyeDropper() (в Хроме)
- очередной герой самоотверженно бросается в пучину настройки фронтовой монорепы и выясняет, что для него лучшим оказалось сочетание инструментов Turborepo + pnpm
- бестпрактисы и юзкейсы переменных окружения .env: можно задавать при запуске ноды, в .env-файлах можно задавать фича-тогглы, переменные для разных окружений и хранить секреты
- попытка ещё раз взять и запомнить различия между типами ReactElement, ReactChild и ReactNode
- когда может пригодиться as never в TS (спойлер: в этом кейсе не поможет даже as any!)
- шоукейс про микрофронты от команды Dodo: в 1 и 2 рассказано, как переходили на SingleSPA + SystemJS, а заодно и на Vite и Vitest
- а может и не нужны эти ваши микрофронты и достаточно ограничиться npm modules или даже git submodules?
- организация кэша в JS с помощью Cache Storage API и его преимущества перед local storage и indexed db

CSS
- юзкейсы all: revert-layer: более лайтовый ресет, чем all: revert, точечное восстановление ранее сброшенных значений, а также антихрупкие дефолты для переменных var(--size, revert-layer)
- градиентная рамка с помощью linear-gradient и mask
- боковая шторка на <dialog> (не обошлось без заворачивания в веб-компонент)
- CSS-анимация SVG-элементов и тонкости настройки transform-box и transform-origin

HTML, SVG
- пятёрка атрибутов, улучшающих UX: hreflang, translate, reversed, controls и autocomplete (в порядке возрастания полезности)

Платформа
- история о том, как веб нарушил конвенцию квадратных чекбоксов и круглых радиокнопок
- дзен и искусство ухода за маком в 2024: чеклист от и до
- кто такой и зачем нужен CORS с бонусным списком как не нужно его обходить (принимать всё отовсюду, выключать preflight checks плагинами в браузере и устанавливать mode в no-cors)