Frontend Nation 2025
| title | author | length |
|---|---|---|
| Case Study: Building Accessible UI using Github Co-pilot | Navya Agarwal | 31m |
Builds a reusable row-of-thumbnails multiselect for Adobe Express using GitHub Copilot, starts with divs, follows Copilot’s first suggestion to switch to… | ||
| How to build a Terminal Agent like Claude Code or Codex | Garrison Snelling | 39m |
Live-codes a terminal AI agent using Node/TypeScript, the Anthropiс AI SDK and Ink for a text UI, implementing an AIService class that calls generateText with… | ||
| How to build a Terminal Agent like Claude Code or Codex | Garrison Snelling | 11m |
Step-by-step guide to build a working terminal AI agent that reads the repo, hooks to any LLM, and responds in-place; demo uses React + Ink and the Anthropic… | ||
| Implement Al Semantic Search in a Nuxt Blog w/ Transformer.js | Alex. Opalic | 47m |
A Nuxt blog gets keyword, fuse.js fuzzy, and offline semantic search by embedding titles/descriptions into vectors with Transformer.js, storing embeddings in… | ||
| Implement Al Semantic Search in a Nuxt Blog w/ Transformer.js | Alex. Opalic | 08m |
Hands‑on workshop that implements four concrete search features for a Nuxt blog: working keyword search (exact match), fuzzy search (typo tolerant), semantic… | ||
| Build an interactive dashboard w/ React, AG Grid & AG Charts | James S. Bland | 42m |
Live coding builds a full financial dashboard using React, AG Grid and AG Charts in about 45 minutes, following 10 steps plus a bonus. It implements currency… | ||
| Build an interactive dashboard w/ React, AG Grid & AG Charts | James S. Bland | 14m |
Builds a working interactive financial dashboard using React plus AG Grid Community and Enterprise and AG Charts, wired to a dummy stocks dataset with per-day… | ||
| What it’s like to be a Developer (and) Advocate? | Jakub Andrzejewski | 21m |
Explains how one person mixes fullstack coding with community work using concrete outputs: maintains Next modules (next security, next image), helps produce… | ||
| Solving Web Monetization Chaos with Payment Systems that Scale | Faris Aziz | 24m |
Shows how a front-end payment orchestration layer routes transactions between Stripe, Recurly, Adyen, Revolut and regionals like Alipay, Pix and UPI to cut… | ||
| Making Open Source Profitable | Anastasiia Zvenigorodskaia | 27m |
Epicmax’s open source path reports concrete numbers and hard lessons: 10,000 GitHub stars on the main admin repo, about 4,000–22,000 hours invested depending… | ||
| Stop Doing E2E Tests! Write Better Tests with Contract | Markus Oberlehner | 37m |
Claims that end-to-end tests break down in microservices and that mocking gives false confidence; instead use Specmatic to run a stub server from OpenAPI specs… | ||
| Stuck in a Focus Trap | Tim Damen | 38m |
Shows that a custom modal implementation fails common accessibility checks while the native dialogue element passes all four tested behaviors: opens, traps… | ||
| Visualizing the Unseen to Fix Errors Faster with Sentry’s Session Replay Live | Lazar Nikolov, Sigrid Huemer | 26m |
Sentry’s Session Replay records DOM diffs (a fork of rrweb) and ties each recording to tracing IDs so you see the front end UI and the backend trace together… | ||
| Building Framework Agnostic Data Visualisation Libraries | Jacob Parker, Stephen Cooper | 24m |
AG Charts / AG Grid aims for true framework-agnostic tooling by shipping a single JavaScript core, measuring performance with Chrome DevTools and Angular… | ||
| High Performance Data Visualisation with the M4 Algorithm | Jacob Parker | 14m |
Rendering a million points on Canvas becomes feasible by down‑sampling per pixel: M4: per‑pixel buckets keep min/max and left/right points so many redundant… | ||
| Your Own Build Tool Agnostic Web-Plugin? Easy as 1 2 3(D) | Thorsten Seyschab | 29m |
A build-tool-agnostic plugin is implemented that preprocesses glTF files at build time, parses full scene graphs with a patched three.js in Node runner, and… | ||
| Modern JavaScript Tooling: Exploring Rolldown, Oxc, and Beyond | Alexander Lichter | 29m |
Rolldown aims to replace the current ESBuild+Rollup mix to give Vite a single Rust bundler that preserves Rollup plugin compatibility and delivers 2.5–16×… | ||
| Microfrontends for 5 year olds | Ingila Ejaz | 26m |
Explains microfrontends with a Lego analogy and claims module federation lets runtimes share pieces so a host can load remotes at runtime; recommends React 18… | ||
| The State of Rust Web Frameworks: Pros, Cons & Use Cases | Francesco Ciulla | 27m |
Rust is pitched as offering C/C++ performance with memory safety and no GC, claiming lower hardware cost and fewer runtime errors; tooling highlighted includes… | ||
| Elevating DX with Vuetify MCP and Modern Tooling | John Leider | 23m |
Vuetify’s MCP exposes a local, versioned interface so AI assistants get real‑time access to the exact components, directives, styles and docs your project… | ||
| Shiny, Pretty and Post-processed TresJS Effects for Visuals | Alvaro Saburido | 21m |
Shows how to build declarative Vue 3D scenes with TresJS and add real-time postprocessing via Tres postprocessing using Three.js/WebGL primitives… | ||
| Composable Form Brains without Bloat | Abdelrahman Awad | 31m |
Formwerk is a headless, JavaScript‑only form library for Vue.js that gives full control over markup and styles while providing built-in accessibility… | ||
| Vue Crash Course: What Can You Build in 20 Minutes? | Michael Thiessen | 30m |
Live demo builds a working AI chat app in ~20 minutes: sets up Vue with PNPM/Vite (localhost:5173), uses single-file components, script-setup, ref/reactivity… | ||
| Vibe Coding with Nuxt | Daniel Roe | 33m |
Builds a Nuxt app that scans a photo of a crossword, runs OCR and computer‑vision to detect the grid, then renders an editable, responsive crossword grid; uses… | ||
| Pinia Colada: Smooth Data Fetching for Better UX | Eduardo San Martin Morote | 35m |
Pinia Colada is a Vue plugin built on Pinia that provides a small (about 2.5 kilobytes) client-side query system with a centralized query cache and… | ||
| React Complier - deep dive into performance | Mykyta Roilian | 19m |
React Compiler rewrites components to do internal memoization so you can throw away useMemo/useCallback for most cases, and it moves event handlers outside… | ||
| What You Should Know Before Vibe Coding with React | Kawtar Choubari | 35m |
AI-generated React code often defaults to React + Next.js + Tailwind, repeats outdated patterns and produces predictable bugs: AI converts server components… | ||
| Building Interactive Async UI with React 19 and Ariakit | Aurora Walberg Scharff | 26m |
A demo converts a fragile custom account selector into an accessible, interactive component using React 19, Next.js App Router, and Ariakit: replace nameless… | ||
| The Cake Is a Lie... And So Is Your Login’s Accessibility | Ramona Schwering | 39m |
Typical login forms fail assistive tech and the talk shows concrete fixes using a React + Vite app with a broken branch and a fixed branch so you can hear the… | ||
| Creating fluent Frontend Experiences in an age of AI | Tejas Kumar | 28m |
Demonstrates turning blocking AI calls that caused ~15s waits into responsive UIs by streaming partial responses and switching from plain text to NDJSON… | ||
| JavaScipt & AI | Mohamad Shiralizadeh | 01m |
Argues that on-device AI is practical now, claiming browsers can run machine-learning and even LLM models locally rather than relying on cloud servers. Cites… | ||
| Meet Nathan Walker | Nathan Walker | 02m |
Chooses NativeScript for day-zero platform APIs and TypeScript access, claiming that gives immediate access to new mobile features and long-term resilience… | ||
| Native API Security with NativeScript | Nathan Walker | 15m |
Shows that JavaScript can generate a crypto key, encrypt a JWT and either store it in SQLite (where a copied device container reveals it) or place it in a… | ||
| # Scaling a Javascript Application from 0 to a Brazilian users | Dan Neciu | 29m |
Builds CareerOS from MVP to adoption by 50+ universities, raises $800k after four initial paying customers, and ships with React, Vite, TanStack, Firebase and… | ||
| JavaScript's Secret Life Between the Ticks | Mohamad Shiralizadeh | 34m |
Covers how the event loop actually schedules work: call stack → Web APIs → queues (microtask vs task vs rAF) and shows a live demo where an infinite promise… | ||
| Surprise! Svelte Secretly Sending Signals | Paolo Ricciuti | 34m |
Svelte 5’s Runes are implemented as Signals and the code builds a tiny reactivity system that actually works: a Proxy with get/set traps records per-key reads… | ||
| Meet The Web Framework From The Future | Dev Agrawal | 20m |
Claims a minimal, composable framework that is also fully type-safe and framework-agnostic, demonstrated by scaffolding with create-tanstack-app and wiring… | ||
| The Secret To Fast TypeScript | Mike Hartington | 28m |
TypeScript slowness is fixable: replacing monolithic builds and brittle tsconfig paths with npm/yarn/pnpm workspaces plus TypeScript project references turns a… | ||
| Turning Your Angular App into a Mobile Money Maker | Daniil Rabizo | 22m |
Shows a concrete migration: an existing Angular app is wrapped with Capacitor wrapper and added as a second NX app, keeping ~70 feature libraries unchanged by… | ||
| Optimizing Angular Apps - Techniques for Performance Excellence | Sonu Kapoor | 27m |
Shows how switching routes to loadComponent or loadChildren plus preloading cuts the main bundle in half example build drops main chunk from 58KB to 26KB for a… | ||
| Angular Resources: Everything you need to know | Alain Chautard | 26m |
Angular Resources replace most RxJS boilerplate with a signal-based API that fetches async data with as little as one line of code using HTTP resource… | ||
| Angular v20 | Minko Gechev | 20m |
Angular v20 ships core reactivity: signals stable, plus effect and related APIs ready for production, and an experimental HTTP resource that tracks signal… | ||
| Code smarter, not harder: How AI Tools Boost Your Productivity | Daniel Sogl | 23m |
Demo shows a working web prototype with real authentication and a Supabase backend built in 5–10 minutes using Lovable, wired to Perplexity for research and… | ||
| No More Guesswork: Let AI Optimise Your React App | Shlok Srivastava | 29m |
A custom CLI analyzer parses React components into JSON, runs a Python ML model and flags props received: 9 / props used: 4 to detect prop‑bloating, then… | ||
| Inside Bolt.new: WebContainer API Meets AI | Jòan Varvenne | 30m |
Bolt.new runs full-stack Node.js apps entirely in the browser using WebContainer API, proving you can stream LLM output into a running dev server: demos use… | ||
| AI-Powered Debugging & Browser Automation with Playwright MCP | Debbie O'Brien | 25m |
Playwright MCP connects LLMs to a real browser, uses the accessibility tree instead of pixels, and generates and executes tests by actually clicking and… | ||
| The Built-in Browser-based Babelfish | Phil Nash | 39m |
A browser-native speech-to-speech translator is built using the Web Speech API, Chrome’s experimental Prompt API with Gemini Nano, MediaRecorder/Web Audio to… | ||
| @Cypressio x AI: Automating Browsers Using Natural Language | Brian Mann | 33m |
Compares general-purpose agents (Operator, Mariner, BrowserUse, BrowserBase) on the same plain‑English steps and finds most work but are slow or imprecise… | ||
| AI Driven Design with Histoire and Nuxt Layers | Daniel Kelly | 25m |
Walks through using Cursor to generate Vue components and Creates tooltip component via Cursor that produces a Histoire story and a Nuxt Content doc… | ||
| Live Panel Discussion: Less Code? More Vibes? Web Dev in the AI Era | Mostafa Said, Daniel Kelly, Navya Agarwal, Justin Schroeder | 51m |
Claim: AI already writes thousands of lines of code per month for developers, cutting scaffolding time from about 70% to 7%. Tools in active use include… | ||
| Modern Day Mashups: AI Agents are Reviving the Programmable Web | Angie Jones | 29m |
MCP (Model Context Protocol) claims to let AI agents stitch APIs together with little maintenance: over 4,000 MCPs exist now, under 500 from official vendors… | ||
| Letting AI Interface with Your App with MCPs | Kent C. Dodds | 20m |
Claims how to expose app functionality via MCPs and shows a working demo: an MCP server network calls 17 tools, a local MCP server for GPS, a weather MCP on… | ||
| Founder's Keynote | Alex Kyriakidis | 09m |
Company unveils plans and numbers: running 19 products, a certification platform Certificates.dev with secure hands‑on exams and 5,000+ certified developers to… | ||
| Intuitive Web Experiences with the View Transitions API | Muhammad Ahsan Ayaz | 04m |
Live demo shows the View Transitions API creating app-like page and cross-page image animations using document.startViewTransition() to let the browser… | ||
| Debugging SSR in Next.js Apps like a Pro | Muhammad Ahsan Ayaz | 02m |
Adds an npm script called debug that runs Next.js with Node inspection, then connects via Chrome DevTools (chrome://inspect) to attach to the server process… | ||
| Use the Angular linkedSignal for Declarative Solutions | Fanis Prodromou | 02m |
Demo builds a dropdown of three items and reproduces a bug where choosing an option then triggering an HTTP emulation replaces the items array and leaves the… | ||
| Create Infinite-Scrolling Background Using 2 CSS Classes | Eleftheria Batsou | 03m |
Shows a working recipe that creates a seamless horizontal loop using HTML and CSS only, specifically two classes named container and infinite-scrolling. Uses… | ||
| Lightning Fast AI Chatbots in Nuxt | Daniel Kelly | 04m |
Claims a working chatbot in under 3 minutes built with Nuxt and the AI SDK from Verscell, wired via a runtime config API key and an API route at /api/chat… | ||
| Custom Rendering in Nuxt Content | Daniel Kelly | 04m |
Shows how Nuxt Content maps the HTML a renderer in nuxt.config to a ContentLink component that replaces plain anchor tags. The component detects external URLs… | ||
| Jòan Challenges With Deploying AI in Web Dev | 01m | |
Deploying an AI-centered feature fails when its predictability drops: internal tests and deterministic code pass, but at scale the model’s nondeterminism… | ||
| Mikes Advice For Dev's Who Want To Start Learning TypeScript | Mike Hartington | 01m |
Add a simple jsconfig or tsconfig file to an existing JavaScript app and configure the editor to treat files as TypeScript so the TypeScript compiler rules run… | ||
| Which AI Tools Jòan Varvenne Uses | Jòan Varvenne | 01m |
Uses a small set of tools regularly and calls out Bolt.new for dogfooding: imports Figma frames, creates prototypes for any framework, and builds user scripts… | ||
| What Motivated Mike to Start Using TypeScript | Mike Hartington | 01m |
Adopts TypeScript for concrete editor benefits: IntelliSense catches undefined before save, static checking surfaces common mistakes while typing, and the… | ||
| Meet Jòan Varvenne | Jòan Varvenne | 01m |
Demonstrates running an AI coding agent entirely in the browser using Bolt.new + WebContainers, eliminating remote VMs and keeping execution local. Shows… | ||
| How Dan Neciu Stays Up to Date with Frameworks | Dan Neciu | 01m |
Uses Reddit as the primary signal source, skimming r/reactjs and r/vuejs for release notes, migration guides, and reproducible bug reports; follows community… | ||
| Meet Mike Hartington | Mike Hartington | 01m |
Concrete steps for faster TypeScript with examples: uses NX monorepo setups, config changes (project references, composite, incremental), and build cache to… | ||
| Dan Neciu's Favorite JS Feature & How to Use It | Dan Neciu | 01m |
Shows that JavaScript proxies let you wrap a large object so every property write triggers a trap that reports where and when it changed. Uses built-in proxies… | ||
| Q&A with Jòan Varvenne | Jòan Varvenne | 06m |
Bolt.new demonstrates an AI coding agent that runs entirely in the browser using WebContainer APIs so no VM is required, letting the agent edit files, deploy… | ||
| Meet Dan Necio | Dan Necio | 01m |
13 years of hands-on work across NYC startups and Glovo inform a playbook for building a product from zero to one: details on the exact front-end architecture… | ||
| Q&A with Mike Hartington | Mike Hartington | 03m |
Quick Q&A highlights why TypeScript adoption centers on editor tooling and IntelliSense that surface undefined and other bugs before runtime, how types change… | ||
| Q&A with Dan Neciu | Dan Neciu | 05m |
Builds a front-end tech stack from scratch for a co-founded startup and takes it to production, migrating through PHP/WordPress, Angular (including a refactor… | ||
| Kent C. Dodds Opinion on AI in Web Dev | Kent C. Dodds | 02m |
Predicts web developers will stop training models and instead build MCP servers — Model Context Protocol endpoints that become the replacement for the website… | ||
| What Aurora Scharff Thinks of React | Aurora Walberg Scharff | 01m |
React mindset makes a person see Figma.com designs as reusable parts and treats problems the same way, breaking complex UI and workflows into isolated… | ||
| The AI Tools Kent C. Dodds Uses | Kent C. Dodds | 01m |
Uses five core tools and says they genuinely speed work: Cursor as editor replaces the local IDE and is "fabulous", ChatGPT handles frequent drafting and… | ||
| Aurora Scharff, shares her excitement about React’s future | Aurora Walberg Scharff | 01m |
Claims that the Next.js App Router composition model plus server components and the use cache directive let teams move rendering heavier to the server, shrink… | ||
| Meet Kent C. Dodds | Kent C. Dodds | 01m |
Demonstrates how MCP (Model Context Protocol) lets a language model call into apps so a chat interface can perform real actions, not just suggest them. Shows… | ||
| Aurora Scharff's Journey with React | Aurora Walberg Scharff | 01m |
Moves from Angular to React, showing that React relies on JavaScript features so prototypes evolve into production code without framework magic. Describes… | ||
| Q&A with Kent C. Dodds | Kent C. Dodds | 07m |
Focus is on Model Context Protocol (MCP) as a replacement for websites that lets services be actioned via chat apps so the end user pays for the model and the… | ||
| Meet Aurora Scharff | Aurora Walberg Scharff | 01m |
Live demo builds accessible custom form components that handle async workflows using React 19 actions and useOptimistic, integrating server-driven logic via… | ||
| Q&A with Aurora Scharff | Aurora Walberg Scharff | 05m |
Shows how to build accessible custom components and wire them to async flows using React 19 actions and useOptimistic, with a step‑by‑step demo that actually… | ||
| What Excites Francesco Ciulla The Most About Rust!! | Francesco Ciulla | 01m |
Argues Rust belongs in web development not just systems or blockchain, claiming developers who already build API endpoints and controllers can learn Rust… | ||
| Sonu Kapoor's Message for Angular Devs! | Sonu Kapoor | 01m |
Angular is framed as an "amazing framework with a powerful ecosystem" and the concrete advice is to embrace new features and keep pushing the boundaries of… | ||
| Francesco Ciulla busts a big misconception about Rus | Francesco Ciulla | 01m |
Claims that Rust is not just for system programming and that Rust is accessible for web development, arguing the language only feels hard at first because of… | ||
| What Excites Sonu Kapoor, Angular GDE, Most About Angular! | Sonu Kapoor | 01m |
Angular Signals simplify state management and expose a small API for reactive data that replaces many RxJS operator chains with replace complex RXJS operators… | ||
| Meet Francesco Ciulla | Francesco Ciulla | 01m |
Announcement states Rust and web development connection and asserts can create web applications using Rust with a clear yes answer. Mentions Daily Dev and a… | ||
| Q&A with Francesco Ciulla | Francesco Ciulla | 07m |
Rust can build real web applications and APIs, not just systems code, with the Rust compiler enforcing memory safety at compile time so services run fast and… | ||
| Q&A with Sonu Kapoor | Sonu Kapoor | 04m |
Deep dive into Angular architecture with concrete claims: shows how Angular signals replace complex RxJS patterns, demonstrates measurable gains from bundle… | ||
| nothing matches | ||