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

30 October 2026 12:01

Когда заголовки уже нельзя уменьшать, помогает не только кегль

Если каждый следующий заголовок делать меньше, h4–h6 быстро упираются в размер обычного текста. Craig Abbott предлагает строить иерархию сразу из трёх вещей: размера, отступов и начертания.

Размеры и интервалы он получает из модульной шкалы: базовое значение последовательно умножается или делится на общий коэффициент. Если между двумя уровнями слишком большой скачок, промежуточный шаг можно рассчитать через квадратный корень из коэффициента. На скриншоте так отделён h4.

Это авторская система, а не обязательная формула доступности. Проверьте, что выбранные веса действительно есть у шрифта. И выбирайте уровень заголовка по структуре документа: нужный внешний вид задаётся CSS, а не перестановкой h2 на h5.

📎 Разбор со шкалой и демо

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

29 October 2026 14:52

VK Видео вдвое сократил время запуска роликов

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

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

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

29 October 2026 06:13

DOM-узел можно переставить без сброса фокуса

Перемещение через insertBefore() выглядит как одна операция, но узел удаляется и вставляется заново. Из-за этого можно потерять фокус, перезапустить CSS-анимацию или загрузку iframe.

У Element.moveBefore(node, reference) другой механизм: состояние узла сохраняется. Второй аргумент указывает, перед каким ребёнком вставить узел, а null означает конец. Для custom elements предусмотрен connectedMoveCallback() вместо пары отключения и подключения.

Есть ограничения: перенос внутри одного документа, совместимое connected-состояние узла и нового родителя. MDN помечает API как Limited availability, поэтому проверяйте его наличие. Запасной insertBefore() сохранит порядок DOM, но не даст тех же гарантий состояния.

📎 Ограничения и живой пример

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

28 October 2026 11:05

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

Регистрируйтесь по ссылке

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

27 October 2026 12:06

В Chrome 155 unload больше не срабатывает по умолчанию

Сохранение данных «при закрытии вкладки» могло тихо перестать работать. Команда Chrome сообщила о завершении отключения unload: начиная с Chrome 155 обработчик по умолчанию больше не вызывается.

Причина не только в скорости возврата назад через bfcache. На мобильных ОС давно могли завершить фоновую страницу вообще без события. Поэтому unload и раньше не был надёжной последней возможностью записать данные.

Исключения остаются через Permissions Policy и корпоративную политику. Chrome на iOS отдельно оговорён: там используется WebKit. Если в проекте аналитика или сохранение состояния ждут unload, найдите эти зависимости и перенесите работу на более ранний момент. Отправку данных при закрытии это событие больше не страхует.

📎 Что изменилось в Chrome

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

26 October 2026 12:14

Две вкладки могут договориться об очереди синхронизации

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

navigator.locks.request() запускает callback после получения блокировки. В обычном режиме exclusive остальные запросы того же имени ждут. Блокировка освобождается после завершения callback или возвращённого им Promise, поэтому асинхронную работу важно дождаться внутри него.

Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства. 📎 Сценарии и ограничения Web Locks в MDN.

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

25 October 2026 12:14

inert отключает взаимодействие с целой панелью

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

Атрибут inert убирает обычные вложенные ссылки, кнопки и поля из порядка Tab и дерева доступности. Пользователь не может сфокусировать или нажать их. Текст внутри также не находится поиском по странице и не выделяется. Это полезно для временно неактивного блока интерфейса.

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

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

24 October 2026 13:15

Прокрутку панели можно удержать внутри панели

Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему.

Для вертикальной панели задайте overscroll-behavior-y: contain на её прокручиваемом контейнере. Значение прерывает такую передачу, но может сохранить эффект отскока у края. none убирает и передачу прокрутки, и этот эффект.

Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом <iframe> не управляет внутренним документом. Перед применением проверьте поддержку нужного значения в целевых мобильных браузерах. 📎 Механика и демо в MDN.

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

23 October 2026 12:57

Что проверять перед обработкой postMessage от iframe

Сообщение от встроенного виджета не становится доверенным только потому, что пришло через postMessage(). Страница должна проверить, кто его прислал и что именно предлагается сделать.

