обновилась Node до v23.1.0: стабилизировано встроенное в ‘node:test’ MockTimers API, позволяющее замокать системное время mock.timers.enable({ apis: ['Date'], now: new Date('1970-01-01') });, а также теперь стабильны JSON modules и import attributes — это когда к импорту JSON-файла приписывается уточнение with { type: 'json' } для повышения безопасности, чтобы среда проверила, что внутри действительно JSON (также с выходом Node 22.11.0 все дальнейшие 22.x-релизы будут считаться LTS)
состоялся первый митинг рабочей группы JSR (аналог npm от создателей Deno), из слайдов можно узнать, что: JSR не всегда может опубликовать существующий проект на .js + .d.ts; хостинг проекта стоит ~$400 в месяц; хотят сделать тул для генерации JSR-конфига из package.json
Apple пошла на уступки контролирующим органам в EU и добавила в новой бете iOS послабления (только для EU) в истории с монопольностью Safari: браузерные вендоры теперь могут включать бинарник с собственным движком в браузер, но он всё равно будет использоваться на пару с webkit, правда тестировать это дело за пределами EU всё равно нельзя; выбор браузера по умолчанию появится в более заметном месте и в явном виде; Safari можно будет удалить из системы
вышел Firefox 132: улучшена поддержка аппаратного ускорения для SVG-фильтров; HTTP-фавиконки будут блокироваться, если их невозможно получить через https; поддержан атрибут fetchpriority
Проекты
nvm-desktop — собранный на Tauri кроссcистемный десктопный клиент Node Version Manager
node-html-to-image — Node-надстройка над puppeteer, чтобы отрендерить страницу и снять скриншот (опционально поддерживается Handlerbars для разметки)
DuckDuckGo AI Chat — через сервис можно бесплатно и без VPN пользоваться чатом с моделями GPT, Claude, Llama, Mixtral
html- — попытка воссоздать стандартные HTML-элементы с помощью веб-компонентов (которая обречена на провал, но смотреть интересно); вот, например, кнопка
Статьи и демки
JS
нативная поддержка TS в Node уже сама по себе хороша, но также позволяет импортировать TS-файлы просто так const module = await import('./module.ts');; включить можно экспериментальным флагом при запуске Node, в том числе в сразу внутри .bashrc: export NODE_OPTIONS="--experimental-transform-types --disable-warning=ExperimentalWarning"
ручной вызов метода submit() у формы совершит отправку не учитывая валидации и не запуская события submit; а чтобы перед отправкой формы триггерить событие и проводить валидации, есть давно доступный в браузерах метод requestSubmit()
пример реализации микрофронтендов с помощью Cloudflare Workers: приводится пример реализации с гейтвеем, через который проходят все запросы, и который отдаёт нужный микрофронт, а также с кастомными элементами для обозначения, куда инжектить микрофронт и с общей шиной событий (честно говоря, это уже почти похоже на набор iframe-ов, в которых грузятся независимые страницы)
«нативное» управление светлой-тёмной темой через <meta name="color-scheme" content="light dark"> прикольно тем, что можно буквально найти meta-элемент через document.querySelector и менять его значение
«нативная» валидация форм (атрибут метод setCustomValidity у инпутов) позволяет на коленке сделать проверку введённого значения в инпуты и отобразить это в виде системного уведомления (пример для React)
селектор .container:has(.element:last-child:nth-child(-n + 3)) применится, если в контейнере содержится 3 или меньше количество элементов, удобно, к примеру, для перестроения грида
гайд по Scroll-Driven Animations (пока доступны только в Хромиум-браузерах): киллер-фича — разгружается основной поток браузерного движка и поэтому анимации получаются гарантировано более плавными (бонусом пример связки анимации кастомного свойства посредством скролл-анимации)
с частым появлением новых фич в CSS можно регулярно их обновлять в CSS Reset; в предлагаемом варианте используются @layer, чтобы подключать стили не обязательно в самом начале , и нативная вложенность селекторов :not([class]) { h1& {…}}
сборник рекомендаций по улучшению Core Web Vitals, из интересного: в Chrome есть вкладка Coverage, чтобы увидеть загруженный, но неиспользующийся код; картинки лучше всего подключать в <img src|srcset>, так они начинают грузиться раньше, а не ждут загрузки стилей/скриптов; не стоит пользовать событие unload и заголовок Cache-Control: no-store, так как они мешают браузеру доставать страницу из кеша при переходе «назад»
обычно поиском по истории коммитов пользуешься, чтобы посмотреть, кто что изменил в конкретном файле или строке файла; а вот git log с ключом -S — «поисковик» по диффам коммитов определённой строки, не привязываясь к конкретному файлу
недавно писал dev-fiction, где предполагал появление web-components-фреймворка от Google и «глобального UI-kit-а», помните? Как вы возможно догадались, «прототипы» не были взяты мной из воздуха. Фреймворк самом деле существует — это Lit (остаётся довезти туда нативные сигналы, упростить SSR, добавить тесную интеграцию с дев-тулзами и включить маркетинговую машину), а прототип «глобального» UI-kit-а — это Shoelace (недавно переродившийся в Web Awesome), основанный на Lit (остаётся перестать быть местечковым проектом одного человека). Так вот, я к чему веду: посмотрите на код веб-компонента статусной плашки, у меня этот код вызывает приятные ощущения, а у вас?
