Вышел 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, но их возможности были сильно ограничены.

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

Квадратный web уже в прошлом

Chrome в 147 версии добавил свойство border-shape (не путать с corner-shape, о котором писал ранее). Оно позволяет задать рамку элементу, не опираясь на 4 угла прямоугольника. Можно сделать хоть треугольник, хоть звезду, хоть облачко. Что душе угодно.

Например, нарисуем пятиконечную звезду:

.star {
  border: 15px solid #8ab4ff;
  border-shape: path("M 50 5 L 61 35 L 95 35 L 67 57 L 78 90 L 50 70 L 22 90 L 33 57 L 5 35 L 39 35 Z");
 }

Возможные значения почти все те же, что мы ранее использовали с clip-path (circle(), ellipse(), inset() и другие), но, в отличие от clip-path, мы не обрезаем элемент по форме, а самостоятельно рисуем ему рамку.

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

border-shape: circle(50%) padding-box;

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

border-shape: inset(10%) circle(50%); 

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

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

Революция в мире псевдоэлементов

Chrome в 147 версии завёз нам CSSPseudoElement, а это значит, что теперь мы можем обращаться к псевдоэлементам программно через JS.

Ранее мы не могли:
1) Напрямую получить / перезаписать стили псевдоэлемента
2) Отследить его существование или изменение
3) Использовать Web Animations
4) Получить getBoundingClientRect()
5) И многое другое

Теперь это делается парой строчек:

const div = document.querySelector('div');
const before = div.pseudo('::before');

console.log(before.type);    // "::before"
console.log(before.element);  // исходный <div>
console.log(before.parent);   // непосредственный родитель

Также теперь появилась возможность отслеживать был ли клик или другое событие произведено по псевдоэлементу, наравне с привычным event.target:

box.addEventListener('click', (event) => {
  console.log(event.target);        // <div class="box">
  console.log(event.pseudoTarget);  // CSSPseudoElement или null
});

На данный поддерживается 3 типа событий:
1) UIEvent
2) AnimationEvent
3) TransitionEvent

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

Точные вычисления

Chrome в 147 версии завезли новую функцию Math.preсise(), которая решает проблему сложения больших чисел.

Раньше:

const sum = 1e20 + 0.1 - 1e20; // 0

Сейчас:

const sum = Math.sumPrecise([1e20, 0.1, -1e20]); 
// 0.1

Но стоит упомянуть, что он по-прежнему не решает проблему сложения чисел с плавающей точкой:

console.log(Math.sumPrecise([0.1, 0.2])); 
// 0.30000000000000004

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

Забытые и неизведанные методы JSON

Только сегодня узнал, что оказывается существуют такие методы как JSON.rawJSON() и JSON.isRawJSON()

Первый позволяет пометить JSON как "неэкранируемый" и при JSON.stringify() вставить его как есть, а второй — проверить, была ли ранее строка пропущена через JSON.rawJSON().

Без JSON.rawJSON():

JSON.stringify({ data: '{"a":1}' });

// '{"data":"{\"a\":1}"}'

С ним:

const raw = JSON.rawJSON('{"a":1}');

JSON.stringify({ data: raw });

// '{"data":{"a":1}}'

⚙️ Поддержка браузерами (JSON.rawJSON(), JSON.isRawJSON())