Веб-страница

Как не потерять языковые страницы из-за слеша в URL Китайские страницы сайта исчезли из поиска, хотя канонические адреса указывали на них правильно. Причиной оказалось расхождение в одном символе: в canonical стоял завершающий слеш, а в sitemap его не было. Cloudflare дополнительно переписывал адреса, поэтому Google объединял китайскую страницу с английской. После синхронизации URL число ошибок в Search Console упало до нуля примерно за три дня. Весь разбор сбоя и исправления пригодится при запуске многоязычного сайта. Перед релизом сравните canonical, перекрёстные ссылки hreflang и записи sitemap посимвольно: регистр, завершающий слеш и обработка параметров запроса должны совпадать. Затем проверьте правила нормализации URL в Cloudflare и плагинах, которые меняют атрибуты href. Такую сверку лучше добавить в сборку и останавливать её при первом расхождении.

Как собирать демо продукта на React вместо записи экрана Remotion превращает видео в React-композицию: useCurrentFrame() задаёт текущий кадр, interpolate() меняет значения по ходу ролика, а Sequence размещает сцены на временной шкале. Результат рендерится в MP4 через Chrome без интерфейса и FFmpeg. В разборе рабочего процесса с Remotion интерфейс пришлось отделить от состояния: компоненты получают данные через props, а действия пользователя заменяет сценарий с номерами кадров. Начальная настройка заняла около 85 минут, зато следующие ролики используют те же компоненты, тестовые данные и временную шкалу. Такой подход пригодится для повторяемых обзоров функций и списков изменений: обновляете объект с данными, запускаете npx remotion render и получаете новый ролик без повторной записи кликов.

В Safari Technology Preview 253 исправили повторное озвучивание текста В Safari Technology Preview 253 исправили сбой: VoiceOver мог снова и снова произносить одно и то же содержимое live region, пока текст поступал на страницу. Такие области используют aria-live, чтобы скринридер сообщал об обновлениях без перевода фокуса, например в ответах веб-чата. Исправление доступно только в тестовой сборке для macOS Golden Gate и macOS Tahoe. Переносить результат на стабильный Safari пока нельзя. Если поддерживаете чат или другой интерфейс с потоковым текстом, сравните одну и ту же область aria-live в стабильном Safari и Technology Preview с VoiceOver. Так можно проверить, исчезли ли повторы и не потерялись ли новые фрагменты ответа.

Как связать TanStack Router и Query для загрузки данных до рендера Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать. Связка разделяет обязанности. loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением. Практическую схему интеграции Router и Query стоит открыть, когда один запрос обслуживает несколько экранов и загрузку нужно отделить от рендера.

Как отменять устаревшие fetch-запросы в автодополнении Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера. В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок. Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом.

Как управлять каскадом CSS через @layer и :where() В большом проекте порядок стилей можно зафиксировать прямо в CSS: @layer reset, base, components, utilities;. Обычное правило из более позднего слоя победит правило из раннего независимо от специфичности. Поэтому утилита сможет переопределить стиль компонента без усложнения селектора и добавления !important. Для базовых правил пригодится :where(): он выбирает элементы, но не повышает специфичность. Например, обёртка :where(nav a) оставит ссылкам нулевой вес селектора, и компонент легко задаст собственное оформление. При внедрении сначала разложите reset, базу, компоненты и утилиты по слоям. Затем проверьте два исключения: обычные правила вне слоёв сильнее правил внутри них, а для !important порядок слоёв разворачивается. Примеры современного CSS без сборки помогут сверить схему на рабочем коде.

Как читать падение доли сайтов с хорошим INP в CrUX В августе 2026 года доля сайтов с хорошим INP снизилась с 85,7% до 85,3%. С марта показатель упал с 87,2%, но Chrome пока не объяснил причину. CrUX считает скользящее среднее за 28 дней по данным пользователей Chrome. В августовской выборке сайтов стало на 1,3% больше, поэтому общий спад не доказывает проблему конкретного проекта. Если ваш INP ухудшился, сравните страницы, действия, устройства, браузеры и релизы. Затем проверьте размер и состав выборки, а не только 75-й перцентиль.

В Streamux реализовали HTTP/2-сервер на Go по RFC 9113 Разработчик собрал сервер с обработкой кадров, HPACK-сжатием заголовков, состояниями потоков, управлением потоком и обязательным TLS. Реализация проходит 145 из 146 тестов h2spec. Так можно заглянуть в транспортный слой, который веб-фреймворки обычно скрывают за API. Отдельная находка — планировщик приоритетов из RFC 9218. Браузеры передают для запросов приоритет u=N, а Streamux распределяет пропускную способность между уровнями срочности: навигация и главное изображение получают её раньше аналитических пикселей. В тесте с 50 одновременными потоками и окном 16 КиБ передача завершилась на 40% быстрее обычного кругового обхода. Разбор Streamux пригодится, если хотите понять, как HTTP/2 выбирает следующий поток, и посмотреть реализацию без слоя фреймворка.

Как замечать проблемы доступности ещё на этапе макета Даже аккуратный интерфейс исключает людей, если текст нельзя увеличить, контент лишён субтитров, а навигация не имеет предсказуемого шаблона. Держать все требования в памяти трудно, поэтому автор предлагает проверять дизайн через персон с конкретными ограничениями. На ревью назначьте «несогласного». Этот участник должен спросить, сможет ли человек со слабым зрением настроить экран, пользователь с аутизмом освоить повторяющийся шаблон, а глухой пользователь понять контент. Найденные барьеры затем сверяют с WCAG 2.2 или правилами нужной платформы. Готовые персоны и схема проверки помогают встроить доступность в обсуждение каждого макета, а не вспоминать о ней отдельно.

Как хранить прогресс просмотра в веб-плеере без бэкенда В разборе личного проекта HikariPlay Bhaumic Singh показывает, как сделал «Продолжить просмотр» для плеера на Svelte 5, SvelteKit и TypeScript. Позиция видео хранится в localStorage, поэтому аккаунт и запись данных на сервер не нужны. Плеер сохраняет текущую секунду при паузе, скрытии вкладки и перед закрытием страницы. При следующем открытии он читает значение и перематывает видео к месту остановки. Индикатор продолжения появляется, только если прошло больше 5 секунд, но просмотрено меньше 95%: почти законченные титры не предлагают возобновлять. Подход пригодится для локального медиаплеера или небольшого веб-приложения, где достаточно памяти одного браузера. Между устройствами прогресс не синхронизируется. Плеер помнит секунду остановки, хотя после перерыва зрителю может понадобиться другой фрагмент.