Syntax - Tasty Web Development Treats

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

911: Browsers in 2025: Whats up with Arc, Dia, Firefox, Chrome and Opera GX? 06/16/2025

911: Browsers in 2025: Whats up with Arc, Dia, Firefox, Chrome and Opera GX? Scott and Wes break down the state of web browsers in 2025, from the rise and fall of Arc and the fate of Firefox to hot takes on Opera GX, Raycast, and why power users might not be profitable. They compare rendering engines, rant about dev tools, and reveal what browser stats say about Syntax listeners. Show Notes Welcome to Syntax! Rendering Engines. Arc Browser. Microsoft Edge. Why not Brave? Brought to you by . Google Manifest v2. Opera. . . The death of Browser. ? No revenue from power-users. . Arc’s transition to a new browser. Browser companies need to lock users fast! Gecko. Firefox. . Webkit. Wtf is ? Usage statistics. . Dev Tools experience ranked. Tab experience. Containers and profiles. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36937825

910: If Statements in CSS? 06/11/2025

910: If Statements in CSS? Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required. Show Notes Welcome to Syntax! Brought to you by CSS If statements in action Advanced examples and the attribute function Mixing If statements with media queries Can’t this be done with classes? The future of CSS: declarative APIs Is CSS now a programming language? Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36938770

909: Handling and Throwing Errors 06/09/2025

909: Handling and Throwing Errors Scott and Wes break down how to properly throw, catch, and log errors in JavaScript and TypeScript. They cover client-side and server-side strategies, using tools like Sentry, and how to handle errors without taking down your whole app. Show Notes Welcome to Syntax! Error terminology. Thrown and catching. What’s in an error. Name and message. Stack. Node system errors. Messages: strings, objects, or custom errors. Throwing errors. Promise errors. Try catch block, .catch(). Using awaited-to. Finally. promise.try() Re-throwing errors. Client-side errors. Catching at different levels. Displaying errors. Transforming server errors into client errors. Error boundaries. Server errors. JSON API. HTTP response codes. Logging and solving errors. Proudly supported by . TypeScript and errors. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36895620

908: Storybook Has Evolved w/ Jeppe Reinhold 06/04/2025

908: Storybook Has Evolved w/ Jeppe Reinhold Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting. Show Notes Welcome to Syntax! What is Storybook? How Storybook makes component design easier Vite integration and compatibility with other tools Storybook’s significantly smaller bundle size Upgrading to Storybook 9 Testing components with Storybook How do you write a component “story”? Brought to you by How visual testing works How Storybook makes money Best practices for component design Mocking and testing strategies Accessibility testing Add-ons and future features Storybook’s documentation Sick Picks + Shameless plugs Sick Picks Jeppe: Shameless Plugs Jeppe: Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36836430

907: Wes’ New Site: Gatsby → React Server Components 06/02/2025

907: Wes’ New Site: Gatsby → React Server Components Wes rebuilt his personal site from Gatsby to a modern stack using Waku, React Server Components, and Cloudflare Workers — all while keeping the same design. Scott and Wes break down the pain points with Next.js, MDX, image handling, caching, and the custom setup that now powers a blazing-fast blog. Show Notes Welcome to Syntax! Barcelona Conference. Brought to you by . Existing stack, goodbye to Gatsby. New stack, the goals for moving. So what is the new stack? Challenges with NextJS. Problems with plugins. Problems with dynamic imports. Problems with Cloudflare deployment. Landing on Waku. Hot Tips functionality updates. Blog Posts + JavaScript Notes. Moving from Gatsby. Page speeds. Removing nav resizing process. Writing custom MDX plugins. Hosting. Why is the build so fast? Pricing. Caching. Migration errors. CSS. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36793720

906: Tech Startups and Raising Money with Dan Levine (Vercel, Sentry, Mux…) 05/28/2025

