V8 выдаёт headless-браузеры через Proxy и console.groupEnd

Если вы используете Puppeteer или Playwright, то знаете: headless-режим можно замаскировать — подменить User-Agent, размеры окна, отключить флаги. Но есть сигналы, которые не зависят от ваших настроек. Исследователь обнаружил два способа детектировать активный CDP Runtime domain через одну строку JavaScript. Первый (через кастомный getter stack) частично закрыли патчем в V8, но он обходится через прототип. Второй (Proxy в прототипе + console.groupEnd) работает до сих пор.

Суть в том, что при включённом Runtime.enable (а это происходит и при открытых DevTools, и при работе Puppeteer/Playwright) инспектор сериализует аргументы всех console.*-методов. В процессе он безусловно обходит цепочку прототипов и вызывает ownKeys trap, если встречает Proxy. Это требование спецификации ECMAScript, поэтому V8 не может его отключить без нарушения совместимости.

Подробный разбор с исходниками V8 и ссылкой на исследование: https://tproger.ru/news/specifikaciya-ecmascript-zastavlyaet-v8-raskryvat--zapushhen-li-dev

Flappy Bird на чистом CSS: без JS, но с анимацией и коллизиями

Автор создал полноценный Flappy Bird, используя только HTML и CSS. Механика прыжка работает через анимированные переменные и подмену анимаций при клике на радио-кнопки. Трубы двигаются бесконечно, их высота меняется за счёт тригонометрических расчётов от анимированного счётчика — так достигается псевдослучайность. Столкновение вычисляется через пересечение прямоугольников прямо в CSS, а экран проигрыша появляется, когда переменная --collision становится ненулевой.

Это не просто забавный эксперимент, а демонстрация возможностей современного CSS: :has(), анимированные переменные, математические функции. Разбор всех приёмов и код в статье: https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html

#css

Так, стоп...

@tproger_web
Читайте также в VK и Max

Flex или Grid: как перестать выбирать на автомате и начать мыслить структурно

Многие фронтенд-разработчики годами используют Flex по привычке, а Grid кажется избыточным или пугающим. Но эти инструменты не взаимозаменяемы — у каждого своя философия. Flex работает в одном измерении и управляет элементами от частного к общему, Grid сразу мыслит двумя осями и задаёт жёсткий каркас.

В статье разбирают четыре практических кейса, где разница подходов становится очевидной. К каждому примеру прилагается готовый код — можно скопировать и поэкспериментировать, чтобы на практике прочувствовать, когда Flex даёт гибкость, а когда лучше сразу взять Grid.

Если хотите выбирать технологию осознанно, а не гадать — смотрите материал: https://habr.com/ru/companies/timeweb/articles/1004986/

#фронтенд #css

@tproger_web
Читайте также в VK и Max

Вебхуки в Python: почему обработка прямо в эндпоинте это ловушка

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

В статье делятся практическим опытом перехода от «просто эндпоинта» к надёжной архитектуре с очередью задач. Ключевое решение: FastAPI принимает вебхук, проверяет подпись, кладёт задачу в Redis и мгновенно отвечает. Отдельный воркер забирает задачи из очереди и спокойно выполняет бизнес-логику. Так API не тормозит, задачи не теряются, а при необходимости можно запустить несколько воркеров для горизонтального масштабирования.

Подробнее о реализации: https://habr.com/ru/articles/1016206/

@zen_of_python (теперь в VK и Max)

Для чего используется stopPropagation()

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

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#простымисловами

@tproger_web
Читайте также в VK и Max

React vs Vue в 2026: сравнение по 12 критериям с бенчмарками

React лидирует по загрузкам npm — 429 млн в месяц против 47 млн у Vue. Вакансий с React в 3–4 раза больше. Казалось бы, выбор очевиден. Но у Vue есть аргументы, которые на собеседовании не спросят.

