Гибкое управление фокусом элемента

Chrome в 145 версии добавил параметр focusVisible в метод focus:

input.focus({ focusVisible: true });

Как вы уже, наверное, догадываетесь, это позволяет самостоятельно управлять тем, будет ли элемент при ручном вызове фокуса, помимо CSS-псевдокласса :focus, соответствовать ещё и :focus-visible.

Ранее без данного параметра браузер самостоятельно решал этот вопрос.

⚙️ Поддержка браузерами широкая

Upsert для Map и WeakMap 🔥

Chrome в 145 версии добавил сразу 2 новых метода:

📌 getOrInsert(key, value) — возвращает существующее значение по ключу key, если оно есть, иначе вставляет value и также возвращает его

const fruitsCount = new Map([
  ['apple', 10]
]);

const appleCount = fruitsCount.getOrInsert('apple', 5); // 10

const bananaCount = fruitsCount.getOrInsert('banana', 20); // 20

📌 getOrInsertComputed(key, callback) — то же самое, только вставляет результат выполнения переданной callback функции, которая вызывается только в том случае, если ключ отсутствует

const fruitsCount = new Map([
  ['apple', 10]
]);

const appleCount = fruitsCount.getOrInsertComputed('apple', (key) => {
  // функция будет проигнорирована
  return 5;
});

const bananaCount = fruitsCount.getOrInsertComputed('banana', (key) => {
  return 20;
});

⚙️ Поддержка браузерами широкая (getOrInsert, getOrInsertComputed)

Защита от XSS

В последнее время в браузеры активно завозят Trusted Types и HTML Sanitizer API. Оба очень полезны для фильтрации содержимого, вставляемого напрямую в HTML.

HTML Sanitizer API

// Создаём санитайзер с разрешением только для <b> и <i> тегов
const sanitizer = new HTMLSanitizer({
  allowElements: ['b', 'i']
});

const unsafeHTML = '<div onclick="alert('XSS')">Hello <b>World</b></div>';

// Очищаем небезопасный код
const safeFragment = sanitizer.sanitizeFor('div', unsafeHTML);

document.body.appendChild(safeFragment); // Hello <b>World</b>

Trusted Types API

import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify@3.3.1/+esm';

const policy = trustedTypes.createPolicy('myPolicy', {
  // Очищаем небезопасный HTML код при помощи библиотеки dompurify
  createHTML: (input) => {
    return DOMPurify.sanitize(input);
  },
  // JavaScript код и URL'ы оставляем как есть
  createScript: input => input,
  createScriptURL: url => url
});

const unsafe = '<img src="x" onerror="alert(1)>"';

document.body.innerHTML = unsafe; // небезопасно, <img src="x" onerror="alert('XSS')">
document.body.innerHTML = policy.createHTML(unsafe); // безопасно, <img src="x">

⚙️ Поддержка браузерами (HTML Sanitizer, Trusted Types)

Вышел Vite 8 🔥

Главным изменением этой версии является переход с esbuild (для dev режима) и Rollup (для build) на единый Rolldown, написанный на Rust. Он такой же быстрый как esbuild, поддерживает тот же API плагинов, что Rollup и Vite, а также привносит ряд недоступных ранее фич, среди которых: полноценный bundle-режим, более гибкое управление разделением чанков, персистентный кэш на уровне модулей, Module Federation и многое другое.

Авторы заявляют, что такой переход позволил ускорить этап сборки проектов примерно в 10-30 раз.

К примеру, бета-версии сборщика при тестировании на разных проектах показали следующие числа:
1) Linear — время сборки сократилось с 46 секунд до 6 секунд
2) Ramp — сокращение времени сборки на 57%
3) Mercedes-Benz.io — на 38%
4) Beehiiv — на 64%

Данный переход позволит в будущем ещё сильнее ускорить работу как dev, так и build режимов, работы над этим уже ведутся.

Другие фичи 8 версии Vite:
1) Встроенная поддержка Vite Devtools (опция devtools)
2) Алиасы для импортов теперь можно получать сразу из tsconfig.json и не дублировать в vite.config.ts (опция resolve.tsconfigPaths)
3) Встроенная поддержка TypeScript-опции emitDecoratorMetadata (отпадает надобность в использовании ряда плагинов)
4) Импорт WebAssembly-модулей с суффиксом ?init теперь корректно работает и в средах с SSR
5) Добавлена возможность пересылать браузерные console.* логи в терминал dev-сервера (опция server.forwardConsole)

