Syntax - Tasty Web Development Treats

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.

00:00 Welcome to Syntax!
Scott’s Svelte5 Overview.
01:27 Brought to you by Sentry.io. 02:06 What’s new in Svelte 5?
02:13 Runes.
04:47 $state 07:00 $state.snapshot 11:47 $derived 12:46 $derived.by 15:41 $effect 17:24 $effect.pre 18:05 $effect use cases. 22:20 $props 24: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.

Scott: Dragon Quest 3. Wes: Dresscode.dev.

Scott: Syntax on YouTube.

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 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.

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.
07: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.

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 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.

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 Lynx 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.io 37:01 Who owns the update process? 39:40 Handling multiple frameworks 42:10 ModernJS and Meta frameworks
ModernJS Rspress
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

Zack:
Zephyr Cloud Midscene.js

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 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.

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.
13: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 Stream AWS Media Convert. Cloudinary. Bitmovin.
41:55 Some other features. 45:47 Sick Picks & Shameless Plugs.

Scott: Anker MagGo. Wes: PolyCapture.

Scott: Syntax on YouTube.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

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.
09: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.

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 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.

00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io 04:14 Understanding signal-to-noise ratio 06:48 Using de-noise
iZotope Voice De-noise
09: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 Calculator Syntax 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 MV6 Syntax 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 PM1 Fifine 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

Randy: etymologynerd on TikTok

Randy: Randy’s YouTube Channel

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 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.

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.
21: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.

Scott: Stainless Steel Cookware. Wes: Dim Lightbulbs, steelpan.guy on TikTok.

Scott: Potluck Submissions. Wes: Syntax on YouTube.

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 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.

00:00 Welcome to Syntax! 00:49 Pre-loading, prefetching, and pre-connecting.
CSS Wizardy. CSS Wizardy on GitHub.
02: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.

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 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.

00:00 Welcome to Syntax! 01:15 The Framer Motion story
Motion
05: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.io 28: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 Heckel Maxime’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

Matt:
Grime music P Money Ghetts

Matt:
Motion.dev Sponsor Motion

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 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!

00:00 Welcome to Syntax! 00:53 Brought to you by Sentry.io. 01:15 About the survey.
Follow along! State of Frontend Survey
02: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.

Scott: Candle Warmer. Wes: Flighty iOS App.

Scott: Syntax on Bluesky

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads