Анимированная радиальная маска на тексте через CSS

Если делаете запоминающиеся заголовки или интерактивные обложки, эта техника пригодится. Тут показали, как повторить на CSS эффект из блога Nikhil: слово «Hello!» перекрывается концентрическими кругами, и получается живое «просвечивание» текста.

Суть — mask плюс repeating-radial-gradient. Прозрачные участки градиента скрывают буквы, непрозрачные оставляют. Чтобы понять механику, автор советует заменить радиальный градиент на linear-gradient — сразу видно, как альфа-канал управляет видимостью. Шрифт тоже важен: круглая буква «o» держит кольца ровно, поэтому взяли Fredoka.

Можно сохранить в закладки и поиграть с параметрами в CodePen из статьи.

Тёмная тема через веб-стандарты

Белая вспышка при загрузке, лишний React-контекст и рассинхрон с системой — Ollie Williams разбирает, как от этого уйти веб-стандартами. prefers-color-scheme берёт системную настройку, а мета-тег name="color-scheme" в head даёт браузеру подсказку раньше CSS.

Можно обойтись без тяжёлой темизации: по клику меняете атрибут content на light, dark или light dark и сохраняете выбор в localStorage. При следующем открытии применяете его до рендера, и вспышки нет.

Главный вывод для меня: стандартный механизм снимает задачу с JS-фреймворка и даёт нативный фолбэк. Если у вас SSR или медленное соединение, такой подход выглядит надёжнее.

Chrome 151 даёт декларативный доступ к камере и микрофону через <usermedia>

Если делали видеочаты или редакторы с захватом с камеры, знаете боль: вызовы getUserMedia(), ручные запросы разрешений и пользователи, случайно нажавшие «запретить» и застрявшие в тупике. Новый HTML-элемент <usermedia>, доступный с Chrome 151, убирает эту рутину.

Вместо скриптового запроса права вы получаете декларативный элемент управления, который сам отслеживает намерение пользователя, управляет запросом браузера и передаёт готовый MediaStream в приложение. Это сокращает шаблонный код и даёт браузеру достоверный сигнал о том, что доступ инициирован пользователем, а не страницей. Подробнее в блоге Chrome for Developers.

Если фича приживётся, запросы медиа-прав станут заметно чище.

Webflow запустил полноценную платформу для разработчиков — и теперь CMS можно крутить из Claude

Если вы когда-нибудь залипали в UI Webflow, чтобы обновить поля CMS или перезалить настройки сайта, вот повод от этого отвыкать. Платформа даёт API и инфраструктуру для управления контентом, настройками и деплоем из кода, или прямо из агентов вроде Claude, Cursor и Postman через протокол MCP.
Теперь обновить десяток записей, переключить флаг, запустить деплой и многое другое можно прямо с помощью агентов без костылей. Документация и примеры уже на сайте, так что проверить на своём проекте можно быстро.

FixCSS: пишите CSS без исторических ошибок спецификации

FixCSS берёт исправленные имена свойств, значения и селекторы — и на лету превращает их в валидный CSS, который браузеры уже понимают. Например, white-space: no-wrap он сконвертирует в white-space: nowrap.

Библиотека опирается на опубликованный CSS Working Group список ошибок в дизайне CSS и убирает необходимость помнить, какие имена свойств появились только из-за обратной совместимости. Демо на CodePen и установка через NPM.

Где пригодится: можно писать CSS так, как он выглядел бы без компромиссов, а FixCSS позаботится о финальном выводе для продакшена.

Headless Chrome: WebGL без GPU можно ускорить в 4 раза

Если скриншотите 3D-страницы на сервере без видеокарты, Chrome по умолчанию использует SwiftShader. В разборе Microlink такая страница рендерилась около 24 секунд.

Ускорить в ~4 раза можно флагом --use-angle=gl: Chrome отдаёт WebGL библиотеке ANGLE, а та уже использует программный OpenGL-рендер Mesa llvmpipe. Время падает до ~6 секунд — llvmpipe JIT-компилирует шейдеры в x86-64 и загружает все ядра CPU.

Частая проблема — флаги из старых туториалов. --disable-gpu тихо возвращает SwiftShader, а --in-process-gpu ломает GL-surface у ANGLE. Ещё нужен дисплей и LIBGL_ALWAYS_SOFTWARE=1.

Итог: если в ваших headless-настройках есть --disable-gpu, вы почти наверняка не на быстром пути. Разбор от Microlink.

Ghost: Postgres, который можно форкнуть под каждую задачу агента

Ghost — хостинг Postgres, который можно запустить, форкнуть и выбросить за секунды. Он даёт каждому агенту или задаче отдельную базу, чтобы эксперименты не трогали продакшн.

Установка: curl -fsSL https://install.ghost.build | sh. Дальше CLI и интеграция для ИИ-агентов (MCP): можно скопировать продакшн-базу в изолированную копию перед миграцией или генерацией кода. Если агент что-то сломает, удаляете окружение и берёте следующее.

Жёсткие лимиты расходов не дают счёту уйти в бесконечность. Подробнее про Ghost.

Прототип готов, надо выкатить его на живых пользователей и проверить гипотезу. Но поднимать полноценную инфраструктуру и разбираться с биллингом AWS ради первой версии — так себе идея.

Собрали семь хостингов, где можно арендовать виртуалку, накатить окружение через Docker и вернуться к разработке и проверке гипотез.

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

Хотите расшевелить подуставший мозг и посмотреть, на что он способен?

Проверьте, как быстро и хорошо работает ваша память: сыграйте в «Меморину»!

Авторы Wasp отказались от собственного языка спустя 5 лет и $5M

Братья-близнецы из Y Combinator задумали Wasp как «Terraform для веб-стека»: один конфиг, который описывает и бэкенд, и фронтенд, и базу. Звучало разумно, но для этого DSL они придумали свой язык. Разработчики вокруг понимали мотивацию (не хочется собирать стек из десятка конфигов вручную), но писать бизнес-логику на кастомном языке с куцей поддержкой IDE оказалось не тем, ради чего стоит бросать JS/TS.

Прошло пять лет и $5M инвестиций. Главный инсайт: ценность Wasp не в синтаксисе, а в высокоуровневой спецификации приложения, которую и человеку, и ИИ проще читать. Сейчас конфиг переписывают на TypeScript, сохраняя ядро. Интересно, как долго они убеждали себя, что язык — необходимость, прежде чем признать ошибку. Подробности в блоге авторов.

Что происходит под капотом у Google Docs и Figma: CRDT, которые можно потрогать руками

CRDT — это способ синхронизировать состояние между устройствами так, чтобы каждый писал локально, а в итоге все видели одно и то же. Без центрального сервера, блокировок и разборок «кто прав» — просто математика, которая гарантирует сходимость.

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

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> — чекбоксы и радиокнопки пока недоступны. Поэтому кастомные контролы пока остаются нужны.

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