Автор 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

Тренды разработки ПО в 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)