На отправке задайте точный targetOrigin, если адрес получателя известен: со схемой, хостом и нужным портом. На приёме сравните event.origin с ожидаемым origin. Если важен конкретный iframe, проверьте и event.source. Это помогает отличить нужное окно от других отправителей.

После этого проверьте структуру и допустимые значения event.data. Правильный origin не гарантирует корректность содержимого. И сохранённая ссылка на окно не гарантирует, что оно всё ещё открыто на прежнем адресе. 📎 Правила безопасного обмена в MDN.

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

22 October 2026 12:53

Откуда берётся цикл в ResizeObserver

ResizeObserver следит за размерами элемента, а не только окна. Если в его callback увеличить ширину того же элемента, изменение может вызвать следующее уведомление. Получается цикл, который сам не закончится.

Браузер переносит часть уведомлений на следующий кадр и сообщает ResizeObserver loop completed with undelivered notifications. Это защита от зависания браузера, а не исправление логики. Правило «при каждом уведомлении добавить ещё 10 пикселей» продолжит увеличивать элемент.

Проверьте, есть ли у изменения конечное состояние. Например, можно хранить ожидаемый размер и не задавать его повторно, когда элемент уже до него дошёл. Один requestAnimationFrame() лишь переносит работу и не устраняет бесконечное изменение. 📎 Разбор ошибок наблюдения в MDN.

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

21 October 2026 18:56

Две критические уязвимости в 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

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

21 October 2026 14:12

Как отправить форму из JavaScript с проверкой полей

Если вызвать form.submit(), форма уйдёт без обычной проверки полей и события submit. Это легко пропустить, когда отправка запускается из отдельной кнопки или после другого действия в интерфейсе.

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

Есть оговорка: novalidate у формы и formnovalidate у кнопки меняют поведение проверки. И клиентская валидация всё равно не заменяет серверную. 📎 Разница между двумя методами в MDN.

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

20 October 2026 10:05

Как назвать компонент, чтобы команда понимала одно и то же

Box почти ничего не говорит о назначении. Название по цвету или месту на экране быстро устаревает, когда компонент переносят или меняют тему.

В подборке Виталия Фридмана собраны подходы и справочники для названий компонентов, классов, цветов и дизайн-токенов.

Для интерфейсных элементов есть Component Gallery: примеры из реальных дизайн-систем и альтернативные названия одного компонента. Для классов и функций — Classnames со словами, сгруппированными по поведению, порядку и связям.

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

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

19 October 2026 13:09

Почему запись глубины в шейдере может заставить GPU делать лишнюю работу

GPU умеет отбрасывать скрытые фрагменты до запуска дорогого фрагментного шейдера. Но если шейдер сам меняет глубину, драйверу трудно понять заранее, останется ли такая оптимизация корректной.

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

Наличие расширения проверяется через navigator.gpu.wgslLanguageFeatures. В коде шейдера автор рекомендует явно указать requires fragment_depth;.

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

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

19 October 2026 07:00

Nuxt вводит собственный серверный API поверх Nitro

Серверный код Nuxt-проекта часто импортирует функции из h3 и nitropack. Когда эти зависимости меняют API, обновление затрагивает и приложение, и модули экосистемы.

В Nuxt 4.6 появился `nuxt/server`. Фреймворк предоставляет свои серверные утилиты и типы: события запроса, правила маршрутов и типизированный $fetch.

Это даёт Nuxt возможность адаптироваться к изменениям нижележащих библиотек за собственным интерфейсом. В статье команда объясняет, как такой слой упрощает дальнейший переход к Nitro 3 и h3 2.

Nitro остаётся серверной реализацией по умолчанию. Альтернатива @nuxt/vite-server пока экспериментальная, и команда по-прежнему рекомендует Nitro большинству проектов.

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

30 October 2026 06:23

Фуригану можно встроить в шрифт через OpenType-лигатуры

У японского слова можно показать чтение прямо в глифе, без дополнительного ruby и JavaScript. В Furifont Anthony Fu перенёс эту работу в шрифт: например, последовательность 今日 заменяется лигатурой с надписью きょう сверху.

Сборка берёт Source Han Sans/Serif и словарь, затем создаёт лигатуры. Более длинные словарные совпадения имеют приоритет. В DOM остаётся обычный текст, а надстрочное чтение появляется на этапе отображения.

