HTML берёт выбор картинки на себя

Если вы когда-нибудь мучились с srcset/sizes, знайте — браузер скоро сделает это за вас. Мэт Маркиз, который 14 лет назад возглавлял RICG и протащил отзывчивые картинки в платформу, теперь пишет, что пришло время упростить подход.

Идея в том, чтобы заменить сложный синтаксис выбора источников на буквально пару символов в разметке. Меньше дублирования картинок, меньше ошибок с sizes, меньше JS-обёрток. Пользователи получат прирост производительности почти бесплатно.

Пока это proposal, так что в прод тащить рано. Подробности в статье Маркиза.

Кэш браузера перестал дублировать одну страницу под каждым набором параметров

Меня всегда раздражало, что page.html?utm_source=google и page.html?utm_source=yandex лежат в кэше отдельно. HTTP-заголовок No-Vary-Search наконец позволяет сказать браузеру: игнорируй указанные query-параметры при формировании ключа кэша.

Гарри Робертс разбирает, как исключить параметры, игнорировать их порядок и при этом оставить неизвестные параметры «пробивающими» кэш — чтобы случайный ?foo=bar не подменял контент.

Поддержка уже есть в Chromium; для Safari/Firefox пока не везде, поэтому я бы использовал No-Vary-Search как прогрессивное улучшение и проверил поведение в инструментах разработчика, прежде чем полагаться на заголовок в продакшене.

Деструктуризация в JS: когда она мешает, а не помогает

Мэтт Смит разобрал, почему перестал разбивать объекты на переменные по первой же возможности. Привычка вроде const { status } = project экономит пару символов, но в длинной функции status превращается в магическую переменную: приходится листать вверх, чтобы вспомнить, откуда она взялась.

Его правило: оставляйте точку. project.status сразу говорит, из какого объекта значение, а голая status — нет. То же с post.title или user.name: повторять объект не страшно, если контекст остаётся на виду. Деструктурируйте только когда объект уже очевиден из окружения — например, внутри короткого колбэка.

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

WP2Shell: удалённое выполнение кода в ядре WordPress

Если у вас WordPress 6.9.0–6.9.4 или 7.0.0–7.0.1, отложите чтение и проверьте версию. WordPress выпустил патчи 6.9.5, 7.0.2 и 6.8.6, а компании Patchstack, Hexastrike и WatchTowr уже видят реальные атаки.

Баг в ядре, а не в плагине: CVE-2026-63030 — путаница маршрутов в /wp-json/batch/v1, которая работает вместе с CVE-2026-60137, SQL-инъекцией в параметре author__not_in. На стоковой установке это даёт удалённое выполнение кода без авторизации.

WordPress.org включил принудительные автообновления, но я бы не доверял автоматике вслепую: запустите wp core version, обновитесь вручную и проверьте логи на обращения к /wp-json/batch/v1. Что ещё делать: в материале.

React.memo не спасает, если в пропсы летят inline-объекты

Поисковая строка тормозит список, Profiler рисует 200 лишних рендеров, а вы уже обернули всё в React.memo и добавили useCallback на обработчики. Виноват обычно один JSX-паттерн: style={{ padding: 16 }} или колбэк прямо в разметке. memo сравнивает пропсы через Object.is, а для объектов и функций это проверка по ссылке: каждый рендер родителя создаёт новую ссылку, и React снова рисует дочерний компонент.

Меня убедили цифры из эксперимента: 200 memoизированных строк на один keystroke рендерились 243,9 мс, после стабилизации ссылок — 6 мс. Поэтому статические объекты выносите за пределы компонента, а useCallback добавляйте только там, где колбэк реально уходит в memoизированного потомка. Хуки «на всякий случай» не помогут: сначала меряйте в Profiler.

Полный разбор с примерами

Видеофайл на 50 КБ может выполнить код на вашем устройстве

В FFmpeg нашли 16-летнюю уязвимость PixelSmash. Она живёт в декодере MagicYUV: AVI, MKV или MOV размером с картинку вызывает запись за пределами буфера и открывает удалённое выполнение кода. Серьёзность: 8.8 из 10 по шкале CVSS, то есть «высокая».

MagicYUV включён везде по умолчанию «для вашего удобства». Поэтому плееры, мессенджеры, NAS и облачные транскодеры принимают вредоносное видео без вопросов, лишь бы система сгенерировала превью.

Проверьте себя командой из материала: если в выводе есть magicyuv, обновите FFmpeg или пересоберите с флагом --disable-decoder=magicyuv. За 16 лет она успела разойтись повсюду.

contrast-color() в CSS: браузер выберет цвет текста

Функция contrast-color() берёт фоновый цвет и отдаёт чёрный или белый — тот, у которого контраст выше. Браузер считает это на этапе вычисления стилей, до отрисовки страницы, без JS и без вспышек при гидратации. HTTP Archive и WebAIM фиксируют: большинство сайтов всё ещё не проходят WCAG-проверки контраста. Вместо очередной JS-библиотеки можно доверить эту математику CSS.

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

#фронтенд #css

CSS ::checkmark обещает убрать лишний JavaScript из кастомных дропдаунов

Псевдоэлемент ::checkmark из CSS Form Control Styling Module Level 1 позволяет стилизовать галочку выбранного пункта в нативном <select> без кастомной разметки и скриптов. Вместо div-обёртки, стрелочки и ручной навигации с клавиатуры вы задаёте appearance: base-select и переопределяете content у ::checkmark.

Ловушка в двух ограничениях: на момент статьи он не работает в Safari и Firefox, а в остальных браузерах поддерживается только для <option> внутри <select> — чекбоксы и радиокнопки пока недоступны. Поэтому кастомные контролы пока остаются нужны.

Подробности в разборе Сунканми Фафоворы.

Отлаживать WASM в Chrome оказалось удобнее, чем кажется

Если вы компилируете что-то в WebAssembly, отладка сгенерированного кода обычно боль. Eli Bendersky показывает, что в Chrome DevTools уже есть полноценный WASM-отладчик: в Sources → Page → wasm лежит декомпилированный WAT. Можно ставить точки останова, смотреть локальные переменные и стек вызовов.

Особенно полезен режим паузы на исключениях. В WASM многое ломается на инструкциях вроде ref.cast, и без debugger'а вы видите только красную строку в консоли. С включённым «Pause on exceptions» DevTools остановится прямо на виноватой инструкции и покажет, откуда она взялась.

В статье — рабочий сценарий: компилируете WAT через watgo, раздаёте локально через http.server, открываете в Chrome и ловите баги в gc-print-scheme-pairs. Я бы сохранил этот материал на случай, когда придётся разбираться в чужом WASM-модуле или своём компиляторе.

Obs.js подстраивает сайт под устройство и сеть

Если страница летает на десктопе, а на мобильном еле шевелится, виноват не всегда код. Гарри Робертс собрал браузерные сигналы о соединении, мощности устройства и батарее в библиотеку Obs.js, чтобы фронтенд мог подстраиваться под реальные условия читателя.

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

Библиотека даёт сигнал, но решение за вами: упростить анимации, отложить скрипты или убрать эффекты. Поддержка зависит от браузерных API, поэтому я бы начал с одного сценария и использовал бы её как прогрессивное улучшение. Подробности у Робертса.

GEO приходит на смену SEO: что делать веб-разработчику

Поисковая строка всё чаще уступает место чат-ботам: люди задают вопросы в ChatGPT, Perplexity, Copilot, Gemini и Claude. HackerNoon считает, что традиционный SEO умирает, а на смену приходит GEO — генеративная оптимизация, где важен не рейтинг, а упоминание ИИ-ассистентом.

