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

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

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

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

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

@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

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

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

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

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

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

@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

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

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

Формы в 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)

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

В 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

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

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

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

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

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

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

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

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

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

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

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