Коды состояния HTTP на котиках 😺

Если объяснять HTTP-состояния текстом скучно, вот забавный проект: https://http.cat/

Сервис показывает мем с котиком, идеально иллюстрирующим код ошибки. Это весело, наглядно и можно использовать в своих проектах.

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

SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

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

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

В результате вы получаете полностью контролируемую систему, которую можно расширять под любые эффекты — от простого fade до сложных кинематографичных переходов.

Детали и код — в материале.

#spa #javascript #vite

Интересно было бы увидеть каким кодом пофиксили проблему

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

Разработчик Нильс Линхир портировал Doom в браузер с 3D рендерингом на чистом CSS. Игровая логика написана на JavaScript, но для вывода графики автор принципиально отказался от Canvas и WebGL. Вся визуализация переложена на браузерный движок стилей.

Детали реализации:
— каждый объект и текстура представлены обычным тегом div;
— позиционирование в пространстве работает через CSS-трансформации;
— геометрия вычисляется нативными CSS-функциями hypot и atan2;
— сложная архитектура уровней вырезается свойством clip-path.

Технический разбор архитектуры и нюансов производительности: https://tprg.ru/yGpg

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

Внимание: axios 1.14.1 и 0.30.4 содержат троянец

Злоумышленники взломали npm-аккаунт мейнтейнера axios и опубликовали вредоносные версии. Они были доступны около трёх часов и уже удалены из реестра, но могли попасть в ваши проекты.

Вредоносный код добавляет зависимость plain-crypto-js, которая при установке загружает и запускает RAT-троянец на macOS, Windows и Linux. Сами исходники axios не изменены, поэтому проверка node_modules постфактум бесполезна.

Что делать прямо сейчас

Проверьте package-lock.json командой:

grep -E 'axios@(1\.14\.1|0\.30\.4)|plain-crypto-js' package-lock.json

Если есть совпадения:
— откатите axios до 1.14.0 или 0.30.3
— проверьте наличие артефактов RAT (пути перечислены в статье)
— немедленно смените все секреты на затронутых машинах и в CI/CD
— добавьте в CI флаг --ignore-scripts, чтобы блокировать postinstall-хуки

Если axios используется как транзитивная зависимость, зафиксируйте безопасную версию через overrides в package.json.

Полный список индикаторов компрометации и технические детали в материале: https://tproger.ru/news/axios-vzloman-na-npm---vredonosnye-versii-ustanavlivayut-rat-troya

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