802: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd

Syntax - Tasty Web Development Treats

Wes Bos

Js, Technology, Css, Html5, Tech News, Webdevelopment, News, Javascript, Html

4.9 • 1.1K Ratings

🗓️ 31 July 2024

⏱️ 57 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:03 The longest game of Rock, Paper, Scissors.
Round 1
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 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits?
Round 2
09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area.
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 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue.
17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM?
Round 4
20:05 Explain the process of Critical Rendering Path optimization in modern web browsers
26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript.
Round 5
30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development.
32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores.
Round 6
35:26 Explain the concept of “code splitting” in modern JavaScript applications.
37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility.
Round 7
45:15 Explain the concept of “Server-Sent Events” (SSE) in web development.
47:37 What’s the difference between contain layout and contain paint?
49:30 Sick Picks & Shameless Plugs.

Transcript

Click on a timestamp to play from that location

0:00.0	Welcome to Syntax. We've got a stumped episode for you today. This is where Scott and I will make
0:07.6	ourselves embarrassed as of what we don't know about JavaScript, HTML, CSS, all that stuff. We ask each
0:12.4	other interview style questions
0:15.1	and the in an attempt to stump the other one.
0:19.3	And the benefit to you is that you get to learn
0:21.7	a thing or two along the way and it's always a really fun time.
0:25.8	We do this once every couple of months.
0:28.0	So my name is Wes Boss, I'm a developer from Canada with me as always is Scott Tullinsky how you doing
0:33.2	Scott do really good man doing really good I'm producing a lot of demos building a
0:39.3	lot of fun stuff getting into a lot of like with local data sinking. It's funny I have all these existing apps like I have my breakdancing app that I use
0:48.8	I converted that to local first with like a naive sink strategy where it sinks to pocket base or
0:54.7	always overrides what's coming one way or another so like really naive sink no
0:59.6	CRTs but local storage app runs entirely offline and then I converted my habit app to using
1:05.9	repl cash to do like actual CRDT sinking and versioning and stuff man it's like a
1:11.3	whole new world of client-side apps that run very fast.
1:16.0	Beautiful.
1:17.0	If you get stumped yourself on any of your code, chances are it's good to throw an error.
1:23.1	So you're going to head up to Century.io
1:25.5	forward slash syntax.
1:27.1	And guess what?
1:28.5	Century has a bunch of stuff to help you when you're stumped.
1:31.0	You may be even you're stumped on a bug. You got a bug you don't know how to fix it. You know the best part about
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

802: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd

Syntax - Tasty Web Development Treats

Wes Bos

Summary

Show Notes

Sick Picks

Shameless Plugs

Hit us up on Socials!

Transcript