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

В 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 и документация.

Две критические уязвимости в PHP, обновляйтесь срочно. Специально собранными HTTP-запросами без логина можно выполнить на сервере любой код с правами PHP-воркера. Рабочий взлом уже показали на WordPress, Drupal, Joomla, Laravel, Symfony, Nextcloud, Magento и phpMyAdmin. Исправления вышли в PHP 8.5.12, 8.4.27, 8.3.36 и 8.2.35. Для 8.1 и старше релизов не будет: есть минимальные патчи к исходникам 7.4, 8.0 и 8.1 и пакеты от дистрибутивов и LTS-поставщиков. Уязвимые пути тянутся с PHP 5.4, сильнее всего под ударом Apache с mod_php, но FPM тоже уязвим. Если обновиться прямо сейчас нельзя, команда PHP советует задать session.upload_progress.enabled=0 в php.ini или конфиге пула, на 8.5 ещё fatal_error_backtraces=0, и перезапустить все воркеры. Против второй ошибки снизить post_max_size и ограничить на прокси размер и число частей запроса, включая запросы без Content-Length. Это только снижает риск. Детали утекли за день до релиза, и атаки уже идут: Cloudflare видит попытки эксплуатации и включила правила WAF даже на бесплатном тарифе. Wiz советует искать в логах необычные multipart-запросы, после которых идут ошибки лимита памяти или серии ответов 500. И проверьте бэкапы. Нашли уязвимости с помощью ИИ: Calif в программе OpenAI Patch the Planet с GPT-5.6 Sol и независимо Wiz с Gemini 4 Argon и GPT-5.6 Sol. Подробности и инструкции на официальном сайте PHP. @neuro_channel

scrollbar-gutter убирает сдвиг при появлении скроллбара Список получил ещё несколько строк, появилась полоса прокрутки, и контент немного уехал в сторону. С классическим скроллбаром это происходит потому, что он занимает часть ширины контейнера. scrollbar-gutter: stable резервирует для него место заранее, даже когда переполнения ещё нет. Это работает при overflow: auto, scroll или hidden. Если нужна симметрия, stable both-edges добавляет такой же отступ у противоположного края по строчной оси. Свойство управляет местом, а не оформлением полосы. При overlay-скроллбарах, которые лежат поверх контента, резерв не создаётся. Поэтому на разных ОС результат будет отличаться, а старые браузеры стоит проверить отдельно. 📎 Примеры обоих режимов в MDN.

Как отправить форму из JavaScript с проверкой полей Если вызвать form.submit(), форма уйдёт без обычной проверки полей и события submit. Это легко пропустить, когда отправка запускается из отдельной кнопки или после другого действия в интерфейсе. form.requestSubmit() запускает сценарий отправки через submit-кнопку: браузер проверяет ограничения полей и при успешной проверке вызывает submit. Можно передать конкретную кнопку. Она должна принадлежать форме, а её form*-атрибуты могут переопределить параметры отправки. Есть оговорка: novalidate у формы и formnovalidate у кнопки меняют поведение проверки. И клиентская валидация всё равно не заменяет серверную. 📎 Разница между двумя методами в MDN.

Горячие клавиши для демо можно показывать прямо во вкладке Системная утилита выводит нажатия поверх рабочего стола. Но при демонстрации только одной вкладки зрители могут не увидеть этот слой. Брамус сделал веб-компонент `<show-keystrokes>`. Он рисует сочетания клавиш внутри самой страницы, по умолчанию показывая горячие клавиши и навигационные кнопки, без обычного набора текста. Всплывающий слой использует Popover API, поэтому не прячется за соседними элементами. CSS Anchor Positioning размещает его в углу или рядом с курсором и помогает переворачивать расположение у края окна. Есть настройки оформления, режим всех нажатий, bookmarklet и расширение для подключения на чужих сайтах. При записи демонстрации полезно проверить, какой режим включён, прежде чем вводить данные.

Как назвать компонент, чтобы команда понимала одно и то же Box почти ничего не говорит о назначении. Название по цвету или месту на экране быстро устаревает, когда компонент переносят или меняют тему. В подборке Виталия Фридмана собраны подходы и справочники для названий компонентов, классов, цветов и дизайн-токенов. Для интерфейсных элементов есть Component Gallery: примеры из реальных дизайн-систем и альтернативные названия одного компонента. Для классов и функций — Classnames со словами, сгруппированными по поведению, порядку и связям. Общая рекомендация к именам: понятная структура, конкретный смысл и знакомый команде словарь. Для названий пользовательских функций автор советует сначала узнать, какими словами люди сами описывают задачу и ожидаемый результат.

Как Next.js разобрал полторы тысячи старых issues Старый отчёт может описывать актуальный баг. Или уже исправленный. Одной даты последнего комментария недостаточно, чтобы решить, пора ли его закрывать. Команда Next.js создала исследовательского агента `closability`. В отдельной песочнице он читает обсуждение, ищет связанные изменения и при необходимости запускает воспроизведение на разных версиях фреймворка. На выходе — заключение со ссылками на доказательства. Агент не может сам комментировать, закрывать issues или отправлять код; результаты проверяют мейнтейнеры. За описанный период в репозитории закрыли 1462 отчёта, включая часть вне этого разбора. Среди причин были уже внесённые исправления, дубликаты и ожидаемое поведение. Это уборка и проверка backlog, а не 1462 новых исправления ошибок.

Почему запись глубины в шейдере может заставить GPU делать лишнюю работу GPU умеет отбрасывать скрытые фрагменты до запуска дорогого фрагментного шейдера. Но если шейдер сам меняет глубину, драйверу трудно понять заранее, останется ли такая оптимизация корректной. В обзоре WebGPU для Chrome 155–156 показано расширение WGSL fragment_depth. Режимы less и greater позволяют явно описать отношение выходной глубины к интерполированной. Это даёт GPU информацию для сохранения ранней проверки глубины. Наличие расширения проверяется через navigator.gpu.wgslLanguageFeatures. В коде шейдера автор рекомендует явно указать requires fragment_depth;. Это возможность для конкретного графического алгоритма. Перед использованием нужны проверка поддержки и замеры на целевых устройствах.

Как закончить фон целым узором, даже если высота блока меняется Повторяющийся фон обрезается снизу, потому что текст задаёт произвольную высоту секции. background-repeat: round убирает обрезку, но меняет размер самих плиток. Ахмад Шадид предлагает округлять высоту блока. calc-size() получает размер, рассчитанный для auto, а round(up, …) увеличивает его до ближайшего значения, кратного высоте узора. Так при переносе текста меняется высота секции, а размер рисунка остаётся прежним. В статье разобраны внутренние отступы и разница между округлением вверх и вниз: уменьшение высоты может оставить контенту слишком мало места. На момент публикации автор отмечает поддержку решения только в Chrome. Для остальных браузеров стоит сохранить обычную автоматическую высоту как базовый вариант.