Hasty Treat - Vite + Parcel 2

23 Huhti 202553min

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

21 Huhti 202530min

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

16 Huhti 20251h 1min

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

14 Huhti 202533min

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

9 Huhti 202555min

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

7 Huhti 202527min

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 00:00 Welcome to Syntax! 02:34 Payment processors Stripe PayPal Square Authorize.net 09:29 Checkouts 18:22 The checkout flow 23:10 Methods of accepting money 25:30 Brought to you by Sentry.io 28:34 Merchant of Record Lemon Squeezy Gumroad Paddle Beacons 32:51 Handling fraud, disputes, and refunds 41:25 Sick Picks + Shameless Plugs Sick Picks Scott: Parcel Wes: Parcels App 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

2 Huhti 202546min

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 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 02:48 Why we need version 3.0 of Syntax.fm. Level Up Tutorials, Travis Neilson. 04:41 Project planning and organization. 05:53 The codebase. 09:50 The CSS changes. Episode 770: Design Systems With Brad Frost. 12:27 Tooling. 15:54 Development process. 16:38 Mobile and responsiveness. 18:37 Saving VS Code extension into the repo. 19:56 Using a dev container. 20:53 AI agent rules. 21:35 Code styles. 23:42 Canadian podcast. 24:33 Content storage. 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

31 Maalis 202529min