906: Tech Startups and Raising Money with Dan Levine (Vercel, Sentry, Mux…) Wes and Scott talk with VC Dan Levine about how developers can raise venture capital, what investors look for in early-stage startups, the realities of bootstrapping vs. fundraising, and why great ideas often start as simple side projects. Show Notes Welcome to Syntax! Dan’s background and career Is it common for tech investors to come from a tech background? How can developers raise money? What investors look for How much funding is enough? Are founders working with multiple investors? What can you use the money for? How much influence do investors have in the business? Brought to you by How involved are VCs in the business? How do you know a startup is in trouble—and what can you do about it? How much of the company do investors own? What’s the endgame for investors? How do acqui-hires work? Is the AI space a real opportunity or just hype? Sick Picks + Shameless Plugs Sick Picks Dan: Shameless Plugs Dan: Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36692905

905: You Should Learn Nuxt! 05/26/2025

905: You Should Learn Nuxt! CJ steps in for Scott and joins Wes to share his experience working with Nuxt, from routing and data fetching to the pros and cons of the framework. They break down the Nuxt ecosystem, directory structure, and how it handles server routes and modules. Show Notes ! Welcome to Syntax The deal with Nuxt. . Why do you like Vue? Brought to you by . Routing with Nuxt. . . Built on Nitro. The Nuxt Ecosystem. API Route Support. Nuxt Directory Structure. Does Nuxt do too much for you? Data fetching in a Nuxt app. RPC, Form Actions, Server Actions? Nuxt Server Folder Hastle. useFetch Hook. . Core Modules and Community Modules? . . . . . Nuxt Hosting. . . Anything you don’t like? Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36548600

904: React vs Svelte × Windsurf Worth $3B × Typescript as Const × Layout Shift Tricks × More 05/21/2025

904: React vs Svelte × Windsurf Worth $3B × Typescript as Const × Layout Shift Tricks × More In this potluck episode of Syntax, Wes and CJ answer your questions about OpenAI’s $3B Windsurf acquisition, the evolving role of UI in an AI-driven world, why good design still matters, React vs. Svelte, and more! Show Notes Welcome to Syntax! OpenAI acquires Windsurf for $3B What is the future of UI now that AI is such a heavy hitter? Handling spam submissions on websites Duplicating HTML for desktop and mobile websites? Is it okay to use a JSON file for simple website data? How to handle anonymous and duplicate users Working with TypeScript Object.keys() and “any” vs “@ts-ignore” Brought to you by What is the difference between React and Svelte? How should you name your readme file? How do you find time to refactor code? Best practices for testing responsiveness Avoiding layout shift with progressive enhancement Sick Picks + Shameless Plugs Sick Picks CJ: Wes: Shameless Plugs CJ: Wes: Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36597450

903: Fork Yeah! Microsoft open sourcing Copilot 05/19/2025

903: Fork Yeah! Microsoft open sourcing Copilot Scott and Wes are joined by Erich Gamma, creator of VS Code, and Kai Maetzel, Copilot Lead, to share some big news about the future of VS Code and Copilot. They discuss what it means for developers, how AI is shaping the future of coding, and why staying open to the community is key. Show Notes Welcome to Syntax! The inception of VS Code. VS Code adoption. Brought to you by . ! The big announcement. The current state of Copilot and VS Code. The challenges with LLMs running outside of the codebase. How to make a business case for AI. The maturing of the AI landscape. The limitations of extensions. Open source vs closed source. Copilot’s context is public. Is context language-specific? How does this affect paid Copilot features? Secrets of Copilot’s server-side. What will be open and what will not? Is Copilot’s UI influenced by VS Code forks? Maintaining VS Code identity in forks. What does open-sourcing GitHub Copilot mean for Cursor and Windsurf? Were you surprised to see VS Code forks? Are other extensions able to tap into the AI offerings? There’s work to be done. The timeline. Simulation Tests (S Tests). How to test LLMs. The future of software development with AI. What’s your favorite model? Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36597170

902: Fullstack Cloudflare with React and Vite (Redwood SDK) 05/14/2025

902: Fullstack Cloudflare with React and Vite (Redwood SDK) Wes talks with Peter Pistorius about RedwoodSDK, a new React framework built natively for Cloudflare. They dive into real-time React, server components, zero-cost infrastructure, and why RedwoodSDK empowers developers to ship faster with fewer tradeoffs and more control. Show Notes Welcome to Syntax! What is ? Choosing openness over abstraction More setup, more control Why RedwoodSDK only runs on Cloudflare What the database setup looks like Durable Objects explained – Middleware and request flow No built-in client-side router? Integrating routers with defineApp React Server Components and real-time updates What happened to RedwoodJS? Why do opinionated frameworks struggle to catch on? The problem with Lambdas Cloudflare’s JavaScript runtime compatibility Brought to you by The vision behind RedwoodSDK Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36512355

