Новости
- c выходом Node 22.11.0 все дальнейшие 22.x-релизы будут считаться LTS
- состоялся первый митинг рабочей группы JSR: JSR не всегда может опубликовать существующий проект на
.js + .d.ts; хостинг проекта стоит ~$400 в месяц; хотят сделать тул для генерации JSR-конфига из package.json- вышел Firefox 132: улучшена поддержка аппаратного ускорения для SVG-фильтров; HTTP-фавиконки будут блокироваться, если их невозможно получить через https; поддержан атрибут
fetchpriorityПроекты
- nvm-desktop — собранный на Tauri кроссcистемный десктопный клиент Node Version Manager
- node-html-to-image — Node-надстройка над puppeteer, чтобы отрендерить страницу и снять скриншот (опционально поддерживается Handlerbars для разметки)
- 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()- «нативное» управление светлой-тёмной темой через
<meta name="color-scheme" content="light dark"> прикольно тем, что можно буквально найти meta-элемент через document.querySelector и менять его значение- «нативная» валидация форм (атрибут метод
setCustomValidity у инпутов) позволяет на коленке сделать проверку введённого значения в инпуты и отобразить это в виде системного уведомления (пример для React)- File — это расширение Blob, с добавленными методами
name, size, type, lastModified, webkitRelativePathCSS
- селектор
.container:has(.element:last-child:nth-child(-n + 3)) применится, если в контейнере содержится 3 или меньше количество элементов, удобно для перестроения грида- гайд по Scroll-Driven Animations (Хромиум-браузеры-only): киллер-фича — разгружается основной поток браузерного движка и поэтому анимации получаются гарантировано более плавными (бонусом пример связки анимации кастомного свойства посредством скролл-анимации)
- с частым появлением новых фич в CSS можно регулярно обновлять CSS Reset; в предлагаемом варианте используются
@layer, чтобы подключать стили не обязательно в самом начале , и нативная вложенность селекторов :not([class]) { h1& {…}}Платформа
- сборник рекомендаций по улучшению Core Web Vitals, из интересного: в девтулзах Chrome есть вкладка Coverage, чтобы увидеть неиспользующийся код; картинки лучше всего подключать в
<img src|srcset>, так они начинают грузиться раньше, а не ждут загрузки стилей/скриптов; не стоит пользовать событие unload и заголовок Cache-Control: no-store, так как они мешают браузеру доставать страницу из кеша при переходе «назад»- обычно поиском по истории коммитов пользуешься, чтобы посмотреть, кто что изменил в конкретном файле или строке файла; а вот
git log с ключом -S — «поисковик» по диффам коммитов определённой строки, не привязываясь к конкретному файлу- недавно писал дев-фик, где предполагал появление web-components-фреймворка от Google и «глобального UI-kit-а», помните? Как вы возможно догадались, «прототипы» не были взяты из воздуха. Фреймворк самом деле существует — это Lit (остаётся довезти туда нативные сигналы, упростить SSR, добавить тесную интеграцию с дев-тулзами и включить помощнее маркетинговую машину), а прототип «глобального» UI-kit-а — это Shoelace (недавно переродившийся в Web Awesome), основанный на Lit (остаётся перестать быть местечковым проектом одного человека). Так вот, я к чему веду: посмотрите на код веб-компонента статусной плашки, написанный на Lit, у меня этот код вызывает приятные ощущения, а у вас?
@web_platform | Поддержать канал 🤝