👉 @sWebDev | #книги

✨ Анимации в React без библиотеки анимаций

В React 19.3 стал стабильным компонент <ViewTransition>. Он отдаёт анимацию переходов между состояниями интерфейса браузерному View Transition API.

Автор статьи в блоге LogRocket собрал одно приложение дважды: на библиотеке анимаций Motion и на <ViewTransition> с CSS. Модалка в нативной версии:

function openModal() {
  startTransition(() => setIsOpen(true));
}

{isOpen && (
  <ViewTransition enter="modal-enter" exit="modal-exit">
    <div className="modal-overlay" onClick={closeModal}>
      <ModalContent onClose={closeModal} />
    </div>
  </ViewTransition>
)}

Сами движения описываются в CSS. JS в этой сборке похудел на 39 005 байт (gzip), зато кода анимаций вышло 253 строки против 75 у Motion.

Для жестов, пружин и эффектов по скроллу автор скорее оставил бы библиотеку. А в статье ещё сортировка 250 карточек, навигация и перелёт картинки, плюс грабли, на которые он наступил.

👍 - если было полезно

👉 @sWebDev

⚡ Angular 22.2: данные маршрута грузятся параллельно

Резолверы в Angular Router загружают данные до открытия страницы. Но вдоль иерархии маршрутов они идут по очереди: родитель грузится 2 секунды, дочерний маршрут 3, и пользователь ждёт 5.

В Angular 22.2 появилась альтернатива: Router Resources. В маршруте пишут свойство resources с обычными resource, а роутер запускает их все сразу. В том же примере ждать придётся 3 секунды.

{
  path: 'passenger-edit/:id',
  component: PassengerEdit,
  resources: (ctx) => ({
    passenger: createSimplePassengerResource(ctx.params),
  }),
},

Компонент получает готовое значение как input, так же как от резолвера. А если обернуть ресурс в nonBlocking, страница откроется сразу, и загрузку покажет сам компонент.

Пока это Developer Preview: до стабилизации API может поменяться в деталях.

В статье ещё перезагрузка данных без новой навигации и редирект, когда их нет.

👍 - если было полезно

👉 @sWebDev

⚡ React Compiler в Vite теперь работает на Rust

React Compiler оптимизирует React-компоненты прямо во время сборки. Раньше в Vite его подключали через Babel. В @vitejs/plugin-react v6.1.0 появилась экспериментальная нативная версия от команды oxc, которая делает JS-инструменты на Rust.

Автор перевёл на неё конструктор сайтов из 1036 файлов. Сама компиляция ускорилась с 14,3 до 0,81 секунды. Сборка целиком ускорилась скромнее: с 22,1 до 9,3 секунды.

На Vite 8+ переход сводится к упрощению конфига. Babel-плагин больше не нужен:

npm install -D oxc-transform-react

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react({ compiler: true })],
});

Учтите, что поддержка пока помечена как экспериментальная.

В статье есть рецепт и для React Router в framework mode, где плагин Vite React не используется.

👍 - если было полезно

👉 @sWebDev

🛡️ Как не дать чужому пакету украсть ваши секреты через pnpm install

Атаки на npm-пакеты обычно идут по одной схеме. Пакет взламывают, его postinstall-скрипт запускается у вас на машине и уносит данные. В менеджере пакетов pnpm v10 есть настройки, которые сильно усложняют такой сценарий.

Скрипты установки там выключены по умолчанию. А minimumReleaseAge откладывает установку только что опубликованных версий: большинство взломанных пакетов обнаруживают и снимают за считанные часы.

Мягкий вариант конфига из статьи:

# pnpm-workspace.yaml

blockExoticSubdeps: true
trustPolicy: no-downgrade

minimumReleaseAge: 1440 # 1 day

allowBuilds:
  esbuild: true
  fsevents: true

Подвох в том, что пакеты, которым скрипты нужны по делу (нативные аддоны, esbuild), придётся явно разрешить через allowBuilds.

В статье есть и строгий конфиг: неделя ожидания новых версий и падение CI на всём подозрительном.

👍 - если было полезно

👉 @sWebDev

🪄 Один URL: модалка поверх списка и полноценная страница

