Веб-страница 🕘 история названий (1)

Gran Turismo 4 переехала в Chrome — с гонками, звуком и сохранениями В PS2 Web Recomp старые игры запускают прямо во вкладке. Gran Turismo 4 проходит меню и гонки, играет музыку и сохраняет прогресс в браузере. По замерам автора, PAL-версия держит 50 FPS в Chrome на встроенной графике ноутбука при удвоенном разрешении PS2. Машинный код игры заранее переводят в C++, затем собирают в WebAssembly. Графику рисует WebGPU, а окружение воспроизводит нужные части системы и железа PS2. После Gran Turismo автор запустил God of War II: вторая игра помогла найти ошибки, которых первая не замечала. 📎 В репозитории проекта есть код, скрипты сборки и подробности оптимизации. Готового каталога игр здесь нет: понадобится свой образ диска, который скрипты превратят в локальную веб-страницу.

Как плавно переставлять карточки Grid при изменении ширины Когда число колонок меняется, карточки обычно прыгают на новые места. Брамус показал вариант на CSS Anchor Positioning и обычных transitions: видимое содержимое привязывается к обёртке, которая занимает ячейку Grid. Обёртка получает anchor-name и anchor-scope, содержимое позиционируется абсолютно через inset: anchor(inside). Переход для inset сглаживает смену координат. Явные ширина и высота карточки не дают ей растягиваться во время движения. Анимация может менять направление прямо в процессе, если продолжить сужать или расширять окно. В Firefox этот приём пока не даёт плавного перехода: значение anchor() обрабатывается иначе. Проверьте демо в целевых браузерах и оставьте рабочую сетку для варианта без анимации.

Перелистывание веб-журнала можно собрать из живого HTML Эффект загиба страницы обычно рисуют через Canvas или WebGL. Если содержимое превращается в картинку, выделение текста и работа ссылок требуют отдельного решения. В эксперименте с `<hic-pageflip>` автор использует HTML-in-Canvas, чтобы передать живые DOM-элементы в графику. Внутри компонента страницы задаются тегами <hic-pageflip-page>. Для объёмного загиба используется WebGL, а управление доступно через методы next(), previous() и goToPage(). В демо можно выделять текст и переходить по ссылкам на странице. Технология ещё меняется. Для просмотра нужен Chrome с флагом canvas-draw-element, поэтому сейчас это материал для прототипа и знакомства с API. Доступность и работу ввода придётся проверять отдельно, если решите повторить эксперимент.

🧑‍💻 Какие навыки помогают вам в разработке в 2026 году? Что вы чаще используете в работе? В каких задачах помогает ИИ, а где проще справиться самостоятельно? Мы решили собрать портрет современного разработчика — и приглашаем вас поделиться своим опытом. Расскажите, какие навыки вам пригодились и как вы используете ИИ. Если обходите его стороной, нам тоже интересно узнать почему. Опрос анонимный и займёт около 5 минут. Результаты опубликуем в общем большом исследовании. 👉 Пройти опрос

Часть запросов можно обработать без запуска Service Worker Service Worker умеет отдавать ресурсы из кеша, но его запуск тоже занимает время. Если маршрут заранее известен, не обязательно поднимать обработчик только для решения «сеть или кеш». Static Routing API позволяет зарегистрировать правила через InstallEvent.addRoutes() во время установки воркера. Для подходящих запросов браузер использует заданный маршрут и может обратиться напрямую к сети или кешу, минуя запуск Service Worker. В сентябрьском обзоре веб-платформы отмечена поддержка в Safari 27; API также есть в Chromium. Firefox пока его не поддерживает. При внедрении нужно сохранить обычную обработку запросов как запасной вариант и измерить навигацию, когда воркер ещё не запущен.

Vitest 5 помогает выяснить, куда уходит время тестового прогона Медленный запуск не всегда означает медленные проверки. Основное время может занимать создание окружения, импорт модулей или преобразование файлов. В Vitest 5 разбивка длительности показывает доли этих этапов, а vitest doctor запускает набор с альтернативными конфигурациями и предлагает варианты ускорения. Для Browser Mode появился Trace View: он записывает взаимодействия, проверки и снимки DOM. После сбоя можно пройти тест по шагам в интерфейсе браузера или HTML-отчёте, в том числе после запуска в CI. Перед обновлением полезно сохранить замер текущего прогона и свериться с руководством по миграции. В опубликованных бенчмарках выигрыш отличается по окружениям и пулам: одного обещанного процента для любого проекта здесь нет.

Shopify начал отправлять HTML до завершения рендеринга страницы Раньше браузер ждал, пока сервер соберёт и head, и остальные секции шаблона. Теперь подходящие Liquid-страницы отправляют начало документа сразу: браузер уже ищет стили и шрифты, пока сервер продолжает готовить содержимое. У медианного магазина TTFB на 75-м перцентиле снизился примерно на 29%. Видимые метрики FCP и LCP улучшились скромнее: на 2–6%. Ранний первый байт помогает начать работу, но эффект зависит от того, какие ресурсы попали в первую часть ответа. В разборе Shopify сравнивают темы Dawn и Horizon и показывают ограничения стриминга. Для своей темы стоит проверить расположение stylesheet и preload относительно content_for_header: если ссылки придут во второй части HTML, браузер начнёт скачивание позже.

Почему мобильная клавиатура прячет панель с 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 и предусмотреть поведение для браузеров без этой настройки.

Почему сотни маленьких JS-чанков тоже могут замедлять сайт Один большой бандл заставляет каждую страницу скачивать код всего приложения. Отдельный бандл на маршрут дублирует общие компоненты. Если же разнести каждый модуль в свой файл, браузер получит сотни запросов, а сжатие будет хуже находить повторяющиеся фрагменты. Команда Next.js разобрала, как Turbopack выбирает между этими расходами. Он учитывает группы чанков, которые загружаются вместе, и оценивает объединение с учётом переходов между страницами и повторного использования кода из кеша. Разбор полезен, когда вкладка Network заполнена файлами и хочется «просто уменьшить их количество». Сначала посмотрите, какой код нужен первому экрану, что переиспользуется на соседних маршрутах и сколько посетитель скачивает за весь сценарий.

Диаграмму Mermaid можно положить прямо в HTML Для схемы запросов или графа зависимостей часто хватает нескольких строк Mermaid. Компонент `<mermaid-element>` позволяет поместить этот текст в HTML: подключаете модуль, добавляете тег и записываете внутри описание диаграммы. По умолчанию компонент загружает Mermaid через jsDelivr по требованию и рисует схему в Shadow DOM. Несколько диаграмм на странице используют одну загрузку библиотеки. Через атрибут mermaid можно закрепить версию или указать собственный адрес. Если Mermaid уже входит в сборку приложения, свою копию можно передать через MermaidElement.defaultMermaid. Тогда дополнительный запрос к CDN не понадобится. В статье есть песочница, где можно собрать пример и сразу скопировать получившийся HTML.