901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook 05/12/2025

901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook Scott and Wes break down the latest in JavaScript news, including new async patterns in Svelte, React Server Component tooling with Parcel, and Redwood’s push into Cloudflare with its new SDK. They also cover what’s new in Storybook 9 Beta, from visual testing to a sleeker, lighter build. Show Notes Welcome to Syntax! Brought to you by . ! . addTransitionType. Activity API. . Maintaining state in search queries. . . Svelte Boundary. . . . Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36506910

900: 13 New CSS Features You Can Start Using Today 05/07/2025

900: 13 New CSS Features You Can Start Using Today /episode/index/show/syntax/id/36411895

899: GSAP: Killer Web Animations With Cassie Evans 05/05/2025

899: GSAP: Killer Web Animations With Cassie Evans Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers. Show Notes Welcome to Syntax! What is ? . GSAP Rebranding. GSAP under the hood. The big ! GSAP . Brought to you by . Why is GSAP easier for animations? . Animating with SVGs. The love of SVG. GSAP is performant. Gotchas to watch out for. Does GSAP work with canvas? What GSAP projects are you most proud of? Does it play nice with web frameworks? . What are you excited about in CSS right now? . Will any of these make their way into GSAP? . Building animations with timelines. What are the best GSAP plugins? . . and philosophy. Scrubbing animations by frame. . Animating with JavaScript. JavaScript in unconventional applications. Is there anything missing in web tech? What about AI in GSAP? Sick Picks + Shameless Plugs. Sick Picks Cassie: . Shameless Plugs Cassie: . Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36372795

898: Every Developer Needs a 3D Printer 04/30/2025

898: Every Developer Needs a 3D Printer Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship. Show Notes Welcome to Syntax! Brought to you by Practical uses of 3D printing Creating tools for organization Improving and adapting everyday items The benefits of printing something vs buying it Choosing the right 3D printer Projects and ideas Filament types and their uses Finding affordable filament Where to find 3D models Creating your own 3D models Modifying existing 3D models Coding in 3D printing Sick Picks + Shameless Plugs Sick Picks Scott: Wes: Shameless Plugs Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36309220

897: Making Your App Feel Faster Than It Really Is 04/28/2025

897: Making Your App Feel Faster Than It Really Is Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance. Show Notes Welcome to Syntax! Brought to you by . Mousedown or pointerdown events. UI animations should be fast. Animations should not block interaction. Animations should be cancellable / reversible. Optimistic UI. Local Data. Delay loading indicators. Page loading indicators. Preload on hover. Calculate mouse trajectory. Full page spinner on every change. Pixelated spinners. Skeleton loaders. Photo frames. Search on input instead of search on click. Progress loaders than move in between steps. Community submissions. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36314820

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More 04/23/2025

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More /episode/index/show/syntax/id/36220125

895: React Server Components: Where are we at? 04/21/2025

895: React Server Components: Where are we at? Scott and Wes break down the current state of React Server Components — what they are, how they work, and why they’re so controversial. From framework support to bundling complexity, it’s everything you need to know about RSC in 2025. Show Notes Welcome to Syntax! Brought to you by . What exactly are React Server Components? Server components rendering. Server components are async. Server components can be suspended. Server components send RSC payloads to the browser. This feels like HTMX? Client components are still server rendered. Server Functions. useActionState. Frameworks and React Platforms. NextJS. Waku. React Router. . Vite. Tanstack. . Bun. DIY. Why so much hate? I want it my way. React Server Components lock-in. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36207625

894: Open Source Matters w/ Chad Whitacre 04/16/2025