Размер Vite увеличился примерно на 15 МБ. Это связано с тем, что lightningcss теперь является обязательной зависимостью, а бинарный файл Rolldown оказался больше, чем прежняя связка esbuild + Rollup, но в будущем обещают это также исправить.

🔗 Ссылка на официальный пост

Caninclude

Полезный инструмент, который позволяет определить может ли один элемент быть вложен в другой по спецификации HTML

По каждому тегу предоставляется детальная информация:
1) Его категория
2) Контекст, в котором может быть использован
3) Контентная модель

Если вы пользуетесь SSR, то наверняка сталкивались с проблемой того, что браузер автоматически исправляет некорректный HTML и финальное дерево в браузере не совпадает с тем, что было сгенерировано на сервере.

🔗 Ссылка на инструмент

React Doctor 👨‍⚕️🏥

Попался интересный инструмент для анализа кода, написанного на React. Он автоматически определяет на чём написан ваш проект (Next.js, Vite, Remix и т.д.) и запускает 2 параллельные проверки:
1) Линтинг
2) Неиспользуемые файлы

По итогу он возвращает все найденные проблемы, а также индивидуальный рейтинг качества кода от 0 до 100.

В отличие от линтеров он проверяет не просто синтаксис единичного файла, а всё приложение целиком и позволяет выявить гораздо больше проблем.

Его можно подключить к вашей нейронке для автофикса, а также к github actions, чтобы он автоматически генерировал комментарии к PR.

🔗 Ссылка на инструмент

Chrome dev tools в мобильном браузере 🤯

К своему удивлению узнал, что оказывается существует такой инструмент как Eruda, который позволяет пользоваться инструментами разработчика в мобильных браузерах.

Функционал далеко не полный, т.к. автор самостоятельно делает копию Chrome Dev Tools, но на самом деле он достаточно обширный.

Есть такие вкладки как:
1) Elements
2) Console
3) Network
4) Sources
5) Vue (инструменты фреймворка)

И куча других, которые придумал, например:
1) Timing
2) Geolocation
3) Touches
4) Orientation
5) Code

Ранее подобное можно было реализовать только удалённо. То есть устройство подключалось по USB или Wi-Fi к компьютеру, с которого можно было заходить в инструменты разработчика.

🔗 Ссылка на npm

Вышел Module Federation 2.0 🔥

Хорошие новости!

Сообщество в лице Заккари Джексона (он впервые придумал эту технологию) начало развивать данный подход отдельно от webpack и даже создало для этого отдельный сайт, на котором собрана вся информация о том, что это, как пользоваться и как добавить в свой проект. На нём есть куча примеров под любой стек, список всех инструментов для работы, а также лучшие практики и набор skills для обучения нейронок.

Это не просто стандартизация архитектурных подходов между инструментами, записанная в качестве документации, а реальный код, который различные инструменты будут использовать в качестве прослойки.