В каталоге детали карточки удобно открывать поверх списка. Но если модалка живёт в useState, адрес не меняется. Ссылкой не поделиться, после reload остаётся список, а поисковик деталей не видит.

В Next.js App Router это решают Parallel Routes и Intercepting Routes. Модалка лежит в слоте @modal, который layout рисует рядом со страницей. Папка с префиксом (.) перехватывает обычный маршрут:

@modal/
  (.)events/
    [id]/
      page.tsx

При клике через Link адрес меняется на /en/events/123, а детали открываются поверх списка. При прямом заходе или reload перехвата нет, и рендерится обычная страница со своими metadata и canonical.

Слоту обязательно нужен default.tsx, который возвращает null. Без него при прямом заходе можно получить 404.

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

👍 - если было полезно

👉 @sWebDev

🛟 Angular 22.2: упавший шаблон больше не ломает страницу

Раньше ошибка при рендере шаблона уходила в глобальный ErrorHandler, а часть страницы оставалась недорисованной.

Новый блок @boundary ограничивает ущерб: если внутри что-то бросит исключение, Angular покажет вместо этой секции блок @error. Идея подсмотрена у React.

@boundary {
  <app-chart />
} @error (let err; retry = $reset; when isNetworkError(err)) {
  <p>{{ err.message }}</p>
  <button (click)="retry()">Retry</button>
} @error {
  <p>Something went wrong.</p>
}

Первый @error ловит сетевые ошибки и даёт повторить рендер через $reset, второй ловит всё остальное. С Resource API это удобно: value() при сбое загрузки бросает исключение, и проверять error() заранее не нужно.

Пока @boundary в статусе developer preview.

А ещё в статье Router Resources: данные маршрутов грузятся параллельно, а не цепочкой резолверов.

👍 - если было полезно

👉 @sWebDev

🧩 Страница в Angular, которая не знает про роутер

Обычно компонент страницы сам берёт userId из ActivatedRoute, зовёт UserService и рисует «Loading...». Переиспользовать такой компонент сложно, а для теста нужен роутер и мок сервиса.

Опция роутера withComponentInputBinding (есть с Angular 16) сама записывает данные маршрута в инпуты компонента с тем же именем:

provideRouter(routes, withComponentInputBinding())

Загрузку пользователя автор выносит в резолвер, то есть функцию, которая получает данные до перехода на маршрут. В компоненте остаётся одна строка с input.required<User>().

Учтите, что роутер сверяет только имя ключа и имя инпута, а типы не проверяет. Если резолвер вернёт объект другой формы, всё скомпилируется. Автор советует общий интерфейс и интеграционный тест.

В статье разобрано, где здесь инверсия зависимостей и как показать лоадер, пока резолвер ждёт ответа.

👍 - если было полезно

👉 @sWebDev

🧭 Предзагрузка в TanStack Router, которая тихо ломается

В TanStack Router данные можно начать грузить в loader маршрута ещё до рендера, а компонент заберёт их из кэша TanStack Query. Но запрос при этом описан в двух местах:

// loader
await context.queryClient.ensureQueryData(
  dashboardQueryOptions(params.dashboardId, deps),
)

// component
const { data } = useSuspenseQuery(
  dashboardQueryOptions(params.dashboardId, { asOf }),
)

Если они разойдутся, ошибки не будет. Loader скачает лишнее, а компонент сделает второй запрос.

TkDodo предлагает собирать queryOptions один раз в новой функции маршрута context. Loader и компонент берут их оттуда (компонент через useRouteContext()), и разойтись им уже не в чем.

Учтите, что на момент написания статьи функция context ещё не была описана в документации.

Отдельно TkDodo объясняет, почему такой контекст не плодит лишних ререндеров.

👍 - если было полезно

👉 @sWebDev

🚀 Next.js 16.4 научил ИИ-агента искать лишний JavaScript

В Next.js 16.4 появился next-bundle-optimizer: навык для ИИ-агента, который разбирает граф модулей сборщика Turbopack и ищет код, попавший в бандл зря.

Пример: тяжёлый компонент обёрнут в lazy(), но другой модуль импортирует его напрямую, и он всё равно грузится сразу. Агент прослеживает такие цепочки и предлагает, где их разорвать.

