diff --git a/shows/802 - STUMPd.md b/shows/802 - STUMPd.md new file mode 100644 index 000000000..94070dc3c --- /dev/null +++ b/shows/802 - STUMPd.md @@ -0,0 +1,56 @@ +--- +number: 802 +title: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd +date: 1722423600000 +url: https://traffic.libsyn.com/syntax/Syntax_-_802.mp3 +youtube_url: https://www.youtube.com/watch?v=7Vao9J4rAQU +--- + +Scott and Wes serve up a gameshow-style quiz with STUMP'd, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights! + +### Show Notes + +* **[00:00](#t=00:00)** Welcome to Syntax! +* **[01:17](#t=01:17)** Brought to you by [Sentry.io](https://sentry.io/syntax). +* **[02:03](#t=02:03)** The longest game of Rock, Paper, Scissors. +* Round 1 +* **[03:22](#t=03:22)** In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other? +* **[05:56](#t=05:56)** Explain the concept of "tree shaking" in modern JavaScript build tools. How does it work, and what are its benefits? +* Round 2 +* **[09:11](#t=09:11)** In the context of CSS Grid, explain the difference between grid-template-areas and grid-area. +* **[11:34](#t=11:34)** What is the "Temporal Dead Zone" in JavaScript, and how does it relate to variables declared with let and const +* Round 3 +* **[13:29](#t=13:29)** Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue. +* **[17:10](#t=17:10)** What is the "Shadow DOM" in web components, and how does it differ from the regular DOM? +* Round 4 +* **[20:05](#t=20:05)** Explain the process of Critical Rendering Path optimization in modern web browsers +* **[26:14](#t=26:14)** Describe the purpose and functionality of the Intl.Segmenter API in JavaScript. +* Round 5 +* **[30:03](#t=30:03)** Explain the concept of Web Assembly (WASM) and its role in modern web development. +* **[32:11](#t=32:11)** Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores. +* Round 6 +* **[35:26](#t=35:26)** Explain the concept of "code splitting" in modern JavaScript applications. +* **[37:00](#t=37:00)** Describe advanced techniques for maintaining an accessible focus order in web accessibility. +* Round 7 +* **[45:15](#t=45:15)** Explain the concept of "Server-Sent Events" (SSE) in web development. +* **[47:37](#t=47:37)** What's the difference between contain layout and contain paint? +* **[49:30](#t=49:30)** Sick Picks & Shameless Plugs. + +### Sick Picks + +- Scott: [diskprices](https://diskprices.com/). +- Wes: [Slime Tire Sealant](https://slime.com/collections/emergency-auto-sealant). + +### Shameless Plugs + +- Scott: [Syntax on YouTube](https://youtube.com/@syntaxfm). + +### Hit us up on Socials! + +Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm) + +Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos) + +Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski) + +Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)