Vercel AI SDK для структурированного AI-вывода

Vercel AI SDK и AI Gateway позволяют вызывать разные модели из бэкенда приложения и получать не просто текст, а структурированный ответ по Zod-схеме. Это удобно, когда AI должен создавать данные в формате, который сразу можно сохранить в базу и переиспользовать в существующих компонентах. Это снимает привязку к одному провайдеру, упрощает фолбэки между моделями и даёт контроль над форматом ответа, а не только над промптом.

https://blog.master.dev/having-fun-with-vercels-ai-sdk-and-ai-gateway/

Nuxt 4.5 ускоряет SSR и обновляет сборку

Nuxt 4.5 приносит экспериментальный SSR streaming, переход на Vite 8 и новый builder на базе Rsbuild для Rspack 2. Streaming сразу отдает HTML shell и может улучшить TTFB, но не уменьшает само серверное время рендера, поэтому его стоит проверять на middleware, редиректах, cookie и кеширующих правилах.

https://www.infoq.com/news/2026/08/nuxt-4-5-streaming/

pipenet для быстрого туннеля локального сервера

pipenet — open source альтернатива localtunnel, которая позволяет поднять собственную туннельную инфраструктуру и быстро открыть локальный сервер в публичном интернете. Полезно, когда нужно показать фронтенд, бэкенд или webhook без ручной настройки прокси и лишней возни с сетями.

https://github.com/punkpeye/pipenet

CSS random() для кроссбраузерной случайности

Появился полифилл для будущей CSS random(), который позволяет использовать случайные значения в стилях в Chrome, Firefox и Safari без переписывания на JavaScript. Это полезно для эффектов вроде конфетти, звездного фона и других декоративных элементов, где нужна управляемая случайность прямо в CSS. На практике нужно подключить скрипт, пометить нужные элементы классом randomized и записывать случайные значения в custom properties с префиксом --random, чтобы код остался совместимым с нативной реализацией, когда она доедет до всех браузеров.

https://css-tricks.com/css-random-function-polyfill/

Как быстро проверить HTML-письмо в Gmail

HTML-письмо можно вставить прямо в Gmail и сразу увидеть, как оно выглядит перед отправкой. Это удобно для быстрой проверки верстки, особенно если письмо собрано в MJML или другом шаблонизаторе и нужен финальный HTML без лишних шагов. Для реальной рассылки обычно всё равно используют сервисы вроде Mailchimp или Postmark, но для быстрого теста такой способ экономит время и помогает поймать проблемы с отображением раньше.

https://blog.codepen.io/2026/08/31/chris-corner-what-do-you-do-with-an-html-email/

Knip для Angular: чистим мертвый код автоматически

Knip помогает в крупных Angular и TypeScript-проектах находить неиспользуемые зависимости, файлы, экспорты и битые импорты, а затем держать это под контролем через pre-commit и CI/CD. В проекте с Nx workspace его настроили через knip.config.ts, автогенерацию workspaces и валидацию конфигурации, чтобы не полагаться на ручную проверку.

https://habr.com/ru/companies/tbank/articles/1078438/

Как разложить React-проект по папкам

Практичная схема для React-проектов: от одного файла к файловой структуре с папками на компонент, где рядом лежат реализация, тесты, стили, типы и хелперы. Такой подход помогает не раздувать src, держать границы компонентов видимыми и не тащить внутрь лишние детали. Для небольших экранов можно оставить всё в одном файле, но как только компонент начинает жить своей жизнью, его лучше выносить в отдельную папку и экспортировать только публичный API.

https://www.robinwieruch.de/react-folder-structure/

Как сделать SVG-иконки живее с squash and stretch

Разбор приёма squash and stretch для SVG-микроинтеракций. Он помогает сделать иконки и стрелки более естественными и заметными без тяжёлой анимации: можно анимировать path через CSS, а для более широкой поддержки использовать Motion. Практически это даёт более приятный hover-эффект, учитывает prefers-reduced-motion и лучше работает, если вместо обычного state-based hover запускать короткую анимацию по событию.

https://www.joshwcomeau.com/animation/squash-and-stretch/

Coaction переносит подписки и вычисления в runtime

Миграция с Zustand на Coaction показывает разницу между локальными селекторами и реактивным графом внутри стора. В Coaction чтение становится подпиской, а вычисляемые значения живут как общие узлы с зависимостями и кешированием. Это важно для больших приложений, где вокруг стора разрастаются useMemo, useShallow, селекторы и ручная синхронизация зависимостей.

https://dev.to/unadlib/reads-are-subscriptions-migrating-from-zustand-to-coaction-3228

Авторизация в Next.js ближе к данным

