Посты канала Веб-страница

publint отличает пропавший файл от исключённого из npm-пакета Импорт библиотеки работает в её репозитории, а после установки из npm ломается. Стоит проверить, попали ли файлы из exports в публикуемый пакет. У publint это две разные проблемы. FILE_DOES_NOT_EXIST означает, что указанного файла нет. FILE_NOT_PUBLISHED — файл есть локально, но в публикацию не входит. Вторая диагностика появляется только при локальной проверке. Если у пакета есть сборка, запустите её до проверки. Ещё одна проверка касается порядка условий: types в exports должно идти перед условиями для JavaScript. Успешная проверка упаковки не доказывает, что вся библиотека работает во всех средах. 📎 Правила проверки упаковки publint.

useId связывает поле с подсказкой без повторяющихся ID Если дважды вывести компонент поля с ID подсказки password-hint, один ID встретится в документе несколько раз. Связь поля с описанием станет неоднозначной. useId создаёт ID для таких связей. Его можно передать в aria-describedby поля и в id текста с подсказкой. Описание дополняет доступное имя. При этом label или другой способ дать полю имя всё равно нужен. При SSR дерево компонентов на сервере и клиенте должно совпадать. Для нескольких независимых корней React задайте identifierPrefix. На сервере и клиенте он должен совпадать. Для ключей списка useId не подходит. 📎 Примеры связей и SSR в документации React.

requestVideoFrameCallback вызывает обработчик при новом видеокадре Если вы рисуете видео на canvas через requestAnimationFrame, часть вызовов может приходиться на один и тот же видеокадр. Частота кадров видео может быть ниже частоты обновления экрана. requestVideoFrameCallback вызывает обработчик, когда новый кадр передают композитору. Частота вызовов ограничена меньшим из двух значений: частотой кадров видео и частотой рендера браузера. Для следующего вызова обработчик нужно зарегистрировать заново. В метаданных есть mediaTime, временная отметка кадра в секундах. Это best effort: колбэк может опоздать на один vsync. API не гарантирует точный переход к заданному кадру или синхронизацию кадр в кадр. В источнике указана поддержка Chrome 83, Firefox 132 и Safari 15.4. 📎 Механизм и ограничения API на web.dev.

If-Match не даёт затереть чужую правку Два человека открыли одну запись. Первый сохранил изменения, второй отправил форму со старыми данными. Обычный PUT может затереть первую правку. Если сервер выдаёт ETag и поддерживает If-Match, клиент отправляет тег прочитанной версии вместе с изменением. Сервер сохраняет изменения только при совпадении тега. Устаревший тег приводит к 412 Precondition Failed, и интерфейс может предложить сравнить версии. If-Match использует сильное сравнение. Тег с префиксом W/ не подойдёт, а If-Match: * проверит лишь наличие ресурса. Проверку версии и запись сервер должен выполнять согласованно. Заголовок не заменяет авторизацию. 📎 Условные запросы в MDN.

text-box-trim убирает лишнее место у краёв текста У двух шрифтов с одинаковым размером разные метрики, поэтому подпись может визуально «плавать» внутри кнопки. Отрицательный margin под один шрифт исправляет картинку, пока шрифт не сменился. text-box-trim задаёт, какие края текстового блока подрезать: верхний, нижний или оба. А text-box-edge выбирает метрики, например высоту прописных букв и baseline. На примере MDN границы показывают разницу между trim-end и trim-both. Это не ограничение числа строк и не изменение интервала между всеми строками. Работа идёт с внешними краями текста. MDN отмечает Baseline 2026 с августа, но старые браузеры ещё нужно учитывать. Проверьте результат со сменой шрифта, диакритикой и другими письменностями. 📎 Примеры text-box-trim

focusgroup предлагает отдать стрелочную навигацию браузеру В toolbar обычно нужен один вход по Tab, а между кнопками — переход стрелками. Сейчас ради этого пишут roving tabindex: следят за фокусом и меняют tabindex. Предложение focusgroup переносит эту механику в платформу. В официальном RFC достаточно focusgroup="toolbar", чтобы браузер управлял перемещением фокуса. Переключение pressed state, открытие меню и выполнение команд остаются задачей приложения. Автоматический фокус не реализует поведение кнопок за вас. Пока это эксперимент: для локальной проверки RFC предлагает флаг Experimental Web Platform Features в Chromium, а API может измениться. Сара Суэйдан включила его в пожелания к Interop 2027. Это аргумент в пользу развития примитива, а не обещание стабильной поддержки во всех браузерах. 📎 Демо и описание предложения

В черновике WCAG 3 отделяют требования от практик команды Пройти проверку и дать человеку выполнить задачу — разные результаты. В Working Draft WCAG 3 от 10 сентября 2026 года это различие отражается в новой структуре требований и отчётности. Core requirements задают обязательную основу соответствия. Supplemental requirements описывают дополнительные улучшения, а assertions — документированные заявления о практиках организации. Например, важен не только единичный результат, но и то, как команда регулярно ищет барьеры. Это проект, а не принятый стандарт. WCAG 3 ещё не заменил WCAG 2.2, а детали отчётности продолжают меняться. Полезно обсуждать направление заранее, но строить готовую сертификацию или придумывать баллы по этому черновику рано. 📎 Объяснение Léonie Watson · Working Draft W3C

Одна сцена графика для браузера и серверного SVG Когда график нужен и на странице, и в серверном отчёте, легко получить две реализации с разными подписями и отступами. В Chartist 2 между конфигурацией и выводом есть общая сцена. На сайте показана связка renderToString(toScene(config, size)): сцена превращается в строку SVG, которую можно получить и на сервере. В браузере график стилизуется CSS-классами. Есть и комбинированный пример со столбцами, линией и двумя осями. Общий рендеринг не решает все задачи представления. У SVG всё ещё должны быть понятные подписи и текстовая альтернатива данным. А container-based responsive в источнике отмечен как экспериментальный: не рассчитывайте на него как на готовую универсальную адаптивность. 📎 Примеры и серверный рендеринг

Safari блокирует серверы, связывающие email с рекламными ID Один сайт знает ваш email, другой — свой непрозрачный tracking ID. Сервер identity resolution может связать их и помочь узнавать человека между сайтами. Именно такую инфраструктуру описывает новый разбор WebKit. В iOS, iPadOS, macOS и visionOS 27 Safari и WebKit блокируют сетевой доступ к её доменам. Барьер стоит на пути к посреднику, как на схеме. Поэтому отладка стороннего идентификатора теперь должна учитывать и эту причину неудачного запроса. Это не запрет на любую аналитику и не блокировка собственной персонализации сайта: источник отдельно различает first-party сценарий и межсайтовое сопоставление. Если интеграция перестала получать ID, сначала выясните роль домена. Не стоит автоматически считать это поломкой вашего логина или рассылки. 📎 Механизм блокировки в WebKit

Двоичный payload запроса можно рассмотреть прямо в Network Копировать байты запроса в сторонний декодер теперь нужно реже. В Chrome DevTools 152 у Payload появились варианты отображения Base64, Hex и UTF-8 для двоичных и сжатых данных запроса. На скриншоте источника — Response, чьи варианты перенесли в Payload. Это удобно, когда приложение отправляет не читаемый JSON, а бинарный формат. Можно остаться рядом с заголовками запроса и его ответом, переключить представление и проверить, какие данные ушли по сети. Только не путайте отображение с пониманием протокола. Hex покажет байты, UTF-8 попробует представить их текстом, но структуру вашего формата инструмент сам не объяснит и шифрованные данные не расшифрует. Для смысла полей всё ещё нужна схема протокола. 📎 Раздел Network в DevTools 152

Когда заголовки уже нельзя уменьшать, помогает не только кегль Если каждый следующий заголовок делать меньше, h4–h6 быстро упираются в размер обычного текста. Craig Abbott предлагает строить иерархию сразу из трёх вещей: размера, отступов и начертания. Размеры и интервалы он получает из модульной шкалы: базовое значение последовательно умножается или делится на общий коэффициент. Если между двумя уровнями слишком большой скачок, промежуточный шаг можно рассчитать через квадратный корень из коэффициента. На скриншоте так отделён h4. Это авторская система, а не обязательная формула доступности. Проверьте, что выбранные веса действительно есть у шрифта. И выбирайте уровень заголовка по структуре документа: нужный внешний вид задаётся CSS, а не перестановкой h2 на h5. 📎 Разбор со шкалой и демо