npx skills add vercel/next.js --skill next-bundle-optimizer

Затем в агенте вызываете /next-bundle-optimizer. По умолчанию он только сообщает о проблемах, а /next-bundle-optimizer fix применяет правки и сравнивает размер до и после.

Учтите: нужен Turbopack, без его графа модулей анализ не работает. С Next.js 16 это сборщик по умолчанию.

В Vercel агент так убрал почти 2 МБ сжатого JS на v0 и vercel.com, и список его находок стоит посмотреть.

👍 - если было полезно

👉 @sWebDev

🚀 Tailwind или StyleX: что меняет реальная миграция

StyleX: система стилей от Meta. Стили пишутся объектами в TypeScript и при сборке превращаются в статический CSS.

Разработчик сделал 20 компонентов на Tailwind и переписал их на StyleX с новым пропом sx={}. Кнопка с вариантами выглядит так:

return (
  <button sx={[styles.base, styles[variant], styles[size]]}>
    {children}
  </button>
);

Кода стало вдвое больше (3143 строки против 1568), а размер CSS и время сборки почти не изменились. Зато TypeScript ловил опечатки в токенах и неверные варианты до браузера. В Tailwind класс вроде bg-blue-60 может молча не сработать.

StyleX стоит рассмотреть для библиотеки компонентов с общими токенами и кучей вариантов. Но его публичная экосистема намного меньше, многое придётся писать самому.

В статье разобраны пять граблей миграции, от barrel-экспортов до порядка CSS-слоёв.

👍 - если было полезно

👉 @sWebDev

🎬 Демо-ролик, который пересобирается одной командой

Remotion позволяет писать видео как React-приложение. useCurrentFrame() отдаёт номер кадра, interpolate() превращает его в значение анимации, <Sequence> задаёт, когда идёт сцена. На выходе обычный MP4.

Так разработчик калькулятора на Next.js заменил запись экрана. Поля заполняются по заданным кадрам, данные лежат в мок-файлах. Изменился дизайн: правишь пару строк и рендеришь заново:

npx remotion render remotion/index.ts feature-walkthrough output/feature-walkthrough.mp4

Это для роликов, которые делаешь снова и снова. По его замерам первое видео быстрее записать с экрана, а со второго выигрывает Remotion.

Но есть подвох: каждый кадр рендерится как статичный компонент. useState, useEffect и localStorage там не работают, так что компоненты придётся переделать на props.

В статье ещё ролик «до и после» и видео, которое Claude Code собрал по одному промпту.

👍 - если было полезно

👉 @sWebDev

🔍 Значение в Vue поменялось, а экран нет

Достали поле из реактивного объекта в переменную, поменяли, а шаблон показывает старое. Ошибок нет, watch молчит, nextTick не помогает.

Дело в устройстве: reactive() отдаёт Proxy-обёртку, которая следит за парой «объект плюс имя свойства», а не за значением. После деструктуризации в переменной лежит обычное число без связи с прокси.

Выхода два: превратить свойства в ref через toRefs или не разбирать объект.

const { count } = toRefs(state)    // count.value связан с state.count в обе стороны
state.count++                      // либо просто не разбирать объект

С props то же самое. С Vue 3.5 разобранные props остаются реактивными, но только в <script setup>: это работа компилятора, в обычном JS связь рвётся.

В статье ещё shallowRef для таблиц на 50 000 строк, markRaw и ловушки computed и watch.

👍 - если было полезно

👉 @sWebDev

✨ Next.js 16.4: AI-агент сам убирает скелетоны при переходах

Знакомая картина: кликаешь по ссылке и видишь скелетон, пока грузятся данные. Возвращаешься на ту же страницу, и он снова там.

В Next.js 16.4 появился Skill next-partial-prefetching-optimizer, набор инструкций для вашего coding-агента. Вы словами описываете, что должно быть готово до клика.

Агент пишет Playwright-тест с хелпером instant(): тот проверяет, что видно ещё до прихода данных навигации. Потом агент правит кэширование и предзагрузку, пока тест не пройдёт. Тест остаётся в проекте и ловит регрессии в CI.

npx skills add vercel/next.js --skill next-partial-prefetching-optimizer