React 19.2 и Compiler v1.0 — важные события. Компилятор автоматически мемоизирует компоненты, устраняя необходимость в useMemo и useCallback. По данным Meta, это сократило количество лишних ре-рендеров в их приложениях на 40%. Vue тем временем готовит Vapor Mode — рендеринг без виртуального DOM, по принципу Svelte: компиляция шаблонов напрямую в DOM-операции.

В статье мы сравнили оба фреймворка по производительности, экосистеме, TypeScript-поддержке, размеру бандла, кривой обучения и рынку вакансий — с актуальными данными на март 2026.

Читать: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat

#javascript #frontend @tproger

@tproger_web
Читайте также в VK и Max

Cloudflare выпустила EmDash — open-source CMS на TypeScript, где каждый плагин в изолированной песочнице

96% уязвимостей WordPress-сайтов приходит из плагинов. Причина архитектурная: в WordPress плагин — это PHP-скрипт, который встраивается в ядро с полным доступом к базе данных и файловой системе. Без изоляции, без ограничений. Установить плагин — значит полностью ему доверять.

Cloudflare выпустила EmDash v0.1.0 — CMS с принципиально другой моделью. Каждый плагин запускается в собственном изолированном воркере (Dynamic Worker, v8-песочница) и декларирует нужные разрешения в манифесте:

definePlugin({
  capabilities: ["read:content", "email:send"],
  // плагин не может сделать ничего сверх этого
})

Под капотом: Astro, serverless-архитектура, Portable Text вместо HTML, встроенный MCP-сервер для ИИ-агентов. Лицензия MIT. Проект создан за 2 месяца с помощью ИИ-агентов и за сутки набрал 3 200+ звёзд на GitHub.

Подробнее: https://tproger.ru/news/cloudflare-zapustila-emdash---open-source-cms-na-typescript--kot

#javascript

Cursor 3: агенты вместо вкладок — IDE с нуля вокруг ИИ

Cursor выпустил третью версию — и это не обновление редактора. Команда построила новый интерфейс с нуля, где в центре архитектуры не файлы, а ИИ-агенты. VS Code-база никуда не делась: переключиться можно в любой момент через меню.

Что изменилось: все агенты — локальные и облачные — в одной боковой панели. Можно запустить агента с телефона через Slack или Linear, и он появится там же. Облачный агент, если надо протестировать на своём десктопе, переносится на локальную машину в несколько кликов. И наоборот: локальный агент можно отправить в облако, чтобы он продолжал работать, пока ноутбук закрыт.

Для кодинга выпустили Composer 2 — собственную frontier-модель с высокими лимитами. Плюс встроенный браузер для тестирования веб-приложений прямо из интерфейса и маркетплейс плагинов с поддержкой MCP-серверов.

Источник: https://tproger.ru/news/cursor-3--ii-redaktor-postroen-s-nulya---agenty-vmesto-vkladok

#cursor #vscode

Разраб реализовал RFC 2324 на Go — 4500 строк, ноль зависимостей, полная совместимость с протоколом управления кофеваркой

RFC 2324 (Hyper Text Coffee Pot Control Protocol) — апрельская шутка IETF 1998 года. Определяет методы BREW и WHEN, статус-код 418 I'm a Teapot и заголовок Accept-Additions для сливок и виски. За 27 лет production-grade реализации не существовало. Нико Туразашвили написал её на Go.

Под капотом полноценный HTTP-сервер с нестандартными методами, конечный автомат кофейника (idle → grinding → brewing → pouring → ready → cooling), SSE-стриминг для дашборда, content negotiation (curl получает ASCII-арт, браузер — JSON), rate limiting для защиты от DoCS-атак (Denial of Coffee Service, если больше 10 BREW за 30 секунд) и RFC 7168 TEA extension с поддержкой чая. Каждый пятый кофейник — тайный чайник, возвращающий 418 с детской считалкой.
Живой сервер и дашборд в стиле форума 90-х доступны прямо сейчас. Попробовать:

