Новости
🔡 вышел Chrome 132:
🔵 улучшены события и исправлены баги для элементов popover и dialog
🔵 заголовки 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 и useEffectCSS
🔡 псевдокласс
: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, расширять область клика на интерактивных элементах@web_platform | Поддержать канал 🤝