…

Syntax - Tasty Web Development Treats

…

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

#871

869: Node + TypeScript in 2025

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:41] (#t=00:41) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:29] (#t=01:29) Running TypeScript in Node. --- [01:45] (#t=01:45) Experimental Type Stripping. --- [03:17] (#t=03:17) TypeScript refresher. --- [04:05] (#t=04:05) TypeScript can be compiled and/or Type Stripped. --- [05:09] (#t=05:09) Current Node implementation is only type stripping. --- [05:40] (#t=05:40) Limitations of no compiling. ------ [05:57] (#t=05:57) Enums. ------ [08:30] (#t=08:30) Other issues. ------ [08:35] (#t=08:35) Parameter properties. --- [09:20] (#t=09:20) Experimental transform types. --- [10:01] (#t=10:01) Importing types with type keyword. --- [11:17] (#t=11:17) No need for sourcemaps. --- [11:42] (#t=11:42) No dependencies. ------ [13:08] (#t=13:08) Other tools. ------ [13:25] (#t=13:25) <a href= "https://www.npmjs.com/package/tsx">tsx</a>. ------ [14:28] (#t=14:28) <a href= "https://www.npmjs.com/package/ts-node">ts-node</a>. ------ [14:44] (#t=14:44) <a href= "https://jsdoc.app/">JSDoc</a>. ------ [16:30] (#t=16:30) <a href= "https://deno.com/">Deno</a> and <a href= "https://bun.sh/">Bun</a>. <a id="Hit_us_up_on_Socials_25"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

23 hrs Ago

18 MINS

18:24

23 hrs Ago

#870

868: The State of JavaScript

Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:27] (#t=00:27) Brought to you by [Sentry.io] (https://sentry.io) --- [01:16] (#t=01:16) The state of JavaScript Twitter fantasy football --- [02:27] (#t=02:27) Syntax features ------ [The State of JavaScript survey] (https://2024.stateofjs.com/en-US/) --- [05:27] (#t=05:27) Logical assignment --- [07:49] (#t=07:49) Strings --- [08:18] (#t=08:18) Arrays --- [14:16] (#t=14:16) Sets ------ <a href= "https://www.youtube.com/post/UgkxrFcXWyrqgGuSj2wIcgBssSxjbQypz7fu"> 2025 New Years resolution: use maps and sets more and objects / arrays less.</a> --- [16:10] (#t=16:10) Browser APIs --- [22:50] (#t=22:50) Library tiers list --- [27:21] (#t=27:21) Upgrading from M1 Mac ------ [Chris Coyier - M4] (https://chriscoyier.net/2025/01/06/m4/) --- [30:08] (#t=30:08) Front-end frameworks --- [32:18] (#t=32:18) The top front-end frameworks used at work --- [33:49] (#t=33:49) What is the highest paying framework? --- [35:01] (#t=35:01) Meta frameworks --- [36:32] (#t=36:32) Meta frameworks pain points --- [42:33] (#t=42:33) Testing tools --- [43:58] (#t=43:58) Build tools --- [44:41] (#t=44:41) Most used libraries --- [46:33] (#t=46:33) Back-end frameworks --- [48:34] (#t=48:34) JavaScript runtimes --- [50:35] (#t=50:35) Serverless runtimes --- [51:25] (#t=51:25) Other languages people are using --- [52:49] (#t=52:49) AI tools --- [53:37] (#t=53:37) The State of JS Awards --- [57:18] (#t=57:18) Sick Picks + Shameless Plugs <a id="Sick_Picks_34"></a>Sick Picks --- Wes: [Headted Vest] (https://amzn.to/4gZ9dEh) --- Scott: [Super Mario Party Jamboree] (https://amzn.to/407UVcV) <a id="Shameless_Plugs_39"></a>Shameless Plugs --- [Syntax YouTube Channel] (https://www.youtube.com/@syntaxfm) <a id="Hit_us_up_on_Socials_43"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

15 Jan 2025

1 HR 02 MINS

1:02:50

15 Jan 2025

#869

867: Zero Sync is the Future of Data Loading

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:59] (#t=01:59) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:21] (#t=02:21) Today’s agenda. --- [02:52] (#t=02:52) What is Zero Sync? ------ [The Docs] (https://zero.rocicorp.dev/docs/introduction) . ------ [InstantDB] (https://www.instantdb.com/) . --- [07:02] (#t=07:02) Zerobugs loading speed. --- [11:04] (#t=11:04) Real-time interactivity. --- [11:38] (#t=11:38) Why is it different? --- [12:11] (#t=12:11) How to get it set up. ------ [12:58] (#t=12:58) Querying Data. ------ [16:22] (#t=16:22) Writing data. ------ [16:31] (#t=16:31) Upsert. ------ [17:39] (#t=17:39) Authentication and permissions. --------- [Johannes Schickling Ep 767] (https://www.youtube.com/watch?v=TrVYBfIsOa0) . ------ [19:27] (#t=19:27) Preloading. ------ [19:41] (#t=19:41) Migrations and deployment. --- [20:17] (#t=20:17) Some extras. --- [21:16] (#t=21:16) CreateSubscriber. --- [23:08] (#t=23:08) Can you use this today? ------ [Zero Syn Roadmap] (https://zero.rocicorp.dev/docs/roadmap) . ------ [Scott’s YouTube Video] (https://www.youtube.com/watch?v=hAxdOUgjctk) . <a id="Hit_us_up_on_Socials_27"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

13 Jan 2025

29 MINS

29:06

13 Jan 2025

#868

866: 2025 Web Development Predictions

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! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:00] (#t=02:00) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:09] (#t=03:09) The agenda. --- [03:40] (#t=03:40) Temporal Javascript api will ship in Safari and Chrome. ------ [Temporal Proposal] (https://tc39.es/proposal-temporal/docs/) . --- [06:23] (#t=06:23) On device AI. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU API</a> ------ [Dawn Native WebGPU] (https://github.com/google/dawn) --- [10:26] (#t=10:26) Models will plateau. ------ [Bolt.new] (https://bolt.new/) , <a href= "https://v0.dev/">v0</a>, <a href= "https://lovable.dev/">Lovable.dev</a>. --- [13:40] (#t=13:40) Web Awesome will become the most used web components library. ------ [Web Awesome] (https://blog.fontawesome.com/introducing-web-awesome/) . --- [15:57] (#t=15:57) We will be using more web components. --- [16:59] (#t=16:59) A push towards the ‘standard stack’. --- [19:38] (#t=19:38) We can really use relative color. --- [21:39] (#t=21:39) Vanilla CSS comeback. --- [23:35] (#t=23:35) A complete Mixins / Functions API for CSS. --- [24:27] (#t=24:27) Conditionals will ship in all browsers. --- [25:50] (#t=25:50) People will still make vertical centering jokes. --- [27:08] (#t=27:08) VSCode will be feature parity with Cursor. --- [28:22] (#t=28:22) Framework choice will matter less with AI tools. --- [29:12] (#t=29:12) OpenAI will launch a browser. ------ [Dupe.com] (https://dupe.com/) . ------ <a href= "https://www.netflix.com/tudum/articles/buy-now-shopping-conspiracy-release-date-news"> Buy Now! The Shopping Conspiracy</a>. ------ [Krazy Binz] (https://krazybinz.ca/) . --- [37:18] (#t=37:18) React will drop Babel. ------ [BabelJS] (https://babeljs.io/docs/) . --- [38:05] (#t=38:05) React Server Components will pop. --- [39:46] (#t=39:46) Remix will relaunch as something entirely different. --- [41:11] (#t=41:11) React Native will have it’s time. --- [42:06] (#t=42:06) Svelte will get component-based islands or data loading. --- [44:19] (#t=44:19) Server Runtimes, Bun will continue to do non-standard, lovable things. --- [44:44] (#t=44:44) Bun will release a PAS to compete with NPM, Vercel, and Vite. --- [46:06] (#t=46:06) Laravel will release a CMS. --- [47:57] (#t=47:57) Vite will stay king. --- [48:03] (#t=48:03) Rolldown ships in the next version of Vite. ------ [Rolldown] (https://rolldown.rs) . ------ [Statamic] (https://statamic.com/) . --- [49:35] (#t=49:35) Sick Picks & Shameless Plugs. <a id="Sick_Picks_44"></a>Sick Picks --- Scott: [PHILIPS A19 Ultra Definition Dimmable Light Bulb] (https://amzn.to/3ODbjwR) . --- Wes: [Stats App] (https://github.com/exelban/stats) . <a id="Shameless_Plugs_49"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_53"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

08 Jan 2025

52 MINS

52:48

08 Jan 2025

#867

865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:43] (#t=00:43) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:23] (#t=01:23) Question 1: Array Sort Default Behavior. --- [03:24] (#t=03:24) Question 2: Splitting Into Individual Words & Characters. --- [06:06] (#t=06:06) Question 3: NodeJS Stream Backpressure. --- [09:07] (#t=09:07) Question 4: Custom Middleware Rate Limiting. --- [13:00] (#t=13:00) Question 5: Transform Function Property Changes. --- [15:18] (#t=15:18) Question 6: TranslateZ & Will-Change Performance. --- [17:52] (#t=17:52) Question 7: Table Structure Best Practices. --- [20:23] (#t=20:23) Question 8: Dialog vs Div with Dialog Role. --- [23:21] (#t=23:21) Question 9: TypeScript Unknown vs Any & Never. --- [26:31] (#t=26:31) Question 10: Response Type Safety in TypeScript. --- [29:48] (#t=29:48) Question 11: Browser Isolation Types. --- [32:54] (#t=32:54) Question 12: HTML Quirks Mode Behavior. <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

06 Jan 2025

35 MINS

35:56

06 Jan 2025

#866

864: Durable Objects × Tab State Hacks × Headless CMS Choices + More

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! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:52] (#t=00:52) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:10] (#t=03:10) What Are Durable Objects? --- [08:25] (#t=08:25) CSS Anchor Positioning: Cross-Browser Support Update. ------ <a href= "https://bugzilla.mozilla.org/show_bug.cgi?id=1838746">Implement CSS Anchor Positioning</a>. --- [12:48] (#t=12:48) Freelancers: UX and Design Skills vs. Functional Expertise. --- [16:47] (#t=16:47) Choosing the Best Deployment Platform. ------ <a href= "https://syntax.fm/show/615/where-should-you-host-your-app-hosting-providers-compared"> Syntax Episode 615</a>. --- [20:49] (#t=20:49) Making Websites WCAG Compliant. ------ [Polypane] (https://polypane.app/) . --- [22:35] (#t=22:35) Managing Tab State in Complex Apps. --- [28:43] (#t=28:43) Will CSS Ever Be Complete? --- [33:21] (#t=33:21) When Will Syntax Beanies Drop? ------ [Syntax Swag Store] (https://sentry.shop/) . --- [35:21] (#t=35:21) The Best Headless CMS for a Tech Blog. --- [42:15] (#t=42:15) From Many Packages to Monolithic Frameworks. --- [46:41] (#t=46:41) Sick Picks + Shameless Plugs. <a id="Sick_Picks_22"></a>Sick Picks --- Scott: <a href= "https://www.youtube.com/playlist?list=PLU--hi_aUxNBY6yjQ7XMZgUJxEYVPuR5K"> The Sheet with Jeff Marek</a>. --- Wes: <a href= "https://www.benq.com/en-ca/monitor/programming/rd280ua.html">28” 4K+ BenQ Programming Monitor</a>. <a id="Shameless_Plugs_27"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_31"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

01 Jan 2025

52 MINS

52:22

01 Jan 2025

#865

863: 2024: A Year in Review

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:30] (#t=01:30) Changes to the Syntax podcast. --- [05:56] (#t=05:56) What happened this year? ------ [06:07] (#t=06:07) React. ------ [06:36] (#t=06:36) Solid Start. ------ [07:04] (#t=07:04) Tanstack Start. ------ [07:43] (#t=07:43) Remix ------ [09:42] (#t=09:42) AI Editors. ------ [11:53] (#t=11:53) Vite 6. ------ [14:02] (#t=14:02) Bluesky. ------ [19:52] (#t=19:52) CSS. --- [22:17] (#t=22:17) What did we do? ------ [22:21] (#t=22:21) React Miami. --------- [React Miami Episode] (https://www.youtube.com/watch?v=oOoBlD7zHRo) . ------ [22:26] (#t=22:26) JSNation <a href= "https://www.instagram.com/stolinski/p/C8qcO_exNOY/?locale=nl&hl=af&img_index=1"> Amsterdam</a>. ------ [23:55] (#t=23:55) JSNation <a href= "https://x.com/wesbos/status/1859281876063535134">US</a> + React Summit. ------ [24:57] (#t=24:57) <a href= "https://www.youtube.com/watch?v=fMy0XhFdLAE">Terminal Feud</a>. ------ [26:28] (#t=26:28) <a href= "https://www.youtube.com/watch?v=QMwNHaV5eMs">Laravel + Terminal basketball game</a>. ------ [27:02] (#t=27:02) <a href= "https://x.com/syntaxfm/status/1853531035847540928/photo/1">Syntax San Francisco meetup</a>. ------ [27:23] (#t=27:23) <a href= "https://x.com/syntaxfm/status/1853567942056935483/video/1">GitHub Universe</a>. ------ [28:07] (#t=28:07) <a href= "https://fitc.ca/speaker/wesbos/">FITC</a>. ------ [28:38] (#t=28:38) 153 Syntax Episodes + Video. --- [29:32] (#t=29:32) <a href= "https://syntax.fm/show/712/2024-predictions">Our 2024 Predictions</a> Reviewed. ------ [29:46] (#t=29:46) Types in JS will have real movement. ------ [31:29] (#t=31:29) Temporal API will ship in 1 browser. ------ [32:50] (#t=32:50) Perf tooling gets easy for everyone to understand. ------ [33:29] (#t=33:29) CSS continues to get better where you need less JS. ------ [34:25] (#t=34:25) Svelte v5 is very fast. ------ [34:38] (#t=34:38) The year of the server in frameworks. ------ [35:28] (#t=35:28) Astro is going to have a good year. ------ [36:13] (#t=36:13) React server components. ------ [37:03] (#t=37:03) Remix moves away from page-based loaders, to component loaders. ------ [37:18] (#t=37:18) Hono will become more ubiquitous. ------ [38:28] (#t=38:28) We will see a route matching Proposal move ahead. ------ [39:23] (#t=39:23) Bun releases full node compat. ------ [40:42] (#t=40:42) We will see a new Linter + formatter entirely replace. ------ [42:16] (#t=42:16) New TypeScript typechecker. --------- [Ezno] (https://github.com/kaleidawave/ezno) . ------ [43:40] (#t=43:40) Lightning CSS pops - or does it? ------ [45:10] (#t=45:10) You’ll hear more about Rspack and Turbopack. ------ [45:51] (#t=45:51) Vite isn’t going to release anything big in 2024. ------ [46:24] (#t=46:24) Relative color will land in all major browsers. ------ [48:14] (#t=48:14) CSS contrast-color will land in chrome. ------ [48:48] (#t=48:48) Scroll animation landing in 2 browsers. ------ [50:03] (#t=50:03) The year of CSS discovery. ------ [51:09] (#t=51:09) Safari will Ship 3 missing PWA Support. ------ [52:11] (#t=52:11) Firefox usage will continue to slip. ------ [56:53] (#t=56:53) Paid Arc features. ------ [57:14] (#t=57:14) More XR web experiences as Apple releases in Vision Pro. ------ [59:55] (#t=59:55) AI Tooling. ------ [01:00:57] (#t=01:00:57) Small Models that run in the browser. ------ [01:01:38] (#t=01:01:38) Apps get Sherlocked by OpenAI. ------ [01:02:04] (#t=01:02:04) On prem corporate AI. --- [01:04:49] (#t=01:04:49) Sick Picks + Shameless Plugs. <a id="Sick_Picks_59"></a>Sick Picks --- Scott: [TCGPocket App] (https://tcgpocket.pokemon.com/en-us/) . --- Wes: Huge Bag of Croc Charms <a id="Shameless_Plugs_64"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (https://youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_68"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

23 Dec 2024

1 HR 09 MINS

1:09:00

23 Dec 2024

#864

862: Svelte 5 Is Here!

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ [Scott’s Svelte5 Overview] (https://youtu.be/8DQailPy3q8?si=EHDGByYwUpPrZHSV) . --- [01:27] (#t=01:27) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:06] (#t=02:06) What’s new in [Svelte 5] (https://svelte.dev/blog/svelte-5-is-alive) ? ------ [02:13] (#t=02:13) <a href= "https://svelte.dev/docs/svelte/what-are-runes">Runes</a>. --------- [04:47] (#t=04:47) <a href= "https://svelte.dev/docs/svelte/$state">$state</a> --------- [07:00] (#t=07:00) $state.snapshot --------- [11:47] (#t=11:47) <a href= "https://svelte.dev/docs/svelte/$derived">$derived</a> --------- [12:46] (#t=12:46) $derived.by --------- [15:41] (#t=15:41) <a href= "https://svelte.dev/docs/svelte/$effect">$effect</a> --------- [17:24] (#t=17:24) $effect.pre --------- [18:05] (#t=18:05) $effect use cases. --------- [22:20] (#t=22:20) <a href= "https://svelte.dev/docs/svelte/$props">$props</a> --------- [24:57] (#t=24:57) <a href= "https://svelte.dev/docs/svelte/$bindable">Binding state</a>. --------- [27:15] (#t=27:15) <a href= "https://svelte.dev/docs/svelte/$inspect">$inspect</a> ------------ <a href= "https://github.com/stolinski/vscode-wrap-svelte">vsode-wrap-svelte</a>. --------- [28:46] (#t=28:46) $inspect(…).with ------ [30:42] (#t=30:42) <a href= "https://svelte.dev/docs/svelte/snippet">Snippets</a>. ------ [34:22] (#t=34:22) Events now onclick instead of on:click. ------ [36:09] (#t=36:09) Custom events now just props instead of createEventDispatcher. --- [36:31] (#t=36:31) Serif Font on [website] (https://svelte.dev/) . --- [40:01] (#t=40:01) Performance. ------ <a href= "https://krausest.github.io/js-framework-benchmark/2024/table_chrome_130.0.6723.58.html"> Benchmarks Doc</a>. ------ <a href= "https://x.com/BenjaminMcCann/status/1825927135393177994">Benjamin McCann Tweet</a>. --- [46:41] (#t=46:41) Is Svelte becoming React? --- [49:21] (#t=49:21) <a href= "https://svelte.dev/docs/svelte/v5-migration-guide">Migration</a>. --- [51:41] (#t=51:41) What’s next and wish list for Svelte. --- [57:12] (#t=57:12) Sick Picks & Shameless Plugs. <a id="Sick_Picks_33"></a>Sick Picks --- Scott: [Dragon Quest 3] (https://amzn.to/3CK2kHH) . --- Wes: [Dresscode.dev] (https://dresscode.dev/) . <a id="Shameless_Plugs_38"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (https://youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

18 Dec 2024

1 HR 00 MINS

1:00:45

18 Dec 2024

#863

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:30] (#t=00:30) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:43] (#t=01:43) Why store data locally. ------ [01:55] (#t=01:55) User preferences and settings. ------ [02:50] (#t=02:50) Not logged in state (shopping carts, etc). ------ [03:30] (#t=03:30) Data for faster loading. ------ [03:51] (#t=03:51) Privacy concerns. ------ [04:25] (#t=04:25) Large files or drafts. ------ [05:50] (#t=05:50) Auth tokens. --- [07:08] (#t=07:08) Where to store data. ------ [07:11] (#t=07:11) Cookies. ------ [07:48] (#t=07:48) Local storage. ------ [09:15] (#t=09:15) Session storage. ------ [10:35] (#t=10:35) <a href= "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. --- [12:15] (#t=12:15) <a href= "https://github.com/byojs/storage">BYOJS Storage</a>. --- [13:41] (#t=13:41) SQlite via WASM. --- [14:12] (#t=14:12) Penalties of SQLite in browser via WASM. --- [15:29] (#t=15:29) <a href= "https://github.com/electric-sql/pglite">PGLite</a>. --- [16:23] (#t=16:23) Dealing with migrations. --- [16:55] (#t=16:55) The advantages of the approach. --- [18:42] (#t=18:42) <a href= "https://dexie.org/">Dexie</a>. --- [19:59] (#t=19:59) Patch messages. --- [21:25] (#t=21:25) A few options. ------ <a href= "https://tinybase.org/guides/the-basics/architectural-options/">TinyBase Docs</a>. ------ [Local First Web] (https://localfirstweb.dev/) . <a id="Hit_us_up_on_Socials_30"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

16 Dec 2024

24 MINS

24:58

16 Dec 2024

#862

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:48] (#t=00:48) Zach background and role at ByteDance --- [03:10] (#t=03:10) ByteDance’s web and native apps ------ <a href= "https://hbr.org/2022/02/how-bytedance-became-the-worlds-most-valuable-startup"> How ByteDance Became the World’s Most Valuable Startup</a> ------ [Lynx] (https://github.com/bytedance/lynx-llm) ------ [ByteDance GitHub] (https://github.com/bytedance) ------ [Coze] (https://www.coze.com/) ------ [Lark] (https://www.larksuite.com/) ------ [MarsCode] (https://www.marscode.com/) --- [06:48] (#t=06:48) What is Module Federation? ------ [Zephyr Cloud] (https://www.zephyr-cloud.io/) --- [15:49] (#t=15:49) Evolution from V1 to V2 of Module Federation --- [24:47] (#t=24:47) When to consider Module Federation --- [29:46] (#t=29:46) How would you publish a utils package in Module Federation? --- [32:59] (#t=32:59) How would you do a major upgrade? --- [36:36] (#t=36:36) Brought to you by [Sentry.io] (https://sentry.io) --- [37:01] (#t=37:01) Who owns the update process? --- [39:40] (#t=39:40) Handling multiple frameworks --- [42:10] (#t=42:10) ModernJS and Meta frameworks ------ [ModernJS] (https://modernjs.dev/) ------ [Rspress] (https://rspress.dev/) --- [47:20] (#t=47:20) Does ByteDance have its own JavaScript runtime? ------ [NAPI] (https://nodejs.org/api/n-api.html) --- [50:02] (#t=50:02) Why Zack built Rspack ------ [Rspack] (https://rspack.dev/) ------ [Rsbuild] (https://rsbuild.dev/) --- [58:15] (#t=58:15) The future of Rspack and custom bundlers ------ [Unpack] (https://github.com/hardfist/unpack) --- [01:04:24] (#t=01:04:24) Module Federation’s major features --- [01:07:29] (#t=01:07:29) Sick Picks & Shameless Plugs <a id="Shameless_Plugs_35"></a>Shameless Plugs --- Zack: ------ [Zephyr Cloud] (https://www.zephyr-cloud.io/) ------ [Midscene.js] (https://midscenejs.com/) <a id="Hit_us_up_on_Socials_41"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

13 Dec 2024

1 HR 10 MINS

1:10:38

13 Dec 2024

#861

859: Streaming Video in 2025

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:50] (#t=00:50) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:15] (#t=01:15) The history of video streaming. --- [02:10] (#t=02:10) How video streaming works: The Tech. --- [03:54] (#t=03:54) How video streaming works: Transcoding. --- [06:37] (#t=06:37) How video streaming works: Variants. ------ <a href= "https://github.com/wesbos/R2-video-streaming">ffmpeg</a>. ------ [Wes’ R2-video-streaming] (https://github.com/wesbos/R2-video-streaming) . ------ <a href= "https://github.com/wesbos/R2-video-streaming/blob/main/transcode.ts"> Wes’ Transcoding</a>. ------ [YT-DL] (https://github.com/ytdl-org/youtube-dl) . ------ [YT-DLP] (https://github.com/yt-dlp/yt-dlp) . --- [13:13] (#t=13:13) Dynamic ad insertion. --- [14:29] (#t=14:29) Bandwidth and hosting. ------ [Mux] (https://www.mux.com/) . --- [18:03] (#t=18:03) <a href= "https://www.cloudflare.com/">Cloudflare</a>. --- [19:13] (#t=19:13) The costs. ------ [Wes Bos Tweet Cloudflare TOS] (https://x.com/wesbos/status/1852398973769613727) . ------ <a href= "https://x.com/steve_tenuto/status/1854919704483434763">Steve Tenuto tweet</a>. --- [25:39] (#t=25:39) Media players. ------ [Media Chrome] (https://www.media-chrome.org/docs/en/get-started) . --- [29:42] (#t=29:42) CDN. --- [32:04] (#t=32:04) Access control. --- [33:35] (#t=33:35) Solutions. ------ [Mux] (https://www.mux.com/) . ------ [Cloudflare Stream] (https://developers.cloudflare.com/stream/) . ------ [Bunny.net Stream] (https://bunny.net/stream/) ------ [AWS Media Convert] (https://aws.amazon.com/mediaconvert/) . ------ [Cloudinary] (https://cloudinary.com/) . ------ [Bitmovin] (https://bitmovin.com/) . --- [41:55] (#t=41:55) Some other features. --- [45:47] (#t=45:47) Sick Picks & Shameless Plugs. <a id="Sick_Picks_37"></a>Sick Picks --- Scott: [Anker MagGo] (https://amzn.to/3CquTcZ) . --- Wes: <a href= "https://appahead.studio/apps/polycapture/">PolyCapture</a>. <a id="Shameless_Plugs_42"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_46"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

11 Dec 2024

51 MINS

51:22

11 Dec 2024

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists