Как измерить медленный переход внутри SPA в Chrome DevTools

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

В сентябрьском обновлении Chrome анализ soft navigation появился в Insights панели Performance. Теперь такие переходы можно разбирать вместе с уже доступными метриками и временной шкалой. Запишите переход от клика до нового экрана и посмотрите, какие задачи и загрузки приходятся на этот участок.

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

В React 19.3 можно анимировать смену содержимого через ViewTransition

Компонент <ViewTransition> связывает обновления React с браузерными переходами. Оберните меняющийся участок интерфейса и обновите состояние внутри startTransition: по умолчанию старое содержимое плавно сменится новым. Анимации можно настроить через CSS или Web Animations API.

Обычные срочные обновления состояния переход не запускают. Анимация срабатывает для startTransition, раскрытия Suspense и обновлений через useDeferredValue. Сейчас компонент работает с DOM.

Для загрузки данных в разборе React 19.3 есть полезная настройка: <ViewTransition update="auto" default="none">. Она позволяет анимировать смену заглушки на готовое содержимое, сохраняя мгновенное появление самой заглушки и уже закешированного интерфейса.

iframe научился подстраивать высоту под встроенную страницу

Форма внутри iframe переходит на следующий шаг, становится выше и получает собственную полосу прокрутки. В Chrome 154 для этого появился `frame-sizing`: например, content-height позволяет подбирать высоту по содержимому встроенного документа.

Одного CSS у родителя недостаточно. Страница внутри iframe должна разрешить передачу размера через <meta name="responsive-embedded-sizing" content="allow-origins=*">. Вместо звёздочки можно ограничить список разрешённых источников. После изменения содержимого новый размер передают вызовом window.requestResize().

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

Мы тут балуемся немножко. Присоединяйтесь

Давайте сыграем в айтишную каламбурю!

Правила простые: берём любой термин, название компании или имя известного айтишника и делаем из него каламбур.

Я начинаю — вы подхватываете: Ада Лавпринглс

Как убрать dist из опубликованного npm-пакета

Папка dist удобна для сборки, но её название может попасть в публичные пути, особенно при загрузке файлов через CDN. Команда npm publish ./dist позволяет опубликовать содержимое этой папки как корень пакета.

Перед этим в dist нужно положить package.json, README и лицензию. Пути в копии package.json тоже меняются: ./dist/index.js становится ./index.js. Иначе пакет будет искать файлы в несуществующей вложенной папке.

В разборе публикации из подпапки автор автоматизирует подготовку после сборки и отдельно защищается от привычной команды npm publish, которая опубликует корень проекта. Перед первым релизом состав пакета можно проверить через npm publish ./dist --dry-run и npm pack ./dist.

От чатбота к агентам: опыт Митчелла Хашимото

Для работы с кодом Хашимото перешёл от отдельного чата к агенту, который читает файлы проекта и запускает программы. После этого начал повторять собственную работу: сначала решал задачу сам, затем давал её агенту без готового решения.

Так он выяснял, какие задачи можно поручать ИИ. Дальше добавлял инструкции в AGENTS.md, файл с правилами проекта, и способы проверить изменения, включая запуск тестов.

В истории освоения ИИ в разработке Хашимото связывает выбор задач с настройкой рабочего окружения. Отдельные чаты при этом остались в его повседневной работе.

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

Как добавить в поиск фильтры вида author: и year:

В поиске GitHub обычный текст соседствует с фильтрами ключ:значение. Веб-компонент `<rich-input>` переносит этот шаблон на свой сайт: подсказывает названия фильтров и допустимые значения, подсвечивает структуру запроса и отмечает неверный ввод.

Настройки задаются через вложенные <datalist>. Компонент участвует в обычной отправке формы и работает с FormData, поэтому поле можно встроить в существующий интерфейс без привязки к конкретному фреймворку.

В Chromium 152+ подсветка и расположение подсказок используют OpaqueRange внутри нативного input. Для других браузеров автор предусмотрел вариант с contenteditable. Заявленная поддержка начинается с Chromium 105, Safari 17.2 и Firefox 140; ввод, выделение и отправку формы стоит проверить в целевых браузерах.

Диаграмму Mermaid можно положить прямо в HTML

Для схемы запросов или графа зависимостей часто хватает нескольких строк Mermaid. Компонент `<mermaid-element>` позволяет поместить этот текст в HTML: подключаете модуль, добавляете тег и записываете внутри описание диаграммы.

По умолчанию компонент загружает Mermaid через jsDelivr по требованию и рисует схему в Shadow DOM. Несколько диаграмм на странице используют одну загрузку библиотеки. Через атрибут mermaid можно закрепить версию или указать собственный адрес.

Если Mermaid уже входит в сборку приложения, свою копию можно передать через MermaidElement.defaultMermaid. Тогда дополнительный запрос к CDN не понадобится. В статье есть песочница, где можно собрать пример и сразу скопировать получившийся HTML.

Почему сотни маленьких JS-чанков тоже могут замедлять сайт

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

Команда Next.js разобрала, как Turbopack выбирает между этими расходами. Он учитывает группы чанков, которые загружаются вместе, и оценивает объединение с учётом переходов между страницами и повторного использования кода из кеша.

Разбор полезен, когда вкладка Network заполнена файлами и хочется «просто уменьшить их количество». Сначала посмотрите, какой код нужен первому экрану, что переиспользуется на соседних маршрутах и сколько посетитель скачивает за весь сценарий.

Почему мобильная клавиатура прячет панель с position: fixed

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

Директива interactive-widget=resizes-content в viewport meta позволяет уменьшать обе области. Пример: <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">. В разборе viewport и interactive-widget показано, как это меняет положение фиксированных элементов.

Поддержка есть в Chrome и Firefox на Android. В сентябрьском разборе автор проверил реализацию в WebKit, но она ещё не была доступна в публичном Safari. Форму с нижней панелью всё равно нужно проверить на iPhone и предусмотреть поведение для браузеров без этой настройки.

Shopify начал отправлять HTML до завершения рендеринга страницы

Раньше браузер ждал, пока сервер соберёт и head, и остальные секции шаблона. Теперь подходящие Liquid-страницы отправляют начало документа сразу: браузер уже ищет стили и шрифты, пока сервер продолжает готовить содержимое.

У медианного магазина TTFB на 75-м перцентиле снизился примерно на 29%. Видимые метрики FCP и LCP улучшились скромнее: на 2–6%. Ранний первый байт помогает начать работу, но эффект зависит от того, какие ресурсы попали в первую часть ответа.

В разборе Shopify сравнивают темы Dawn и Horizon и показывают ограничения стриминга. Для своей темы стоит проверить расположение stylesheet и preload относительно content_for_header: если ссылки придут во второй части HTML, браузер начнёт скачивание позже.

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 окажется самым компактным вариантом для каждой картинки.