curl -X BREW https://brewops.10mins.email/pot -d 'start'
curl -X BREW https://brewops.10mins.email/pot-2 -d 'start'  # шанс получить 418

Подробнее: https://tproger.ru/translations/razrabotchik-napisal-production-grade-htcpcp-server-na-go---potom

#go #http

50+ браузерных инструментов для веб-разработчика — без регистрации, без трекинга, всё локально

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

Из полезного для повседневной работы: Tailwind Shade Generator (генерирует цветовые шкалы для конфига), Contrast Checker (WCAG-совместимость), SVG Optimiser, Favicon Generator, PX → REM конвертер, Gradient Generator с mesh-градиентами, Image Tracer, PDF Preflight для проверки перед печатью и Print Imposer для вёрстки буклетов.

Плюс Regex Tester, Meta Tag Generator, Base64/URL-кодировщик и Tailwind Cheat Sheet на быстром доступе.
Сделано одним разработчиком на Next.js + Tailwind + shadcn/ui, исходники открыты на GitHub.

Автор react-motion выпустил библиотеку для вёрстки текста без DOM

Cheng Lou (React core, Midjourney) открыл pretext — 15 КБ, zero deps. Суть: стандартные getBoundingClientRect и offsetHeight вызывают layout reflow — браузер пересчитывает геометрию всей страницы. При 60fps бюджет кадра 16.7 мс, а один reflow на сотне текстовых блоков легко его съедает.

pretext идёт другим путём: замеряет текст через Canvas font engine один раз, а вёрстку для любой ширины считает чистой арифметикой — DOM не трогает вообще.

const prepared = prepare('Hello world', '16px Inter')
const { height, lineCount } = layout(prepared, 320, 20)

Работает с React, Vue, Svelte, vanilla JS, в браузере и на сервере. За первые 48 часов — 14 000 звёзд.

GitHub
Демо

#javascript #производительность

delegatesFocus: true в Shadow DOM — одна строка вместо ручного управления фокусом

Если вы пишете веб-компоненты и делаете обёртку над <button> или <input>, скорее всего у вас есть что-то вроде:

focus() {
  this.shadowRoot?.querySelector('button')?.focus();
}

Это можно удалить. При подключении shadow root с delegatesFocus: true браузер сам перенаправляет фокус на первый фокусируемый элемент внутри при клике на хост, хост начинает матчиться на :focus и :focus-within в CSS, а «мёртвые зоны» фокуса при клике на padding исчезают.

Но есть нюансы: когда delegatesFocus ломает навигацию (roving tabindex, комбобокс, слайдер), почему нельзя ставить tabindex="0" одновременно с ним — и как правильно переиспользовать @focus/@blur handlers, которые удалять не нужно. Всё это с примерами кода в статье.

@tproger_web
Читайте также в VK и Max

Railway перешёл с Next.js на Vite + TanStack Start — сборка ускорилась в 5 раз

PaaS-платформа Railway мигрировала с Next.js на Vite + TanStack Start. Время сборки упало с 10 минут до 2.

Проблема не в Next.js как таковом — он работает, пока проект не начинает расти. На масштабе Railway холодный старт и непредсказуемость билдов стали узким местом. Об архитектурных проблемах Next.js писали и раньше — Railway подтвердил это на практике.

Vite выиграл не фичами, а поведением: быстрый старт, детерминированные билды, минимум магии.

@tproger_web
Читайте также в VK и Max

Mozilla переписала фронтенд MDN Web Docs — стало быстрее и удобнее

Если вы каждый день открываете MDN за документацией по HTML, CSS, JS или Web API — справочник обновился. Mozilla полностью переписала фронтенд, чтобы избавиться от технического долга, устаревших зависимостей и медленной навигации.

Главные изменения: быстрее работает поиск, улучшена навигация по разделам, вырос общий перфоманс страниц. Контент при этом не трогали — он по-прежнему живёт в mdn/content на GitHub. Фронтенд — mdn/yari — открытый.

