Новости

• выпущен Deno 1.46: удивительный пример живучего проекта (6 лет!), который чтобы выжить всё больше адаптируется к Node и её экосистеме (playwright, pglite, mysql2…), но при этом переосмысляет отдельные вещи типа file watcher, лок-файла, менеджа зависимостей, делая их проще и удобнее, и в добавок ещё и привносит свою библиотеку «часто используемых велосипедов», чтобы не тянуть это отдельными зависимостями
• если ваш проект с webpack не новый и Vite завезти туда сходу не получится, то возможно это повод попробовать бандлер Rspack, тем более, что вышла его версия 1.0 (с версии 0.1 прошло 18 месяцев), то есть он теперь хорошо совместим с webpack v5 API, но при этом в 10 раз шустрее, а в добавок имеет отдельные тулы, например, билд-тула Rsbuild — аналог CRA или Vue CLI для создания «просто работающего» приложения без доп настроек и танцев с бубном или Rspress — генератор статических сайтов
• в Chrome 129 появятся события scrollSnapChange и scrollSnapChanging, чтобы добавлять обработчики snap-скролл-событий (нативное «прилипание» блоков при скролле/свайпе): будет легче делать карусели и обходиться без Intersection Observer или вычислений
• анонсирован TypeScript 5.6 RC: появится опция --noCheck, которая позволяет не запускать тайпчекинг, а совместно с опцией --isolatedDeclarations --noCheck позволяет быстро генерить .d.ts-файлы без тайпчекинга

Проекты

• freepublicapis — курируемый список свободно доступных публичных API с тестовыми данными (есть фильтрация по скорости и надёжности работы)
• dearconsole — набор копипейст-скриптов для браузерной консоли, есть интересные находки, например, document.fonts выдаст набор шрифтов сайта
• clipboard-inspector — анализ содержимого буфера обмена: туда копируется не только сам текст, но и окружающие HTML и CSS

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

JS

• грядущий, но уже доступный через полифилл стандарт Temporal.ZonedDateTime, расширяет дату в формате ISO явным указанием таймзоны и региональности календаря, что снимает боль при работе с датами в разных часовых поясах, а заодно приносит приятные плюшки типа hoursInDay — размера суток с учётом «летнего» времени или сравнения двух дат в разных часовых поясах, чтобы понять какая более ранняя
• в React Router есть встроенная функция generatePath для того, чтобы типобезопасно сгенерировать строку роута по схеме из данных, то есть перед непосредственно навигацией нужно выполнить построение роута navigate(generatePath(Routes.USER_DETAILS, { userId: "1" }))
• здесь просто пошаговая инструкция, как не сдаться в процессе публикации нового npm-пакета, интересные части: @arethetypeswrong/cli — либа для проверки корректности экспортов перед публикацией пакета; tsup — либа для компиляции TS-кода сразу в оба формата CJS и ESM; опция "noEmit": true для TS, чтобы использовать tsc только для тайпчекинга кода; либа @changesets/cli для публикации пакета, в том числе для локальной публикации с целью проверки

CSS

• наверняка вам когда-нибудь приходила в голову мысль, что с помощью box-shadowможно «сгенерировать» попиксельно целую картинку (теней при это потребуется много: один «пиксель» — одна тень); так вот эту идею можно развить дальше и сделать из теней «видео»: генерируем для каждого кадра «видео» кейфрейм анимации и затем проигрываем анимацию, например, по скроллу!
• среди всего навороченного CSS 70lvl (который мало где работает) из этого демо можно выцепить годные идеи, которые можно использовать уже сейчас, например, transition: --e .1s ease-out для кастомного свойства, объявленного с @property, или же использование кастомного свойства внутри CSS-счётчика counter-reset: num var(--val)
• примеры селекторов c :has(), выбирающие контейнер в зависимости от количества потомков, например, .container:has(> :last-child:nth-child(even)) выберет контейнер с чётным количеством элементов