Но шрифт видит последовательность символов, а не смысл предложения. Поэтому чтение может оказаться неверным, а для надстрочных подписей автор рекомендует line-height от 1.6. Это интересный приём рендеринга, без гарантии правильного чтения и без автоматической замены семантики ruby.

📎 Устройство и ограничения Furifont

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

29 October 2026 11:55

Отчёт доступности полезнее, когда он ведёт к конкретному элементу

«На странице есть проблемы» — слабая подсказка для исправления. В pour находка связана с конкретным элементом: видны разметка, важность, объяснение и рекомендация. На скриншоте, например, показаны изображения без alt.

Инструмент работает как расширение и bookmarklet. После исправления можно повторить аудит, отдельно посмотреть порядок Tab, заголовки и landmarks, проверить forced colours. Находки с отметкой review требуют решения человека.

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

📎 Посмотреть возможности pour

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

28 October 2026 12:19

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

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

28 October 2026 06:19

Почему lazy-картинка уже загружается за пределами экрана

Вы добавили loading="lazy", а картинка далеко внизу уже появилась в Network. Это не обязательно ошибка: браузер начинает загрузку с запасом, чтобы пользователь не увидел пустое место при прокрутке.

Ben Schwarz сравнил поведение движков. В его таблице Chrome на 4G получает изображения примерно за 1250 px до видимой области, Firefox использует запас 600 px, Safari — примерно один экран. В Chrome дистанция ещё и зависит от типа соединения.

Это наблюдения источника, а не обещанные пороги API. Поэтому не завязывайте логику страницы на точный момент запроса. Важную LCP-картинку не стоит делать ленивой, а под остальные заранее резервируйте размер через width/height или aspect-ratio.

📎 Таблица и условия замеров

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

27 October 2026 06:25

Иконки как CSS-токены: компактный HTML с оговорками

SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через --icon. Так изображение можно менять при наведении или переключении темы без замены узлов.

Рисует иконку маска на псевдоэлементе. Цвет берётся из currentColor, а style queries вместе с @property помогают не создавать пустой псевдоэлемент там, где иконки нет.

Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно.

📎 Демо и обходы Safari

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

26 October 2026 06:21

preconnect готовит соединение до запроса ресурса

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

Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий crossorigin. В примере Google Fonts это <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>.

Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес, dns-prefetch делает только DNS-запрос и обходится дешевле. 📎 Различия подсказок в web.dev помогают выбрать нужную.

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

25 October 2026 06:03

Лимит размера JS-бандла можно проверять до слияния

Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений.

Если приложение уже собирается своим бандлером, достаточно связки size-limit и @size-limit/file. В конфигурации укажите path на готовые файлы из dist и limit. Саму проверку запускайте после сборки, чтобы сравнивать её результат, а не исходники.

Плагин file по умолчанию считает размер с Brotli. Можно выбрать Gzip или отключить сжатие. Это ещё не замер времени исполнения JavaScript: для него нужен отдельный плагин. И размер npm-пакета тоже не равен клиентскому бандлу. 📎 Настройка для приложений в README.

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

24 October 2026 07:01

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"

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

23 October 2026 07:09

Почему многоточие не спасает длинное имя во flex-строке

У имени уже стоят white-space: nowrap, overflow: hidden и text-overflow: ellipsis, но строка всё равно растягивается и выталкивает соседнюю кнопку. Проверять нужно не только сам текст.

В примере Ахмада Шадида заголовок лежит внутри .user__meta, а flex-элементом является именно эта обёртка. Её автоматическая минимальная ширина мешает сжатию. Автор задаёт min-width: 0 на .user__meta, оставляя свойства обрезки на заголовке.

Так контейнеру разрешают уменьшиться, а тексту задают способ показать нехватку места. Это разные задачи. Если полное имя важно для выбора пользователя, вместо обрезки может понадобиться перенос. 📎 Разбор с HTML и CSS показывает именно этот случай.

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

22 October 2026 07:20

Knip ищет код, который больше никто не использует

Удалили экран, а его зависимости и вспомогательные файлы остались в проекте. Найти их поиском по одному имени трудно: экспорт может ссылаться на другой экспорт, а точка входа находиться в конфигурации инструмента.

