Пульс веб-платформы 17.01.2025

Новости

• вышел Chrome 132:
  • улучшены события и исправлены баги для элементов popover и dialog
  • продолжают допиливать CSS Anchor Positioning
  • заголовки Strict-Transport-Security (STS) теперь игнорятся для localhost
  • довыкатили Keyboard focusable scroll containers, которые раньше забаговали
  • File System Access API стало доступно на Android-девайсах и WebView
• вышел Firefox 134.0:
  • поддержан Promise.try(), теперь он кроссбраузерный
  • экспериментально добавлена поддержка Intl.DurationFormat
  • поправлен баг с применением align-self и justify-self к абсолютно позиционированным элементам
• в Node.js v22.13.0 стабилизирована фича Permission Model: это «ремень безопасности» для вашего кода, а не защита от чужого вредоносного кода; запуск файла с флагом node --permission index.js по умолчанию обрежет все права (чтение и запись в fs, порождение процессов…), а указание явных флагов типа --allow-fs-read и --allow-fs-write уже включит только нужное
• в Bun v1.1.43 появился экспериментальный HTML Bundler: команда bun build --experimental-html --experimental-css ./index.html --outdir=dist склеит все js-, css-файлы и ассеты в один файл и подключит их в итоговом html-файле
• WinterCG, группа разрабочиков Deno, слилась с Ecma International, сформировала новый комитет TC55 и выпустила первый черновик их стандарта Minimum Common Web Platform API, где собраны список базовых API для конситентности между разными JS-райнтаймами
• в React-е (и Next-е) появится первое API про анимацию — компонент <ViewTransition> на основе View Transitions API (не поддерживается только в FF), обещают удобство в работе с Suspence, под капотом React будет в определённый момент назначать элементу view-transition-name и вызывать startViewTransition во время мутации DOM-а:

<ViewTransition>
  <Suspense fallback={<Skeleton />}>
    <Content />
  </Suspense>
</ViewTransition>

Проекты

• emojico — cli-тула для генерации набора favicon-ок из эмодзи: под капотом буднично открывается puppeteer и снимается скриншот со страницы с иконкой
• @smoores/epub — оказывается формат электронных книг epub — открытый стандарт W3C, и это либа для работы с epub-файлами
• react-focus-lock — «ловушка» фокуса при показе модалок

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

JS

• спред объекта/массива в объекте не скопирует его, а создаст ссылку на него const state = { ...defaultState, prop: value } — это механизм Shallow Copy; если же нужно именно склонировать объект, то в современном JS для этого есть специальный метод structuredClone (поддерживается везде с 2022):

const state = structuredClone(defaultState);
state.prop = value;

• доля ESM-only и dual (ESM + CJS) npm-пакетов медленно, но верно растёт: в ноябре 2024 у CJS 63%, у dual + ESM 25%
• напоминание для реактоводов: рефы обрабатываются до useLayoutEffect и useEffect

CSS

• псевдокласс :empty помогает скрыть элементы с пустым контентом (правда пока что в браузеры не доехало обновление спеки по этому поводу, то есть блок с пробелами скрыт не будет):

.list > div:empty {
  display: none;
}

• бонус использования нативного <dialog> — его части легко стилизовать: подложка dialog::backdrop {}, убирание скролла body:has(dialog[open]) { overflow: hidden }

Платформа

• в современных браузерах изменился подход к кешированию ресурсов: если раньше файл мог быть единожды закеширован по урлу и потом для другого сайта браться из общего кеша "https://cdn.example.com/jquery-3.6.0.min.js": resourceData, то теперь для защиты от отслеживания для каждого сайта кеш файла будет храниться отдельно { topLevelSite: "site-a.com", resource: "https://cdn.example.com/jquery-3.6.0.min.js" }: resourceData; как следствие — больше нет выгоды от CDN, дешевле селф-хостить на своём домене типа static.company.com/js/react.js
• для базовой доступности достаточно использовать теги по назначению (кнопки, формы, лейблы + инпуты), не убирать стили фокуса, при открытой модалке ловить фокус и «выключать» контент под ней атрибутом inert, расширять область клика на интерактивных элементах