Подробнее о том, что под капотом нового MDN

@tproger_web
Читайте также в VK и Max

Chrome 146 привязал сессии к TPM — что делать бэкенду

Device Bound Session Credentials (DBSC) включили по умолчанию в Chrome 146 на Windows: приватный ключ сессии живёт в TPM-чипе, и даже сам Chrome его не читает. Инфостилеры вроде LummaC2 и Vidar, которые жили за счёт кражи cookies из профиля браузера, остаются с бесполезным куском base64.

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

DBSC — открытый стандарт W3C, его тянут Google и Microsoft, дальше macOS через Secure Enclave. Firefox и Safari пока в стороне — нужна graceful degradation по заголовку Sec-Session-Registration. Пошаговый план внедрения разобрали на Tproger.

@tproger_web
Читайте также в VK и Max

9 браузерных API, которые делают половину вашего package.json лишней

Перевод Sylwia Łask с практическими заменами npm-пакетов на нативные фичи. Только то, что уже работает в стабильных версиях.

— <dialog> вместо react-modal: focus trap, Esc, backdrop и a11y бесплатно
— crypto.randomUUID() вместо uuid и nanoid
— :focus-within вместо ручных focus/blur-слушателей
— Container queries для карточек в разных местах лейаута
— requestIdleCallback для аналитики без блокировки main thread
— requestAnimationFrame вместо setInterval(16)
— navigator.onLine и события offline для PWA-синка
— Web Speech API (в Safari — webkitSpeechRecognition)
— @supports для внедрения :has() и backdrop-filter

Читать перевод — с примерами и разбором, когда библиотека всё-таки нужна.

@tproger_web
Читайте также в VK и Max

TanStack тихо съел половину вашего React-стека

Если начинаете новый проект на React — посмотрите, из чего его собираете. За два года TanStack превратился из одной библиотеки (Query) в платформу из восьми: Router заменяет React Router и роутинг Next.js, Form вытесняет React Hook Form, Store — Zustand и Redux, Table — все табличные библиотеки, а Start — это RC-альтернатива Next.js без привязки к Vercel.

Главный аргумент — сквозная типизация: Router типизирует не только пути, но и search params, контекст маршрута и данные лоадеров. По State of React 2026 у Query 68% использования и всего 1% негатива — против 17% у Next.js при том же охвате.

Практичный расклад: Query ставьте уже сегодня — самый дешёвый апгрейд React-кодбазы. Router берите на следующем greenfield, миграция существующего приложения болезненная. Start пока наблюдайте, RSC в проде по-прежнему только у Next.js. Разбор на Tproger.

@tproger_web
Читайте также в VK и Max

CSS Studio: WYSIWYG-панель в dev-сборке, которая правит ваш код через MCP

Мэтт Перри (автор Motion, бывшего Framer Motion) выпустил CSS Studio — визуальный редактор стилей, который ставится npm-пакетом и появляется поверх вашего сайта в dev-режиме. Никаких больше «Claude, уменьши padding у .btn на два пикселя».

Кликаете на элемент, двигаете ползунки — padding, шрифты, тени, flex/grid, анимации на таймлайне. Есть canvas с несколькими вьюпортами сразу, редактор понимает текущий брейкпоинт. Жмёте Apply — локальный MCP-сервер стримит JSON-патч в Claude Code, Cursor или Windsurf, и агент сам правит файлы по правилам проекта. Tailwind — подберёт класс или выдаст p-[11px]. CSS-in-JS — отредактирует объект внутри компонента. Обычный CSS — найдёт селектор в стайлшите. С Vite заработало сразу.

Из минусов: $99 за место, Stripe из РФ не работает, нужен агент с MCP. Зато живое демо прямо на cssstudio.ai без регистрации — пощупать можно за минуту.

@tproger_web
Читайте также в VK и Max