Knip проверяет JavaScript- и TypeScript-проект целиком и ищет неиспользуемые файлы, экспорты и зависимости. Анализ начинается с точек входа. Плагины помогают учитывать устройство проекта и то, как файлы подключают фреймворки, сборщики и тестовые инструменты.

Отчёт стоит использовать как список кандидатов на уборку. Перед удалением проверьте точки входа и неявное использование, которое анализатор мог не учесть. Само попадание в список ещё не доказывает, что файл можно безопасно стереть. 📎 Репозиторий Knip и документация.

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

21 October 2026 16:33

scrollbar-gutter убирает сдвиг при появлении скроллбара

Список получил ещё несколько строк, появилась полоса прокрутки, и контент немного уехал в сторону. С классическим скроллбаром это происходит потому, что он занимает часть ширины контейнера.

scrollbar-gutter: stable резервирует для него место заранее, даже когда переполнения ещё нет. Это работает при overflow: auto, scroll или hidden. Если нужна симметрия, stable both-edges добавляет такой же отступ у противоположного края по строчной оси.

Свойство управляет местом, а не оформлением полосы. При overlay-скроллбарах, которые лежат поверх контента, резерв не создаётся. Поэтому на разных ОС результат будет отличаться, а старые браузеры стоит проверить отдельно. 📎 Примеры обоих режимов в MDN.

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

20 October 2026 13:09

Горячие клавиши для демо можно показывать прямо во вкладке

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

Брамус сделал веб-компонент `<show-keystrokes>`. Он рисует сочетания клавиш внутри самой страницы, по умолчанию показывая горячие клавиши и навигационные кнопки, без обычного набора текста.

Всплывающий слой использует Popover API, поэтому не прячется за соседними элементами. CSS Anchor Positioning размещает его в углу или рядом с курсором и помогает переворачивать расположение у края окна.

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

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

20 October 2026 07:04

Как Next.js разобрал полторы тысячи старых issues

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

Команда Next.js создала исследовательского агента `closability`. В отдельной песочнице он читает обсуждение, ищет связанные изменения и при необходимости запускает воспроизведение на разных версиях фреймворка.

На выходе — заключение со ссылками на доказательства. Агент не может сам комментировать, закрывать issues или отправлять код; результаты проверяют мейнтейнеры.

За описанный период в репозитории закрыли 1462 отчёта, включая часть вне этого разбора. Среди причин были уже внесённые исправления, дубликаты и ожидаемое поведение. Это уборка и проверка backlog, а не 1462 новых исправления ошибок.

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

19 October 2026 10:05

Как закончить фон целым узором, даже если высота блока меняется

Повторяющийся фон обрезается снизу, потому что текст задаёт произвольную высоту секции. background-repeat: round убирает обрезку, но меняет размер самих плиток.

Ахмад Шадид предлагает округлять высоту блока. calc-size() получает размер, рассчитанный для auto, а round(up, …) увеличивает его до ближайшего значения, кратного высоте узора.

Так при переносе текста меняется высота секции, а размер рисунка остаётся прежним. В статье разобраны внутренние отступы и разница между округлением вверх и вниз: уменьшение высоты может оставить контенту слишком мало места.

На момент публикации автор отмечает поддержку решения только в Chrome. Для остальных браузеров стоит сохранить обычную автоматическую высоту как базовый вариант.

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

18 October 2026 13:09

Переходы из Internet Explorer вернулись через View Transition API

Шахматная сетка, жалюзи, растворение пикселями — в старом IE такие эффекты включали метатегом при входе на страницу или выходе с неё.

Брамус воссоздал все 23 эффекта RevealTrans в библиотеке ie-page-transitions. Она читает прежние Page-Enter и Page-Exit, а небольшой скрипт переводит настройки в типы современных View Transitions.

Дальше работает CSS: снимки старой и новой страницы анимируются через clip-path, маски и зарегистрированные пользовательские свойства. На демосайте можно переключать эффекты и смотреть варианты для SPA и обычного многостраничного сайта.

Поддержку нужно проверять для выбранного режима: переходы между документами требуют Cross-Document View Transitions. Библиотека не добавляет этот API браузерам, где его нет.