Разбор того, где в Next.js с App Router, React Server Components и Server Actions ставить проверки доступа, чтобы закрыть чтение и запись до обращения к базе. Показываем рабочую схему: проверка сессии в data access и service layer, использование getAuth и getAuthOrRedirect, а для маршрутов и layout держть в уме, что это улучшает UX, но не заменяет защиту на уровне данных.

https://www.robinwieruch.de/next-authorization/

Устарел ли next‑intl? И как реально оптимизировать такую архитектуру

next-intl долго был стандартом для i18n в Next.js, но в App Router у него есть заметные архитектурные издержки: в браузер часто уезжают переводы со всего приложения и динамический вызов t() мешает tree-shaking.
Выход: грузить сообщения не в корневом лейауте, а локально по роутам и неймспейсам + переносить переводимый статичный текст в RSC через getTranslations().

https://habr.com/ru/articles/1077908/

Как Turbopack режет JS на чанки

Turbopack в Next.js 16.3 экспериментально улучшил разбиение JavaScript на чанки. Это ускоряет загрузку страниц и помогает переиспользовать общий код между роутами: вместо одного тяжёлого бандла на весь сайт или отдельного бандла на каждую страницу сборка может находить баланс между размером загрузки и кэшированием.

https://nextjs.org/blog/turbopack-chunking

Видео-спрайты против Lottie на мобильных

Для крупных анимаций в встраиваемом виджете Lottie на iPhone начал греть процессор и вызывать троттлинг, а замена на видео-спрайты сняла нагрузку с CPU за счёт аппаратного декодирования. Но у видео-спрайтов есть цена: их нужно вручную ставить на паузу, потому что IntersectionObserver не видит скрытие через opacity, оверлеи и модалки.

https://habr.com/ru/articles/1078644/

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг! 
[+ разбор 50 сложных вопросов в подарок ]

17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!

Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,

Как это будет:

📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе

📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью

📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ

Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы

И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!

🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥

Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot

Реклама.
О рекламодателе.

Как сделать липкий хедер с подменой фона

Показан CSS-приём для sticky header, который визуально меняет фон при скролле без JavaScript: в hero и в основном контенте стоят sticky blocker-элементы, совпадающие по цвету с фоном секций и перекрывающие контент под фиксированным хедером. Это полезно, когда нужен аккуратный переход между секциями и хочется избежать лишней логики на скролле.

https://www.joshwcomeau.com/css/header-blockers/

Three.js демо с физикой и 3D Парижем

Интерактивное демо на Three.js превращает Эйфелеву башню в катапульту: модель можно деформировать, накапливать энергию и запускать шар по траектории с коллизиями и приземлением. Хороший пример того, как сочетать физику, анимацию и реальные 3D-данные из Cesium ion, чтобы делать не просто красивую сцену, а живой веб-опыт с географическим контекстом.

Демо | Github

https://tympanus.net/codrops/2026/09/01/bend-aim-fling-turning-the-eiffel-tower-into-a-catapult-with-three-js/

Как Shop.app собрали на Remix и Vite

Shopify показал, как на Remix быстро превратить маркетинговый сайт Shop в полноценное веб-приложение с SSR, роутингом, prefetch и возможностью переиспользовать логику, стили и UX из React Native через monorepo. Это хороший пример того, как не переписывать инфраструктуру с нуля, а встроить новый веб-слой в уже существующий стек и начать выпускать фичи быстрее.

https://remix.run/blog/shop-case-study

Как OpenAPI ускорил генерацию email

Кейс про spec-driven подход для email-платформы: вместо ручного правления до 15 файлов на одно письмо команда описывает контракт в OpenAPI, а CLI генерирует NestJS-артефакты, React-компонент и типы. Это убирает рассинхрон между бэкендом и фронтендом, фиксирует правила шаблонов и сокращает добавление нового письма с часов до минут.

https://habr.com/ru/companies/yoomoney/articles/1076874/

Процедурная геометрия в Three.js и WebGPU

Показан рабочий подход к построению гибкого Geometry Painter на Three.js с WebGPU и TSL. Здесь есть выбор поверхности, генерация процедурной геометрии, свои шейдеры, освещение и постобработка, то есть набор техник для интерактивных 3D-инструментов и визуальных редакторов без упора на готовые меши.

Демо | Github

https://tympanus.net/codrops/2026/08/11/exploring-procedural-geometry-with-three-js-and-webgpu/

Как делать быстрые 3D-интерфейсы в вебе

WebGL позволяет собирать иммерсивные 3D-сцены прямо в браузере, но без аккуратной оптимизации легко убить загрузку и отзывчивость интерфейса. Для фронтенда это значит, что 3D можно использовать не только ради вау-эффекта, а как часть продукта, если заранее контролировать вес ассетов, количество отрисовок и работу анимаций.

https://mdx.so/blog/webgl-development-how-to-build-immersive-3d-web-experiences-in-2026