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

Google объявил войну back button hijacking

Если у вас на сайте кнопка «Назад» возвращает не туда, куда пользователь пришёл, — у вас 60 дней. С 15 июня 2026 Google понижает такие страницы в выдаче и раздаёт ручные санкции в Search Console.

Под удар попадает всё, что мусорит в history: цепочки редиректов, лишние pushState, перехват popstate ради «вы уверены, что хотите уйти?». SPA-роутеры с тремя записями на клик — туда же.

Самое неприятное: отвечает сайт, даже если хайджек прилетел из рекламной сети или стороннего виджета. «Это не мы, это AdSense второго эшелона» — не аргумент, пенальти получит ваш домен.

Разобрали в посте, как за 5 минут проверить свой сайт через DevTools и где у себя искать.

@your_tech (теперь ещё в VK и Max)

Устали от уймы API-ключей и танцев с бубном вокруг OpenAI, Claude и Gemini?

Снять эту головную боль может один API-роутер.
Разбираемся на Tproger, почему три разных API могут тормозить ваш проект и как подключить GPT-5.4, Claude Sonnet 4.6 и Gemini 3.1 Pro через единую точку входа без переписывания кода.

Кратко о содержании:
— Что умеет хороший роутер: fallback, балансировка, кеш, единый биллинг.
— Пошаговый гайд подключения через одни API на Python и Node.js.
— Реальный кейс: мультимодельный бот с авто-переключением за 30 минут.
— Подводные камни: контекстные окна, latency, rate limits (и как их обойти).

Читать материал: https://tprg.ru/YWhU

@tproger
Читайте также в VK, Max и Дзен

Три ИТ-события, которые вы могли пропустить (а зря)

Пока все гонятся за хайповыми новостями, мы вместе с коллегой Андреем Дмитриевым из JUG.ru собрали события, которые уже повлияли на мир разработки.

В пилотном выпуске нового подкаста:
— Хакеры стерли десятки тысяч ПК через Microsoft Intune
— Дефицит оперативной памяти до 2030 года
— Оптимизация glibc под x86_64

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

Особое внимание предлагаем уделить рефлексии. В выпуске мы подсветили, почему те или иные истории важны для ИТ-сообщества. А теперь призываем вас в комменты под видео: что уже вошло в вашу жизнь из этих кейсов? И как думаете, что из этого не производит резонанса?

Смотрите подкаст и присоединяйтесь к дискуссии: https://tprg.ru/S7jD

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