Frontend по-флотски 👨‍💻

Мой хороший друг @sergeyfrey сейчас в поиске нового места работы, один из лучших frontend разработчиков с которым когда либо работал Вот его актуальное резюме 👇 https://sergey-frey.github.io/cv/

🔧 Делаю iOS-приложение за 30 дней — в одного, без команды 5+ лет опыта на Backend blockchain с NestJS. Решил выйти за пределы своего стека и сделать нативное iOS приложение с нуля. Swift, SwiftUI, CoreLocation, MapKit. Без бэкенда — всё локально на устройстве. Строю TripTrack — автодневник поездок на машине. Ниша пустая: Google Timeline сломал данные миллионам людей в марте 2025, прямой конкурент с 1 звездой в App Store. 🎩 Показываю весь путь: архитектурные решения, работа с геолокацией в фоне, проблема батареи, TestFlight, App Store review. День за днём — без купюр. Если пишете своё или интересно как выглядит смена стека изнутри — заходите. — @onezee_co

Next.js теперь уже официально дружит с AI-кодингом 👨‍💻 В Next.js 16.2 завезли не просто фичи для разработчиков, а прям штуки под AI-ассистентов. То есть фреймворк уже начинают строить с расчётом на то, что рядом с тобой код пишет не только человек, но и агент Самое интересное: create-next-app теперь по умолчанию добавляет AGENTS.md, а документация Next.js кладётся прямо в npm-пакет в виде markdown-файлов. По сути, агент может читать актуальные version-matched доки локально, а не галлюцинировать по старым знаниям Ещё полезно: ошибки браузера теперь форвардятся в терминал. То есть можно видеть клиентские ошибки без вечного прыгания в DevTools. Для обычной разработки удобно, для AI-агентов — вообще мастхэв И самое футуристичное — экспериментальный next-browser. Это CLI, через который агент может смотреть дерево React-компонентов, props, hooks, network requests, ошибки, скриншоты и даже разбирать PPR shell. Короче, браузер и DevTools постепенно превращают в интерфейс не только для человека, но и для LLM Подробнее 👇 https://nextjs.org/blog/next-16-2-ai

🧭 Разбираем React вместе с Podlodka React Crew Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Базового понимания фреймворка становится недостаточно для результативной работы. 💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React». С 23 по 27 марта ее участники: ⚙️ узнают, как устроен рендер и внутренние механизмы в современном React 🧠 познакомятся с архитектурой приложений, где применяются React Server Components 📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak 🛠познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами. Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇 🎟Забрать early-bird билет можно до 16 марта А по промокоду PASTA получите скидку 500р🎁

Лайвкодинг и Q/A с комадой Angular | March 2026 🧑‍🎓 https://www.youtube.com/watch?v=G7GYQEcUbNA

Vize — Vue.js тулчейн на Rust ⚡️ Знаешь тренд на переписывание JS-инфраструктуры на Rust? Вот тебе свежий пример — Vize. Это неофициальный тулчейн для Vue, который заменяет сразу кучу инструментов одним нативным бинарником. Что умеет? Компиляция. Собирает Vue SFC файлы. 15 000 компонентов (36.9 МБ) за ~500мс благодаря многопоточности через Rayon и arena allocation. Заявляют 8.3x быстрее текущих решений. Линтинг и форматирование. vize fmt и vize lint --fix — прямо из коробки, без отдельных пакетов. Тайп-чекинг. vize check --strict — встроенная проверка типов для Vue шаблонов. Vite плагин. Drop-in замена @vitejs/plugin-vue — просто меняешь импорт и получаешь нативную скорость компиляции. Vapor Mode. Поддержка Vue 3.6 Vapor — компиляция без виртуального DOM. Musea. Встроенная альтернатива Storybook — компонентная галерея с playground для пропсов, дизайн-токенами и a11y аудитом. WASM. Компилятор работает прямо в браузере — для плейграундов и документации. MCP сервер. AI-ассистенты могут читать и понимать твои Vue компоненты через Musea. Тот самый Model Context Protocol. Автор — ubugeeei, участник Vue.js Japan User Group и организатор Vue Fes Japan. Проект пока в альфе (v0.0.1-alpha), но развивается активно. Следить 👇 🔗 https://vizejs.dev 🐙 https://github.com/ubugeeei/vize

Cache Components в Next.js 16 — новая модель кэширования 👨‍💻 В Next.js 16 появился Cache Components — новый подход к кэшированию, построенный вокруг директивы 'use cache'. Главное изменение: кэширование теперь полностью opt-in. Никакого неявного кэширования — весь динамический код выполняется в момент запроса по умолчанию Как включить?

    
        // next.config.ts
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;{}
    

Как работает? Директива 'use cache' применяется к страницам, компонентам или функциям. Компилятор автоматически генерирует ключи кэша — не нужно вручную прописывать зависимости Cache Components дополняет Partial Pre-Rendering (PPR), который появился ещё в 2023. PPR позволял рендерить части страницы статически, а части — динамически через Suspense. Теперь эта концепция получила полноценный API Есть 3 варианта где будет храниться кэш в зависимости от директивы 'use cache' — in-memory на сервере 'use cache: remote' — внешнее хранилище (Redis) 'use cache: private' — память браузера Пример 1: Кэширование функции получения данных

    
        import { cacheLife, cacheTag } from 'next/cache';

async function getProducts() {
  'use cache';
  cacheLife('hours'); // кэш на несколько часов
  cacheTag('products'); // тег для инвалидации
  
  const res = await fetch('https://api.store.com/products');
  return res.json();
}{}
    

Теперь getProducts() вернёт закэшированный результат. Компилятор автоматически сгенерирует ключ кэша на основе аргументов функции Пример 2: Кэширование целого компонента

    
        async function ProductCard({ id }: { id: string }) {
  'use cache';
  cacheLife('days');
  cacheTag(`product-${id}`);
  
  const product = await getProduct(id);
  
  return (
    <div className="card">
      <h2>{product.name}</h2>
      <p>{product.price} ₽</p>
    </div>
  );
}{}
    

Каждый ProductCard с уникальным id получит свой кэш. При изменении товара инвалидируем только его: revalidateTag('product-123', 'max') Пример 3: Partial Pre-Rendering (PPR) Cache Components отлично работает с PPR — можно комбинировать статику и динамику на одной странице:

    
        import { Suspense } from 'react';

export default async function ProductPage({ params }) {
  const { id } = await params;
  
  return (
    <div>
      {/* Статическая часть — закэширована */}
      <ProductDetails id={id} />
      
      {/* Динамическая часть — рендерится на лету */}
      <Suspense fallback={<div>Загрузка...</div>}>
        <PersonalizedRecommendations productId={id} />
      </Suspense>
    </div>
  );
}

async function ProductDetails({ id }: { id: string }) {
  'use cache';
  cacheLife('max');
  
  const product = await fetchProduct(id);
  return <div>{product.description}</div>;
}{}
    

Статическая оболочка страницы отдаётся мгновенно, а персонализированные рекомендации подгружаются стримингом Документация и анонс 👇 https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents https://nextjs.org/blog/next-16#cache-components

Теперь можно тротлить или блочить отдельный запрос через девтулзы хрома, мега удобно 🔥 https://developer.chrome.com/blog/throttle-individual-network-requests P.S. извини что пропал, возвращаюсь в строй, всех с прошедшим НГ 🫡

В каждой шутке есть доля неправды 😉