Фуригану можно встроить в шрифт через OpenType-лигатуры У японского слова можно показать чтение прямо в глифе, без дополнительного ruby и JavaScript. В Furifont Anthony Fu перенёс эту работу в шрифт: например, последовательность 今日 заменяется лигатурой с надписью きょう сверху. Сборка берёт Source Han Sans/Serif и словарь, затем создаёт лигатуры. Более длинные словарные совпадения имеют приоритет. В DOM остаётся обычный текст, а надстрочное чтение появляется на этапе отображения. Но шрифт видит последовательность символов, а не смысл предложения. Поэтому чтение может оказаться неверным, а для надстрочных подписей автор рекомендует line-height от 1.6. Это интересный приём рендеринга, без гарантии правильного чтения и без автоматической замены семантики ruby. 📎 Устройство и ограничения Furifont

VK Видео вдвое сократил время запуска роликов Платформа разработала собственный пресет сжатия видео. Размер файлов уменьшился в среднем на 20%, у части роликов почти на треть, при этом качество изображения осталось прежним. Это ускорило запуск видео в два раза. Воспроизведение тоже стало стабильнее. Почему не подошли стандартные настройки? Они плохо учитывают особенности видео на платформе, а от параметров сжатия зависит многое: и размер файла, и качество, и скорость обработки файлов. Инженеры VK Видео подобрали свои. «Сжимать видео сильнее и при этом сохранять качество изображения — сложная инженерная задача. Нам удалось найти комбинацию параметров, которая уменьшает размер файлов в среднем на 20%, а для некоторых видео — почти на треть. Для зрителя это означает, что ролики быстрее запускаются и выглядят так же, как без сжатия», — отметил руководитель направления мультимедийных технологий VK Игорь Никифоров.

Отчёт доступности полезнее, когда он ведёт к конкретному элементу «На странице есть проблемы» — слабая подсказка для исправления. В pour находка связана с конкретным элементом: видны разметка, важность, объяснение и рекомендация. На скриншоте, например, показаны изображения без alt. Инструмент работает как расширение и bookmarklet. После исправления можно повторить аудит, отдельно посмотреть порядок Tab, заголовки и landmarks, проверить forced colours. Находки с отметкой review требуют решения человека. Зелёный автоматический отчёт не доказывает полную доступность. После него всё ещё нужно пройти реальные сценарии клавиатурой и проверить работу вспомогательных технологий. Визуальные симуляции помогают искать барьеры, но не воспроизводят опыт каждого человека. 📎 Посмотреть возможности pour

DOM-узел можно переставить без сброса фокуса Перемещение через insertBefore() выглядит как одна операция, но узел удаляется и вставляется заново. Из-за этого можно потерять фокус, перезапустить CSS-анимацию или загрузку iframe. У Element.moveBefore(node, reference) другой механизм: состояние узла сохраняется. Второй аргумент указывает, перед каким ребёнком вставить узел, а null означает конец. Для custom elements предусмотрен connectedMoveCallback() вместо пары отключения и подключения. Есть ограничения: перенос внутри одного документа, совместимое connected-состояние узла и нового родителя. MDN помечает API как Limited availability, поэтому проверяйте его наличие. Запасной insertBefore() сохранит порядок DOM, но не даст тех же гарантий состояния. 📎 Ограничения и живой пример

Bootstrap 6 Alpha переносит визуальную настройку в CSS Менять тему после сборки удобнее, когда её параметры остались в CSS. В Bootstrap 6.0.0-alpha.1 почти каждая прежняя Sass-переменная получила CSS-переменную внутри token maps. Это открывает настройку во время работы страницы, а не только перед компиляцией. Sass никуда не делся: он отвечает за генерацию вариантов компонентов и утилит, использует @use/@forward. Визуальные параметры при этом можно переопределять через CSS. Цена перехода — новый минимум браузеров: Chrome/Edge 130, Firefox 132, Safari 18. Ниже него встроенных fallback и полифилов нет. Это Alpha, миграция ещё может меняться. Если такой порог проекту не подходит, Bootstrap 5 остаётся поддерживаемым. 📎 Разбор CSS-first Sass modules

Kube API не отвечает, LoadBalancer не пропускает трафик, DNS не резолвит, исходящие запросы не уходят. Причина обычно кроется на стыке облачной сети и кластера, и найти её без понимания всей цепочки сложно. 3 ноября в 12:00 Роман Ерема, разработчик в команде Managed Kubernetes MWS Cloud Platform, на практике покажет: ⏺️как взаимодействуют сеть облака, CNI и сеть Kubernetes ⏺️как работают SNAT и Source IP ⏺️когда нужен externalTrafficPolicy: Local и почему при нём может не проходить health check ⏺️как диагностировать проблемы на реальных кейсах (live-demo) Все участники получат чек-лист для проверки доступности. Полезно инженерам, разработчикам и специалистам по сетям и облачной инфраструктуре. 🗓 3 ноября в 12:00 Регистрируйтесь по ссылке

