Syntax - Tasty Web Development Treats
Alle afleveringen
1.049 afleveringen, van nieuw naar oud
-
899: GSAP: Killer Web Animations With Cassie Evans
5 mei 2025 · 57 min
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. Lees meer01: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 Textspanran-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 -
898: Every Developer Needs a 3D Printer
30 april 2025 · 1 uur 5 min
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 Lees meer05:03 Practical uses of 3D printing
07:34 Creating tools for organization Gridfinity10: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 LabElegoo
Prusa
Flashorge
25:26 Projects and ideas Multiboard
31:33 Filament types and their uses
40:05 Finding affordable filament Deal Forager46: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 Bentoshards
ManifoldCAD
Hunyuan3D-2mv-Turbo
Mecagent
01:01:25 Sick Picks + Shameless Plugs
Sick Picks Scott: Alaska Bear Organic Silk Sleep MaskWes: 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 -
897: Making Your App Feel Faster Than It Really Is
28 april 2025 · 35 min
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 Lees meer -
896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More
23 april 2025 · 54 min
-
895: React Server Components: Where are we at?
21 april 2025 · 31 min
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? Lees meer06: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.comDaishi 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 -
894: Open Source Matters w/ Chad Whitacre
16 april 2025 · 1 uur 1 min
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 Lees meer05: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.io33: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 wait49: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 Plausible56: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 -
893: Everyone Is Talking About MCP
14 april 2025 · 34 min
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. Lees meer03: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 -
892: The History of Syntax
9 april 2025 · 55 min
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 Lees meerLevelUpTutorials
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 Soueidan23: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 SSDWes: 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 -
891: Light and Dark Mode
7 april 2025 · 27 min
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%); Lees meer09: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 -
890: Accepting Money on the Internet in 2025
2 april 2025 · 46 min
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! Lees meer02:34 Payment processors Stripe
PayPal
Square
Authorize.net09: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
Beacons32:51 Handling fraud, disputes, and refunds
41:25 Sick Picks + Shameless Plugs
Sick Picks Scott: ParcelWes: 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 -
889: Planning A Build
31 maart 2025 · 30 min
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. Lees meer04: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 -
888: You Need a Monorepo × Client Only React × TanStack + More
26 maart 2025 · 53 min
-
887: Vibe Coding Is a Problem
24 maart 2025 · 17 min
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 00:00 Welcome to Syntax!
00:31 “Personal Software”.
01:30 What exactly is Vibe Coding.
02:46 The challenges of coding with AI. Levelsio Airplane Game. Lees meer04:49 Brought to you by Sentry.io.
05:39 Vibe coding quality concerns.
07:25 Vibe Coding as a learning tool.
10:11 Things we’ve Vibe Coded. Scott’s Piano UI on X.
Episode 876: MIDI & Music In the Browser.
Wes’ Roomba on X.
Wes’ Roomba on YouTube.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 -
886: AWS and IAC for Dummies with SST
19 maart 2025 · 40 min
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 00:00 Welcome to Syntax! Supper Club × Next.js on AWS + Serverless with Dax Raad Lees meer02:37 Brought to you by Sentry.io
04:52 Intro to SST config SST
AWS
05:40 Overview of Scott’s SST config file
12:33 Exploring SST’s endless capabilities SST’s docsCloudflare
15:42 The SST developer experience Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan
Supper Club × Flightcontrol with Brandon Bayer
19:05 SST console and GUI overview
22:13 Resource management and pricing
24:52 Secrets management
27:38 Tunneling and security https://sst.dev/docs/live30:52 Simplifying DNS
35:18 Sick Picks + Shameless Plugs
Sick Picks Scott: Aquaphor Healing OintmentWes: Magnetic Picture Hanger Frame
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 -
885: CSS Fonts Fallbacks, Variable and Trimming
17 maart 2025 · 23 min
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 00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io. Damnit Sans. Lees meer02:53 @font-face.
03:27 Font Display.
07:40 Avoiding layout shift. Fallbacks.10:45 Variable fonts. Fontaine.
font-kitWakamai Fondue.
Syntax Ep. 782.
Font Variation Settings.16:23 Variable font sizing.
17:46 v-fonts.
19:10 text-box-trim & text-box-edge. text-box-trim examples.21:28 Browser support.
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 -
884: Typescript Just Got 10x Faster
11 maart 2025 · 1 uur 9 min
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 00:00 Welcome to Syntax!
00:38 TypeScript compiler goes native
05:24 Challenges in rebuilding TypeScript
08:49 How long has this been in development?
10:32 What does porting TypeScript to native entail?
16:36 Why choose Go?
26:48 The porting process
35:02 Brought to you by Sentry.io Lees meer35:27 Type checking and parallel compilation
42:36 Fixing TypeScript’s performance bottlenecks
49:09 Large TypeScript codebases
54:11 What’s the timeline for the new compiler?
58:39 Optimization and AI
01:00:32 New features?
01:04:15 Sick Picks + Shameless Plugs
Sick Picks Daniel: pprof-itAnders: USB Hand Warmers
Shameless Plugs TypeScript
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 -
883: Web Vitals Explained
10 maart 2025 · 23 min
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 00:00 Welcome to Syntax!
03:26 What each web vital means. Web Vitals Playground.
03:38 LCP - Largest Contentful Paint.
05:04 FCP - First Contentful Paint.
06:07 CLS - Cumulative Layout Shift.
10:58 INP - Interaction to Next Paint. 13:43 Measuring the impact. Lees meer14:22 TTFB - Time to First Byte
15:27 How to track this on your own.
17:42 Checking the performance of Syntax.fm.
21:07 Brought to you by Sentry.io. Sentry Web Vitals.21:49 Checking the performance of Wes’ site.
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 -
882: Aaron Francis is putting PHP in Your JS Files
5 maart 2025 · 54 min
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 00:00 Welcome to Syntax!
01:22 Aaron’s background in PHP Yii Lees meerLaravel
02:27 What is Fusion for Laravel? Fusion for Laravel
09:14 How Fusion works
13:57 The benefits of Laravel
19:18 Invalidation and caching
25:20 Brought to you by Sentry.io25:32 Optimistic UI
28:28 React integration?
31:44 Fusion’s original name (and the naming process)
33:30 Laravel’s approach to frontend frameworks Livewire37:32 Databases and scaling
41:27 Postgres extensibility and hosting options Crunchy DataXata
47:44 The vision for Fusion
48:31 Sick Picks + Shameless Plugs
Sick Picks Aaron: Better Display CLIShameless Plugs Aaron: High Performance SQLite
Mastering Postgres
Screencasting.com
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 -
881: What Happened to Remix. Worth Using Axios? Client Only Next.js?
3 maart 2025 · 1 uur 8 min
Scott and Wes answer your listener questions! They debate Axios vs. Fetch, discuss whether Next.js is overkill without a backend, talk htmx and Alpine, dive into tech career transitions, and tackle everything from podcast ads to password hashing myths.
Show Notes 00:00 Welcome to Syntax!
00:55 Scott’s health update.
04:11 Submit your questions.
04:26 Is Axios still worth using over Fetch? shiki.
xior.
ky. Lees meer10:17 Does Alpine.js solve HTMX’s client-side limitations? Syntax Ep. 868: The State of JavaScript.
Server Driven Web Apps With HTMX.
Syntax Ep. 568: Supper Club × Caleb Porzio.
Alpine.js.
Inertia.js.16:47 How should I host my database for a local-first app? Neon Tech
22:50 Brought to you by Sentry.io.
24:14 Should I use Next.js if I want a separate backend? Create Vite Extra.32:08 Are ad networks like BuySellAds worth it for podcasts?
36:36 Can I transition from airline pilot to senior software developer?
41:23 Is Base64 encoding a valid alternative to password hashing?
45:43 How do I use unexported functions from a third-party package?
48:09 How do you stay on top of package and browser updates? Syntax Ep. 425: Updating Project Dependencies.
npm-check-update.52:38 Why are Chrome and Firefox’s mobile presets outdated?
57:20 Should I give feedback on bad UX/UI designs from agencies?
01:01:53 Sick Picks + Shameless Plugs.
Sick Picks Scott: Nothing Ear (a).
Wes: SmallRig Phone Cage.
Shameless Plugs Wes: Syntax on YouTube.
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 -
880: Creator of Home Assistant: Web Components, Self Hosting and Home Hacking
26 februari 2025 · 59 min
Wes and CJ talk with Paulus Schoutsen, creator of Home Assistant, about the future of smart homes, AI-powered automation, and open-source innovation.
Show Notes 00:00 Welcome to Syntax!
00:29 What is Home Assistant?
03:32 Web Components in Home Assistant Home Assistant Frontend Lees meer10:41 Home Assistant’s stability and longevity
17:05 Is Home Assistant the biggest open-source project using web components?
20:03 How does the native app work?
23:34 Code sharing between Android and iOS
24:17 Self-hosting Home Assistant
28:13 Brought to you by Sentry.io30:47 Bundle size and memory usage
32:29 How AI and voice assistants are shaping the future of Home Assistant Talking with Home Assistant37:16 How Paulus made it possible to flash microcontrollers directly from the browser Open Home Foundation
43:48 Web Serial and Web Bluetooth APIs
47:03 Matter, Zigbee, and Z-Wave – where smart home standards are headed MatterZigbee
Z-Wave
51:17 Paulus’ smart home setup Reolink
Yale
53:16 Sick Picks + Shameless Plugs Andrew Schmelyun
Sick Picks Paulus: Bambu 3d Printer
Shameless Plugs Paulus: Nabu Casa
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 -
879: Fullstack Cloudflare
24 februari 2025 · 58 min
Wes and CJ break down everything Cloudflare—from Workers and R2 Storage to Hyperdrive and AI Gateway. Get the scoop on what makes Cloudflare tick, the quirks of their ecosystem, and whether vendor lock-in is a real concern.
Show Notes 00:00 Welcome to Syntax!
01:40 Brought to you by Sentry.io.
01:58 What we’re talking about today.
02:48 Cloudflare Workers. 03:06 How Cloudflare Workers… work.
04:39 How Cloudflare Workers run.
06:05 Workers size limitations in JavaScript.
07:37 Cloudflare has their own way.
08:13 Potential vendor lock-in.
08:51 You pay based on CPU time, not wall time. Lees meer10:26 Cloudflare Pages. Compatibility Matrix
12:07 Durable Objects. Zeb X Post.
PartyKit.io, tldraw.16:41 Cloudflare Workflows.
19:52 How we do something similar on Syntax.fm.
20:52 Cloudflare Queues.
25:26 Files.
26:15 R2 Storage. Ep 780: Cloud Storage: Bandwidth, Storage and BIG ZIPS.28:00 The Open Bandwidth Alliance.
28:39 Image Pipelines.
33:24 Cloudflare Stream. Streaming Video in 2025.34:24 Data.
36:37 Key Value.
40:16 Time To Live.
41:13 Hyperdrive. How It Works.
Query caching.44:01 Vectorize Data.
45:41 AI Gateway.
47:49 Automated Rate-Limiting.
48:50 Frameworks. Orange.js.52:13 Analytics Engine. Counterscale.
Ep 761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar.52:52 WebRTC Engine.
53:01 Puppeteer API.
54:09 Sick Picks + Shameless Plugs.
Sick Picks CJ: Flush MicroSD Adapter for MacbookWes: Synology.
Shameless Plugs Wes: Syntax on YouTube.
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 -
878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe
19 februari 2025 · 58 min
Wes and Scott talk with Daniel Roe about Nuxt and Nitro, demystifying the UnJS ecosystem, serverless deployments, open-source sustainability, and the future of full-stack web development.
Show Notes 00:00 Welcome to Syntax!
02:52 Daniel’s work with Nitro Nitro Lees meer06:01 What’s the connection between Nitro and Nuxt? Nuxt
09:23 What makes something an UnJS package? UnJS
12:55 Nitro’s built-in features
18:21 What would Daniel use to build an app today? CloudflareVercel
Netlify
28:01 Brought to you by Sentry.io
28:36 Nuxt and SST SST
32:25 Nuxt vs. Next.js in 2025 Next.js
40:06 Keeping docs up to date
44:46 Who is behind the fantastic design of the Nuxt website? Anthony FuRmoon
Vite
47:27 Why is Vue awesome? Vue
alien-signals
52:47 How do you make money in full-time open source?
55:32 Sick Picks + Shameless Plugs
Sick Picks Daniel: DeskPadShameless Plugs Daniel: React to Nuxt
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 -
877: Tailwind 4
17 februari 2025 · 25 min
Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?”
Show Notes 00:00 Welcome to Syntax!
00:16 Brought to you by Sentry.io.
01:03 Tailwind 4. Tailwind CSS V4.0 Blog. Lees meer02:53 Wes’ favorite new feature.
05:45 @property. CSS Houdini API.07:28 The config is now a CSS file.
08:25 Tailwind Oxide.
10:48 P3 color space.
12:36 Dynamic Utilities + Variants.
13:36 Data attributes.
15:32 First class container query support.
17:03 Starting Style.
19:22 When to use inline styles.
20:13 Descendant selector. Styling Descendants.20:48 Why not just use “normal” CSS?
22:03 No text shadow support. Scott has to use Tailwind.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 -
876: MIDI & Music in the Browser
12 februari 2025 · 49 min
Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.
Show Notes 00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io Lees meer02:04 Fun audio experiments Bebot
05:32 What is MIDI? Web MIDI API
14:18 Advanced examples with WEBMIDI.js WEBMIDI.js
17:02 Outputting MIDI messages
24:40 Exploring the Web Audio API webmidirtc31:20 Audio sampling in the browser
37:35 Media Recorder
39:21 Fun projects MIDI chord machine42:08 Sick Picks + Shameless Plugs
Sick Picks Scott: MX Master 3SWes: Microcontoller
Shameless Plugs The MOST Starred JS Projects
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 -
875: JavaScript Signals Explained
10 februari 2025 · 16 min
JavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them.
Show Notes 00:00 Welcome to Syntax!
01:49 Brought to you by Sentry.io.
02:28 Why JavaScript needs reactive variables.
03:16 What exactly are signals? Signals Proposal. Lees meer04:02 Understanding computed state.
04:59 How signals differ from React state.
06:12 How different frameworks handle reactivity.
07:09 DOM Parts. Pull Request.07:26 HTML Template Instantiation. Template Instantiation.
09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more. PreactJS Signals.
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 -
874: Fast Apps - Easy Perf Wins
5 februari 2025 · 55 min
Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time!
Show Notes 00:00 Welcome to Syntax!
00:58 Brought to you by Sentry.io.
02:01 What makes apps slow?
02:10 Loading too much.
03:26 Slow database work.
04:04 Slow server.
04:54 Waterfall requests.
06:34 How do I know what is slow?
06:45 Web vitals.
12:50 Streaming.
14:05 Network tab.
18:18 Performance tab.
22:53 Caching.
22:59 Client-side caching.
23:38 Server-side caching. Valkey.io.
Redis.io. Lees meer25:40 Local data.
26:11 Gzip.
29:23 CDN.
30:57 Images. Cloudinary.
Cloudflare Images.
Imgix.
Vercel Images.31:08 Serving.
34:16 Compressing.
35:06 Ship fewer images.
35:50 Loading JS. Async vs Defer Attributes.37:00 CSS.
38:28 Preloading & Prefetch.
39:40 Preloading on hover.
41:44 Ship less code.
43:49 Icons Nucleo App.47:01 Fonts Tolin.ski.
51:13 Sick Picks + Shameless Plugs.
Sick Picks Scott: Skywalkers on Netflix.
Wes: Oxo Swivel Peeler.
Shameless Plugs Scott: Syntax on YouTube.
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 -
873: Standard Schema: The Universal JavaScript Data Interface
3 februari 2025 · 14 min
Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries.
Show Notes 00:00 Welcome to Syntax!
01:24 Brought to you by Sentry.io Lees meer02:44 What is Standard Schema and how does it work? Standard Schema Spec
Fabian Hiller
Valibot
David Blass
ArkType
Colin McDonnell
Zod
06:00 Benefits of Standard Schema
08:54 Implementation and usage
11:25 Is this primarily for end users or library authors?
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 -
872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths
29 januari 2025 · 58 min
Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech.
Show Notes 00:00 Welcome to Syntax!
01:04 Best container element for a grid of products?
04:50 TypeScript null checks
09:44 Adapt to AI or get left behind Syntax Episode 870 Lees meer13:13 Why did 3D never take off? three.js
React Three Fiber
Rep Fitness Rack Builder
Maxime Heckel
GitHub Universe
The element
18:53 Podcast audio and video in one feed? Who Smarted?
21:06 Brought to you buy Sentry.io
22:30 Best and worst browsers for web dev? Firefox
Edge
Chrome
Arc
Safari
27:39 Why use a lock file for managing dependency versions Don’t gitignore your lock files!
30:34 Should you build your own sync engine? Scott’s Naive Sync Example
34:21 Best practices when starting a new project from scratch Habit Path
38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify Coolify Crash Course
42:54 The reality of online opinions in tech
48:10 Spending $120k on an app idea
54:12 Sick Picks + Shameless Plugs
Sick Picks Scott: My MindWes: Metal Detector
Shameless Plugs Scott: Syntax on YouTube
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 -
871: Coding Agents Cursor + Windsurf Tips
27 januari 2025 · 27 min
Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project.
Show Notes 00:00 Welcome to Syntax!
04:12 What are AI Agents? Cursor Features, Windsurf Features. Lees meer07:25 Brought to you by Sentry.io.
07:50 Chat Mode.
08:11 Composer Mode.
08:55 Agent Mode.
10:03 Inline Chat Mode.
11:02 JavaScript Set Methods Demo. Wes’ Example on X.16:10 Fire Dispatch Data.
20:01 Rules Files. Cursor Directory.22:37 Use screenshots.
23:36 Refactoring to separate files.
23:53 Use it to experiment.
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 -
870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding
22 januari 2025 · 58 min
Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development.
Show Notes
00:00 Welcome to Syntax! Lees meer00:50 The origins of Windsurf and Codeium Windsurf
Codeium
Vs Code
Cursor03:14 Rethinking IDE UX
05:45 Will Microsoft eventually implement these AI features in VS Code?
09:27 The "agentic" editor concept
17:58 The future of software development with AI
24:37 AI in large codebases
28:22 Brought to you by Sentry.io
28:46 How does AI stay current with frequent language/library updates?
33:07 Behind Windsurf's fresh design
35:23 Challenges with forking VS Code
38:47 AI and future innovations
43:04 How Windsurf approaches AI experimentation
45:11 Pricing and user segments
48:38 Will Windsurf ever run in the browser?
50:58 Sick Pick + Shameless Plugs
Sick Picks Kevin: Ricoh GR IIIxVarun: Di2 Shifter
Shameless Plugs Windsurf
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 -
869: Node + TypeScript in 2025
20 januari 2025 · 18 min
Scott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno.
Show Notes 00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io.
01:29 Running TypeScript in Node.
01:45 Experimental Type Stripping.
03:17 TypeScript refresher.
04:05 TypeScript can be compiled and/or Type Stripped.
05:09 Current Node implementation is only type stripping.
05:40 Limitations of no compiling. 05:57 Enums.
08:30 Other issues.
08:35 Parameter properties. Lees meer09:20 Experimental transform types.
10:01 Importing types with type keyword.
11:17 No need for sourcemaps.
11:42 No dependencies. 13:08 Other tools.
13:25 tsx.
14:28 ts-node.
14:44 JSDoc.
16:30 Deno and Bun.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 -
868: The State of JavaScript
15 januari 2025 · 1 uur 3 min
Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks.
Show Notes 00:00 Welcome to Syntax!
00:27 Brought to you by Sentry.io Lees meer01:16 The state of JavaScript Twitter fantasy football
02:27 Syntax features The State of JavaScript survey05:27 Logical assignment
07:49 Strings
08:18 Arrays
14:16 Sets 2025 New Years resolution: use maps and sets more and objects / arrays less.16:10 Browser APIs
22:50 Library tiers list
27:21 Upgrading from M1 Mac Chris Coyier - M430:08 Front-end frameworks
32:18 The top front-end frameworks used at work
33:49 What is the highest paying framework?
35:01 Meta frameworks
36:32 Meta frameworks pain points
42:33 Testing tools
43:58 Build tools
44:41 Most used libraries
46:33 Back-end frameworks
48:34 JavaScript runtimes
50:35 Serverless runtimes
51:25 Other languages people are using
52:49 AI tools
53:37 The State of JS Awards
57:18 Sick Picks + Shameless Plugs
Sick Picks Wes: Headted VestScott: Super Mario Party Jamboree
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 -
867: Zero Sync is the Future of Data Loading
13 januari 2025 · 29 min
What’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time.
Show Notes 00:00 Welcome to Syntax!
01:59 Brought to you by Sentry.io.
02:21 Today’s agenda.
02:52 What is Zero Sync? The Docs.
InstantDB. Lees meer07:02 Zerobugs loading speed.
11:04 Real-time interactivity.
11:38 Why is it different?
12:11 How to get it set up. 12:58 Querying Data.
16:22 Writing data.
16:31 Upsert.
17:39 Authentication and permissions. Johannes Schickling Ep 767.19:27 Preloading.
19:41 Migrations and deployment.20:17 Some extras.
21:16 CreateSubscriber.
23:08 Can you use this today? Zero Syn Roadmap.
Scott’s YouTube Video.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 -
866: 2025 Web Development Predictions
8 januari 2025 · 53 min
Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes!
Show Notes 00:00 Welcome to Syntax!
02:00 Brought to you by Sentry.io.
03:09 The agenda.
03:40 Temporal Javascript api will ship in Safari and Chrome. Temporal Proposal. Lees meer06:23 On device AI. WebGPU API
Dawn Native WebGPU
10:26 Models will plateau. Bolt.new, v0, Lovable.dev.
13:40 Web Awesome will become the most used web components library. Web Awesome.
15:57 We will be using more web components.
16:59 A push towards the ‘standard stack’.
19:38 We can really use relative color.
21:39 Vanilla CSS comeback.
23:35 A complete Mixins / Functions API for CSS.
24:27 Conditionals will ship in all browsers.
25:50 People will still make vertical centering jokes.
27:08 VSCode will be feature parity with Cursor.
28:22 Framework choice will matter less with AI tools.
29:12 OpenAI will launch a browser. Dupe.com.
Buy Now! The Shopping Conspiracy.
Krazy Binz.37:18 React will drop Babel. BabelJS.
38:05 React Server Components will pop.
39:46 Remix will relaunch as something entirely different.
41:11 React Native will have it’s time.
42:06 Svelte will get component-based islands or data loading.
44:19 Server Runtimes, Bun will continue to do non-standard, lovable things.
44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite.
46:06 Laravel will release a CMS.
47:57 Vite will stay king.
48:03 Rolldown ships in the next version of Vite. Rolldown.
Statamic.49:35 Sick Picks & Shameless Plugs.
Sick Picks Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb.
Wes: Stats App.
Shameless Plugs Scott: Syntax on YouTube.
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 -
865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd
6 januari 2025 · 36 min
Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about.
Show Notes 00:00 Welcome to Syntax!
00:43 Brought to you by Sentry.io.
01:23 Question 1: Array Sort Default Behavior.
03:24 Question 2: Splitting Into Individual Words & Characters.
06:06 Question 3: NodeJS Stream Backpressure.
09:07 Question 4: Custom Middleware Rate Limiting.
13:00 Question 5: Transform Function Property Changes.
15:18 Question 6: TranslateZ & Will-Change Performance.
17:52 Question 7: Table Structure Best Practices.
20:23 Question 8: Dialog vs Div with Dialog Role.
23:21 Question 9: TypeScript Unknown vs Any & Never.
26:31 Question 10: Response Type Safety in TypeScript.
29:48 Question 11: Browser Isolation Types.
32:54 Question 12: HTML Quirks Mode Behavior.
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 Lees meer -
864: Durable Objects × Tab State Hacks × Headless CMS Choices + More
1 januari 2025 · 52 min
Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing!
Show Notes 00:00 Welcome to Syntax!
00:52 Brought to you by Sentry.io.
03:10 What Are Durable Objects?
08:25 CSS Anchor Positioning: Cross-Browser Support Update. Implement CSS Anchor Positioning. Lees meer12:48 Freelancers: UX and Design Skills vs. Functional Expertise.
16:47 Choosing the Best Deployment Platform. Syntax Episode 615.20:49 Making Websites WCAG Compliant. Polypane.
22:35 Managing Tab State in Complex Apps.
28:43 Will CSS Ever Be Complete?
33:21 When Will Syntax Beanies Drop? Syntax Swag Store.35:21 The Best Headless CMS for a Tech Blog.
42:15 From Many Packages to Monolithic Frameworks.
46:41 Sick Picks + Shameless Plugs.
Sick Picks Scott: The Sheet with Jeff Marek.
Wes: 28” 4K+ BenQ Programming Monitor.
Shameless Plugs Scott: Syntax on YouTube.
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 -
863: 2024: A Year in Review
23 december 2024 · 1 uur 9 min
Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond.
Show Notes 00:00 Welcome to Syntax!
01:30 Changes to the Syntax podcast.
05:56 What happened this year? 06:07 React.
06:36 Solid Start.
07:04 Tanstack Start.
07:43 Remix
09:42 AI Editors.
11:53 Vite 6.
14:02 Bluesky.
19:52 CSS. Lees meer22:17 What did we do? 22:21 React Miami. React Miami Episode.
22:26 JSNation Amsterdam.
23:55 JSNation US + React Summit.
24:57 Terminal Feud.
26:28 Laravel + Terminal basketball game.
27:02 Syntax San Francisco meetup.
27:23 GitHub Universe.
28:07 FITC.
28:38 153 Syntax Episodes + Video.29:32 Our 2024 Predictions Reviewed. 29:46 Types in JS will have real movement.
31:29 Temporal API will ship in 1 browser.
32:50 Perf tooling gets easy for everyone to understand.
33:29 CSS continues to get better where you need less JS.
34:25 Svelte v5 is very fast.
34:38 The year of the server in frameworks.
35:28 Astro is going to have a good year.
36:13 React server components.
37:03 Remix moves away from page-based loaders, to component loaders.
37:18 Hono will become more ubiquitous.
38:28 We will see a route matching Proposal move ahead.
39:23 Bun releases full node compat.
40:42 We will see a new Linter + formatter entirely replace.
42:16 New TypeScript typechecker. Ezno.43:40 Lightning CSS pops - or does it?
45:10 You’ll hear more about Rspack and Turbopack.
45:51 Vite isn’t going to release anything big in 2024.
46:24 Relative color will land in all major browsers.
48:14 CSS contrast-color will land in chrome.
48:48 Scroll animation landing in 2 browsers.
50:03 The year of CSS discovery.
51:09 Safari will Ship 3 missing PWA Support.
52:11 Firefox usage will continue to slip.
56:53 Paid Arc features.
57:14 More XR web experiences as Apple releases in Vision Pro.
59:55 AI… -
862: Svelte 5 Is Here!
18 december 2024 · 1 uur 1 min
Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains.
Show Notes 00:00 Welcome to Syntax! Scott’s Svelte5 Overview. Lees meer01:27 Brought to you by Sentry.io.
02:06 What’s new in Svelte 5? 02:13 Runes. 04:47 $state07:00 $state.snapshot
11:47 $derived12:46 $derived.by
15:41 $effect17:24 $effect.pre
18:05 $effect use cases.
22:20 $props24:57 Binding state.
27:15 $inspect vsode-wrap-svelte.28:46 $inspect(…).with
30:42 Snippets.
34:22 Events now onclick instead of on:click.
36:09 Custom events now just props instead of createEventDispatcher.36:31 Serif Font on website.
40:01 Performance. Benchmarks Doc.
Benjamin McCann Tweet.46:41 Is Svelte becoming React?
49:21 Migration.
51:41 What’s next and wish list for Svelte.
57:12 Sick Picks & Shameless Plugs.
Sick Picks Scott: Dragon Quest 3.
Wes: Dresscode.dev.
Shameless Plugs Scott: Syntax on YouTube.
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 -
861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB
16 december 2024 · 25 min
Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure.
Show Notes 00:00 Welcome to Syntax!
00:30 Brought to you by Sentry.io.
01:43 Why store data locally. 01:55 User preferences and settings.
02:50 Not logged in state (shopping carts, etc).
03:30 Data for faster loading.
03:51 Privacy concerns.
04:25 Large files or drafts.
05:50 Auth tokens. Lees meer07:08 Where to store data. 07:11 Cookies.
07:48 Local storage.
09:15 Session storage.
10:35 IndexedDB.12:15 BYOJS Storage.
13:41 SQlite via WASM.
14:12 Penalties of SQLite in browser via WASM.
15:29 PGLite.
16:23 Dealing with migrations.
16:55 The advantages of the approach.
18:42 Dexie.
19:59 Patch messages.
21:25 A few options. TinyBase Docs.
Local First Web.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 -
860: Module Federation Microfrontends with ByteDance’s Zack Jackson
13 december 2024 · 1 uur 11 min
Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.
Show Notes 00:00 Welcome to Syntax!
00:48 Zach background and role at ByteDance
03:10 ByteDance’s web and native apps How ByteDance Became the World’s Most Valuable Startup Lees meerLynx
ByteDance GitHub
Coze
Lark
MarsCode
06:48 What is Module Federation? Zephyr Cloud
15:49 Evolution from V1 to V2 of Module Federation
24:47 When to consider Module Federation
29:46 How would you publish a utils package in Module Federation?
32:59 How would you do a major upgrade?
36:36 Brought to you by Sentry.io37:01 Who owns the update process?
39:40 Handling multiple frameworks
42:10 ModernJS and Meta frameworks ModernJSRspress
47:20 Does ByteDance have its own JavaScript runtime? NAPI
50:02 Why Zack built Rspack Rspack
Rsbuild
58:15 The future of Rspack and custom bundlers Unpack
01:04:24 Module Federation’s major features
01:07:29 Sick Picks & Shameless Plugs
Shameless Plugs Zack: Zephyr CloudMidscene.js
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 -
859: Streaming Video in 2025
11 december 2024 · 51 min
Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.
Show Notes 00:00 Welcome to Syntax!
00:50 Brought to you by Sentry.io.
01:15 The history of video streaming.
02:10 How video streaming works: The Tech.
03:54 How video streaming works: Transcoding.
06:37 How video streaming works: Variants. ffmpeg.
Wes’ R2-video-streaming.
Wes’ Transcoding.
YT-DL.
YT-DLP. Lees meer13:13 Dynamic ad insertion.
14:29 Bandwidth and hosting. Mux.18:03 Cloudflare.
19:13 The costs. Wes Bos Tweet Cloudflare TOS.
Steve Tenuto tweet.25:39 Media players. Media Chrome.
29:42 CDN.
32:04 Access control.
33:35 Solutions. Mux.
Cloudflare Stream.
Bunny.net StreamAWS Media Convert.
Cloudinary.
Bitmovin.41:55 Some other features.
45:47 Sick Picks & Shameless Plugs.
Sick Picks Scott: Anker MagGo.
Wes: PolyCapture.
Shameless Plugs Scott: Syntax on YouTube.
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 -
858: How to Go Deeper With Your Learning
9 december 2024 · 24 min
Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.
Show Notes 00:00 Welcome to Syntax!
02:48 Brought to you by Sentry.io.
03:54 How do you go deeper?
04:23 Pick a project and build it.
06:36 Read the docs. Svelte Docs. Lees meer09:07 Read the source.
11:19 Consume content: blogs, conference talks, etc. Dot Conferences on YouTube.
GitNation JavaScript Conferences.16:24 Discord and Reddit.
19:31 Get mentorship and ask questions.
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 -
857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy
6 december 2024 · 59 min
Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.
Show Notes 00:00 Welcome to Syntax!
03:01 Brought to you by Sentry.io Lees meer04:14 Understanding signal-to-noise ratio
06:48 Using de-noise iZotope Voice De-noise09:12 The importance of mic technique
10:28 Dealing with electrical noise
11:15 The proximity effect
13:01 Sound treatment vs sound proofing Sound Wavelength CalculatorSyntax 516: Wes’ New Soundproof Office
Studiobricks
Randy’s Studiobricks video
GIK Acoustics
23:33 Do egg crates work for sound treatment?
25:22 USB mics vs XLR mics Shure MV6Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn
27:06 Video composition
30:18 How to improve your lighting
35:37 Choosing the right camera
36:58 The importance of codecs and bitrates
38:14 What to look for in a webcam
38:50 Randy’s packages for $50, $150 and $500-$1000 budgets
40:02 The $50 package/selecting your mic Feelworld PM1Fifine K688
heyday Stone White Desktop Mic
43:53 The $150 package Neewer lights
45:32 The $500-$1000 package Shure MV6
Insta360 Link 2
Insta360 Link 2c
Elgato Cam Link 4k
Sonay a6000
51:07 Mic stand recommendations VIVO
56:50 Sick picks & Shameless Plugs
Sick Picks Randy: etymologynerd on TikTokShameless Plugs Randy: Randy’s 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 -
856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More
4 december 2024 · 56 min
Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.
Show Notes 00:00 Welcome to Syntax!
00:50 Brought to you by Sentry.io.
02:23 Apple developer accounts and certificates.
06:58 Hono, SvelteKit, and using them together.
11:14 Rspack & Rsbuild over Vite? Rspack, Rsbuild.
Rolldown, Rollup.
oxc.
Turborepo. Lees meer21:01 Quoting projects without seeing under the hood.
25:26 HTTP cookies, partitioned cookies, and chips. Partitioned Cookies.30:29 Redirect codes; 301, 302, 303, 307 418 I’m a teapot.
36:22 Gaining inspiration for talks and posts.
40:02 My loading state is too fast! Should I use setTimeout? setTimeout Docs.42:29 Interviews and landing the job.
49:50 Sick Picks & Shameless Plugs.
Sick Picks Scott: Stainless Steel Cookware.
Wes: Dim Lightbulbs, steelpan.guy on TikTok.
Shameless Plugs Scott: Potluck Submissions.
Wes: Syntax on YouTube.
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 -
855: Fast Websites: The New Speculation Rules API
2 december 2024 · 24 min
Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers.
Show Notes 00:00 Welcome to Syntax!
00:49 Pre-loading, prefetching, and pre-connecting. CSS Wizardy.
CSS Wizardy on GitHub. Lees meer02:06 Brought to you by Sentry.io.
03:16 Benefits of pre-loading, prefetching, and pre-connecting?
07:02 The Speculation Rules API. mdn web docs.08:20 Isn’t that expensive?
08:53 Eagerness of the Speculation Rules API.
09:55 What is the cost for the site?
14:42 What is the cost for the user?
15:49 Next Master. Next Master.18:07 The current prevalence.
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 -
854: Animating the Web With Matt Perry: Exploring motion.dev
29 november 2024 · 50 min
Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.
Show Notes 00:00 Welcome to Syntax!
01:15 The Framer Motion story Motion Lees meer05:16 What’s the status of Framer Motion today?
09:08 What tech is Motion built on?
13:40 Is Motion entirely WAAPI?
16:06 Why hasn’t the Web Animation API gained more traction?
17:46 Does Matt design his demos?
19:25 Performance and testing
25:34 Brought to you by Sentry.io28:10 Have other animation libraries influenced Motion? Svelte
GSAP
Anime.js
31:49 Micro-Optimizations in JS
36:02 How do you test frame rates?
38:03 Graphics programming and shaders Maxime HeckelMaxime’s blog
39:58 What is the future of Motion?
41:42 What’s the difference between layout animations and the Vue Transition API?
46:35 Sick Picks & Shameless Plugs
Sick Picks Matt: Grime musicP Money
Ghetts
Shameless Plugs Matt: Motion.dev
Sponsor Motion
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 -
853: The State of Frontend
27 november 2024 · 1 uur 1 min
Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!
Show Notes 00:00 Welcome to Syntax!
00:53 Brought to you by Sentry.io.
01:15 About the survey. Follow along! State of Frontend Survey Lees meer02:10 Frameworks.
06:15 Rendering frameworks.
07:35 State management.
09:14 Other libraries. Just: Dependency-free Utilities.13:34 Data. Syntax Episode 453.
Syntax Episode 833.16:39 Hosting. AWS Amplify.
19:51 Continuous Integration.
21:30 Micro-frontends.
23:25 Package Managers. pnpm Link Workspace Packages.
Corepack.28:35 JS Runtimes.
29:47 Typescript.
33:13 Browser Technologies.
35:05 What is app property?
38:20 Progressive Web Apps.
40:11 Styling tools.
43:17 Testing.
45:39 Code editors.
49:02 Build tools.
49:17 Linting tools.
50:26 Operating systems.
51:17 The future trends.
54:14 Sick Picks + Shameless Plugs.
Sick Picks Scott: Candle Warmer.
Wes: Flighty iOS App.
Shameless Plugs Scott: Syntax on BlueskyHit 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 -
852: Cloudflare Tunnels
25 november 2024 · 19 min
Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected.
Show Notes 00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:09 How do Cloudflare Tunnels work? 03:52 Publicly exposed webhooks.
04:09 Apple Pay.
04:40 Snipcart. Lees meer04:54 Accessing servers when away. Jellyfin, Home Assistant.
07:47 How to set up Cloudflare Tunnels.
10:00 Security risks. Cloudflare Access & Zero Trust.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 -
851: The Future of VS Code and Copilot
22 november 2024 · 42 min
Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors.
Show Notes 00:00 Welcome to Syntax!
00:32 Cassidy’s keynote at GitHub Universe Lees meer03:23 New Copilot features
04:55 Use cases for prompt engineering
09:20 UI and UX enhancements
19:18 Copilot Extensions20:38 Brought to you by Sentry.io
21:26 Multi-line suggestions?
27:00 How do you develop new ideas in this space? GitHub Next35:42 Copilot in Xcode GitHub Copilot code completion in Xcode is now available in public preview
39:16 VS Code experimental features @code
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 -
850: Manage State in JavaScript Like a Pro!
20 november 2024 · 1 uur 2 min
Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro.
Show Notes 00:00 Welcome to Syntax!
01:22 Brought to you by Sentry.io.
03:10 What is state?
03:29 Common state jargon. 03:48 Reactive State.
04:14 Store.
04:46 Immutable vs Mutable State.
05:53 State updaters.
06:15 Signals. Solid.js Signal Docs. Lees meer06:49 Observables.
07:07 UI is a function of state.
08:39 State Machine.
10:58 Binding state.
11:36 Global vs local.
11:49 Computed State, derived state, selector state.12:41 Approaches to state management. 12:52 Reducer based.
16:39 Mutation based state.
21:17 Atom based state.25:15 Ways to hold state. 25:17 Holding state in an object.
27:38 Holding state in the URL. Syntax Shows.29:34 Holding state in IndexedDB, local storage, and cookies.
32:16 Holding state with FormData.
33:56 Holding state with Signals. Signals Proposal.37:27 Holding state with the server database.
38:55 Global State vs Component State. Habit Path.
40:39 Sharing state. 42:58 State libraries.
45:26 Zustand.
50:24 Jotai.
51:50 xState.
54:56 Easy Peasy.
55:24 Pinia.
56:01 TanStack Query.57:02 Sick Picks + Shameless Plugs.
Sick Picks Scott: Cremo Mens Body Wash, Bentgo Adult.
Wes: Adult Bento Box.
Shameless Plugs Wes: Syntax on YouTube.
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