1<!DOCTYPE html><html lang="en" class="__variable_6d24ac"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/558ca1a6aa3cb55e-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/d1a972498524f01e.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/a21cfa445446d464.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-d8fabef2bef98b7b.js"/>
1<script src="/_next/static/chunks/dbf0775f-af87db9b492e70a2.js" async=""></script>
1<script src="/_next/static/chunks/7322-4a81a25559c56582.js" async=""></script>
1<script src="/_next/static/chunks/main-app-cf6fe2a3d94e3f93.js" async=""></script>
1<script src="/_next/static/chunks/4982-29472cd8220fb70e.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-ac9214643a7656cb.js" async=""></script>
1<script src="/_next/static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js" async=""></script>
1<script src="/_next/static/chunks/2404-816d6d28ffb5f73c.js" async=""></script>
1<script src="/_next/static/chunks/1398-6038b719fc52ffa2.js" async=""></script>
1<script src="/_next/static/chunks/app/error-99f2c96ec12f9b23.js" async=""></script>
1<script src="/_next/static/chunks/app/global-error-5e7d96ed4e524aef.js" async=""></script>
1<script src="/_next/static/chunks/app/not-found-f8ff3cd03d8ea417.js" async=""></script>
1<script src="/_next/static/chunks/2181-476eb24fb70d2fcf.js" async=""></script>
1<script src="/_next/static/chunks/518-8979b6e52ebbe02b.js" async=""></script>
1<script src="/_next/static/chunks/9281-453fee06f91f9d65.js" async=""></script>
1<script src="/_next/static/chunks/2632-aa9c6e96726ed78b.js" async=""></script>
1<script src="/_next/static/chunks/4661-feeff1b3fb02e329.js" async=""></script>
1<script src="/_next/static/chunks/app/blog/page-f57de5c44324403a.js" async=""></script>
1<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"/><meta name="theme-color" content="#101010" media="(prefers-color-scheme: dark)"/><title>Blog | Stav Fernandes</title><meta name="description" content="Thoughts on frontend engineering, AI tooling, React patterns, and building for the web."/><link rel="author" href="https://stavfernandes.dev"/><meta name="author" content="Stav Fernandes"/><link rel="manifest" href="/site.webmanifest"/><meta name="keywords" content="Stav Fernandes,AI agent teams,AI engineering,software engineer,frontend engineer,Little Lotus,Craft of AI,Vercel AI SDK,Claude,React,Next.js,TypeScript,Shopify Partner,AWS Certified,technical educator"/><meta name="creator" content="Stav Fernandes"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://stavfernandes.dev/blog"/><meta property="og:title" content="Blog | Stav Fernandes"/><meta property="og:description" content="Thoughts on frontend engineering, AI tooling, React patterns, and building for the web."/><meta property="og:url" content="https://stavfernandes.dev/blog"/><meta property="og:image" content="https://stavfernandes.dev/images/og/stav-fernandes-blog-og.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Stav Fernandes Blog"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@CodewithStav"/><meta name="twitter:title" content="Blog | Stav Fernandes"/><meta name="twitter:description" content="Thoughts on frontend engineering, AI tooling, React patterns, and building for the web."/><meta name="twitter:image" content="https://stavfernandes.dev/images/og/stav-fernandes-blog-og.png"/><link rel="icon" href="/favicon.ico?7d0b17ab7e2d7eca" type="image/x-icon" sizes="16x16"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><meta name="next-size-adjust" content=""/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="antialiased"><div hidden=""><!--$--><!--/$--></div>
1<script>try{if(sessionStorage.getItem("home-load-seen"))document.documentElement.dataset.homeLoadSeen=""}catch(e){}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Person","@id":"https://stavfernandes.dev/#person","name":"Stav Fernandes","url":"https://stavfernandes.dev","jobTitle":"Software & Frontend Engineer","description":"I build real products with AI agent teams and teach developers to do the same. Founder of Little Lotus, creator of Craft of AI.","sameAs":["https://github.com/stevef24","https://www.linkedin.com/in/stavfernandes24/","https://www.youtube.com/@CodewithStav","https://learn.stavfernandes.dev"],"knowsAbout":["AI engineering","Vercel AI SDK","Claude API","Claude Code","Context engineering","AI agents","Next.js","React","TypeScript","Frontend performance","Shopify development"],"worksFor":{"@id":"https://stavfernandes.dev/#little-lotus"}},{"@type":"Organization","@id":"https://stavfernandes.dev/#little-lotus","name":"Little Lotus","url":"https://littlelotus.co","description":"A web and Shopify growth studio. Warm, premium, fast websites and growth systems for owner-led brands.","founder":{"@id":"https://stavfernandes.dev/#person"}},{"@type":"Organization","@id":"https://stavfernandes.dev/#craft-of-ai","name":"Craft of AI","url":"https://learn.stavfernandes.dev","description":"An education brand teaching the craft of building with AI. Learn, build, remix.","founder":{"@id":"https://stavfernandes.dev/#person"}},{"@type":"WebSite","@id":"https://stavfernandes.dev/#website","url":"https://stavfernandes.dev","name":"Stav Fernandes","publisher":{"@id":"https://stavfernandes.dev/#person"}}]}</script>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","portfolio-color-scheme","system",null,["light","dark"],null,true,true)</script>
1<div class="fixed inset-0 -z-10 select-none pointer-events-none bg-background" aria-hidden="true"></div><svg aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute;width:0;height:0"><filter id="liquid-glass-lens" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.012 0.012" numOctaves="2" seed="7" result="noise"></feTurbulence><feGaussianBlur in="noise" stdDeviation="2" result="softNoise"></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="softNoise" scale="8" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter></svg><div class="min-h-svh flex flex-col bg-transparent"><a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:shadow">Skip to content</a><main id="main-content" tabindex="-1" class="flex-1"><div class="mx-auto w-full px-4 lg:px-6 max-w-[var(--content-width)]"><div class="relative -mx-4 lg:-mx-6 mb-10"><div aria-hidden="true" data-blog-hero-gradient="true" class="pointer-events-none absolute inset-0 -z-10 left-1/2 right-auto w-screen -translate-x-1/2" style="mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)"><div class="h-full w-full dark:hidden"><svg class="h-full w-full" viewBox="0 0 1271 599" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="hero-default-l-grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#acf8e9"></stop><stop offset="0.3" stop-color="#a2f3e6"></stop><stop offset="0.62" stop-color="#cff8fd"></stop><stop offset="1" stop-color="#cbf8fd00"></stop></linearGradient><filter id="hero-default-l-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="26"></feGaussianBlur></filter></defs><g filter="url(#hero-default-l-blur)"><rect x="0" y="-65" width="173.70333333333335" height="387.861" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="141.22222222222223" y="-65" width="173.70333333333335" height="467.1180980446816" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="282.44444444444446" y="-65" width="173.70333333333335" height="540.1823025158136" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="423.6666666666667" y="-65" width="173.70333333333335" height="604.6709769549234" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="564.8888888888889" y="-65" width="173.70333333333335" height="652.02" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="706.1111111111111" y="-65" width="173.70333333333335" height="604.6709769549234" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="847.3333333333334" y="-65" width="173.70333333333335" height="540.1823025158136" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="988.5555555555557" y="-65" width="173.70333333333335" height="467.1180980446816" fill="url(#hero-default-l-grad)"></rect></g><g filter="url(#hero-default-l-blur)"><rect x="1129.7777777777778" y="-65" width="173.70333333333335" height="387.861" fill="url(#hero-default-l-grad)"></rect></g></svg></div><div class="hidden h-full w-full dark:block"><svg class="h-full w-full" viewBox="0 0 1271 599" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="hero-default-d-grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#04120f"></stop><stop offset="0.3" stop-color="#10837a"></stop><stop offset="0.62" stop-color="#074a5d"></stop><stop offset="1" stop-color="#0c536a00"></stop></linearGradient><filter id="hero-default-d-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="26"></feGaussianBlur></filter></defs>
1<g filter="url(#hero-default-d-blur)"><rect x="0" y="-65" width="173.70333333333335" height="387.861" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="141.22222222222223" y="-65" width="173.70333333333335" height="467.1180980446816" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="282.44444444444446" y="-65" width="173.70333333333335" height="540.1823025158136" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="423.6666666666667" y="-65" width="173.70333333333335" height="604.6709769549234" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="564.8888888888889" y="-65" width="173.70333333333335" height="652.02" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="706.1111111111111" y="-65" width="173.70333333333335" height="604.6709769549234" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="847.3333333333334" y="-65" width="173.70333333333335" height="540.1823025158136" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="988.5555555555557" y="-65" width="173.70333333333335" height="467.1180980446816" fill="url(#hero-default-d-grad)"></rect></g><g filter="url(#hero-default-d-blur)"><rect x="1129.7777777777778" y="-65" width="173.70333333333335" height="387.861" fill="url(#hero-default-d-grad)"></rect></g></svg></div></div><div class="px-4 pt-8 pb-12 md:pt-12 md:pb-16 lg:px-6 lg:pt-16 lg:pb-24"><div class="relative z-20 mb-8" style="opacity:0;transform:translateY(-6px)"><a class="group inline-flex min-h-11 items-center gap-2 rounded-sm text-sm font-medium text-foreground/85 no-underline transition-colors duration-150 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/"><span class="flex size-4 items-center justify-center transition-transform duration-150 ease-out group-hover:-translate-x-0.5"><svg viewBox="0 0 16 16" fill="none" class="size-4" aria-hidden="true"><path d="M12.4 8H3.6M3.6 8l3.4-3.4M3.6 8l3.4 3.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span>Home</span></a></div><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><p class="text-swiss-label text-foreground/50 mb-3">Blog</p></div><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><h1 class="text-swiss-section mb-3">Thoughts & Writing</h1></div><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><p class="text-swiss-body text-foreground/60 leading-relaxed max-w-xl">On engineering, design systems, and building for the web.</p></div></div></div><section class="pb-20"><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><h2 class="text-swiss-label text-foreground/50 mb-4">Latest Posts</h2></div><ul role="list" class="list-none m-0 p-0"><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/ai-sdk-7-crash-course-build-production-chat"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="aisdk"><div class="absolute inset-0" style="background:linear-gradient(145deg, #9faffc 0%, #6366f1 42%, #7783f7 72%, #3dbff8 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #6366f1 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #7783f7 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #3dbff8 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[24px] w-[24px]" style="color:rgba(30, 27, 75, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18))" fill="currentColor" aria-hidden="true"><path d="m12 1.608 12 20.784H0Z"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">AI SDK 7 Crash Course: Build a Production Chat UI</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">How one text call grows into a typed, streaming, multimodal, tool-using chat route, and why AI SDK 7 gives you one contract to build all of it on.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/context-engineering-shaping-model-attention"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="context"><div class="absolute inset-0" style="background:linear-gradient(145deg, #ffe5d6 0%, #ffc9a3 42%, #f18f90 72%, #b15384 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #ffc9a3 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #f18f90 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #b15384 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[28px] w-[28px]" style="color:rgba(76, 20, 60, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));--midcard-icon-cut:rgba(255,255,255,0.9)" fill="none" aria-hidden="true"><circle cx="12" cy="6.5" r="2.1" fill="currentColor"></circle><circle cx="5.5" cy="17" r="1.85" fill="currentColor" opacity="0.85"></circle><circle cx="18.5" cy="17" r="1.85" fill="currentColor" opacity="0.85"></circle><path d="M10.4 8.2 6.8 15.1M13.6 8.2l3.6 6.9M7.6 17h8.8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" opacity="0.7"></path><circle cx="12" cy="12.5" r="8.2" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2.2 2.8" opacity="0.35"></circle></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">A Brief Tour of Context Engineering</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">Bigger context windows let us send models more. Context engineering is the work of deciding what deserves their attention.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/3-ui-patterns-for-ai-infused-apps"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="ui"><div class="absolute inset-0" style="background:linear-gradient(145deg, #fab9dc 0%, #f361ad 42%, #fb7b8e 72%, #fdaeb8 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #f361ad 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #fb7b8e 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #fdaeb8 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[28px] w-[28px]" style="color:rgba(67, 20, 7, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));--midcard-icon-cut:rgba(255,255,255,0.9)" fill="none" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2" stroke="currentColor" stroke-width="1.3"></rect><path d="M3.5 9h17" stroke="currentColor" stroke-width="1.25"></path><path d="M9.5 9v10.5" stroke="currentColor" stroke-width="1.25"></path><rect x="11.5" y="11.2" width="6.5" height="1.6" rx="0.5" fill="currentColor" opacity="0.7"></rect><rect x="11.5" y="14.2" width="4.5" height="1.6" rx="0.5" fill="currentColor" opacity="0.45"></rect><rect x="5.2" y="11.2" width="2.6" height="6.2" rx="0.5" fill="currentColor" opacity="0.55"></rect></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">3 UI Patterns for AI-Infused Apps</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">Three practical UI patterns that make AI-infused apps feel less like a magic box and more like a useful workflow. Guided input, visible process feedback, and editable output.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/what-building-an-agent-actually-means"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="agents"><div class="absolute inset-0" style="background:linear-gradient(145deg, #b6a3fd 0%, #a54ff7 42%, #e66ff9 72%, #7c88f8 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #a54ff7 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #e66ff9 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #7c88f8 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[28px] w-[28px]" style="color:rgba(46, 16, 101, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));--midcard-icon-cut:rgba(255,255,255,0.9)" fill="none" aria-hidden="true"><circle cx="12" cy="6.5" r="2.1" fill="currentColor"></circle><circle cx="5.5" cy="17" r="1.85" fill="currentColor" opacity="0.85"></circle><circle cx="18.5" cy="17" r="1.85" fill="currentColor" opacity="0.85"></circle><path d="M10.4 8.2 6.8 15.1M13.6 8.2l3.6 6.9M7.6 17h8.8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" opacity="0.7"></path><circle cx="12" cy="12.5" r="8.2" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2.2 2.8" opacity="0.35"></circle></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">What "Building an Agent" Actually Means</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">The model is not running your system. The runtime is. Here's what that means and why it changes how you build.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/codex-multi-agent-orchestrating"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="codex"><div class="absolute inset-0" style="background:linear-gradient(145deg, #fcd247 0%, #f59e0b 42%, #fb8a2d 72%, #fde68a 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #f59e0b 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #fb8a2d 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #fde68a 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[28px] w-[28px]" style="color:rgba(69, 26, 3, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));--midcard-icon-cut:rgba(255,255,255,0.9)" fill="none" aria-hidden="true"><path d="M12 2.6 20.2 7.3v9.4L12 21.4 3.8 16.7V7.3L12 2.6Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"></path><path d="M12 7.2 16.2 9.6v4.8L12 16.8 7.8 14.4V9.6L12 7.2Z" fill="currentColor" opacity="0.88"></path><path d="M10.4 12h3.2M12 10.4v3.2" stroke="var(--midcard-icon-cut, #fff)" stroke-width="1.35" stroke-linecap="round"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">Codex Multi-Agent Orchestrating</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">A practical playbook for running codex like a small engineering team, with parallel execution, tight quality gates, and a repeatable loop that stays green.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/react-useActionState"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="react"><div class="absolute inset-0" style="background:linear-gradient(145deg, #99c8fd 0%, #7477f3 42%, #38bdf8 72%, #a0b0fc 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #7477f3 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #38bdf8 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #a0b0fc 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[26px] w-[26px]" style="color:rgba(15, 23, 42, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18))" fill="currentColor" aria-hidden="true"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground
1/70 line-clamp-1 font-medium!">React 19 - useActionState</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">Simplify form handling with React 19's useActionState hook</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/react-server-components"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="react"><div class="absolute inset-0" style="background:linear-gradient(145deg, #99c8fd 0%, #585bf0 42%, #3dbff8 72%, #a0b0fc 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #585bf0 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #3dbff8 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #a0b0fc 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[26px] w-[26px]" style="color:rgba(15, 23, 42, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18))" fill="currentColor" aria-hidden="true"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.
1183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">Understanding React Server Components</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">A comprehensive guide to React Server Components, their benefits, limitations, and best practices</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/Rag-101"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="rag"><div class="absolute inset-0" style="background:linear-gradient(145deg, #69e6b4 0%, #15c3b0 42%, #2ccc91 72%, #50e8d0 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #15c3b0 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #2ccc91 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #50e8d0 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[28px] w-[28px]" style="color:rgba(6, 78, 59, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));--midcard-icon-cut:rgba(255,255,255,0.9)" fill="none" aria-hidden="true"><ellipse cx="10" cy="6" rx="6.2" ry="2.2" stroke="currentColor" stroke-width="1.3"></ellipse><path d="M3.8 6v4.2c0 1.2 2.8 2.2 6.2 2.2s6.2-1 6.2-2.2V6" stroke="currentColor" stroke-width="1.3"></path><path d="M3.8 10.2v4.2c0 1.2 2.8 2.2 6.2 2.2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"></path><circle cx="16.5" cy="16" r="3.1" stroke="currentColor" stroke-width="1.35"></circle><path d="M18.7 18.3 21 20.6" stroke="currentColor" stroke-width="1.45" stroke-linecap="round"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground/70 line-clamp-1 font-medium!">RAG 101 - A Comprehensive Guide</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">Understanding Retrieval Augmented Generation and how to implement it in your applications.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li><li><div style="opacity:0;filter:blur(4px);transform:translateY(6px)"><div class="group relative -mx-4 lg:-mx-6" style="transform-origin:center left"><div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[var(--radius)] opacity-0 row-active:opacity-100" style="background-color:var(--sf-bg-subtle);box-shadow:var(--card-hover-shadow)"></div><a class="group flex items-start gap-4 py-4 px-4 lg:px-6 rounded-[var(--radius)] relative z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background" href="/blog/react-compiler"><div class="relative h-[88px] w-[88px] flex-shrink-0 overflow-hidden rounded-sm row-active:scale-[1.03]" style="box-shadow:inset 0 0 0 1px var(--thumbnail-inset-border)" data-topic="react"><div class="absolute inset-0" style="background:linear-gradient(145deg, #9fcbfd 0%, #6366f1 42%, #42c0f8 72%, #aab8fc 100%)"></div><div class="pointer-events-none absolute inset-0 opacity-90" style="background:radial-gradient(ellipse 70% 65% at 28% 30%, #6366f1 0%, transparent 62%), radial-gradient(ellipse 60% 55% at 72% 62%, #42c0f8 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 55% 20%, #aab8fc 0%, transparent 55%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0" style="background:radial-gradient(circle at 50% 50%, transparent 32%, rgba(0,0,0,0.18) 100%)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.38] mix-blend-overlay dark:opacity-[0.52] dark:mix-blend-soft-light" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='
1stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:120px 120px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-[0.16] mix-blend-multiply dark:opacity-[0.28] dark:mix-blend-overlay" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:64px 64px;background-position:22px 14px" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-[1] opacity-0 row-active:opacity-100" style="background:radial-gradient(circle at 28% 28%, rgba(255,255,255,0.28) 0%, transparent 55%)" aria-hidden="true"></div><div class="relative z-10 flex h-full w-full items-center justify-center"><svg viewBox="0 0 24 24" class="h-[26px] w-[26px]" style="color:rgba(15, 23, 42, 0.92);filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18))" fill="currentColor" aria-hidden="true"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg></div></div><article class="flex min-w-0 flex-1 items-start justify-between gap-4"><div class="min-w-0 flex-1"><h3 class="text-swiss-body text-foreground row-active:text-foreground
1/70 line-clamp-1 font-medium!">React Compiler - What You Need to Know</h3><p class="text-swiss-body mt-0.5 line-clamp-1 text-foreground/50">A deep dive into the new React Compiler, automatic memoization, and what it means for the future of React development.</p></div><span class="flex-shrink-0 text-foreground/60 opacity-0 transition-opacity duration-150 row-active:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" color="currentColor" class="row-active:translate-x-0.5 row-active:-translate-y-0.5" aria-hidden="true"><path d="M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg></span></article></a></div></div></li></ul></section></div></main></div><!--$--><!--/$--><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
1<script src="/_next/static/chunks/webpack-d8fabef2bef98b7b.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[22860,[\"4982\",\"static/chunks/4982-29472cd8220fb70e.js\",\"7177\",\"static/chunks/app/layout-ac9214643a7656cb.js\"],\"ThemeProvider\"]\n4:I[3751,[\"4982\",\"static/chunks/4982-29472cd8220fb70e.js\",\"7177\",\"static/chunks/app/layout-ac9214643a7656cb.js\"],\"default\"]\n5:I[87260,[\"4982\",\"static/chunks/4982-29472cd8220fb70e.js\",\"7177\",\"static/chunks/app/layout-ac9214643a7656cb.js\"],\"GlassLensProbe\"]\n6:I[87951,[],\"\"]\n7:I[18060,[\"7924\",\"static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js\",\"2404\",\"static/chunks/2404-816d6d28ffb5f73c.js\",\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"8039\",\"static/chunks/app/error-99f2c96ec12f9b23.js\"],\"default\"]\n8:I[21715,[],\"\"]\n12:I[46522,[\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"4219\",\"static/chunks/app/global-error-5e7d96ed4e524aef.js\"],\"default\"]\n:HL[\"/_next/static/media/558ca1a6aa3cb55e-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/d1a972498524f01e.css\",\"style\"]\n:HL[\"/_next/static/css/a21cfa445446d464.css\",\"style\"]\n2:T5ec,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Person\",\"@id\":\"https://stavfernandes.dev/#person\",\"name\":\"Stav Fernandes\",\"url\":\"https://stavfernandes.dev\",\"jobTitle\":\"Software \u0026 Frontend Engineer\",\"description\":\"I build real products with AI agent teams and teach developers to do the same. Founder of Little Lotus, creator of Craft of AI.\",\"sameAs\":[\"https://github.com/stevef24\",\"https://www.linkedin.com/in/stavfernandes24/\",\"https://www.youtube.com/@CodewithStav\",\"https://learn.stavfernandes.dev\"],\"knowsAbout\":[\"AI engineering\",\"Vercel AI SDK\",\"Claude API\",\"Claude Code\",\"Context engineering\",\"AI agents\",\"Next.js\",\"React\",\"TypeScript\",\"Frontend performance\",\"Shopify development\"],\"worksFor\":{\"@id\":\"https://stavfernandes.dev/#little-lotus\"}},{\"@type\":\"Organization\",\"@id\":\"https://stavfernandes.dev/#little-lotus\",\"name\":\"Little Lotus\",\"url\":\"https://littlelotus.co\",\"description\":\"A web and Shopify growth studio. Warm, premium, fast websites and growth systems for owner-led brands.\",\"founder\":{\"@id\":\"https://stavfernandes.dev/#person\"}},{\"@type\":\"Organization\",\"@id\":\"https://stavfernandes.dev/#craft-of-ai\",\"name\":\"Craft of AI\",\"url\":\"https://learn.stavfernandes.dev\",\"description\":\"An education brand teaching the craft of building with AI. Learn, build, remix.\",\"founder\":{\"@id\":\"https://stavfernandes.dev/#person\"}},{\"@type\":\"WebSite\",\"@id\":\"https://stavfernandes.dev/#website\",\"url\":\"https://stavfernandes.dev\",\"name\":\"Stav Fernandes\",\"publisher\":{\"@id\":\"https://stavfernandes.dev/#person\"}}]}10:X\n0:{\"P\":null,\"c\":[\"\",\"blog\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d1a972498524f01e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a21cfa445446d464.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_6d24ac\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"antialiased\",\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"try{if(sessionStorage.getItem(\\\"home-load-seen\\\"))document.documentElement.dataset.homeLoadSeen=\\\"\\\"}catch(e){}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}],[\"$\",\"$L3\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"storageKey\":\"portfolio-color-scheme\",\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"$L4\",null,{\"awayMessage\":\"Feeling lonely here... come back!\",\"enabled\":true}],[\"$\",\"div\",null,{\"className\":\"fixed inset-0 -z-10 select-none pointer-events-none bg-background\",\"aria-hidden\":\"true\",\"children\":false}],[\"$\",\"svg\",null,{\"aria-hidden\":\"true\",\"focusable\":\"false\",\"width\":\"0\",\"height\"
1:\"0\",\"style\":{\"position\":\"absolute\",\"width\":0,\"height\":0},\"children\":[\"$\",\"filter\",null,{\"id\":\"liquid-glass-lens\",\"x\":\"0\",\"y\":\"0\",\"width\":\"100%\",\"height\":\"100%\",\"colorInterpolationFilters\":\"sRGB\",\"children\":[[\"$\",\"feTurbulence\",null,{\"type\":\"fractalNoise\",\"baseFrequency\":\"0.012 0.012\",\"numOctaves\":2,\"seed\":7,\"result\":\"noise\"}],[\"$\",\"feGaussianBlur\",null,{\"in\":\"noise\",\"stdDeviation\":\"2\",\"result\":\"softNoise\"}],[\"$\",\"feDisplacementMap\",null,{\"in\":\"SourceGraphic\",\"in2\":\"softNoise\",\"scale\":8,\"xChannelSelector\":\"R\",\"yChannelSelector\":\"G\"}]]}]}],[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$7\",\"errorStyles\":[],\"errorScripts\":null,\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"relative min-h-svh overflow-hidden bg-background\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"data-blog-hero-gradient\":true,\"className\":\"pointer-events-none absolute inset-0 -z-10 h-[60svh]\",\"style\":{\"maskImage\":\"linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)\",\"WebkitMaskImage\":\"linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)\"},\"children\":[\"$L9\",\"$La\"]}],\"$Lb\"]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$Lc\",false,\"$Ld\"]}]]}]}]]}],{\"children\":[\"$Le\",{\"children\":[\"$Lf\",{},null,false,null]},null,false,\"$10\"]},null,false,null],\"$L11\",false]],\"m\":\"$undefined\",\"G\":[\"$12\",[]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"_g_kWvgQElF9mPPQPfN31\"}\n13:I[95594,[\"7924\",\"static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js\",\"2404\",\"static/chunks/2404-816d6d28ffb5f73c.js\",\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"4345\",\"static/chunks/app/not-found-f8ff3cd03d8ea417.js\"],\"ZenConsultation\"]\n14:I[45534,[\"4982\",\"static/chunks/4982-29472cd8220fb70e.js\",\"7177\",\"static/chunks/app/layout-ac9214643a7656cb.js\"],\"Toaster\"]\n15:I[12247,[\"4982\",\"static/chunks/4982-29472cd8220fb70e.js\",\"7177\",\"static/chunks/app/layout-ac9214643a7656cb.js\"],\"Analytics\"]\n1c:I[2214,[],\"ViewportBoundary\"]\n1e:I[2214,[],\"MetadataBoundary\"]\n1f:\"$Sreact.suspense\"\n9:[\"$\",\"div\",null,{\"className\":\"h-full w-full dark:hidden\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-full w-full\",\"viewBox\":\"0 0 1271 599\",\"preserveAspectRatio\":\"none\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"hero-default-l-grad\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"0\",\"y2\":\"1\",\"children\":[[\"$\",\"stop\",\"0\",{\"offset\":0,\"stopColor\":\"#f0feff\"}],[\"$\",\"stop\",\"1\",{\"offset\":0.3,\"stopColor\":\"#e3fcfe\"}],[\"$\",\"stop\",\"2\",{\"offset\":0.62,\"stopColor\":\"#f5fbff\"}],[\"$\",\"stop\",\"3\",{\"offset\":1,\"stopColor\":\"#f6fefc00\"}]]}],[\"$\",\"filter\",null,{\"id\":\"hero-default-l-blur\",\"x\":\"-50%\",\"y\":\"-50%\",\"width\":\"200%\",\"height\":\"200%\",\"children\":[\"$\",\"feGaussianBlur\",null,{\"stdDeviation\":26}]}]]}],[[\"$\",\"g\",\"0\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":0,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"1\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":141.22222222222223,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"2\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":282.44444444444446,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"3\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":423.6666666666667,\"y\":-65,\"width\":173.70333333333335,\"height\"
1:604.6709769549234,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"4\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":564.8888888888889,\"y\":-65,\"width\":173.70333333333335,\"height\":652.02,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"5\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":706.1111111111111,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"6\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":847.3333333333334,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"7\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":988.5555555555557,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"8\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":1129.7777777777778,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-l-grad)\"}]}]]]}]}]\na:[\"$\",\"div\",null,{\"className\":\"hidden h-full w-full dark:block\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-full w-full\",\"viewBox\":\"0 0 1271 599\",\"preserveAspectRatio\":\"none\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"hero-default-d-grad\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"0\",\"y2\":\"1\",\"children\":[[\"$\",\"stop\",\"0\",{\"offset\":0,\"stopColor\":\"#090f15\"}],[\"$\",\"stop\",\"1\",{\"offset\":0.3,\"stopColor\":\"#0f2532\"}],[\"$\",\"stop\",\"2\",{\"offset\":0.62,\"stopColor\":\"#0a161d\"}],[\"$\",\"stop\",\"3\",{\"offset\":1,\"stopColor\":\"#121c3200\"}]]}],[\"$\",\"filter\",null,{\"id\":\"hero-default-d-blur\",\"x\":\"-50%\",\"y\":\"-50%\",\"width\":\"200%\",\"height\":\"200%\",\"children\":[\"$\",\"feGaussianBlur\",null,{\"stdDeviation\":26}]}]]}],[[\"$\",\"g\",\"0\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":0,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"1\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":141.22222222222223,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"2\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":282.44444444444446,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"3\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":423.6666666666667,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"4\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":564.8888888888889,\"y\":-65,\"width\":173.70333333333335,\"height\":652.02,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"5\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":706.1111111111111,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"6\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":847.3333333333334,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"7\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":988.5555555555557,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"8\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":1129.7777777777778,\"y\":-65,\"width\":173.70333333333335,\"height\"
1:387.861,\"fill\":\"url(#hero-default-d-grad)\"}]}]]]}]}]\nb:[\"$\",\"div\",null,{\"className\":\"relative z-10 flex flex-col min-h-svh\",\"children\":[\"$\",\"main\",null,{\"className\":\"flex-1 flex items-center justify-center px-4 py-16\",\"children\":[\"$\",\"$L13\",null,{\"type\":\"404\"}]}]}]\nc:[\"$\",\"$L14\",null,{\"theme\":\"system\",\"position\":\"top-center\"}]\nd:[\"$\",\"$L15\",null,{}]\ne:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nf:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"min-h-svh flex flex-col bg-transparent\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#main-content\",\"className\":\"sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:shadow\",\"children\":\"Skip to content\"}],[\"$\",\"main\",null,{\"id\":\"main-content\",\"tabIndex\":-1,\"className\":\"flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full px-4 lg:px-6 max-w-[var(--content-width)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative -mx-4 lg:-mx-6 mb-10\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"data-blog-hero-gradient\":true,\"className\":\"pointer-events-none absolute inset-0 -z-10 left-1/2 right-auto w-screen -translate-x-1/2\",\"style\":{\"maskImage\":\"linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)\",\"WebkitMaskImage\":\"linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"h-full w-full dark:hidden\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-full w-full\",\"viewBox\":\"0 0 1271 599\",\"preserveAspectRatio\":\"none\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"hero-default-l-grad\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"0\",\"y2\":\"1\",\"children\":[[\"$\",\"stop\",\"0\",{\"offset\":0,\"stopColor\":\"#acf8e9\"}],[\"$\",\"stop\",\"1\",{\"offset\":0.3,\"stopColor\":\"#a2f3e6\"}],[\"$\",\"stop\",\"2\",{\"offset\":0.62,\"stopColor\":\"#cff8fd\"}],[\"$\",\"stop\",\"3\",{\"offset\":1,\"stopColor\":\"#cbf8fd00\"}]]}],[\"$\",\"filter\",null,{\"id\":\"hero-default-l-blur\",\"x\":\"-50%\",\"y\":\"-50%\",\"width\":\"200%\",\"height\":\"200%\",\"children\":[\"$\",\"feGaussianBlur\",null,{\"stdDeviation\":26}]}]]}],[[\"$\",\"g\",\"0\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":0,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"1\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":141.22222222222223,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"2\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":282.44444444444446,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"3\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":423.6666666666667,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"4\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":564.8888888888889,\"y\":-65,\"width\":173.70333333333335,\"height\":652.02,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"5\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":706.1111111111111,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"6\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":847.3333333333334,\"y\":-65,\"width\":173.70333333333335,\"height\"
1:540.1823025158136,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"7\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":988.5555555555557,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-l-grad)\"}]}],[\"$\",\"g\",\"8\",{\"filter\":\"url(#hero-default-l-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":1129.7777777777778,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-l-grad)\"}]}]]]}]}],[\"$\",\"div\",null,{\"className\":\"hidden h-full w-full dark:block\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-full w-full\",\"viewBox\":\"0 0 1271 599\",\"preserveAspectRatio\":\"none\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"hero-default-d-grad\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"0\",\"y2\":\"1\",\"children\":[[\"$\",\"stop\",\"0\",{\"offset\":0,\"stopColor\":\"#04120f\"}],[\"$\",\"stop\",\"1\",{\"offset\":0.3,\"stopColor\":\"#10837a\"}],[\"$\",\"stop\",\"2\",{\"offset\":0.62,\"stopColor\":\"#074a5d\"}],[\"$\",\"stop\",\"3\",{\"offset\":1,\"stopColor\":\"#0c536a00\"}]]}],[\"$\",\"filter\",null,{\"id\":\"hero-default-d-blur\",\"x\":\"-50%\",\"y\":\"-50%\",\"width\":\"200%\",\"height\":\"200%\",\"children\":[\"$\",\"feGaussianBlur\",null,{\"stdDeviation\":26}]}]]}],[[\"$\",\"g\",\"0\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":0,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"1\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":141.22222222222223,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"2\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":282.44444444444446,\"y\":-65,\"width\":173.70333333333335,\"height\":540.1823025158136,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"3\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":423.6666666666667,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"4\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":564.8888888888889,\"y\":-65,\"width\":173.70333333333335,\"height\":652.02,\"fill\":\"url(#hero-default-d-grad)\"}]}],[\"$\",\"g\",\"5\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":706.1111111111111,\"y\":-65,\"width\":173.70333333333335,\"height\":604.6709769549234,\"fill\":\"url(#hero-default-d-grad)\"}]}],\"$L16\",\"$L17\",\"$L18\"]]}]}]]}],\"$L19\"]}],\"$L1a\"]}]}]]}],null,\"$L1b\"]}]\n11:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1c\",null,{\"children\":\"$L1d\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1e\",null,{\"children\":[\"$\",\"$1f\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L20\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n21:I[51972,[\"7924\",\"static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js\",\"2404\",\"static/chunks/2404-816d6d28ffb5f73c.js\",\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"2181\",\"static/chunks/2181-476eb24fb70d2fcf.js\",\"518\",\"static/chunks/518-8979b6e52ebbe02b.js\",\"9281\",\"static/chunks/9281-453fee06f91f9d65.js\",\"2632\",\"static/chunks/2632-aa9c6e96726ed78b.js\",\"4661\",\"static/chunks/4661-feeff1b3fb02e329.js\",\"3831\",\"static/chunks/app/blog/page-f57de5c44324403a.js\"],\"BackLink\"]\n22:I[21408,[\"7924\",\"static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js\",\"2404\",\"static/chunks/2404-816d6d28ffb5f73c.js\",\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"2181\",\"static/chunks/2181-476eb24fb70d2fcf.js\",\"518\",\"static/chunks/518-8979b6e52ebbe02b.js\",\"9281\",\"static/chunks/9281-453fee06f91f9d65.js\",\"2632\",\"static/chunks/2632-aa9c6e96726ed78b.js\",\"4661\",\"static/chunks/4661-feeff1b3fb02e329.js\",\"3831\",\"static/chunks/app/blog/page-f57de5c44324403a.js\"],\"default\"]\n23:I[4661,[\"7924\",\"static/chunks/cf3a4f24-b2c6ae2e03c6eed1.js\",\"2404\",\"static/chunks/2404-816d6d28ffb5f73c.js\",\"1398\",\"static/chunks/1398-6038b719fc52ffa2.js\",\"2181\",\"static/chunks/2181-476eb24fb70d2fcf.js\",\"518\",\"static/chunks/518-8979b6e52ebbe02b.js\",\"9281\",\"static/chunks/9281-453fee06f91f9d65.js\",\"2632\",\"static/chunks/2632-aa9c6e96726ed78b.js\",\"4661\",\"static/chunks/4661-feeff1b3fb02e329.js\",\"3831\",\"static/chunks/app/blog/page-f57de5c44324403a.js\"],\"BlogPostsList\"]\n24:I[2214,[],\"OutletBoundary\"]\n10:C\n16:[\"$\",\"g\",\"6\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":847.3333333333334,\"y\":-65,\"width\":173.70333333333335,\"height\"
1:540.1823025158136,\"fill\":\"url(#hero-default-d-grad)\"}]}]\n17:[\"$\",\"g\",\"7\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":988.5555555555557,\"y\":-65,\"width\":173.70333333333335,\"height\":467.1180980446816,\"fill\":\"url(#hero-default-d-grad)\"}]}]\n18:[\"$\",\"g\",\"8\",{\"filter\":\"url(#hero-default-d-blur)\",\"children\":[\"$\",\"rect\",null,{\"x\":1129.7777777777778,\"y\":-65,\"width\":173.70333333333335,\"height\":387.861,\"fill\":\"url(#hero-default-d-grad)\"}]}]\n19:[\"$\",\"div\",null,{\"className\":\"px-4 pt-8 pb-12 md:pt-12 md:pb-16 lg:px-6 lg:pt-16 lg:pb-24\",\"children\":[[\"$\",\"$L21\",null,{\"href\":\"/\",\"label\":\"Home\",\"className\":\"mb-8\"}],[\"$\",\"$L22\",null,{\"delay\":0.05,\"children\":[\"$\",\"p\",null,{\"className\":\"text-swiss-label text-foreground/50 mb-3\",\"children\":\"Blog\"}]}],[\"$\",\"$L22\",null,{\"delay\":0.1,\"children\":[\"$\",\"h1\",null,{\"className\":\"text-swiss-section mb-3\",\"children\":\"Thoughts \u0026 Writing\"}]}],[\"$\",\"$L22\",null,{\"delay\":0.15,\"children\":[\"$\",\"p\",null,{\"className\":\"text-swiss-body text-foreground/60 leading-relaxed max-w-xl\",\"children\":\"On engineering, design systems, and building for the web.\"}]}]]}]\n1a:[\"$\",\"section\",null,{\"className\":\"pb-20\",\"children\":[[\"$\",\"$L22\",null,{\"delay\":0.2,\"children\":[\"$\",\"h2\",null,{\"className\":\"text-swiss-label text-foreground/50 mb-4\",\"children\":\"Latest Posts\"}]}],[\"$\",\"$L23\",null,{\"posts\":[{\"url\":\"/blog/ai-sdk-7-crash-course-build-production-chat\",\"title\":\"AI SDK 7 Crash Course: Build a Production Chat UI\",\"description\":\"How one text call grows into a typed, streaming, multimodal, tool-using chat route, and why AI SDK 7 gives you one contract to build all of it on.\"},{\"url\":\"/blog/context-engineering-shaping-model-attention\",\"title\":\"A Brief Tour of Context Engineering\",\"description\":\"Bigger context windows let us send models more. Context engineering is the work of deciding what deserves their attention.\"},{\"url\":\"/blog/3-ui-patterns-for-ai-infused-apps\",\"title\":\"3 UI Patterns for AI-Infused Apps\",\"description\":\"Three practical UI patterns that make AI-infused apps feel less like a magic box and more like a useful workflow. Guided input, visible process feedback, and editable output.\"},{\"url\":\"/blog/what-building-an-agent-actually-means\",\"title\":\"What \\\"Building an Agent\\\" Actually Means\",\"description\":\"The model is not running your system. The runtime is. Here's what that means and why it changes how you build.\"},{\"url\":\"/blog/codex-multi-agent-orchestrating\",\"title\":\"Codex Multi-Agent Orchestrating\",\"description\":\"A practical playbook for running codex like a small engineering team, with parallel execution, tight quality gates, and a repeatable loop that stays green.\"},{\"url\":\"/blog/react-useActionState\",\"title\":\"React 19 - useActionState\",\"description\":\"Simplify form handling with React 19's useActionState hook\"},{\"url\":\"/blog/react-server-components\",\"title\":\"Understanding React Server Components\",\"description\":\"A comprehensive guide to React Server Components, their benefits, limitations, and best practices\"},{\"url\":\"/blog/Rag-101\",\"title\":\"RAG 101 - A Comprehensive Guide\",\"description\":\"Understanding Retrieval Augmented Generation and how to implement it in your applications.\"},{\"url\":\"/blog/react-compiler\",\"title\":\"React Compiler - What You Need to Know\",\"description\":\"A deep dive into the new React Compiler, automatic memoization, and what it means for the future of React development.\"}],\"baseDelay\":0.25}]]}]\n1b:[\"$\",\"$L24\",null,{\"children\":[\"$\",\"$1f\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@25\"}]}]\n1d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#ffffff\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"content\":\"#101010\",\"media\":\"(prefers-color-scheme: dark)\"}]]\n26:I[79043,[],\"IconMark\"]\n20:[[\"$\",\"title\",\"0\",{\"children\":\"Blog | Stav Fernandes\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Thoughts on frontend engineering, AI tooling, React patterns, and building for the web.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://stavfernandes.dev\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Stav Fernandes\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"Stav Fernandes,AI agent teams,AI engineering,
1software engineer,frontend engineer,Little Lotus,Craft of AI,Vercel AI SDK,Claude,React,Next.js,TypeScript,Shopify Partner,AWS Certified,technical educator\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"Stav Fernandes\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"9\",{\"rel\":\"canonical\",\"href\":\"https://stavfernandes.dev/blog\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Blog | Stav Fernandes\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"Thoughts on frontend engineering, AI tooling, React patterns, and building for the web.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://stavfernandes.dev/blog\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image\",\"content\":\"https://stavfernandes.dev/images/og/stav-fernandes-blog-og.png\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:alt\",\"content\":\"Stav Fernandes Blog\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:creator\",\"content\":\"@CodewithStav\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"Blog | Stav Fernandes\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"Thoughts on frontend engineering, AI tooling, React patterns, and building for the web.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://stavfernandes.dev/images/og/stav-fernandes-blog-og.png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?7d0b17ab7e2d7eca\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L26\",\"26\",{}]]\n25:null\n"])</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.