Почему lazy-картинка уже загружается за пределами экрана Вы добавили loading="lazy", а картинка далеко внизу уже появилась в Network. Это не обязательно ошибка: браузер начинает загрузку с запасом, чтобы пользователь не увидел пустое место при прокрутке. Ben Schwarz сравнил поведение движков. В его таблице Chrome на 4G получает изображения примерно за 1250 px до видимой области, Firefox использует запас 600 px, Safari — примерно один экран. В Chrome дистанция ещё и зависит от типа соединения. Это наблюдения источника, а не обещанные пороги API. Поэтому не завязывайте логику страницы на точный момент запроса. Важную LCP-картинку не стоит делать ленивой, а под остальные заранее резервируйте размер через width/height или aspect-ratio. 📎 Таблица и условия замеров

В Chrome 155 unload больше не срабатывает по умолчанию Сохранение данных «при закрытии вкладки» могло тихо перестать работать. Команда Chrome сообщила о завершении отключения unload: начиная с Chrome 155 обработчик по умолчанию больше не вызывается. Причина не только в скорости возврата назад через bfcache. На мобильных ОС давно могли завершить фоновую страницу вообще без события. Поэтому unload и раньше не был надёжной последней возможностью записать данные. Исключения остаются через Permissions Policy и корпоративную политику. Chrome на iOS отдельно оговорён: там используется WebKit. Если в проекте аналитика или сохранение состояния ждут unload, найдите эти зависимости и перенесите работу на более ранний момент. Отправку данных при закрытии это событие больше не страхует. 📎 Что изменилось в Chrome

Иконки как CSS-токены: компактный HTML с оговорками SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через --icon. Так изображение можно менять при наведении или переключении темы без замены узлов. Рисует иконку маска на псевдоэлементе. Цвет берётся из currentColor, а style queries вместе с @property помогают не создавать пустой псевдоэлемент там, где иконки нет. Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно. 📎 Демо и обходы Safari

Две вкладки могут договориться об очереди синхронизации Приложение открыто в двух вкладках, и обе хотят синхронизировать данные с IndexedDB. Web Locks API позволяет договориться, кто выполняет эту работу сейчас, через блокировку с общим именем. navigator.locks.request() запускает callback после получения блокировки. В обычном режиме exclusive остальные запросы того же имени ждут. Блокировка освобождается после завершения callback или возвращённого им Promise, поэтому асинхронную работу важно дождаться внутри него. Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства. 📎 Сценарии и ограничения Web Locks в MDN.

preconnect готовит соединение до запроса ресурса Критичный шрифт находится на другом домене. Прежде чем скачать файл, браузеру нужно разрешить имя, установить соединение и договориться о TLS. Подсказка preconnect позволяет начать эту подготовку раньше. Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий crossorigin. В примере Google Fonts это <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес, dns-prefetch делает только DNS-запрос и обходится дешевле. 📎 Различия подсказок в web.dev помогают выбрать нужную.

inert отключает взаимодействие с целой панелью Панель уехала за край экрана, но её ссылки всё ещё получают фокус по Tab. Одного визуального перемещения недостаточно, чтобы сделать содержимое неактивным. Атрибут inert убирает обычные вложенные ссылки, кнопки и поля из порядка Tab и дерева доступности. Пользователь не может сфокусировать или нажать их. Текст внутри также не находится поиском по странице и не выделяется. Это полезно для временно неактивного блока интерфейса. Сам атрибут ничего не прячет и не добавляет визуального признака отключения. Оформление состояния и возврат фокуса после закрытия панели нужно продумать отдельно. Для одной нативной кнопки обычно подходит disabled. 📎 Поведение inert в MDN, включая исключение для модального <dialog>.

Лимит размера JS-бандла можно проверять до слияния Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений. Если приложение уже собирается своим бандлером, достаточно связки size-limit и @size-limit/file. В конфигурации укажите path на готовые файлы из dist и limit. Саму проверку запускайте после сборки, чтобы сравнивать её результат, а не исходники. Плагин file по умолчанию считает размер с Brotli. Можно выбрать Gzip или отключить сжатие. Это ещё не замер времени исполнения JavaScript: для него нужен отдельный плагин. И размер npm-пакета тоже не равен клиентскому бандлу. 📎 Настройка для приложений в README.