ИИ-модели выбирают контент, который написан качественно, проверен фактами и подкреплён ссылками. Автор материала считает, что бренд может обойтись без отдельного сайта, но не без сильного цифрового опыта. Для веб-разработчика это значит: меньше фокуса на плотности ключевиков, больше — на доверии, структуре и цитируемости.

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

Remix 3 beta: фреймворк уходит от React и забирает у бандлера последнее слово

Если вас раздражает, что фреймворк диктует, как жить импортам и что происходит с запросом, посмотрите на Remix 3 beta preview. Команда React Router переписала его с нуля: вместо React runtime — форк Preact с императивной моделью, роуты стали Fetch API роутами, а контроллеры возвращают веб-Response.

Мне тут особенно интересны frames: серверные фрагменты с src, которые подгружаются независимо. Некоторые сравнивают их с HTMX, но это внутри самого Remix. Ещё unbundling — Remix сам компилирует и раздаёт ассеты, у импортов пропадает особая семантика.

Источник.

Дизайнеры теперь отдают код

Вместо макетов дизайнер всё чаще сдаёт в прод прототипы, собранные ИИ-агентами. Рынок ответил на спор «должен ли дизайнер кодить»: UX/UI-роли требуют разработки с ИИ и production-ready доставки. Для фронтендера это меняет интерфейс работы: вы получаете работающий, но не всегда чистый код, и придётся отстаивать ревью перед релизом.

Самый цепкий момент для меня, пожалуй, цифры: спрос на UX/UI/Product Design растёт на 16% к 2034, а дизайнерские навыки обогнали кодинг и облака в ИИ-продуктах. Компании хотят перевод технической возможности в человечный интерфейс, поэтому договариваться об архитектуре придётся раньше.

Как пишет автор статьи, сгенерированный функционал — это ещё не хороший функционал.

Ternlight: поиск по смыслу прямо в браузере, без сервера и ключей

Ternlight превращает текст в векторы и ищет по смыслу прямо в браузере на CPU. Весь пакет включает модель, токенизатор и движок вывода и занимает ≈7 МБ, а сервер, GPU и API-ключи не нужны. Установка: npm i @ternlight/base, после чего embed() даёт 384-мерный вектор, а similar() ранжирует небольшую выборку документов за ≈5 мс на одной вкладке.

Это можно воспринимать как Fuse.js, но с поиском по смыслу вместо символов: библиотеку вешаете на страницу документации или справки, и она находит «как отменить подписку», даже если пользователь написал «хочу вернуть деньги». Демо работает офлайн, посмотрите на ternlight.dev/demo.

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

Бесконечная галерея на GSAP, которая не дергается при скролле

Codrops делает бесконечную ленту разбросанных картинок: каждая движется со своей скоростью, а клик плавно раскрывает изображение во весь экран через GSAP Flip.

Под капотом — GSAP Observer для колеса и тача, Flip для морфинга и SplitText для появления текста. Три независимых слоя (скролл, reveal и transition) удобно отделены друг от друга, поэтому можно взять только параллакс или только переход.

Если проект на React или Vue, стоит подумать, как интегрировать ручное управление DOM с вашей реактивностью. Разбор от Codrops.

Modern Web Guidance: не даём ИИ-агенту тащить лишние зависимости

Просишь агента сделать модалку — получаешь портал, setTimeout и лишнюю библиотеку. Modern Web Guidance учит агента использовать актуальные API веб-платформы.

Устанавливается через npx modern-web-guidance@latest install или плагин для редактора. Укажите целевой Baseline в AGENTS.md/CLAUDE.md — и агент спросит, можно ли обойтись браузером.

В демо это сработало: CSS Anchor Positioning вместо Floating UI для тултипа, нативный <dialog> вместо самодельного модала, scheduler.yield() вместо useMemo при поиске по 2000 задач.

Сразу говорю, версия ранняя. Но идея здравая: ИИ-код должен ориентироваться на актуальную платформу. Подробности.

Он изобрёл human side adaptive