26006
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
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
Mozilla переписала фронтенд MDN Web Docs — стало быстрее и удобнее
Если вы каждый день открываете MDN за документацией по HTML, CSS, JS или Web API — справочник обновился. Mozilla полностью переписала фронтенд, чтобы избавиться от технического долга, устаревших зависимостей и медленной навигации.
Главные изменения: быстрее работает поиск, улучшена навигация по разделам, вырос общий перфоманс страниц. Контент при этом не трогали — он по-прежнему живёт в mdn/content на GitHub. Фронтенд — mdn/yari — открытый.
Подробнее о том, что под капотом нового MDN
@tproger_web
Читайте также в VK и Max
delegatesFocus: true в Shadow DOM — одна строка вместо ручного управления фокусом
Если вы пишете веб-компоненты и делаете обёртку над <button> или <input>, скорее всего у вас есть что-то вроде:
focus() {
this.shadowRoot?.querySelector('button')?.focus();
}delegatesFocus: true браузер сам перенаправляет фокус на первый фокусируемый элемент внутри при клике на хост, хост начинает матчиться на :focus и :focus-within в CSS, а «мёртвые зоны» фокуса при клике на padding исчезают.delegatesFocus ломает навигацию (roving tabindex, комбобокс, слайдер), почему нельзя ставить tabindex="0" одновременно с ним — и как правильно переиспользовать @focus/@blur handlers, которые удалять не нужно. Всё это с примерами кода в статье.
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.
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
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
Вебхуки в Python: почему обработка прямо в эндпоинте это ловушка
Начинающие разработчики часто пишут обработку вебхуков в лоб: получили запрос -> обновили базу -> отправили письмо -> вернули ответ. На локальной машине всё работает, но в реальности такой подход приводит к таймаутам (внешний сервис ждёт ответа секунды), потере данных (падение во время обработки) и дублям.
В статье делятся практическим опытом перехода от «просто эндпоинта» к надёжной архитектуре с очередью задач. Ключевое решение: FastAPI принимает вебхук, проверяет подпись, кладёт задачу в Redis и мгновенно отвечает. Отдельный воркер забирает задачи из очереди и спокойно выполняет бизнес-логику. Так API не тормозит, задачи не теряются, а при необходимости можно запустить несколько воркеров для горизонтального масштабирования.
Подробнее о реализации: https://habr.com/ru/articles/1016206/
@zen_of_python (теперь в VK и Max)
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
Разработчик Нильс Линхир портировал Doom в браузер с 3D рендерингом на чистом CSS. Игровая логика написана на JavaScript, но для вывода графики автор принципиально отказался от Canvas и WebGL. Вся визуализация переложена на браузерный движок стилей.
Детали реализации:
— каждый объект и текстура представлены обычным тегом div;
— позиционирование в пространстве работает через CSS-трансформации;
— геометрия вычисляется нативными CSS-функциями hypot и atan2;
— сложная архитектура уровней вырезается свойством clip-path.
Технический разбор архитектуры и нюансов производительности: https://tprg.ru/yGpg
@make_game (теперь в VK и Max)
SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM
Главная сложность плавных переходов между страницами — нужно одновременно держать в DOM старую и новую страницу, чтобы анимировать их crossfade. Готовые решения скрывают эту механику, но если требуется тонкая настройка, лучше разобраться, как всё устроено внутри.
В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.
Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.
В результате вы получаете полностью контролируемую систему, которую можно расширять под любые эффекты — от простого fade до сложных кинематографичных переходов.
Детали и код — в материале.
#spa #javascript #vite
Firefox 149: нативные контролы, CSS-гибкость и Reporting API для CSP
Вышел стабильный релиз Firefox 149 — и в нём несколько изменений, которые делают веб-разработку чуть приятнее, а контроль над безопасностью строже.
Главное, что стоит взять на заметку:
— Программное управление нативными элементами. Появилась поддержка showPicker() для <datalist> — теперь можно открывать браузерный picker для списка опций по событию пользователя. Также добавили CloseWatcher: наконец-то можно единообразно обрабатывать закрытие модалок, попапов и кастомных компонентов через Esc или системную кнопку «Назад» на Android, как это делают нативные элементы.
— Больше гибкости в CSS. shape-outside теперь понимает функцию xywh() — можно задавать форму обтекания контентом с привязкой к краям блока. vertical-align стал шорткатом для свойств выравнивания по базовой линии, а @container позволяет указывать только имя контейнера без условия запроса.
— Безопасность и отчётность. Реализовали Reporting API для CSP и Integrity Policy. Теперь можно ловить нарушения политик через ReportingObserver, а не только полагаться на заголовок Report-To. Удобно для мониторинга в production.
Кроме того, добавили captureStream() для медиаэлементов (стримим видео с веб-камеры или экрана напрямую в WebRTC), расширили допустимые символы в DOM-методах (теперь как в HTML-парсере) и внедрили поддержку математического шрифта через font-family: math.
Полный список изменений, включая нововведения для WebDriver и дополнений, — в официальных заметках: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149
#новости #фронтенд #firefox
Есть тут CSS-разработчики? Отмечайтесь в комментариях
@tproger_web
Читайте также в VK и Max
80% проблем с асинхронностью в Angular решают пять операторов RxJS
Когда Angular-проект разрастается, код рискует превратиться в клубок подписок: данные из разных мест нужно склеивать, пользователь кликает быстрее, чем приходит ответ от сервера, а одна необработанная ошибка способна положить целый компонент.
RxJS часто пугает количеством операторов, но на практике львиную долу типовых задач покрывает всего пять из них. В статье разбирают именно те инструменты, которые помогают избавиться от вложенных подписок, отменять устаревшие запросы, управлять параллельными вызовами и делать интерфейс отзывчивым без лишней нагрузки на сервер.
Если хотите перестать гадать, почему данные приходят не в том порядке, и сделать обработку ошибок по-взрослому, смотрите материал: https://habr.com/ru/companies/ruvds/articles/1008646/
#angular
@tproger_web
Читайте также в VK и Max
Как переносить «висячие» слова с помощью JavaScript
Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.
#фронтенд #javascript #ux
@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
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
Автор 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)
Разраб реализовал 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
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"],
// плагин не может сделать ничего сверх этого
})
Для чего используется stopPropagation()
Данный метод используется для предотвращения всплытия или поднятия события вверх по цепочке из предков целевого элемента. Другими словами, он прекращает передачу события от целевого элемента к его предкам. Рассмотрим пример ниже.
При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.
#простымисловами
@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
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
Внимание: 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
--ignore-scripts, чтобы блокировать postinstall-хукиoverrides в package.json.
Интересно было бы увидеть каким кодом пофиксили проблему
@tproger_web
Читайте также в VK и Max
Коды состояния HTTP на котиках 😺
Если объяснять HTTP-состояния текстом скучно, вот забавный проект: https://http.cat/
Сервис показывает мем с котиком, идеально иллюстрирующим код ошибки. Это весело, наглядно и можно использовать в своих проектах.
@tproger_web
Читайте также в VK и Max
Каким был интернет 2000-х 👨🦳
Современные юзеры привыкли к быстрой загрузке и безлимиту. Но олды помнят, как это — смотреть, как картинка появляется на экране по частям и тщательно рассчитывать каждый мегабайт, чтобы не остаться без интернета.
Скорость 56 кбит/с была роскошью, а «выйти в сеть» превращалось в ритуал: отключить телефон, запустить модем и посвятить этому весь вечер. Мы сохраняли страницы на диск, читали письма и тексты офлайн, чтобы не тратить драгоценные минуты, знали коды вроде *17#.
У нас на сайте лежит годный лонгрид по цифровой эпохе того времени. Так что, если хотите свести олдскулы или узнать больше об этих временах — велком. Вдруг пригодится 😒
В каком порядке что изучать в девопсе? Популярных роадмапов куча, идеального нет.
roadmap.sh/devops — самый полный по охвату, но это гигантская интерактивная карта без чёткого порядка: открываешь и тонешь в сотне тем.
github.com/milanm/DevOps-Roadmap — выглядит всё очень уверенно и как будто свежее, но в реальности чел просто обновил заголовок на 2026 год, а внутри всё ещё лежит информация например про Puppet.
devopsroadmap.io — интереснее по подходу: итеративное обучение через сквозной проект, GitOps и security подаются как база, есть ветки роста (SRE, Platform Engineering, MLOps). Но внутри скорее каркас со ссылками, чем полноценный контент. Сетей нет, Ansible нет, облако обзорно. Как навигатор сгодится.
Что реально нужно в 2026 и чего нет ни в одном роадмапе целиком: GitOps (Argo CD/Flux), Platform Engineering, FinOps для больших, OpenTelemetry. Secrets management (Vault, External Secrets) — это вообще первое, что настраиваешь на проекте. Тему AI в пайплайне генераторы контента тоже пока не научились системно покрывать.
Есть курс Яндекс Практикума PRO «DevOps для эксплуатации и разработки». Он хорошо закрывает ядро: Git с Git Flow, GitLab CI, Terraform, Ansible, Docker, Kubernetes, мониторинг (Prometheus + Grafana + Loki), CD с rollback и feature flags, DORA-метрики. Финальный проект в Yandex Cloud с фидбеком от эксперта.
Чего курс не даст: обучение программированию, GitHub Actions, GitOps/Argo CD, Kustomize, облачный провайдер системно (AWS/Azure/GCP), supply chain security, тестирование как дисциплину. Это придётся добирать самостоятельно, как и фундаментальные знания по сетям (не знаю, почему к ним сейчас так мало внимания).
Если нужна структура с менторством — курс + параллельно по roadmap.sh ходить в ширину и в глубину. Если умеете планировать обучение и пинать себя самостоятельно — документация, домашний кластер в minikube и реальные проекты на GitHub закроют 80% потребностей.
JavaScript для всех: деструктуризация
При работе с массивами и объектами часто нужно извлекать отдельные значения, чтобы присвоить их переменным. Без современных возможностей это приводило к громоздкому и повторяющемуся коду — так разработчики работали десятилетиями.
С появлением ES6 в 2015 году у нас появилась деструктуризация: единый, лаконичный синтаксис для распаковки значений из массива или объекта и их присваивания переменным в одном объявлении let, const или var. В самой простой форме — деструктуризации с шаблоном связывания — каждое значение извлекается из литерала и попадает в соответствующий идентификатор за раз.
Понять, как это работает и где может пригодиться вам, поможет эта статья: https://css-tricks.com/javascript-for-everyone-destructuring/
#javascript #основы
@tproger_web
Читайте также в VK и Max
Паттерны современного Node.js
Node.js за годы сильно изменился: от эпохи колбэков и повсеместного CommonJS до современного, чистого и стандартизированного подхода. Если вы пишете на нём уже несколько лет, вы сами видели, как код стал проще, структурированнее и ближе к веб‑стандартам.
Это не только косметические изменения: это фундаментальный сдвиг в подходе к серверной разработке на JavaScript. Современный Node.js меньше полагается на внешние библиотеки, упрощает архитектуру и делает разработку понятнее и приятнее. Давайте разберёмся, в чём суть этих изменений и почему они важны для ваших приложений в 2025 году. Переходите по ссылке: https://habr.com/ru/articles/933702/
#nodejs
@tproger_web
Читайте также в VK и Max