Episodes
-
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
00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io
02:37 CSS If statements in action
CSS if() functions & reading-flow (in Chrome 137)
CodePen - If with style without attr
09:08 Advanced examples and the attribute function
CodePen - CSS If() Themes
13:43 Mixing If statements with media queries
CodePen - CSS If() Mixed Logic
16:54 Can’t this be done with classes?
18:16 The future of CSS: declarative APIs
CSS Battle LIVE! in Denver | Switch Edition
21:10 Is CSS now a programming language?
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
We 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
00:00 Welcome to Syntax!
01:19 Error terminology.
01:42 Thrown and catching.
03:01 What’s in an error.
04:09 Name and message.
04:42 Stack.
07:12 Node system errors.
07:34 Messages: strings, objects, or custom errors.
08:19 Throwing errors.
12:01 Promise errors.
12:10 Try catch block, .catch().
14:13 Using awaited-to.
15:10 Finally.
16:29 promise.try()
17:14 Re-throwing errors.
Error Cause
18:12 Client-side errors.
18:15 Catching at different levels.
18:51 Displaying errors.
21:59 Transforming server errors into client errors.
24:12 Error boundaries.
25:26 Server errors.
26:10 JSON API.
27:41 HTTP response codes.
30:09 Logging and solving errors.
31:16 Proudly supported by Sentry.io.
Logging within Sentry
36:16 TypeScript and errors.
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
Missing episodes?
-
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 00:00 Welcome to Syntax!
01:40 What is Storybook?
03:48 How Storybook makes component design easier
04:41 Vite integration and compatibility with other tools Vite
webpack
RSpack
06:50 Storybook’s significantly smaller bundle size e18e
polka
13:31 Upgrading to Storybook 9
17:34 Testing components with Storybook Vitest
19:51 How do you write a component “story”?
24:29 Brought to you by Sentry.io
24:54 How visual testing works
28:38 How Storybook makes money
29:33 Best practices for component design
32:24 Mocking and testing strategies
34:49 Accessibility testing
40:51 Add-ons and future features
44:43 Storybook’s documentation
46:33 Sick Picks + Shameless plugs
Sick Picks Jeppe: JBL Boombox 3 Wi-Fi
Shameless Plugs Jeppe: chromatic
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
01:03 Barcelona Conference.
04:09 Brought to you by Sentry.io.
04:33 Existing stack, goodbye to Gatsby.
06:11 New stack, the goals for moving.
06:56 So what is the new stack? 08:32 Challenges with NextJS.
08:58 Problems with plugins.
09:30 Problems with dynamic imports.
10:21 Problems with Cloudflare deployment.
12:37 Landing on Waku.
13:59 Hot Tips functionality updates.
16:30 Blog Posts + JavaScript Notes.
17:09 Moving from Gatsby.
19:03 Page speeds. 19:29 Removing nav resizing process.
21:03 Writing custom MDX plugins.
23:28 Hosting. 24:08 Why is the build so fast?
28:01 Pricing.
32:25 Caching.
34:49 Migration errors.
36:37 CSS.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:55 Dan’s background and career
03:10 Is it common for tech investors to come from a tech background?
04:40 How can developers raise money?
08:35 What investors look for
12:39 How much funding is enough?
15:41 Are founders working with multiple investors?
18:26 What can you use the money for?
22:49 How much influence do investors have in the business?
29:56 Brought to you by Sentry.io
29:56 How involved are VCs in the business?
34:22 How do you know a startup is in trouble—and what can you do about it?
38:56 How much of the company do investors own?
40:43 What’s the endgame for investors?
44:02 How do acqui-hires work?
46:29 Is the AI space a real opportunity or just hype?
53:22 Sick Picks + Shameless Plugs
Sick Picks Dan: Dandelion Chocolate
Jules Pizza
Shameless Plugs Dan: Linear
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Syntax Meetup!
00:26 Welcome to Syntax
01:21 The deal with Nuxt. CJ’s Nuxt Course.
02:51 Why do you like Vue?
04:52 Brought to you by Sentry.io.
05:17 Routing with Nuxt. h3 - The Web Framework for Modern JavaScript Era.
Nuxt Guides.
06:12 Built on Nitro.
06:49 The Nuxt Ecosystem.
07:52 API Route Support.
08:15 Nuxt Directory Structure.
09:09 Does Nuxt do too much for you?
11:15 Data fetching in a Nuxt app.
13:25 RPC, Form Actions, Server Actions?
15:00 Nuxt Server Folder Hastle.
15:57 useFetch Hook. CJ’s Nuxt Crash Course.
17:29 Core Modules and Community Modules? Nuxt Modules.
shadcn-nuxt.
@nuxt/ui.
DaisyUI.
Pinia.
21:17 Nuxt Hosting. Deploy.
hub.nuxt.
23:59 Anything you don’t like?
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax! Devs Night Out
02:35 OpenAI acquires Windsurf for $3B Windsurf
Ep 870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding
05:20 What is the future of UI now that AI is such a heavy hitter?
08:45 Handling spam submissions on websites Cloudflare Turnstile
14:18 Duplicating HTML for desktop and mobile websites?
17:03 Is it okay to use a JSON file for simple website data?
19:04 How to handle anonymous and duplicate users Better-Auth
21:55 Working with TypeScript Object.keys() and “any” vs “@ts-ignore”
25:51 Brought to you by Sentry.io
26:38 What is the difference between React and Svelte?
30:24 How should you name your readme file?
31:55 How do you find time to refactor code?
35:20 Best practices for testing responsiveness Polypane
39:19 Avoiding layout shift with progressive enhancement
46:56 Sick Picks + Shameless Plugs
Sick Picks CJ: Portable Chainsaw
Wes: White Lotus
Shameless Plugs CJ: Nuxt
Wes: Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzle, Tailwind, DaisyUI, MapLibre
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
01:00 The inception of VS Code.
02:49 VS Code adoption.
04:31 Brought to you by Sentry.io.
04:55 Syntax Denver Meetup!
05:19 The big announcement.
06:25 The current state of Copilot and VS Code.
08:31 The challenges with LLMs running outside of the codebase.
09:31 How to make a business case for AI.
10:47 The maturing of the AI landscape.
13:01 The limitations of extensions.
14:06 Open source vs closed source.
14:49 Copilot’s context is public.
19:23 Is context language-specific?
21:23 How does this affect paid Copilot features?
23:27 Secrets of Copilot’s server-side.
28:36 What will be open and what will not?
29:03 Is Copilot’s UI influenced by VS Code forks?
31:31 Maintaining VS Code identity in forks.
33:07 What does open-sourcing GitHub Copilot mean for Cursor and Windsurf?
38:42 Were you surprised to see VS Code forks?
40:03 Are other extensions able to tap into the AI offerings?
43:20 There’s work to be done.
44:13 The timeline.
45:39 Simulation Tests (S Tests).
48:07 How to test LLMs.
49:10 The future of software development with AI.
52:47 What’s your favorite model?
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:52 What is RedwoodSDK?
04:49 Choosing openness over abstraction
08:46 More setup, more control
12:20 Why RedwoodSDK only runs on Cloudflare
14:25 What the database setup looks like
16:15 Durable Objects explained – Ep 879: Fullstack Cloudflare
18:14 Middleware and request flow
23:14 No built-in client-side router?
24:07 Integrating routers with defineApp
26:04 React Server Components and real-time updates
29:53 What happened to RedwoodJS?
31:14 Why do opinionated frameworks struggle to catch on?
34:35 The problem with Lambdas
36:16 Cloudflare’s JavaScript runtime compatibility
40:04 Brought to you by Sentry.io
41:44 The vision behind RedwoodSDK
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
02:50 Brought to you by Sentry.io.
03:37 Syntax Meetup!
04:09 React View Transitions.
08:58 addTransitionType.
11:18 Activity API. Offscreen Renamed to Activity.
14:22 Maintaining state in search queries.
16:29 Asynchronous Svelte. Playground.
19:04 Svelte Boundary.
25:13 Parcel RSC.
27:15 Redwood SDK.
30:55 Storybook 9 Beta.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:59 What is GSAP? Cassie Codes.
01:53 GSAP Rebranding.
04:44 GSAP under the hood.
05:29 The big announcement!
07:19 GSAP Showcase.
11:01 Brought to you by Sentry.io.
11:26 Why is GSAP easier for animations? GSAP Docs.
12:38 Animating with SVGs.
13:33 The love of SVG.
14:55 GSAP is performant.
16:06 Gotchas to watch out for.
18:12 Does GSAP work with canvas?
19:02 What GSAP projects are you most proud of?
20:30 Does it play nice with web frameworks? GSAP with React.
22:32 What are you excited about in CSS right now? Scroll Timeline.
24:27 Will any of these make their way into GSAP?
26:31 Timelines.
29:24 Building animations with timelines.
34:55 What are the best GSAP plugins? Split Text
spanran-wrap.
Physics 2D Plugin.
38:44 GSAP docs and philosophy.
39:50 Scrubbing animations by frame.
41:09 GSAP Video Exporter.
41:45 Animating with JavaScript.
45:19 JavaScript in unconventional applications.
47:56 Is there anything missing in web tech?
50:53 What about AI in GSAP?
52:40 Sick Picks + Shameless Plugs.
Sick Picks Cassie: Eyesy Video Synthesis.
Shameless Plugs Cassie: Smashing Conf.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
03:34 Brought to you by Sentry.io
05:03 Practical uses of 3D printing
07:34 Creating tools for organization Gridfinity
10:33 Improving and adapting everyday items Underware
14:34 The benefits of printing something vs buying it
15:32 Choosing the right 3D printer Bamboo Lab
Elegoo
Prusa
Flashorge
25:26 Projects and ideas Multiboard
31:33 Filament types and their uses
40:05 Finding affordable filament Deal Forager
46:07 Where to find 3D models Maker World
yeggi
Printables
Thangs
Thingverse
48:08 Creating your own 3D models Fusion
Shapr3D
Onshape
53:00 Modifying existing 3D models
54:30 Coding in 3D printing Bento
shards
ManifoldCAD
Hunyuan3D-2mv-Turbo
Mecagent
01:01:25 Sick Picks + Shameless Plugs
Sick Picks Scott: Alaska Bear Organic Silk Sleep Mask
Wes: BLV - AMS Riser
Shameless Plugs Syntax YouTube Channel
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
01:12 Brought to you by Sentry.io.
02:34 Mousedown or pointerdown events.
06:00 UI animations should be fast.
08:00 Animations should not block interaction.
08:20 Animations should be cancellable / reversible.
10:50 Optimistic UI.
12:37 Local Data.
13:36 Delay loading indicators.
14:40 Page loading indicators.
15:47 Preload on hover.
17:13 Calculate mouse trajectory.
18:51 Full page spinner on every change.
20:04 Pixelated spinners.
20:23 Skeleton loaders.
23:43 Photo frames.
25:52 Search on input instead of search on click.
26:46 Progress loaders than move in between steps.
27:31 Community submissions.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
01:01 Brought to you by Sentry.io.
01:55 What exactly are React Server Components? 02:18 Server components rendering.
03:17 Server components are async.
03:45 Server components can be suspended.
05:05 Server components send RSC payloads to the browser. 06:08 This feels like HTMX?
06:54 Client components are still server rendered.
07:58 Server Functions.
08:52 useActionState.
09:12 Frameworks and React Platforms. 09:16 NextJS.
09:42 Waku. 12:26 candycode.com
Daishi Kato
14:23 React Router. Michael Jackson Tweet.
19:29 Vite. vite-plugin-react-server
20:54 Tanstack. Syntax Ep 833.
22:39 Bun.
23:01 DIY.
23:39 Why so much hate?
25:28 I want it my way.
27:46 React Server Components lock-in.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:39 Meet Chad Whitacre
03:39 Chad’s retro headphones Retrospekt
05:00 Chad’s role at Syntax https://syntax.fm/oss
Open Path
09:41 What do people get wrong about open source?
11:11 Why is open source so divisive?
13:01 The evolution of open source and free software
17:55 Single vendor vs. community open source
20:22 How do people build businesses off of a GPL license?
24:40 What’s the most pure version of open source?
26:55 Fair source licensing explained
30:30 Brought to you by Sentry.io
33:09 Should you be concerned about dependencies in your app in relation to licensing? Fair Source
35:16 What’s the most interesting/unusual open source license? Beerware License
40:00 What is Open Source Pledge? Open Source Pledge
45:41 Choosing the right open source license
48:31 Wes’ most popular open source project wait
49:39 Interesting open source projects Mercedes-Benz embraces Open Source
Porsche Open Source Platform
51:33 Licensing for educational content
53:46 The beauty of open source Plausible
56:12 Scott’s various open source projects
56:44 The importance of contributing to open source projects
59:16 Sick Picks + Shameless Plugs
Sick Picks Chad: Save The Cat!
Shameless Plugs Chad: Coming soon
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:49 The lore of ICP. Wes MCP Shirt.
03:09 Brought to you by Sentry.io.
03:33 What is MCP?
05:06 The steps of AI coding. 07:11 MCP hosts.
07:28 MCP clients.
07:35 MCP servers.
08:24 Why you might want to do this. 10:39 How this works in VS Code.
14:10 Wes built an MCP server. SVGL.
14:57 Playwright.
17:24 Sentry’s implementation. Building Sentry’s MCP with David Cramer.
18:54 YouTube implementation.
21:19 DaVinci Resolve implementation. Smithery.
23:02 Postgres.
24:40 Transport protocols.
24:49 STDIO.
25:19 SSE.
25:32 Streaming.
26:24 Writing you own MCP server.
26:28 FastMCP.
27:00 Cloudflare.
28:01 Data validation.
28:47 Standard schema. Episode 873.
29:27 Other parts of MCP. 29:35 MCP resources.
30:37 MCP prompts.
30:48 MCP roots.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
00:51 How Wes and Scott met Scott Tolinski & The Origins of LevelUpTuts
LevelUpTutorials
WesBos.com
09:31 How Syntax got its name Episode 001: React Tools
15:30 Getting sponsors Delicious Brains
FreshBooks
18:53 Hasty Treats and expanding the show
22:36 Adding interviews to Syntax SVGs with Sara Soueidan
23:38 Syntax’s first live show Live at JAMstack_conf
27:58 Brought to you by Sentry.io
28:34 Acquisition by Sentry 600th Episode! Major Announcement and Swag Giveaway!
33:56 Hiring a producer Randy Rektor
36:39 Transitioning to video and growing the team Rating and ROASTING Coding Desk Setups
CJ Reynolds
Kaitlin Bloom
41:47 Launching the merch store Sentry.shop
46:01 The future of Syntax
47:23 Sick Picks + Shameless Plugs
Sick Picks Scott: Crucial X10 Pro 4TB Portable SSD
Wes: MONVICT Cordless Glue Gun
Shameless Plugs Syntax YouTube Channel
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads -
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 00:00 Welcome to Syntax!
01:05 Brought to you by Sentry.io.
02:06 Light and dark mode, things to consider.
02:31 Light and dark mode from scratch. drop-in.css.
04:41 Calculations vs assigned color.
05:32 color-mix and relative color.
08:15 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%);
09:13 Setting color scheme.
12:38 light-dark function in CSS.
15:48 Manually setting dark mode. 18:43 The challenges with shared caching.
19:33 Tailwind CSS implementation. Tailwind dark-mode.
19:52 Shoehorning in dark mode.
22:25 Other things to consider. 22:28 Color contrast. Lea Verou contrast-color.
24:39 Logos.
25:22 Icons and images.
26:20 Accessibility. Polypane.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads - Show more