Rsbuild, Rspack, Webpack, Modern.js, Next.js и Vite уже поддержали данный проект и либо используют пакеты @module-federation/* у себя под капотом, либо пишут собственные реализации и плагины на основе общего стандарта.

Для нас это означает то, что наконец проблемы со сложностью добавления микросервисов (микрофронтов) в проект, а также их переиспользование между проектами с разным стеком начинают постепенно исчезать.

🔗 Ссылка на сайт проекта

Подготовка к System design

В последнее время данный формат становится всё более популярным на собеседованиях.

Нашёл сайт, который содержит огромное количество материала для подготовки, граф знаний, а также возможность выбрать конкретный трек (специализация, время на подготовку, уровень развития) и отслеживать прогресс продвижения по темам.

🔗 Ссылка на сайт

Топ донатов месяца

По традиции благодарю всех, кто поддержал проект в этом месяце!

Boosty:
🔥 @romaahs - серебряная подписка
🔥 @EmberIsReal - бронзовая подписка
🔥 @prodiusserj - бронзовая подписка

Телеграм:
⭐️ @maunsh 12 звёздочек

Скидка на подписку Boosty 🤟🏻

Судя по реакциям под предыдущим постом было много желающих, поэтому в этом месяце я решил сделать скидку и по самой дешёвой подписке дать сразу 4 часа на личные встречи (~4 моковых собеседования или ~6 встреч по прочим вопросам).

Количество ограничено, больше трёх человек не смогу набрать. Тем, кто уже оформил подписку, время также докину, чтобы было честно.

Если вы новенький на канале, то напомню, что я помогаю с:
1) Подготовкой к собеседованиям (провожу сам)
2) Карьерным ростом
3) Обучением с нуля
4) Генерацией технических собеседований
5) Составлением резюме
6) Составлением легенды
7) И многим другим

Также даю доступ к:
1) Документации со всеми актуальными вопросами и задачами для подготовки
2) Закрытому каналу, в котором публикую посты с исследованиями рынка и другой полезной информацией
3) Закрытому чату, в котором вы можете тренироваться с другими участниками

🔗 Ссылка на Boosty

Новый meta тег

Chrome в 146 версии добавил

<meta name="text-scale" content="scale" />

Он позволяет указать браузеру, что при расчёте размеров на странице, он должен учитывать системный размер текста пользователя и автоматически в соответствии с этим увеличивать или уменьшать корневой font-size. То есть, если пользователь в настройках браузера или устройства установил шрифт в 30 пикселей, то и font-size для <html> элемента на странице в обязательном порядке должен стать 30px.

Проблема заключается в том, что даже если вы пользуетесь rem и em единицами измерения, современные мобильные браузеры могут самостоятельно решить какого размера будет итоговый шрифт и, к примеру, пользователь с проблемами со зрением, включивший увеличенный шрифт в настройках своего устройства, может получить такой же мелкий текст, как и обычный пользователь.

🔗 Видео обзор от канала HTMHell
⚙️ Поддержка браузерами (пока таблицу на caniuse не завезли)

Итераторам добавлен новый метод

Chrome в 146 версии представил Iterator.concat, с помощью которого теперь можно объединять несколько итераторов в один по аналогии с массивами.

Кстати, возможно вы не знали, но при помощи генераторов и итераторов мы можем строить "ленивые цепочки" операций над массивами.

Представим следующий код:

Array.from({ length: 10 }, (_, i) => i)  
  .map(a => a + 10)                      
  .filter(a => a % 2 === 0)             
  .slice(0, 2)                          
  .forEach(a => console.log(a));        

На каждом этапе мы снова и снова проходимся по одним и тем же элементам, а также вновь создаём новые и новые массивы на основе предыдущих, хотя по итогу нам понадобятся только первые 2 элемента. Оптимизация страдает, не так ли?

При помощи генераторов и итераторов мы можем реализовать что-то вроде этого:

pipe(
  range(10),
  map((a) => a + 10),
  filter((a) => a % 2 === 0),
  take(2),
  each((a) => console.log(a)),
);

Как итог, получим всего один проход, вместо множества, а также кучу высвободившейся памяти, которая ранее была занята промежуточными массивами.

🔗 Полифил
⚙️ Поддержка браузерами средняя

Modern CSS

Нашёл интересный сайт с наглядным представлением того, как HTML и CSS уже не нужно писать в 2026 году.

Также у них есть ряд примеров, визуализирующих современные возможности этих технологий. Очень удобная штука, особенно, если вы ещё ничего не пробовали из этого.

🔗 Ссылка на сайт

Basewatch

Инструмент предоставляет возможность подписаться на тот или иной браузерный API и получить push уведомление или сообщение на почту, когда его поддержка переступит определённый процент.

В поиске можно найти любую фичу и получить информацию о её поддержке.

Данные собираются из:
1) CanIUse
2) Web Platform Baseline
3) MDN Browser Compat Data
4) Chrome Status

🔗 Ссылка на инструмент

Новая цветовая функция

Chrome в 147 версии добавил функцию contrast-color(), которая возвращает контрастный цвет переданному цветовому значению.

Всего возвращаемых цвета два: чёрный и белый.

Это может быть полезно в том случае, если у вас произвольный фон и вы хотите иметь возможность автоматически подстраивать цвет текста под него:

.button {
  background: var(--button-color);
  color: contrast-color(var(--button-color));
}

Ранее подобные манипуляции нам были доступны при помощи свойств filter и mix-blend-mode, но их возможности были сильно ограничены.

⚙️ Поддержка браузерами