894: Open Source Matters w/ Chad Whitacre Wes and Scott talk with Chad Whitacre, the newest member of the Syntax team, about all things open source—licenses, controversies, economics, and ethics. Chad breaks down what most people misunderstand, and how companies can support sustainable software development the right way. Show Notes Welcome to Syntax! Meet Chad Whitacre Chad’s retro headphones Chad’s role at Syntax What do people get wrong about open source? Why is open source so divisive? The evolution of open source and free software Single vendor vs. community open source How do people build businesses off of a GPL license? What’s the most pure version of open source? Fair source licensing explained Brought to you by Should you be concerned about dependencies in your app in relation to licensing? What’s the most interesting/unusual open source license? What is Open Source Pledge? Choosing the right open source license Wes’ most popular open source project Interesting open source projects Licensing for educational content The beauty of open source Scott’s various open source projects The importance of contributing to open source projects Sick Picks + Shameless Plugs Sick Picks Chad: Shameless Plugs Chad: Coming soon Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36155390

893: Everyone Is Talking About MCP 04/14/2025

893: Everyone Is Talking About MCP Scott and Wes break down the Model Context Protocol (MCP), a new open standard that gives AI agents secure, tool-like access to your dev environment. They cover how it works, why it’s a big deal for AI coding workflows, and real-world use cases like GitHub, Sentry, and YouTube. Show Notes Welcome to Syntax! The lore of ICP. . Brought to you by . What is ? The steps of AI coding. MCP hosts. MCP clients. MCP servers. Why you might want to do this. How this works in VS Code. Wes built an MCP server. . Playwright. Sentry’s implementation. . YouTube implementation. DaVinci Resolve implementation. . Postgres. Transport protocols. STDIO. SSE. Streaming. Writing you own MCP server. . . Data validation. Standard schema. . Other parts of MCP. MCP resources. . . Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36102070

892: The History of Syntax 04/09/2025

892: The History of Syntax Wes and Scott talk about the origins of Syntax, sharing how a friendly course name conflict led to a mastermind group, then a podcast, and eventually a full-blown media brand. They also reflect on key milestones, from early episodes and sponsorships to joining Sentry, expanding the team, and what’s next. Show Notes Welcome to Syntax! How Wes and Scott met How Syntax got its name Getting sponsors Hasty Treats and expanding the show Adding interviews to Syntax Syntax’s first live show Brought to you by Acquisition by Sentry Hiring a producer Transitioning to video and growing the team Launching the merch store The future of Syntax Sick Picks + Shameless Plugs Sick Picks Scott: Wes: Shameless Plugs Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/36019300

891: Light and Dark Mode 04/07/2025

891: Light and Dark Mode Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode! Show Notes Welcome to Syntax! Brought to you by . Light and dark mode, things to consider. Light and dark mode from scratch. . Calculations vs assigned color. color-mix and relative color. Foreground and background variables. –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%); –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%); Setting color scheme. light-dark function in CSS. Manually setting dark mode. The challenges with shared caching. Tailwind CSS implementation. . Shoehorning in dark mode. Other things to consider. Color contrast. . Logos. Icons and images. Accessibility. . Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35959400

890: Accepting Money on the Internet in 2025 04/02/2025

890: Accepting Money on the Internet in 2025 Wes and Scott talk about the ins and outs of accepting payments online—from choosing processors like Stripe and PayPal to handling fraud, taxes, custom checkouts, and more. Show Notes Welcome to Syntax! Payment processors Checkouts The checkout flow Methods of accepting money Brought to you by Merchant of Record Handling fraud, disputes, and refunds Sick Picks + Shameless Plugs Sick Picks Scott: Wes: Shameless Plugs Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35874820

889: Planning A Build 03/31/2025

889: Planning A Build Scott and Wes talk about the planning process for a major redesign of the Syntax.fm website. They share their thoughts on organizing tasks, choosing tech, handling styling, and the debates that come with deciding what to keep and what to change. Show Notes Welcome to Syntax! Brought to you by . Why we need version 3.0 of . , . Project planning and organization. The codebase. The CSS changes. . Tooling. Development process. Mobile and responsiveness. Saving VS Code extension into the repo. Using a dev container. AI agent rules. Code styles. Canadian podcast. Content storage. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35853695

888: You Need a Monorepo × Client Only React × TanStack + More 03/26/2025

