Vitest 5 помогает выяснить, куда уходит время тестового прогона

Медленный запуск не всегда означает медленные проверки. Основное время может занимать создание окружения, импорт модулей или преобразование файлов. В Vitest 5 разбивка длительности показывает доли этих этапов, а vitest doctor запускает набор с альтернативными конфигурациями и предлагает варианты ускорения.

Для Browser Mode появился Trace View: он записывает взаимодействия, проверки и снимки DOM. После сбоя можно пройти тест по шагам в интерфейсе браузера или HTML-отчёте, в том числе после запуска в CI.

Перед обновлением полезно сохранить замер текущего прогона и свериться с руководством по миграции. В опубликованных бенчмарках выигрыш отличается по окружениям и пулам: одного обещанного процента для любого проекта здесь нет.

Часть запросов можно обработать без запуска Service Worker

Service Worker умеет отдавать ресурсы из кеша, но его запуск тоже занимает время. Если маршрут заранее известен, не обязательно поднимать обработчик только для решения «сеть или кеш».

Static Routing API позволяет зарегистрировать правила через InstallEvent.addRoutes() во время установки воркера. Для подходящих запросов браузер использует заданный маршрут и может обратиться напрямую к сети или кешу, минуя запуск Service Worker.

В сентябрьском обзоре веб-платформы отмечена поддержка в Safari 27; API также есть в Chromium. Firefox пока его не поддерживает. При внедрении нужно сохранить обычную обработку запросов как запасной вариант и измерить навигацию, когда воркер ещё не запущен.

🧑‍💻 Какие навыки помогают вам в разработке в 2026 году?

Что вы чаще используете в работе? В каких задачах помогает ИИ, а где проще справиться самостоятельно?

Мы решили собрать портрет современного разработчика — и приглашаем вас поделиться своим опытом. Расскажите, какие навыки вам пригодились и как вы используете ИИ. Если обходите его стороной, нам тоже интересно узнать почему.

Опрос анонимный и займёт около 5 минут. Результаты опубликуем в общем большом исследовании.

👉 Пройти опрос

Перелистывание веб-журнала можно собрать из живого HTML

Эффект загиба страницы обычно рисуют через Canvas или WebGL. Если содержимое превращается в картинку, выделение текста и работа ссылок требуют отдельного решения. В эксперименте с `<hic-pageflip>` автор использует HTML-in-Canvas, чтобы передать живые DOM-элементы в графику.

Внутри компонента страницы задаются тегами <hic-pageflip-page>. Для объёмного загиба используется WebGL, а управление доступно через методы next(), previous() и goToPage(). В демо можно выделять текст и переходить по ссылкам на странице.

Технология ещё меняется. Для просмотра нужен Chrome с флагом canvas-draw-element, поэтому сейчас это материал для прототипа и знакомства с API. Доступность и работу ввода придётся проверять отдельно, если решите повторить эксперимент.

Как плавно переставлять карточки Grid при изменении ширины

Когда число колонок меняется, карточки обычно прыгают на новые места. Брамус показал вариант на CSS Anchor Positioning и обычных transitions: видимое содержимое привязывается к обёртке, которая занимает ячейку Grid.

Обёртка получает anchor-name и anchor-scope, содержимое позиционируется абсолютно через inset: anchor(inside). Переход для inset сглаживает смену координат. Явные ширина и высота карточки не дают ей растягиваться во время движения.

Анимация может менять направление прямо в процессе, если продолжить сужать или расширять окно. В Firefox этот приём пока не даёт плавного перехода: значение anchor() обрабатывается иначе. Проверьте демо в целевых браузерах и оставьте рабочую сетку для варианта без анимации.

Chrome начал открывать JPEG XL: где пригодится новый формат

В Chrome 155 появилась поддержка декодирования .jxl. Формат умеет сжатие без потерь, HDR и постепенную загрузку изображения — полезный набор для сайтов с фотографиями высокого качества.

В разборе команды Chrome есть интересная техническая деталь: декодер написали на Rust. Изображения приходят из сети как недоверенные данные, поэтому безопасность работы с памятью стала одним из условий возвращения формата в браузер.

Google советует пробовать и JPEG XL, и AVIF. Для своего набора изображений стоит сравнить размер файла, качество и скорость декодирования. Заявленное преимущество перед JPEG не означает, что .jxl окажется самым компактным вариантом для каждой картинки.

Почему горизонтальная прокрутка мешает закрепить заголовок таблицы

Таблице задали overflow-x: auto, первой колонке — left: 0, заголовку — top: 0 и position: sticky. Колонка закрепилась, а заголовок не держится у верхнего края страницы. Контейнер фактически стал прокручиваемым по обеим осям.

В разборе одноосевых scroll containers показано новое поведение overflow: auto clip. Обёртка отвечает за горизонтальную прокрутку, а sticky-заголовок по вертикали ориентируется на прокрутку документа.

Для проверки поддержки нужен @supports named-feature(single-axis-scroll-container): проверка одного синтаксиса overflow не подтверждает нужное поведение. Статья посвящена тестированию функции в Beta, Dev и Canary; отдельно стоит проверить скролл из JavaScript и минимальные размеры элементов Grid/Flex.

Общая папка для работы Claude Code и Codex

Луи-Франсуа Бушар собрал заметки, инструкции-скиллы, скрипты и итоги встреч в Obsidian. Его связка устроена так:

Папка хранит исходные материалы и решения
↓
Индекс указывает, где искать данные для задачи
↓
Claude Code планирует работу
↓
Codex выполняет задачи по его вызову

В описании этого рабочего процесса Бушар объясняет, зачем даёт агенту сведения для конкретной задачи. Начать предлагает с общей папки, короткого индекса и одного повторно используемого скилла.