Прокрутку панели можно удержать внутри панели Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему. Для вертикальной панели задайте overscroll-behavior-y: contain на её прокручиваемом контейнере. Значение прерывает такую передачу, но может сохранить эффект отскока у края. none убирает и передачу прокрутки, и этот эффект. Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом <iframe> не управляет внутренним документом. Перед применением проверьте поддержку нужного значения в целевых мобильных браузерах. 📎 Механика и демо в MDN.

URLSearchParams может превратить плюс в пробел Если собрать query-строку вручную, значение E+AXQB+A при разборе может стать E AXQB A. Конструктор URLSearchParams воспринимает плюс как пробел. Для Base64 это уже изменение данных. Передавайте исходное значение через append() или set(). При сериализации API сам закодирует плюсы как %2B: const params = new URLSearchParams() params.append("bin", "E+AXQB+A") params.toString() // "bin=E%2BAXQB%2BA" Не вызывайте encodeURIComponent() перед добавлением значения: знак процента закодируется ещё раз. И не передавайте конструктору весь URL. Для полного адреса создайте URL и используйте его searchParams. 📎 Примеры кодирования в MDN.

Что проверять перед обработкой postMessage от iframe Сообщение от встроенного виджета не становится доверенным только потому, что пришло через postMessage(). Страница должна проверить, кто его прислал и что именно предлагается сделать. На отправке задайте точный targetOrigin, если адрес получателя известен: со схемой, хостом и нужным портом. На приёме сравните event.origin с ожидаемым origin. Если важен конкретный iframe, проверьте и event.source. Это помогает отличить нужное окно от других отправителей. После этого проверьте структуру и допустимые значения event.data. Правильный origin не гарантирует корректность содержимого. И сохранённая ссылка на окно не гарантирует, что оно всё ещё открыто на прежнем адресе. 📎 Правила безопасного обмена в MDN.

Почему многоточие не спасает длинное имя во flex-строке У имени уже стоят white-space: nowrap, overflow: hidden и text-overflow: ellipsis, но строка всё равно растягивается и выталкивает соседнюю кнопку. Проверять нужно не только сам текст. В примере Ахмада Шадида заголовок лежит внутри .user__meta, а flex-элементом является именно эта обёртка. Её автоматическая минимальная ширина мешает сжатию. Автор задаёт min-width: 0 на .user__meta, оставляя свойства обрезки на заголовке. Так контейнеру разрешают уменьшиться, а тексту задают способ показать нехватку места. Это разные задачи. Если полное имя важно для выбора пользователя, вместо обрезки может понадобиться перенос. 📎 Разбор с HTML и CSS показывает именно этот случай.

Откуда берётся цикл в ResizeObserver ResizeObserver следит за размерами элемента, а не только окна. Если в его callback увеличить ширину того же элемента, изменение может вызвать следующее уведомление. Получается цикл, который сам не закончится. Браузер переносит часть уведомлений на следующий кадр и сообщает ResizeObserver loop completed with undelivered notifications. Это защита от зависания браузера, а не исправление логики. Правило «при каждом уведомлении добавить ещё 10 пикселей» продолжит увеличивать элемент. Проверьте, есть ли у изменения конечное состояние. Например, можно хранить ожидаемый размер и не задавать его повторно, когда элемент уже до него дошёл. Один requestAnimationFrame() лишь переносит работу и не устраняет бесконечное изменение. 📎 Разбор ошибок наблюдения в MDN.

Knip ищет код, который больше никто не использует Удалили экран, а его зависимости и вспомогательные файлы остались в проекте. Найти их поиском по одному имени трудно: экспорт может ссылаться на другой экспорт, а точка входа находиться в конфигурации инструмента. Knip проверяет JavaScript- и TypeScript-проект целиком и ищет неиспользуемые файлы, экспорты и зависимости. Анализ начинается с точек входа. Плагины помогают учитывать устройство проекта и то, как файлы подключают фреймворки, сборщики и тестовые инструменты. Отчёт стоит использовать как список кандидатов на уборку. Перед удалением проверьте точки входа и неявное использование, которое анализатор мог не учесть. Само попадание в список ещё не доказывает, что файл можно безопасно стереть. 📎 Репозиторий Knip и документация.