Frontend Nation 2024
| title | author | length |
|---|---|---|
| The Ultimate Dev Event! Join 50+ Industry Experts for Talks, Panels & Live Coding | Evan You, Kent C. Dodds, Minko Gechev, Angie Jones, Kelly Vaughn, Jessica Sachs, Sébastien Chopin, Daniel Roe | 01m |
Calling all devs! Frontend Nation is the biggest FREE online frontend event EVER.
Join 50+ industry superstars for 3 days of talks, workshops &… | ||
| Stop Lying to Your Users | Kent C. Dodds | 21m |
Argues that many sites pretend they’re ready when they aren’t, showing concrete failures: Chase renders footers and spinners while waiting for user-specific… | ||
| Getting Fluent with React | Tejas Kumar | 17m |
Explains how React’s fiber double-buffering gives scheduling and priority, then demos two concurrent hooks: useDeferredValue (debounce-like but… | ||
| The Progressive Path to Open Source: Lessons from Anthony Fu's Journey | Anthony Fu | 28m |
Argues that a progressive path—low discovery and learning cost, then opt‑in features and migration bridges—makes open source tools widely usable. Cites Vue… | ||
| Angular Renaissance | Minko Gechev | 20m |
Angular ships concrete features and measurable wins: defer views lets templates load on demand and bu.com cuts bundle size up to 50% by wrapping rarely used… | ||
| Simplifying Data Fetching in Vue with Data Loaders | Eduardo San Martin Morote | 21m |
Introduces a new API called data loaders that integrates with Vue Router and Pinia to centralize fetching, block or abort navigation until data resolves, and… | ||
| Unleashing the Power of AI: Write your own AI Extension | Vanessa Otto | 23m |
Shows a working TipTap AI extension that runs through a front end talking to a backend proxy calling GPT-3.5 Turbo, implements a custom node with a set AI chat… | ||
| Testing with Playwright in an AI-Assisted Development World | Debbie O'Brien | 17m |
Demonstrates using GitHub Copilot to generate a Vue counter component and Playwright to install browsers, auto-generate a test with Codegen, run it in VS Code… | ||
| Improving app performance by using background jobs | Sylwia Vargas | 18m |
Build speed and reliability by moving nonblocking tasks to background jobs and using Ingest durable workflows to run functions asynchronously via HTTP… | ||
| Astro Studio: All Secrets revealed | Elian van Cutsem | 33m |
Astro ships mostly static pages with islands + client directives to hydrate only needed components, claims Lighthouse 100 by default, and adds native view… | ||
| Open Source eCommerce | Filip Rakowski | 24m |
Claims an open-source stack that evolved from Vue Storefront into Alokai with 8+ years of experience, now supporting 10+ e‑commerce backends and React/Qwik… | ||
| Next-Gen Angular: Building an AI Chatbot | Tracy Lee | 22m |
An Angular 18 demo builds a working AI chatbot using OpenAI for generation, AstraDB for vector retrieval, and CoHere embeddings to index scraped Angular docs… | ||
| Welcome Keynote | Alex Kyriakidis | 10m |
Vue School describes scaling from a 2016 Vue-only course library to over 1,000 lessons with new videos weekly and reaching 1.6 million developers last year… | ||
| Vite Core Team Panel | Evan You, Matias Capeletto, Dominik G, Vladimir Sheremet, Anthony Fu, Bjorn Lu | 56m |
Vite announces an upcoming Vite 6 with an explicit Vite 6 environment API that makes client, SSR and custom environments first-class, while V5.3 is in beta… | ||
| Stop Lying to Your Users with Q&A | Kent C. Dodds | 36m |
Claim: many sites “look ready” but aren’t, causing broken inputs and layout shifts; concrete fixes: use server side rendering or a tiny head script that reads… | ||
| Tauri 2.0: Defining Done | Daniel Thompson-Yvetot | 36m |
Tauri 2.0 ships a stable JS API that lets web apps call a Rust core without writing Rust, adds first-class build for mobile support (iOS/Android) and a… | ||
| Building a Better LMS, One Tiny Block at a Time | Brad Lawless | 28m |
TinyMCE is a 20-year JavaScript rich text editor that ships as modular plugins (over 400 APIs, integrates with 12 frameworks) and powers LMSs for Canvas… | ||
| (React)ive State Management: Enter RxJS | Nikola Mitrovic | 31m |
Claims that react is not reactive and shows two concrete approaches: use rxjs with react-rxjs bindings to create signal-like observables, bind them to… | ||
| Creating 3D Experiences with React | Sara Vieira | 37m |
Argues that web 3D is approachable, then shows a concrete pipeline: model in Blender, export to glTF 2.0 (binary .glb), optimize with Draco compression, and… | ||
| Master Scripts & Third Parties in Next.js | Thorsten Kober | 25m |
Next.js Script component lets apps add external and inline scripts with an ID, event handlers (onReady/onLoad/onError) and explicit loading strategies like… | ||
| Integrating AI and Browser API Voice Recognition on Web App | Kevin Uehara | 38m |
A web app that turns live speech into HTML and images by wiring the browser speech recognition API to OpenAI and rendering results with React and Tailwind… | ||
| Plants vs thieves: Automated Tests in the World of Security | Ramona Schwering | 28m |
Shows concrete security checks implemented with Cypress e2e scripts: inject a <script>alert(1)</script> into inputs to detect XSS, visit crafted URLs to catch… | ||
| Extending reactivity to the server with Convex | Tom Ballinger | 32m |
Convex is a backend-as-a-service that extends UI reactivity to server and database by letting developers write backend functions in TypeScript with… | ||
| First-Class Auth Experience In Frontend Applications | Filip Grebowski | 33m |
Argues that auth belongs in the frontend as a first-class concern and demos a working stack: Permit (no-code authz), a FaaS proxy that injects secrets and lets… | ||
| Open Source eCommerce with Alokai with Q&A | Filip Rakowski | 35m |
Open-source eCommerce platform Alokai claims 8+ years of experience, now backend-agnostic and supporting more than 10+ e‑commerce platforms, with a UI library… | ||
| Why Lit is 🔥 | Lucien Immink | 39m |
Lit packages template literals with web components (custom elements + shadow DOM + CSS variables) into a 6 KB runtime — the presenter claims 6.2 KB gzipped… | ||
| A Safari Through Code: Exploring Panda CSS | Sybren Willemot | 11m |
Panda CSS is a CSS-in-JS engine that generates CSS at build time and emits only the atomic classes actually used, avoiding duplicates; the demo shows React… | ||
| Modern CSS does what now? | Joran Quinten | 33m |
Modern browsers now run nesting, scoping, container queries and container units, color functions (including display‑P3), subgrid for consistent vertical… | ||
| Micro-Frontends Anti-Patterns | Luca Mezzalira | 11m |
Over about three years of consulting across 100 teams, common failures surface: equating micro-frontends with reusable components, leaking a global state that… | ||
| Building for the Edge | Sébastien Chopin | 35m |
Defines the edge as a limited JS runtime on CDN nodes (V8 isolates, 250+ locations) and shows Nuxt producing a Cloudflare Pages preset via Nitro that polyfills… | ||
| Nuxt + Vue: The Game-Changer Your New Projects Deserve | Daniel Kelly | 34m |
Vue + Nuxt pitch focuses on concrete wins: Nuxt provides end-to-end type safety via typed server API routes and autocompleted useFetch calls, plus flexible… | ||
| Simplify Data Fetching in Vue with Data Loaders with Q&A | Eduardo San Martin Morote | 37m |
Introduces data loaders that integrate with Vue Router and composables to dedupe requests, delay committing updates until all route loaders resolve, and run… | ||
| Vue/Nuxt SEO Essentials | Mostafa Said | 38m |
Claims that SPA content can be indexed but often lags behind SSR so prefer server‑rendered pages or hybrid hydration with Nuxt to avoid slow crawling delays… | ||
| 🚨 Live On the Edge 🚨 | Daniel Roe | 57m |
Live-codes a multiplayer web app using Nu/Nitro, pnpm and the built-in storage/KV layer, exposes API routes for get/put, and wires websockets (cross-ws) for… | ||
| Anatomy of a Test Runner: What Vitest Keeps Getting Right | Jessica Sachs | 27m |
Vitest claims to be fast and production-like by reuses your bundler config so tests run the same ESM build as production and avoid reimplementing transformers… | ||
| Vue.js Hydration Demystified | Alexander Lichter | 12m |
Covers why Vue hydration breaks and how to fix it: common causes are invalid HTML (browser rewrites DOM), build-step HTML minifiers removing Vue placeholder… | ||
| What's hot on TresJS v4 🔥? | Alvaro Saburido | 24m |
TresJS v4 adds concrete upgrades: on-demand rendering plus manual invalidate and three render modes (always/on-demand/manual) that cut wasted frames; a rebuilt… | ||
| Angular Renaissance | Minko Gechev | 28m |
Angular ships defer views for declarative lazy-loading (bu.com cuts a bundle by up to 50% using it), a new JavaScript-like control-flow syntax with CLI… | ||
| Making A Splash With View Transitions | Mike Hartington | 33m |
Shows how the browser View Transitions API animates DOM changes with minimal JavaScript, using document.startViewTransition to wrap mutations and view… | ||
| Modern Angular: A Learning Path | Jan Niklas Wortmann | 36m |
Practical roadmap: prefer control flow (added in Angular 17) over asterisk structural directives for readability and some lazy‑loading blocks; prefer signals… | ||
| The Future of Frontend Panel | James Q Quick, Brad Garropy, Amy Dutton | 01h 10m |
Panelists debate whether frontend is getting harder while showing concrete tradeoffs: Next.js server components and full‑stack frameworks simplify deployments… | ||
| How to converge two frameworks | Jatin Ramanathan | 28m |
Wiz and Angular converge by sharing concrete primitives: a signals based reactivity model and the JS action resumability approach. Nearly 4,000 Google apps… | ||
| Navigating Angular's Evolution for Peak Performance! | Jaroslaw Zolnowski | 17m |
Live coding compares default change detection, OnPush, and Angular Signals (Angular 16) using a three-node demo that triggers manual and interval updates… | ||
| Refactoring 80+ Angular projects and what went wrong | Muhammad Ahsan Ayaz | 33m |
Converts 80+ Angular recipes (actually ~160 start+final states) into two workspaces so upgrades and edits happen in hours not weeks, claiming ~70% less manual… | ||
| Everything you need to know about Angular Signals | Alain Chautard | 32m |
Angular Signals introduces three reactive primitives signal/computed/effect that replace many RxJS patterns, with signals being synchronous stores and computed… | ||
| Nitro, the Server toolkit you probably need | Pooya Parsa | 24m |
Nitro is a universal server toolkit that bundles a dev server with HMR, a Rollup-based production bundler (W, future), and a runtime that deploys to 25… | ||
| JSON Web Tokens for everyday usages | Angie Jones | 35m |
Demonstrates using the Web5 SDK to issue W3C verifiable credentials as JWTs, for example a Louisiana mobile driver's license issuing an age-over-21 credential… | ||
| Which Node.js HTTP client in 2024? | Matteo Collina | 34m |
Compares Axios, node-fetch, Requests (deprecated) and undici, with measurable claims: libraries maintained hit 22 billion downloads in 2023 and aim for 29–30… | ||
| Frictionless tutorials with the WebContainer API | Jòan Varvenne | 25m |
Shows a working way to run Node environments entirely in the browser using the WebContainer API, with support for npm/yarn/pnpm and experimental Python… | ||
| Reactivity as Catalyst: Driving Evolution in React, Vue & Angular | Rosen P. | 11m |
Explains why reactivity drove major rewrites and new compilation routes: compares React Fiber and React’s move from reconciliation to compilation, Vue Vapor… | ||
| Security in modern Web Applications - OWASP to the rescue | Jakub Andrzejewski | 13m |
Covers OWASP Top 10 as the baseline and shows a concrete tool: a next-security module for Next.js that injects security headers, CORS, CSRF protection, an XSS… | ||
| From “its broken” to “fix is out” | Sarah Guthals | 33m |
Live demo of Sentry diagnosing a checkout outage: captures user feedback in Slack, records session replay video, traces front end calls to an uncompressed… | ||
| Web accessibility in practice, more than just WCAG | Tim Damen | 33m |
Shows that 1.3 billion people face significant disabilities and WebAIM’s WebAIM Million finds almost every homepage has accessibility failures, then builds a… | ||
| Making an impact in your organization regardless of job title | Kelly Vaughn | 33m |
Four concrete practices for getting influence without a title: understand and verbalize impact by mapping work to business value and asking cross‑team… | ||
| Stop writing docs; start helping! | Sarah Rainsberger | 28m |
Argues that documentation exists to help people, not to be pretty, and recommends concrete steps: audit every statement for truth and delete clutter, label… | ||
| Life as a DevRel Panel | Sarah Guthals, Wayne Sutton, Mrinalini Sugosh | 01h 10m |
Panel argues that DevRel is outcome-driven not title-driven, with successful roles mixing community listening, technical empathy and storytelling. Examples: a… | ||
| Web Dev CSI: Solving the Curious Case of Code Chaos | Alexandra P., Simon G. | 12m |
Practical checklist for untangling messy frontend projects: enforce meaningful naming and small, atomic components; run automated formatting and linting with… | ||
| Testing A11y: Validating Web App Accessibility | Shawn Harris | 21m |
Covers step‑by‑step checks: DOM and accessibility tree inspection for semantic HTML and ARIA roles, keyboard-only navigation to verify focus order and visible… | ||
| Typescript, You and AI Search | Daniel Madalitso Phiri | 36m |
Shows how a Typescript Next.js app uses OpenAI embeddings and a GA Typescript weate client to turn a song list into a semantic search index, storing vector… | ||
| Supercharge Your Web App with an AI Writing Companion with Q&A | Vanessa Otto | 31m |
Builds a Tiptap AI extension that delegates prompts to a server-side proxy so OpenAI keys stay off the frontend, uses GPT-3.5-turbo via the OpenAI API, and… | ||
| Scaling Frontend Teams | Anass T. Allah | 09m |
Company lands a big client and needs to scale frontend fast; plan claims to avoid onboarding overload and preserve code quality by hiring via LinkedIn GitHub… | ||
| SSR Web Components Everywhere (with WASM) | Simon MacDonald | 10m |
Claims that compiling the enhance SSR framework to WASM lets server‑side render real Web Components on any backend runtime, not just Node, producing working… | ||
| Frontend Development With BFF (Backend for Frontend) | Asad Ullah Khalid | 11m |
Shows a concrete BFF implementation using Next.js BFF that moves payload shaping and encryption out of the browser into a server, with examples of a… | ||
| Crafting crazy & collectively constructive creative coding concoctions | Simon M. | 26m |
Live builds a chaotic, crowd-controlled hero section: a multiplayer forklift game that loads DOM pieces and fragments into a landing page, driven by StackBlitz… | ||
| Interactive Vue Playgrounds with TutorialKit with Garrison Snelling - Part 1 | Garrison Snelling | 14m |
Creates a working interactive Vue playground for VueUse in about 45 minutes using StackBlitz tech: Tutorial Kit (newly open source) plus Web Containers and an… | ||
| Interactive Vue Playgrounds with TutorialKit with Garrison Snelling - Part 2 | Garrison Snelling | 40m |
Live demo builds an interactive Vue playground using TutorialKit on top of Web Containers, installing VueUse into a template, wiring package.json and a… | ||
| Client-Side and Server-Side Form Validation in Nuxt with Daniel Kelly (Pt 1) | Daniel Kelly | 08m |
Live coding shows a Nuxt registration form using FormKit and Zod with one shared schema applied both client- and server-side; realtime client validation… | ||
| Client-Side and Server-Side Form Validation in Nuxt with Daniel Kelly (Pt 2) | Daniel Kelly | 42m |
Live coding shows a Nuxt registration flow that reuses one Zod schema for both client and server validation, including FormKit + Zod plugin integration, async… | ||
| Build an AI Recipe App: AWS Amplify Gen2 & Amazon Bedrock with Erik H. (Pt 1) | Erik H. | 18m |
Builds a working AI recipe app that returns a recipe in a few seconds using Amazon Bedrock (Claude 3 Sonnet), wired through Amplify Gen2 with AppSync, DynamoDB… | ||
| Build an AI Recipe App: AWS Amplify Gen2 & Amazon Bedrock with Erik H. (Pt 2) | Erik H. | 34m |
Hands-on walkthrough that builds a working recipe generator: clones the starter Nuxt.js app, configures AWS Amplify Gen2 and CLI with IAM Identity Center… | ||
| Using Cypress to test a Vue Site with Ademola Bhadmus (Pt 1) | Ademola Bhadmus | 05m |
Live coding shows Cypress set up for a Vue app with Node and VS Code assumed, building three concrete tests: type and verify dynamic text into a search input… | ||
| Using Cypress to test a Vue Site with Ademola Bhadmus (Pt 2) | Ademola Bhadmus | 44m |
Live coding shows a Vue site tested with Cypress from init to assertions: creates package.json, installs Cypress, tweaks config like baseUrl and… | ||
| Building a TinyMCE LMS Editor with React & OpenAI - Pt 1 | Mrinalini Sugosh | 12m |
Builds a mock LMS editor using TinyMCE React component and the Tiny Cloud deployment, wires in plugins (accessibility checker, spellcheck, math), adds custom… | ||
| Building a TinyMCE LMS Editor with React & OpenAI - Pt 2 | Mrinalini Sugosh | 01h 05m |
A working LMS editor is built from a React app using the TinyMCE React package, Vite+SWC and npm, adding plugins that demonstrably work live: accessibility… | ||
| Create an Add to Calendar Button in React with Colby Fayock (Pt 1) | Colby Fayock | 04m |
Builds a reusable Add to Calendar button using React and Tailwind CSS that actually generates links for multiple services via the calendar-link package and… | ||
| Create an Add to Calendar Button in React with Colby Fayock (Pt 2) | Colby Fayock | 42m |
Builds an interactive Add to Calendar button that generates service links with the calendar-link package and opens them in new tabs (Google, Outlook, Yahoo… | ||
| Extending Reactivity to the Server with Convex with Tom Ballinger (Pt 1) | Tom Ballinger | 21m |
Practical walkthrough building a real‑time chat with Convex, showing five concrete features implemented and live: emoji replacement (turning colon codes into… | ||
| Extending Reactivity to the Server with Convex with Tom Ballinger (Pt 2) | Tom Ballinger | 46m |
Step-by-step build of a Convex-backed real-time chat: server-side emoji replacement runs in a Convex query, messages reject over 50 characters with a Convex… | ||
| Architecting Angular apps with Signals with Alain Chautard (Pt 1) | Alain Chautard | 15m |
Walkthrough implements a working currency switcher for an Angular app using the new signals API: a Currency Service that holds a signal for the chosen… | ||
| Architecting Angular apps with Signals with Alain Chautard (Pt 2) | Alain Chautard | 46m |
Practical walkthrough that implements currency switching and exchange-rate conversion with an Angular service that uses a signal for current currency, an HTTP… | ||
| Beyond console.log: Supercharge Your Debugging Skills! | Cai Cruz | 15m |
Live demos show a Vue.js e‑commerce app wired to a fake API and a Pinia store; using the Visual Studio Code debugger reveals duplicate add-to-cart calls caused… | ||
| Modern Angular with NgRx SignalStore | Jan Niklas Wortmann | 30m |
Builds a contact-management app using Angular 17+ and NgRx SignalStore, implementing three hands-on flows—loadContacts, updateContact, createContact—plus a… | ||
| nothing matches | ||