Важно, что Skill рассчитан на приложения, где уже включены Cache Components и Partial Prefetching (предзагрузка только переиспользуемых частей страницы).

В статье разбор на живом v0, AI-конструкторе Vercel, и в том числе почему первая версия раздула префетчи в 2,9 раза.

👍 - если было полезно

👉 @sWebDev

🛡️ Next.js: две критические уязвимости с выполнением кода на сервере

В августе команда фреймворка Next.js выпустила патчи v16.3.3 (Active LTS) и v15.5.24 (Maintenance LTS). Обе закрытые дыры позволяют запустить чужой код на сервере без авторизации.

Первая сидит в libheif, которую использует sharp при оптимизации картинок. Достаточно, чтобы Next.js обработал присланную злоумышленником AVIF-картинку.

Вторая касается серверов на Windows, где приложение использует и Pages Router, и App Router без Cache Components. Linux и macOS не затронуты, обходного пути нет.

npm install next@15.5.24  # for 15.5
npm install next@16.3.3   # for 16.3

Учтите: в этих версиях оптимизация AVIF просто отключена, пока исправление не придёт из upstream.

Если проект на 15.5 или 16.3 и lock-файл давно не трогали, самое время проверить, какая там версия next.

👍 - если было полезно

👉 @sWebDev

✨ Пять строк, которые копировали в каждый проект на shadcn, стали пакетом

Проекты на shadcn (компоненты ставятся в код командой npx shadcn add) годами начинались с файла lib/utils.ts. В нём вручную собирали функцию cn для className из двух библиотек: clsx и tailwind-merge.

С сентября 2026 года cn живёт в отдельном пакете cn. Это замена twMerge(clsx(...)) с тем же API, так что вызовы в коде не меняются, а зависимость одна вместо двух.

import { cn } from "cn"

<div className={cn("flex items-center", className)} />

Компоненты shadcn теперь импортируют cn прямо из пакета, а npx shadcn init создаёт lib/utils.ts в одну строку.

Старые проекты не ломаются, но clsx и tailwind-merge сами из них не уйдут. Для этого в CLI есть команда migrate cn: она перепишет импорты и удалит старые пакеты, когда на них больше ничто не ссылается.

👍 - если было полезно

👉 @sWebDev

✨ shadcn научился ставить код из приватных репозиториев

CLI shadcn добавляет в проект готовые файлы из реестров (registry). С июня реестром мог быть любой публичный GitHub-репозиторий, теперь и приватный: внутренняя дизайн-система, наборы фич, правила для агентов.

Если вы залогинены в GitHub CLI (gh) и можете читать репозиторий, настраивать ничего не нужно:

pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit

Токен остаётся внутри gh и не попадает в процесс shadcn. Публичные репозитории по-прежнему читаются анонимно.

В CI без gh придётся задать GH_TOKEN или GITHUB_TOKEN. Авторы советуют fine-grained токен на один репозиторий с правом Contents: Read-only.

Команды list, search и view тоже работают с приватными реестрами, а учётные данные CLI берёт, только если анонимно репозиторий не прочитать.

👍 - если было полезно

👉 @sWebDev

🚀 Поиск с опечаткой по 100 000 товаров за 2 мс

KiaraDB это открытый поисковый движок в памяти для TypeScript и Java. Работает и в браузере, и на сервере.

Большинство JS-библиотек поиска, включая популярный Fuse.js, на каждый запрос перебирают все записи. Чем больше данных, тем медленнее поиск. KiaraDB делает работу заранее: вы описываете поля, загружаете записи и один раз вызываете store.prepare(). У каждого поля появляется свой индекс.

В бенчмарке автора поиск «wireles lamp» по 100 000 товаров занял 1,95 мс, у Fuse.js 422 мс. Замер сделан на одной машине, данные в основном синтетические.

npm install @kapoorlabs/kiara-ts

Подходит для каталогов и справочников, которые собирают один раз и опрашивают тысячи раз. Но данные здесь снимок: любое изменение требует пересборки, а на 100 000 записей она заняла 4,3 с и 489 МБ памяти.

В статье один store ищет шестью способами, от диапазонов дат до автодополнения.

👍 - если было полезно

👉 @sWebDev