888: You Need a Monorepo × Client Only React × TanStack + More /episode/index/show/syntax/id/35858750

887: Vibe Coding Is a Problem 03/24/2025

887: Vibe Coding Is a Problem Is Vibe Coding the future of software development or just a fun way to experiment? Scott and Wes talk about coding with AI, the risks of ignoring the details, and the cool (and sometimes cursed) projects they’ve Vibe Coded. Show Notes Welcome to Syntax! “Personal Software”. What exactly is Vibe Coding. The challenges of coding with AI. . Brought to you by . Vibe coding quality concerns. Vibe Coding as a learning tool. Things we’ve Vibe Coded. . . . . Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35744560

886: AWS and IAC for Dummies with SST 03/19/2025

886: AWS and IAC for Dummies with SST Wes and Scott talk about Infrastructure as Code and how SST makes deploying to AWS easier than ever. They dive into SST’s features, developer experience, and how it simplifies managing services like databases, email, and more. Plus, insights on Cloudflare integration, auto-scaling, and real-world use cases. Show Notes Welcome to Syntax! Brought to you by Intro to SST config Overview of Scott’s SST config file Exploring SST’s endless capabilities The SST developer experience SST console and GUI overview Resource management and pricing Secrets management Tunneling and security Simplifying DNS Sick Picks + Shameless Plugs Sick Picks Scott: Wes: Shameless Plugs Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35749725

885: CSS Fonts Fallbacks, Variable and Trimming 03/17/2025

885: CSS Fonts Fallbacks, Variable and Trimming Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type. Show Notes Welcome to Syntax! Brought to you by . . @font-face. . Avoiding layout shift. . Variable fonts. . . . . Variable font sizing. . text-box-trim & text-box-edge. . Browser support. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35653395

884: Typescript Just Got 10x Faster 03/11/2025

884: Typescript Just Got 10x Faster Wes and Scott talk with Anders Hejlsberg and Daniel Rosenwasser about TypeScript’s leap to native code. They discuss the challenges, trade-offs, and the decision to port TypeScript to Go, unlocking faster compilation, better concurrency, and new possibilities for AI-assisted development. Show Notes Welcome to Syntax! TypeScript compiler goes native Challenges in rebuilding TypeScript How long has this been in development? What does porting TypeScript to native entail? Why choose Go? The porting process Brought to you by Type checking and parallel compilation Fixing TypeScript’s performance bottlenecks Large TypeScript codebases What’s the timeline for the new compiler? Optimization and AI New features? Sick Picks + Shameless Plugs Sick Picks Daniel: Anders: Shameless Plugs Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35610765

883: Web Vitals Explained 03/10/2025

883: Web Vitals Explained What are Web Vitals, and why should you care? Scott and Wes break down metrics like LCP, FCP, CLS, and INP, explaining what they measure, how they impact your site’s performance, and how to track them yourself. Show Notes Welcome to Syntax! What each web vital means. . LCP - Largest Contentful Paint. FCP - First Contentful Paint. CLS - Cumulative Layout Shift. INP - Interaction to Next Paint. Measuring the impact. TTFB - Time to First Byte How to track this on your own. Checking the performance of . Brought to you by . . Checking the performance of Wes’ site. Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35438050

882: Aaron Francis is putting PHP in Your JS Files 03/05/2025

882: Aaron Francis is putting PHP in Your JS Files Wes and Scott talk with Aaron Francis about Fusion for Laravel, a new way to seamlessly integrate PHP into JavaScript. They discuss how Fusion expands on Inertia, its potential for React support, and how it simplifies full-stack development. Show Notes Welcome to Syntax! Aaron’s background in PHP What is Fusion for Laravel? How Fusion works The benefits of Laravel Invalidation and caching Brought to you by Optimistic UI React integration? Fusion’s original name (and the naming process) Laravel’s approach to frontend frameworks Databases and scaling Postgres extensibility and hosting options The vision for Fusion Sick Picks + Shameless Plugs Sick Picks Aaron: Shameless Plugs Aaron: Hit us up on Socials! Syntax: Wes: Scott: Randy: /episode/index/show/syntax/id/35484420

Syntax - Tasty Web Development Treats

TOPICS