Cloudflare переписала Next.js за неделю — и это проблема для Vercel

Один инженер Cloudflare, ИИ-агент и $1 100 на токены — столько понадобилось, чтобы создать vinext: альтернативу Next.js на базе Vite, которая деплоится в Cloudflare Workers одной командой.

Ключевое изменение для разработчика: Turbopack заменён на Vite. Сборка до 4 раз быстрее, клиентские бандлы на 57% меньше. Покрытие API Next.js — 94%, так что большинство проектов мигрирует без серьёзных правок.

Для Vercel это неудобная ситуация: проприетарный формат вывода Turbopack был главным «рвом», удерживавшим Next.js-проекты на их платформе. Теперь этот ров засыпан за одну рабочую неделю.

vinext официально экспериментальна и не прошла нагрузочного тестирования — в прод тащить рано.

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

Читать полностью…

Одна схема вместо кучи валидаций: schema-driven подход к формам

Типичная картина: правила валидации размазаны по компонентам, дублируются между фронтом и беком, а при изменении бизнес-логики надо найти и поправить десяток мест. Schema-driven подход решает это через единый источник правды — JSON/TypeScript-схему, которая описывает и структуру данных, и правила проверки.

Схема определяется один раз, используется везде: фронт рендерит поля динамически и валидирует на клиенте, бек проверяет те же правила на сервере. Zod или Yup парсят схему и генерируют валидаторы — подключить к React Hook Form несложно.

В LogRocket разобрали на примере, как построить динамическую форму по схеме и реализовать асинхронную валидацию — когда нужно проверить уникальность email через API прямо в процессе ввода.

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

Читать полностью…

Microsoft переписала TypeScript на Go

21 апреля вышла TypeScript 7.0 Beta. Весь компилятор переписан с TypeScript на Go. Работает примерно в 10 раз быстрее старого tsc.

Новый бинарник называется tsgo, живёт рядом со старым компилятором и не конфликтует с ним. Логика проверки типов структурно идентична TypeScript 6.0 — то есть переход должен быть прозрачным.

Скорость берётся из нативного кода Go плюс параллелизм: парсинг, чекер и эмиттер работают в несколько потоков одновременно. Флаг --checkers задаёт число type-check воркеров (по умолчанию 4), --builders — параллельная сборка монорепозитория. Bloomberg, Figma, Google, Slack и ещё десяток компаний уже попробовали в бою.

Поставить: @typescript/native-preview@beta. Запустить: tsgo вместо tsc. Несколько старых флагов (target: es5, moduleResolution: node) пока сломаны — так сказать, приятный бонус бета-версии.

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

Читать полностью…

В Chrome 143 появился новый тип container queries — anchored

Anchor positioning уже умеет переворачивать тултип на другую сторону, когда не хватает места. Проблема была в том, что стрелка-указатель при этом оставалась на прежней стороне — CSS не знал, сработал ли fallback.

container-type: anchored это фиксит. Теперь можно напрямую спросить у контейнера, какой position-try активен:

@container anchored(fallback: none) {
  /* тултип справа — стрелка слева */
}

@container anchored(fallback: flip-inline) {
  /* тултип перевернулся — стрелка справа */
}

В статье на этой основе собирают toggletip с нуля: popover API, декларативные якоря через атрибут anchor, modern attr() для автоматической привязки без дублирования CSS, и corner-shape: scoop для скруглённой стрелки вместо border-трика с треугольником.

Фича пока только Chrome 143+, но через @supports (container-type: anchored) легко добавляется как прогрессивное улучшение — тултипы работают везде, стрелка появляется там, где поддержка есть.

Подробности с примерами и живым демо по ссылке.

#css

Читать полностью…

«Хочу в IT, но не знаю куда» — это нормально. Вот тест, который помогает разобраться

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

YADRO — одна из самых быстрорастущих технологических компаний страны — сделали квиз на основе реальных задач своих стажировок. Семь вопросов без правильных и неправильных ответов: просто выбираете то, что откликается. На выходе — конкретное направление с описанием задач и честной вилкой зарплат после стажировки.

Полезно даже не для того, чтобы попасть именно в YADRO — а чтобы понять, в какую сторону вообще смотреть.

Пройти квиз: https://tprg.ru/rSKQ

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

Читать полностью…

CSS Anchor Positioning: соединяем два круга одной стрелкой без JavaScript

Автор эксперимента показывает, как связать два перетаскиваемых круга динамической стрелкой, используя только CSS. В основе — Anchor Positioning, который позволяет привязать один элемент сразу к двум якорям и построить вокруг них ограничивающий прямоугольник. Дальше в дело вступают clip-path для формирования наконечника, поворот через atan() и масштабирование через scale(-1, 1) для остальных трёх положений.

Расстояние между кругами вычисляется через CSS-функцию hypot() и выводится через кастомные счётчики. При сближении форма стрелки меняется — за это отвечают if() и проверка расстояния. Всё работает в Chrome и Edge, где Anchor Positioning уже поддерживается.

Автор не призывает заменять JS-библиотеки, но показывает, насколько далеко зашёл современный CSS.

Разбор всех технических приёмов — в статье: https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

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

Читать полностью…

Kubernetes: от kubectl до полного стека из 10+ инструментов

K9s → Argo CD → KEDA → Karpenter → Network Policies → Istio → Secrets Store CSI → Kyverno → Prometheus → Jaeger...

Почему каждый из них появился и какую проблему решает: https://tprg.ru/XcMT

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

Читать полностью…

Постоянный доступ в Kubernetes: как атакующие закрепляются в кластере и остаются незамеченными

Вы думаете, что если злоумышленник получил доступ к ноутбуку администратора на пять минут — это не страшно? А зря.

Чтобы изменить мнение, советуем почитать перевод статьи Рори Маккьюна «Beyond the Surface» — детальный разбор одного реального вектора атаки на Kubernetes. Автор показывает, как с помощью встроенных механизмов (kubectl debug, containerd, статические манифесты, CSR API, Token Request API) можно:
— получить root-доступ к узлу;
— запустить скрытый контейнер в обход API;
— организовать удалённое управление через Tailscale;
— создать вечные учётные данные, которые невозможно отозвать без ротации корневого сертификата.

В статье — не только техники атак, но и чёткие признаки обнаружения, а главное — меры защиты: изоляция API-сервера от интернета, минимальные привилегии RBAC, централизованные логи узлов.

Полный текст: https://tprg.ru/gfJ6

Читать полностью…

Temporal: 9-летний путь к исправлению ошибок в работе со временем в JavaScript

Старый Date был мутабелен, зависил от временной зоны и содержал десятки подводных камней. Temporal — современная иммутабельная замена с явными типами: ZonedDateTime для работы с часовыми поясами и DST, Instant для передачи между серверами, Plain для простых сценариев.

Поддержка уже есть в Firefox, Chrome, Edge и TypeScript 6.0. Но как к этому пришли? В статье один из разработчиков Bloomberg поделился историей эволюции стандарта и рассказал подробнее об архитектуре: https://bloomberg.github.io/js-blog/post/temporal/

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

Читать полностью…

Тренды разработки ПО в 2026 году

Разработчику сегодня приходится разбираться в ИИ, знать несколько ЯП, ориентироваться в 3-4 стеках.

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

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

@tproger_web
Читайте также в 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 и Дзен

Читать полностью…

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

Читать полностью…

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();
}

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

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

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

Читать полностью…

WebGL-портфолио на Three.js: акварельный 3D через один шейдер

Дизайнер Wei Xianyao опубликовал разбор своего портфолио Susurrus — интерактивной 3D-сцены в браузере, стилизованной под акварель. Стек: React Three Fiber, Drei, React Three Rapier, Howler.js, TypeScript.

Весь эффект «картины» — один Kuwahara-шейдер в постпроцессинге. Под него подгонялось всё остальное: отражающая вода (MeshReflectorMaterial + кастомный шейдер поверх), частицы, физика появления объектов по клику. Модели в Blender строились сразу с учётом шейдера, чтобы видеть итог на этапе моделирования.

Интро-анимация при скролле — ScrollControls передают uProgress в шейдер на ScreenQuad. Компактный способ сделать разворачивающуюся сцену без лишних зависимостей.

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

Читать полностью…

robots.txt из двух строк может обнулить всю вашу SEO-работу над сайтом

robots.txt — файл в корне, который легко сгенерировать у ИИ или взять из шаблона не глядя. Одна неверная директива, и Googlebot тихо разворачивается у порога: ни ошибки, ни предупреждения, просто сайт исчезает из выдачи.

Самый частый случай: Disallow: /, оставленный с dev-окружения при деплое на прод. В Next.js и похожих фреймворках конфиг нередко копируется целиком вместе с блокировкой. Ещё хуже, когда закрыты CSS и JS: Googlebot не отрендерит страницу, даже если HTML открыт.

Коварство в том, что краулер не сообщает об ошибке. Он просто уходит. Симптом обнаруживается через недели, когда трафик уже упал.

Я нашёл для вас разбор частых ошибок в robots.txt с примерами конфигураций — рекомендую изучить и проверить свой сайт. Быстро проверить доступность конкретной страницы можно в Google Search Console в разделе «Проверка URL».

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

Читать полностью…

Как правильно передать проект на аутсорс

Внешняя команда подключена, бюджет утверждён. Но через две недели выясняется, что никто не понимает, кто за что отвечает, а кодовая база распалась на свою и чужую.

Почему так происходит?
Потому что бизнес часто воспринимает смену исполнителя как технический момент, а не как отдельный управленческий процесс.

Погружаемся в эту статью. Она про то, как построить транзитный период по-человечески:
— Что должно быть в transition period (сроки, бюджет, приоритеты).
— Почему внешняя команда должна коммитить в общий Git и писать тесты как инхаус.
— Зачем нужна валидация артефактов в первые сутки.
— Как зафиксировать завершение перехода, а не жить в режиме онбординга годами.

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

Читать полностью…

Просто напоминаю, что JS вам не нужен

Читать полностью…

Формы в Angular всегда были той ещё головной болью — кажется, это начинает меняться

В Angular 21 появились Signal Forms — экспериментальная альтернатива привычным реактивным формам. Главная идея: форма и данные синхронизируются сами, без ручного перекладывания значений туда-обратно.

Грубо говоря, вместо вот этого:

ngOnChanges() {
  this.loginForm.patchValue({ ...this.login });
}

Теперь просто:

loginForm = form(this.login);

Форма сама следит за состоянием. Меньше кода, лучше типизация, встроенные debounce, hidden, disabled, readonly и валидация — синхронная и асинхронная.

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

#javascript

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

Читать полностью…

Совет по анимациям CSS

Не забывайте про инструмент animation inspector в DevTools — он отлично подходит для отладки анимаций и точного просмотра временных шкал. Можно быстро дебажить, видеть все ключевые кадры и скрупулёзно скрабить по таймлайну.

Как открыть вкладку Анимации 👇:

🔘 Откройте DevTools, нажав F12 или CTRL+SHIFT+I.

🔘 В DevTools перейдите в меню (три вертикальные точки в правом верхнем углу) и выберите "Дополнительные инструменты" → "Анимации".

🔘 Если вы впервые открываете вкладку, она может быть пустой, пока на странице не будет запущена анимация

Если не использовали — самое время попробовать 😏

Читать полностью…

Мы запустили разработчиков в открытый космос

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

На каждой планете вас ждет испытание. Сможете вычислить, как британским астрономам удалось перехватить снимки с «Луны-9» раньше создателей аппарата? Вспомните, почему замолчал первый искусственный спутник Земли? Или догадаетесь, сколько команд в сутки вообще могла принять первая орбитальная станция «Салют-1»?

Те, кто исследует все миры нашей системы и дойдет до финала, смогут выиграть профессиональный телескоп и другие призы.

Как присоединиться к экспедиции:
1. Пройдите викторину на всех планетах, больше правильных ответов — больше шансов на приз.
2. Зарегистрируйтесь на платформе SourceCraft.
3. Оставьте ссылку на свой репозиторий в специальной форме.

Надевайте скафандр и запускайте миссию

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

Читать полностью…

Как превратить консольную утилиту в веб-демо на Rust + WASM

Если у вас есть консольное приложение без системных вызовов, его можно запустить в браузере. Автор статьи переписал логику на Rust, собрал в WebAssembly и получил статическую страницу с терминальным интерфейсом.

Главные шаги: экспорт функции через #[wasm_bindgen], сборка через wasm-pack, интеграция с JS и деплой на GitLab Pages через простой CI/CD. Всё это без сервера и сложных окружений.

Подробный разбор с кодом и настройками читайте в материале: https://habr.com/ru/articles/1014026/

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

Читать полностью…

Почему Postgres игнорирует ваш индекс — и что с этим делать

Вы добавили индекс на колонку name, но SELECT всё равно сканирует всю таблицу. Три главные причины: вы обернули колонку в функцию (WHERE lower(name) = 'pikachu'), перепутали порядок в композитном индексе или забыли про INCLUDE.

Индекс — это отсортированная структура для бинарного поиска. Но стоит написать WHERE lower(name) вместо WHERE name, и Postgres перестаёт его видеть. Решение — функциональный индекс на lower(name).

Композитный индекс (type_1, type_2) работает для запросов на type_1 и обе колонки, но не на одну type_2 — порядок важен. INCLUDE хранит данные в индексе, но не индексирует их — результат Index Only Scan без похода в таблицу.

Частичный индекс с WHERE покрывает только нужные строки — для soft-delete экономит место и ускоряет запись.

Джон Чартер разбирает все три типа индексов с примерами на таблице покемонов — и объясняет, почему EXPLAIN ANALYZE ваш лучший друг.

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

Читать полностью…

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

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

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

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

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

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

@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)

Читать полностью…

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

Читать полностью…

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)

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

GitHub
Демо

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

Читать полностью…