#ии #инструменты

W3C убрал лишние обёртки из своей дизайн-системы

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

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

Размеры текста заданы девятью CSS-переменными и плавно меняются вместе с шириной экрана. Старые классы сохранили для совместимости. Там, где это было уместно, добавили логические свойства CSS, чтобы стили учитывали направление текста.

Как задать странице список разрешённых сетевых адресов

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

В Chrome 152 появился Connection-Allowlist: HTTP-заголовок с разрешёнными URL-паттернами. Браузер проверяет адрес назначения и блокирует соединения за пределами списка. По умолчанию также заблокированы редиректы и WebRTC — их нужно разрешать явно.

Внедрение можно начать с Connection-Allowlist-Report-Only и настроенного Reporting API: получать отчёты о нарушениях без блокировки запросов. Для недоверенного кода Google рекомендует отдельный cross-origin или sandboxed iframe с собственной политикой. Механизм дополняет существующую настройку CSP.

SvelteMap умеет создавать значение при первом обращении

Чтобы сгруппировать элементы по ключу, часто приходится сначала вызвать has(), затем создать пустой массив через set() и снова получить его через get(). Этот шаблон повторяется в кэшах и коллекциях интерфейса.

В Svelte 5.57 у реактивной SvelteMap появились getOrInsert и getOrInsertComputed. Первый возвращает существующее значение или вставляет переданное. Второй вызывает функцию создания только для отсутствующего ключа.

Например, groups.getOrInsertComputed(category, () => []) вернёт массив нужной группы, создав его при первом обращении. При этом значения внутри SvelteMap не становятся глубоко реактивными автоматически: если меняете содержимое массива, нужно отдельно продумать, как интерфейс узнает об обновлении.

Почему мы пишем своё, когда браузер уже умеет

Разработчик ищет компонент модального окна, хотя в HTML есть <dialog>. Или подключает библиотеку для поведения, которое можно описать в CSS. За этим выбором бывают вполне понятные причины.

В эссе Nolan Lawson разобраны привычки, качество документации и удобство интеграции. Готовая библиотека может предлагать знакомый интерфейс и подробные примеры, а самостоятельная реализация — давать возможность разобраться в механике и попробовать свои идеи.

Автор отмечает и обратную сторону: знание платформы помогает убрать лишний код и снизить стоимость сопровождения. На примере диалога хорошо видно, сколько поведения придётся учесть вручную: клавишу Esc, удержание фокуса внутри окна и его возврат после закрытия.

Как удержать иконку у первой строки длинной подписи

В списке с align-items: center иконка выглядит нормально, пока подпись занимает одну строку. После переноса она оказывается посередине всего текста. Переключение на start поднимает её вверх, но не центрирует относительно первой строки.

Ахмад Шадид предлагает рассчитывать смещение через высоту строки и размер иконки: calc((1lh - var(--size)) / 2). Значение передают в translateY(). При изменении шрифта или размера значка отступ пересчитывается вместе с ними.

Для иконки в псевдоэлементе дополнительно нужны flex-shrink: 0 и квадратное соотношение сторон через aspect-ratio: 1: длинная подпись не должна сжимать значок.

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

CSS-значения можно читать в JavaScript как объекты

getComputedStyle() возвращает строки. Чтобы прибавить отступ или изменить размер, приходится разбирать число и единицу измерения. С calc() и трансформациями такая обработка быстро усложняется.

CSS Typed OM представляет значения объектами. Через computedStyleMap() можно получить CSSUnitValue с полями value и unit, а через attributeStyleMap — записать значение, созданное с помощью CSS.px() или CSS.number().

Брамус выпустил полифилл css-typed-om. Его можно подключить глобально или импортировать отдельные классы в модуль. По замерам автора, реализация проходит около 95% подтестов Web Platform Tests для Typed OM.

Поддержка API и отдельных классов различается между браузерами. Полифилл использует CSS-парсер браузера для проверки свойств, поэтому результат зависит и от его возможностей. Перед внедрением стоит проверить именно те значения, с которыми работает ваш компонент.

Как перенести сайт на Astro, сохранив React-компоненты

Evil Martians перенесли сайт с Gatsby на Astro, сохранив существующие React-компоненты и обработку содержимого блога. Content collections заменили GraphQL-слой, а новые маршруты постепенно появлялись рядом со старыми в одном репозитории.

Быстрый перенос подготовили заранее. Обработку изображений сначала вынесли в imgproxy ещё на Gatsby: холодная сборка сократилась с 18 до 4 минут. Затем создали воспроизводимую сборку и снимки результата, чтобы сравнивать страницы после изменений.

В разборе миграции команда объясняет, как использовала Claude и проверяла его работу. Сравнение готового HTML помогало замечать изменения, которые легко пропустить при чтении сгенерированного кода.

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

Поле ввода, которое помнит формулу и показывает ответ

В форму нужно внести число, которое сначала приходится вычислить. После копирования ответа из калькулятора исходные значения теряются: при повторной проверке непонятно, откуда взялся результат.

Компонент calc-input позволяет написать 2 + 3 прямо в поле. Пока оно в фокусе, видна формула; после потери фокуса — ответ 5. При возвращении к полю выражение снова доступно для редактирования.

Внутри используются обычные текстовые input в Light DOM и отдельный парсер выражений без eval(). Незаконченная формула вызывает setCustomValidity() и блокирует обычную отправку формы.

Атрибут submit определяет, что попадёт на сервер: формула, результат или оба значения. Это стоит настроить явно: по умолчанию в основном поле отправляется формула. Компонент пригодится в интерфейсах с размерами, количествами и расчётными параметрами.