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

Welcome to Syntax. We Scott a stumped episode for you today. This is where Scott and I will make, make ourselves embarrassed as of what we don't know about JavaScript, HTML, CSS, all that stuff. We ask each other interview style questions and the in an attempt to stump the other one.

And the benefit to you is that you get to learn a thing or two along the way, and it's, always a really fun time. We do this once every couple months.

So, my name is Wes Bos. I'm a developer from Canada. With me, as always, is Scott Tolinski. How are you doing, Scott?

Doing really good, man. Doing really good. I've been producing a lot of demos, building a lot of fun stuff, getting into a lot of, like, maybe local data data syncing. It's funny. I have all these existing apps. Like, I have my breakdancing app that I use. Yeah. I converted that to local first with, like, a naive sync strategy Wes it syncs to pocket Bos or always overrides what's coming one way or another. So, like, really naive sync, no CRDTs, but local storage app runs entirely offline.

And then I I converted my Sanity app too using Replcache to do, like, actual CRDT syncing and versioning and stuff. Man, it's a whole new world of client side apps that run very fast.

Beautiful.

If you get stumped yourself on any of your code, chances are it could throw an error. So you're gonna head on to century.i0forward/syntax.

And guess what? Sanity has a bunch of stuff to help you when you're stumped. 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 Century is you could see how many people it's affecting, what the stack trace looks like. There's even a fun little, potential AI fix where you can spin the wheel and see if AI can look at your stack trace and provide you with the solution. There's so many interesting useful aspects of of anything. So if you're you're stumped on your performance issues, Century's got you. You're you're stumped on slow queries, Century's got you. You're stumped on anything, Century's got you. And, head on over to century.ioforward/ syntax. Time to get 2 months for free. Alright. Alright. I am ready to embarrass myself here. Are you Wanna do

rock, paper, scissors for who goes 1st? I would love it. Winner winner goes 1st. Right? Paper, scissors, shoot, though. Right?

Yeah. Oh, yeah. We always Okay. Hopefully, there's no lag this time. Are you ready? Yeah. Yep. Rock. Rock, paper. Paper. Scissors. Scissors. Shoot.

We're both scissors. One more time. Let's do it again. Ready?

Rock. Rock. Paper. Paper. Scissors. Throw. Shoot.

Both paper.

Scissors. Alright. Ready?

Yes.

Rock, paper, scissors,

throw. Shoot.

No.

We both 3 for 3. That's a Romeo again.

Oh. Rock, paper, scissors. Wait. Wait. Wait. I was I wasn't ready yet. Okay. Ready?

Go.

Rock, paper, scissors,

shoot.

Scissors. Damn. We did the same. Okay. We're 4 4 ties so far. How is this possible? Which is statistically not impossible, but high. Again Unlikely. Last Node. Rock. Rock. Paper. Scissors. Scissors. Throw. Shoot. Oh. Alright. You cut my paper. Give me a question.

Okay.

Okay. 1st question.

Oh, okay. This one's this one's maybe beginner to medium difficulty.

In React, what's the difference between use memo and use callback? And in what scenarios would you use 1 or the other?

Oh, man.

That's good.

Yeah. I know. These are my 2 of my least favorite APIs, the fact that you need them and all. Quite honestly,

I don't worry about them. I don't use them all that often. So I'm gonna say Same.

UseCallback is memoizes the function definition, whereas use memo.

Man, I have a I have a whole thing I wrote on this as well, and I'm totally blanking. Use callback will allow you to memoize the function definition, which is helpful because on rerender, the function if you put if you define a function inside of a component, that function will be redefined every single time. Use memo, I think, is like that, but it will also it will just memoize the output of something, some some data or output of a component. Is that right? So the difference being function definition versus output?

Yeah. Value. So, use memo memoizes the result and use callback. Yes. Memoize is the function definition.

And like you said, this is because in React React components are functions. You call a function, and you have a function being defined inside of that function. Every single time that function is called, that inside function will be redefined.

Yeah. That's part of part of the downside of having a function component. Right?

And so the 22 things there. First of all, I don't haven't run into many performance issues where that has really mattered, at least in my opinion or in myself. A lot of people have. Second of all, that's what the rec rec compiler is going to do so you don't have to use use callback and use memo, which is gonna be kinda nice. Just do it for me.

Yeah. For sure. And the reason why you don't have to do that and let me just throw some Svelte. The reason why you don't have to do that in Svelte is because in Svelte, when your component rerenders, it doesn't

rerun the JavaScript in your component. It's updating individual values. It knows exactly where to update the little bits. That's the the beauty of a compiled language.

Yep. My next question for you is explain the concept of tree shaking in modern JavaScript bundlers. How does it work, and what are the benefits?

I'm gonna I'm gonna I'm gonna I'll laugh because I typed in question 2 on my end, and it says, explain the concept of tree shaking.

Okay. We're so we're using Claude AI here, and, obviously, it's deterministic to a point where so funny. We use the same prompts, and we're getting the same questions. So I'll, I'll shake shake up my prompt a little so we get some different ones. But That's so funny. Yes. I can answer this. We're not gonna try to answer this. Yeah. Yeah.

My understanding of tree shaking is that, let's say, you have a package that you've installed.

That package has 10 files in it. And you might have a very specific import path to access specific either, modules or functions or whatever from that. And my understanding is that tree shaking takes all those other modules that could be loaded from that package. And if you're not using them, it removes them from your bundle, AKA, like, the stuff in your tree that you're using stays there, and you shake it out and all the stuff that isn't being used is removed.

Yeah. Nailed it. I I I often think about that where, like, if you're shaking a tree, don't you want the stuff that falls? But Depends. Yeah. The code is the other way. Right? Like, you're shaking out the stuff that you don't use, and you're keeping

the stuff that you do use. What if you had a bunch of junk in the tree, and you just wanna shake out that junk?

Yeah. That's true. Bunchy. Oh, you know what? We Whatever you do, mate.

We've got our hard hydrangeas are blooming like crazy right now. Same. Yeah. They're massive.

Yeah. So I brought a bunch in, and I I cut them and put them in a a vase. And then all the kids were sitting around the table, and I was like, look. And I shook them.

Earwigs everywhere. Like, probably 50 earwigs in the water.

Yeah. Yeah. They were all in the, like, the balloons. So

Our hydrangeas are, like, filled with bees right now, and I'm loving it. Loving that bee. Yeah.

Let's get that sweet, sweet honey. I know. Right? No kidding. Actually, I just planted we have we have massive hydrangeas here, Wes. We have several of them, and I just planted 2 more in that tree that I pulled out. I uprooted a tree like a weed. I'm about to do another one, and I'm gonna just fill this tree. Man? Yeah. Well, they're good.

I'm gonna I'm gonna fill it with hydrangeas here. So It's good. I,

I went on, like, a hydrangea kick where I propagated Yeah. I saw that. Several 100, and a lot of them died. But now I have I probably have, like, 30 hydrangeas at the cottage that I'm working on. But the damn deer slower. The damn deer keep eating them, so they're not growing as fast as I would hoped.

Okay. Side note here. Our garden, guess what keeps eating everything in our garden? My mop dog. My my dog who looks like a mop, she ate our broccoli. She ate the entirety of the broccoli. She uprooted and ate it. She ate all of the beets that we planted. She uprooted and ate them. Now she's eating lettuce. Healthy ass dog. Yeah. She ate some tomatoes out of there. I'm like, please, just stay out of the garden. Like, okay. Sorry.

I Node. It's ridiculous. Alright. Next question. In the context of CSS Grid, explain the difference between grid template areas and grid area.

How can they be used together to be create complex layouts, and what are some potential pitfalls when using them?

Well, grid template area is where instead of defining the rows and columns of a grid, you sort of you name them. Right? Node one? You grid template area.

Areas? Grid template areas.

Grid template areas. Yes. Okay. Cool. Is that is that right so Yarn? Where you're like you could do, like, sidebar sidebar content content. Sidebar content. Like, you're essentially, like, visually mapping it on out. And then grid area is how you take a grid item and put it in one of those predefined named areas.

That's absolutely correct.

Woo.

What are what are some common pitfalls do you suspect?

Oh, what are some potential to watch out for when using them? Yeah. It's kind of an odd question or other question.

I I don't know. Like like, I guess, like, when you when you go to a breakpoint, you have to redefine the grid template area.

Yeah. And that could be hidden. True? Here, let me give you one for my personal collection. I don't know what the what they're expecting JS the answer. But, like, let's say you define your grid template areas, then you attach, like, maybe helper utility classes to those grid template areas, and then you modify them slightly.

They modify the grid template areas slightly, and the whole thing stops working or worse. It it it doesn't just break in a graceful way. It, like, just Yeah. It, like, behaves kind of oddly, and then you're like, what is what could possibly be going on here? Oh, wait. I changed this one. Okay.

Yeah. That I think that what do they say? They say incomplete grid definition, discontinuous areas. A grid area must be rectangular. You can't create an l shaped grid area. Overuse leading to complex, hard to maintain layouts, that's kind of what I was getting at before. But, yeah, I I think grid template areas are really neat. I personally usually define those named sections of my grid using grid template columns and Yeah. Define the names within the column definition.

But, you know, there's a lot of really advanced use cases you can do with, grid template areas.

Alright. I'm going to give you a question. I got a couple questions here. I'm I'm I'm curious.

Do you want, like, a when do you want one that's like, I know what that is, but when would I ever need that? Sure. Or yeah? Okay. Whatever. Give me whatever you got. I don't care. Okay. I got I'm down for it. What is the temporal dead zone in JavaScript, and how does it relate to variables declared with let and const?

Bro, I'm gonna be honest. I have never heard of the temporal dead Node, so I'm gonna take a big old fat fail on this one. Yeah.

I used to be so one of the first things that would pop up when you Googled it. No. Not even on the 1st page anymore. This so this was rolled out in Wes six.

The temporal dead zone is a period between, entering a scope and the declaration of the variable. So Mhmm. With the var variables, as soon as you enter into a scope, like, inside of a function, a variable that is declared later on in the scope can be referenced before it's even declared, which is wild in its own. Like, why would you ever want that? It would just be undefined.

Whereas in with let and const variables, you cannot reference a variable until it's been declared.

In that area, beef when you enter into a scope where a variable is but before it has been declared, JS called the temporal dead zone.

Yeah. Okay. Again, who's who's making variables who's referencing variables before they're they're declared? Right? Yeah. That's awesome. Scott a cool Node, at least. Yeah. Sick. I called it temporal dad zone on one of my videos, and I get an email probably once a month saying I spelled it wrong. Oh, that's great. The joke.

Oh, that's very fun.

Okay. This Wes fun.

Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and micro task queue.

There's more to this where it's asking you to explain promises in async and how that fits into here, but let's just keep it at that first bit. Describe the inner workings of the JavaScript event loop, the roles of the call stack, callback queue, and microtask queue.

Man, I feel like I've answered this once on a stump before, and I always reference the that, like it's like a 12 year old video on on how the event loop works. Mhmm. So the event loop is when the JavaScript engine is running through the the JavaScript, and you hit, like, an API, like, to run a function, what it does is it takes that function to run and it throws it on top of the call stack.

And then the call stack is a list of things to actually run.

And then when it is running them, it puts them into the queue.

That JS a bad example. We did a whole show on the event the JavaScript event loop.

Yeah. What number is it? Syntax Node 384, we also asked this question. I probably biffed it then as well. I It was how similar of a question there. Explanation of it. I think it exactly this this question.

That's wild.

That's wild that we could be okay. Wes, okay. Here here's here's at least the answer it's looking for. Call stack. This is the, where the functions, function calls are stacked and executed. Yeah. Yeah. It's it follows a last in first out structure. So you put something on the top, it's on the top, You know, last in, 1st out.

When a function is called, it's pushed onto the stack. When it returns, it's popped off.

Callback queue, the queue holds callback functions from asynchronous operations like set time out DOM events and HTTP Wes. So callback queue is for those types of things so that when when it when you have, like, a, like, a a set time out, it needs to run after a certain amount of time that's put into the callback queue. The microtask queue is a queue that has a higher priority than the callback queue. It holds microtasks, which are usually created by promises or the mutation observer.

So this is things with a higher priority like the callback queue. And the event loop itself continuously checks the call stack. And then if it's empty, it checks the microtask, and executes all microtask. After the microtask queue is empty, it checks the 1st task from the callback queue and pushes it to the call stack.

So, hey, the call stack is something that, you know, you gotta get into if you're getting really deep into your your performance and understanding. But for most us UI developers,

you know, you don't really have to think about it very often. Yeah. The the call stack is something I'm very familiar with from a debugging point of view. Yeah. And I have hit issues in the past where you put, like, in a wait Node second or you put a set time out in there Mhmm. And that will push everything to the end of the the call stack. So I've I've had issues with that in the past, but not enough to just confidently,

rattle off how that works. I was asked to I was asked that question in an interview once, and I definitely did not, execute that question correctly.

Alright. I got Node for you here. What is the Shadow DOM in web components, and how does it differ from the regular DOM? Explain how encapsulation is achieved using the Shadow DOM and discuss potential use cases.

Used don't know if it's used outside of web components. I think you can maybe. I don't know. Either way, it's primarily used for scoping within your web components.

Sometimes you have a component. Let's think like, like, you could imagine a component that you have in the in the Wes, like a like an audio player that looks like a play button and whatever. That's made up of smaller individual elements, and you could have some default styles for that thing that really, choose how that looks. So you can write classes or even access, styles on those things by element selectors and stuff without having that CSS that you've written, it get exposed to your full on application. So I could potentially inside of a shadow DOM say, div is the color of red, and it's only gonna affect the things inside of the shadow DOM and nothing outside of it. It also can make styling in from outside to inside more difficult as well, which is why you often see Wes component type of situations Wes they're not setting values on DOM elements themselves to control the styling, but they're being done through CSS variables that can then get leaked into the Shadow DOM and update the the properties there. Exposed.

Yeah.

Beautiful.

I like it. That was that was very well done. And the, syntax player is the shadow uses, web components in Shadow DOM, right, on on syntax.com?

MediaChrome from the Mux team, which if you're doing any video player or audio player, MediaChrome, I highly recommend JS a web component to take care of that instead of using any sort of bespoke player library. Because let me tell you, all of the player libraries are garbage, and MediaChrome is where it's at. I've used you you line them up. I probably used 10 different React based video players, all the ones that claim to do all this stuff. I've used player dot j j s. Used used them all. Medium Chrome is where it's at. That was actually a phase of mine when I was working on the syntax or the, LevelUp tutorial site Wes constantly swapping out my video player because all of them have limitations in some regard or suck in some sort of way. So alright. Next question here.

Oh, this one's too easy too. Sorry. It's like explain SSR, which, you know Node.

Yeah. I could do that. It's in the name.

I feel ridiculous constantly typing harder to chat g p t here or Claude to say harder. And each time, it gives me a new one.

Okay.

Oh, this is a fun Node. Also going to be hard. I'm sorry. I shouldn't have asked for too much harder here. But this is kind of in line with the last one, but maybe a little bit more generic or may maybe a little bit less focused on JavaScript. Can you explain the process of the critical rendering path optimization in modern web browsers.

I'll just give you one of these because a lot of them are like, can you tell how it's different in blinking gecko? I'm not gonna talk about that. I'm gonna talk about this this Node is detail, the 6 major steps of the critical rendering path, DOM construction, CSS ARM construction, rendering tree construction layout paint, and compositing?

Critical rendering path. Okay.

Detail the 6 major steps. DOM construction, CSSOM construction, render tree construction. Okay. I can I get this? Yeah. I think you might be able to Your browser goes and downloads, some HTML.

Right? And the HTML will then be parsed out and rendered into DOM elements. And part of that parsing of the HTML may be to also intentionally go and grab some other resources such as CSS or JavaScript or images, things that are are put in there.

Then the next one is are are these in order? They are. CSS object model construction.

The That should give you a hint.

Object model is once the CSS is I I don't know. I'm actually guessing I'm guessing on this one, but I'm assuming it's when the CSS is being parsed and it applies those styles to the DOM, which means that it is now available both for the browser to paint it, which is a a a later step JS well as with JavaScript to be able to access its values?

Yeah. So the it I think it's close. I don't know how much it's actually applying anything. The browser converts CSS rules into a tree like structure, so just like the the DOM construction.

Yeah. And then it is render blocking, by the way. This the browser won't render any processed content until the CSS object model is complete. I think the next part well, we'll we'll talk about the next part and then layout paint. I don't think anything yet has been done other than parsing into a treelet. Oh, okay. So DOM construction is it's parsing CSS.

It creates all of the the stack of of, CSS rules to then apply The render tree construction render tree construction, I'm I'm assuming turning the HTML into DOM elements. I thought that was the DOM construction, though. That is the DOM. This combines the DOM and the CSS

into Node render tree.

It includes only the nodes necessary for rendering the page, omits things like head script and elements being hidden by CSS display none. So you know the process. You have your DOM elements. You have your CSS. This is the process now where it's like, okay. This thing has a a a CSS display none, so let's remove that element from this. Oh, okay. And then it also applies style rules to each visible Node. So this is where the, like, the combination of HTML and CSS occurs.

Oh, okay. Okay. Alright. And then To be clear, I don't know these answers before looking them up. So I'm Okay. Yes. This JS this is actually really interesting. Then we have layout.

So layout is where the browser will figure out where on the page things will go. So it says, alright. Well, this thing is 50 pixels high, 80 pixels, to the left. It JS, it is orange background. Right? It'll figure out where it needs to be on the page, which then gives it to the next one, which is actually taking that layout and painting it, deciding which part of that layout Node to be put onto the screen, and, if it's been updated, which parts of the screen need to be repainted.

The only the only, caveat I have there JS layout is is just is position is just doing position. Just position. Oh, really? Okay. Colors. Yeah.

Oh, so it only Wes it goes and then the oh, that's actually I didn't even know that that was a thing.

Can you turn off paint and just do layout? I'm curious what that looks like at that point. You know? Probably a a website without any styles on it.

Yeah.

Interesting. But, like, how how does it do layout if, like, this the contents of like, it's, like, font size part of layout or font size part of paint?

I don't know. This says it determines where and how elements are positioned relative to each other.

So that to me says it's all a relative based and not like an well, calculates the exact position. Yeah.

Paint fills in visual elements. It draws text. So, therefore, that's when paint happens, when it draws text. Right? Okay.

Yeah. Interesting. And the last 1, compositing, JS kind of let's see. Over handles overlapping elements and transparency, does stuff where the GPU is used, allows for smooth transitions, draws the painted layers onto the screen in the correct order. So those steps combine, bingo bingo. You got a website.

And so where you'll hear this word critical rendering path thrown around a lot JS, people only care about performance stuff if it's in the way of the critical rendering path because all of these steps are the steps that need to happen before you, the user, see something on the page. Right? And that's critical.

Yeah. So, if another aspect of your your code base does not get in the way of this, maybe it's not as important as the stuff that is slowing down this critical rendering path. Word.

Alright. What do we got next here? Describe the purpose and functionality of the intl Scott Segmenter API in JavaScript. Provide an example of when this API will be particularly useful.

Segmenter.

Yeah. I Man. Oh.

I have a video on this, and I'm just searching for it.

I yeah. I'm gonna take a wild guess because I've never used Segmenter, but I have used some things here. And I do know, some of your social media videos. So you saying that you have a video on it, did help me. That is a bit of a hint. I'm guessing and this is a wild guess. I'm guessing it's used for ESLint.

Let's say you have a list of things and you wanna add on the correct ending to them, that is how you would do it. I don't know how you do it. I've never used Intel. I'm I'm just guessing here because I know you did a video on that. Yeah. You are

referring to intl.pluralrules, which is for something called ordinals, which is 1st, 2nd, 3rd in all of the different languages because those are different in in every language.

But what we're referring to here is intl.segmenter, and this is an API that will allow you to segment text based on different locale locales.

And probably the easiest way to understand this is some emojis are multiple characters, but they are Node perceived character or 1 perceived word. So if you've ever done a dot split on an emoji, you'll know that sometimes it splits into 6 or 7 characters, like the, the family with the 2 dads and 2 kids, and they they have you're able to decide their skin tone and how many, what the parents are and what the 2 kids are.

And there's actually a really interesting story with those is that it's kinda gone off the rails where

everybody wants infinite combination. You know? Like Yeah. 6 moms and 14 children, all of different skin tones. I want the sweating clown emoji because that's my favorite one. We we use that on on the Discord for, like, whenever you made a like, if I made a mistake and I wanna refer to myself as a clown, I'll have the the sweating clown, like, oops. Sweating clown

that is also Santa. You know? Like so Oh, yeah. It actually turns out that a lot of, like, Facebook, Apple, they're all just rolling out just outlines of families now because it's it's it's getting hard to keep up with all the different permutations.

I can only imagine the designer that has to make every single combination of those. Anyways, that's not what I'm we're talking about here. INTL segmentor will split text into perceived words or perceived sentences, because different languages are not just using spaces, and different languages also use characters that are more than 1 bit.

So dot split is not something not a, a use case there.

Yeah. I have not I have not used that. That's a that's an odd one. But if you ever need to split up a some text into words Like like, for example, if you're trying to make, like, a a karaoke where you're just flashing 1 word at a time, don't use Scott split with a space.

Use segmenter because there's possibility that there's an emoji in there.

That's interesting. Yeah. I I I would never consider that. That's neat one.

Let me get you another question here. I'm not gonna go as brutal this time. Okay. So I'll tell, Claude to go softer here, and we'll get, like let's see.

Okay. Yeah. This is fun. Explain the concept of WASM or Wes assembly in the role of modern web development?

Wes assembly allows you to take and run languages in the browser or with with Wes. You can run them literally anywhere that that JavaScript is run. But for example, if you have a program like FFmpeg that's written in in c or if you have another another program that's written in, like, Pnpm, and you need to almost containerize that application or compile it down into, like, assembly Node. It's not assembly code, but, like, that's the the whole idea.

And and bring that and then interface with it from JavaScript.

WebAssembly will allow you to to do that. So once something has been compiled, like FFmpeg is what we use on the syntax website, I wanna run that in a JavaScript environment. I don't have to worry about Linux permissions or having c running or having to compile it my environment. It just runs in Wazee, and it will run on on my iPhone. It will run on my Linux serverless

just fine. Yeah. Can you, talk on any potential security pnpm, considerations for using WebAssembly? Just you don't have to. This is just a little follow-up. Potential security implications.

Maybe a security issue could be that, essentially, because you're running it in the browser, it is not able to like, you're running something that is normally done on the server. Right? Mhmm. You're running it in the browser, so that could be an issue.

Yeah. I don't know. Yeah. Let's see. What do you think? Code obfuscation. So maybe something's running that you don't know is running, third party code from Wes modules, again, if you didn't compile it yourself. Compiled. Yeah. Yeah. You might not know exactly what's in there. Node what's running. Running some crazy stuff. Yeah.

Yeah. I think I think that's that's pretty much the big one. Yeah. Alright. Here's a Svelte question.

Oh. Explain the concept of Svelte stores, particularly focusing on the difference between writable, readable, and derived stores.

How do Svelte stores compare to state management solutions and other frameworks like React?

Yeah. I'll do I'll do you Node one better in that. Like, I'll I'll even compare it to the new Roon system. So Svelte writables is basically, like a reactive state variable.

And what's interesting about them is that you can subscribe to them. You can observe them. Right? So with a writable, you can create a writable that allows you to mutate that value.

You can subscribe and watch for changes of that value, and you can Wes, you re you can read it. You could write it. You can output it. And, defining it when you use it in a template JS just with a dollar sign. So writable is basically a reactive data store that you can write. A readable, readable is a readable data store. You cannot write to it. You cannot mutate this thing. You can just it's like a, something that is, created for the purpose of only being read from, top down. Right? And then you have derived, which is something that is being derived from a already existing value. So, this might come into play when let's say let's say you have let's say you have, like, a a a shopping cart and maybe you're storing an entire shopping cart in a writable, you can create a derived store that is maybe potentially just the total that's calculating the values of all of the items inside of the shopping cart. That's a good example.

And these things are they're they're usable in Svelte five still. They're not going away. But in Svelte five, the way of doing this stuff is with the new runes syntax because, what it does is allows you to it allows you to have more control over your state. And, therefore, they function in a way that is less ESLint less magical than writables, but not necessarily more complex. So the way that, the new state works inside of Svelte is that there it creates a proxy.

So it creates a proxy of the thing, and you're using that proxy. Whenever that value is read, it actually outputs the real value. But if, let's say, you were to console log the state, it would show the state as a proxy for what the actual state is. This gives you more control. You can create whole classes full of state and stuff like that.

You can write your own subscribe stuff. You have to use getters and setters. Either way, Svelte state largely allows you to keep your state outside of the component tree and then just access it. And since Svelte is watching for values rather than for rerenders, it knows when that value JS changed. It's observing that value for a change and then updating it in your template, just that singular value.

Beautiful. That was very, very well put. Good job.

Yeah. I was getting a little rambly there.

Node. Good. I think it's it's interesting because, like, that doesn't just apply to Svelte either, but the concept of a writable store and a derived store is, is pretty interesting.

Yeah. Yeah. In in fact, even the new runes have a derived rune that I use all the time for doing the same thing. Okay. Here's a good one. Along the lines of tree splitting, explain the concept of code splitting in modern JavaScript applications. How does it work? What are the performance implications? Additionally, describe how code splitting interacts with lazy loading.

That's good.

So code splitting is the it takes your application, and it will chop it up into different bundles so that only the code that is needed on a specific page will be run. So you might have an entire application, but, your shopping cart code is not loaded on the home page because it's not needed. That that chunk is not needed until you actually open up the the shopping cart. So it's kind of similar to tree shaking in that you're just trying to figure out what is needed where, but tree shaking is getting rid of code that JS never used in your application before it's even bundled.

And code splitting is loading the code that is needed, but intelligently when it is needed.

And in chunks. The chunks is a big part of it. Like yeah. Whenever you see, like, you'll go into in your like, if you're using Vite or something, you go into your, compiled folder or whatever, you'll see a bunch of chunk Scott JS files that have, like, an ID on them or something. Those are all themselves.

Yep. Awesome.

Did I did I nail it? Did would you say?

Yes. Yes. Absolutely.

Alright. The question here is describe these advanced techniques for maintaining accessible focus order in web accessibility.

One, the use of ARIA live regions around announce announcing dynamic content changes.

2, a skip to main content link. 3, proper uses of tab index, and 4, handling modal dialogues and their impact on focus trapping. This is good because we just recorded an episode where you called out several of these. Oh, and he's got a smoothie.

Oh.

From Zelinski Tavern.

Where's that? What's that from?

Oh, I can't get to focus. My grandpa who has passed had these glasses in his bar, and I don't know where he got them because he got them a while ago. And so for 1 Christmas, my parents duped them somehow, and then I think that's probably I don't know if it's generic or whatever. It could just be generic. Either way, my grandpa had these in his bar. So when he passed, my parents got my brother and I a set of them just for our own household.

Not not quite drinking a beer out of it. This is, like, a house kind of like you're having a a thing of relish.

Mhmm.

I have no idea what's in here. I couldn't tell you.

But, hey, love a good smoothie and smoothie on delivery. Hey. Okay.

So let's get through each of these. The use of ARIA live regions and announcing dynamic content changes. I don't know about the announcing dynamic content changes part, but, ARIA live regions are used for, stuff that is being updated. You could think of, like, when you deploy to your Vercel, you get the logs that are streaming in there to a window. That could be used, I believe, for a live region. A chat window is it's one of the most common use cases for this. It's like indicating an area that we'll be updating live.

Yep. Implementing a skip to content link. So this is useful Wes, you know, a lot of sites have a lot of links in their navigation, even just a couple of links in your navigation. You had your header, like, 3 or 4 links. And sometimes, if you're using your site with a keyboard or with with the audio navigation or anything like that, it's gonna announce all that stuff. And if you want to just get to the main section of the content, something that our us abled people are easy to just scroll down and see. Right? You have to hit tab a 100 times. So what times people do is they put a skip to main content button that is visually hidden initially until it's focused, and then it will show up and then allow you to hit enter on that button, and it will the main content. So that way, you don't have to hit tab a 100 times just to get to that main content area, and it will focus on on the main content. So that way, again, the keyboard navigation gets to be way easier.

Proper usage of tab index. Tab index defines where that tab order goes.

The tab index by default in the browser is usually pretty depending on what you need it to do. And by decent, I mean, decent.

Sometimes, though, you have visually things and maybe even in the DOM, things that are in a different position than you might be expecting. And if you hit tab, it might go over here when you want it to go here first.

So if you want the tab order to go here, then here, then here, then here, then here, then here, whatever, you can manually set a tab index, and it's escalating numbers, like 01234.

I think that's correct.

And that's the thing I end up using that much, to be honest, but it it could be it could be definitely necessary. I think I did use it on the Vercel upside.

Handling modal dialogues and their impact on focus trapping. Hey. We just kinda talked about this in an episode we did on new CSS stuff. I would use the dialogue element because when you open it, it automatically traps your focus and applies inert to the document.

So that way, you're focused directly automatically when that dialogue opens into the inputs and into the dialogue. And, likewise, pop over will, get you focused into there right away as well. So pop over dialogue and then not have to worry about it with, implementing JavaScript and all that jazz.

That was a masterclass.

Thank you. Accessibility tips. That was good. I was a little nervous when I got the Wes, so I'm glad I I hit each of them. That was a big question. I was like, but that's

full full of good nuggets. I like it. Let me tell you, Wes. When I was on stage at JS Nation, you know, there's, like, a 1000 people in the audience. It was crazy. Right? No more than that. I think it's 1500.

Well, there was 16 1600 in attendance at the one that I went to, that I was speaking at. And it was Yeah. Ridiculous, the the crowd. It was amazing.

But when the questions came streaming in, I kid you not, I was expecting the questions to be like, what's the difference between popover and dialogue? And I, like, prepared answers for all the questions. And then the questions proceeded to be, like, a nonstop assault of accessibility questions that I couldn't answer well. Oh. I was just like I was I was mortified because it would all be always be stuff that I I just was like, I I just hadn't even considered or whatever. And that's the thing about accessibility. It's like, there's always things you're not considering, and there's always more to learn. I I feel like I'm I'm pretty well tuned up on this stuff, and still it was like Yeah.

Oh, I don't know about that. I'll have to look into that.

I when I was at that same conference, 1500 people in, I, was tethering my phone because I was upstairs.

Yeah. Did I tell the story? And No. Somebody at the conference told me about it. They were like, oh, I saw Wes last year, and he had a disaster where his Internet wasn't working. So I was using

a my slide deck was using a node module to do color highlighting.

Mhmm. And I did it all local because I was like, hey. You can't trust the Internet. You know? And then I I was tethering my phone, and it's working. And then I I went up on stage. I opened my slides, refreshed the page, and boom, white.

And I was like, oh, shoot. And there's there's 1500 people. I'm the last one Oh, no. To to do the whole day.

And and nothing nothing was loading. Like, I couldn't even show my slides.

So I opened up dev tools in front of 1500 people, and I saw that there was like, the syntax highlighter was requesting, grammars from an external service, and it was downloading it. And because I was not on the Internet, that was breaking, and the whole thing croaked. But I, like, I froze because it's 1500 people, and I was just like Yeah.

And, and then people started yelling, you're just not on the Internet. You're not on the Internet. And I was just like, and then, like, somebody somebody was beside me. I don't even remember who it was. I was like, can you just get me on the Internet? And he's like, yeah. Yeah. No problem. And then everything was fine, but I was like, whoo. Shoulda thought of that Node before,

I got on stage. If you all wanna see what that amount of people looks like in an audience, I have a photo that I'll have in the show notes that, we can include in the show notes for you.

Yeah. It's a lot of people. Much that they have a screen halfway down the audience too. Yeah. It's because you can't see from the back of the room.

I know. When you're looking at this picture and you see the screen hanging down, just know that that's the halfway point. It's it's it's it's so intimidating. For me, Wes, I didn't have any, network issues, but I had prepared, like, notes for all of my slides. And then I realized that because I did all of my demos in iframes, if I wanted to actually click the demos and interact with them on my computer, I I would have had to, like, look at the big screen to do it. So I had to mirror my screen, and I did my whole talk without notes, which, you know, I prepped. I I did a lot of studying for it, but, like Yeah. Yeah. I was just like, last minute. Oh, wait. You can't use your notes? Oh, okay. Oh, man.

That's great. I've never done notes on a talk before. I Wes just really like it either. Yeah. Riff on it. Well, it's we do this podcast 3 times a week. We're pretty good at riffing on it, I think. Yeah. Yeah. I'll put a little suggestions for me, but, yeah, that's it. Let's do 1 more question for me, and then we'll or I'll move into some sick picks.

Oh, well, that that was the end of round 6. So Was it? Since yeah.

So if you want Oh, okay. Should we do 1 let's do 1 more round. One more round each? Okay. Yeah. K. This is a good one for you. I think you'll like this one. Explain the concept of server sent events, ESLint web development.

And tell us, how how do they differ from WebSockets? The rest is implementation stuff. What are the advantages and limitations? Let's just do that. Server side server sent events, what are they? How do they differ from WebSockets, and what are their limitations and advantages?

Alright. Server sent events are a streaming connection to the Vercel. So it's it's a request that you make from the client to the server. However, that request stays open for a certain amount of time. I forget what it is. I think it's, like, 2 minutes or something, maybe a little longer than that. That might be wrong. But that allows the server to send events from server to the client similar to how a web socket would be opening opened up and you're sending data. The difference between server sent events and a web socket is web sockets allow you to do bidirectional data, meaning that you can send data from the client to the server and, from from the server to the client. So a Vercel ESLint event would be is good for when you are doing things like processing.

You know, you you upload a a video and you get data back from the server as to how is that processing being Deno, or or I am generating something with AI and it takes 20 seconds, but I know how far I am. You can use server sent events to send that data. Whereas, like, a WebSockets would be good for, like, a chat where you're you're sending data back and forth, in real time. Hell yeah. Is that right? Perfect.

Beautiful.

Alright. Last question of the day.

K. I have one about the difference between layout and paint. Oh. And I feel like that is one of those that I've we've answered it on this podcast, but I couldn't I don't know that I could tell you. We already answered it in this episode.

Of oh, you're right.

I I don't know if that was the the actual question, though.

It was part of it. Yeah. What it was what's the difference between contained layout and contained paint? And how can they be optimizing rendering performance? Alright. There we go. That's the question.

So it's the CSS contain property.

This is not what I necessarily use because, again, it's it's like a use it if you need it, if you need that speed in your your painting, your rendering.

I would under I would maybe guess that contain layout or contain paint is for when you know that either the positional stuff is not changing or you know that the painting, like, color, fonts, that sort of stuff JS not changing.

So you'd say contain and this is, like, just totally guessing. Or I don't know what it is. I'm gonna be straight up. I never use these.

The contain CSS property allows the author to indicate that an element and its contents are, as much as possible, independent from the rest of the document tree. This allows the browser to recalculate the layout style, paint size, or any combination of them for a limited area of the DOM and not the entire page leading to obvious performance benefits. That's from MDN.

Yeah.

And, like, again, I don't dip into that all that often. I think if you're into really or or ever, really, you know, like but if you're doing, like, really heavy animation and you really need the performance, generally, the browser tries to figure out what needs to be updated on the page. But this is a way for you to explicitly tell the browser some details about your page, and that will lead to better performance.

Yeah. This stuff I need to get into a little bit more. What's what's interesting to me, it's like I think I know this is not like a the same use case. But, like, when I think getting into really heavy performance up at some point, you're like, alright. Use use Canvas and and call it a day because that's where you're gonna get the best performance. But if it's, like, part of your app UI, then that's a different situation still.

Alright.

Let's move into some sick picks. What do you have today for a sick pick? Alright. I got 1 if you don't. Yeah. You can go. Alright. I got a sick pick something today, called tire slime.

And tire slime is something that you should go buy a bottle of right now and throw it in the back of your car because it's gonna be super handy. So this is some green goop that you can squeeze into a tire that has a slow leak or or possibly even a a fast leak.

And it works amazingly well. So if you have a bike tire, I've used it on my ATV. I've used it on our, tractor.

I bought a new trailer at the cottage, a little dump trailer, and it came with some rotted out tires, and I couldn't find the correct replacement tire. So you know what it did? You you basically you take the, Schrader valve off, and then you have what's called a, a valve stem core removal tool. It's in the lid of the bottle. You take that out, and and then it's basically a hole. Squeeze it full of slime and then put it back in and then spin the tire around or just move it around a couple times. And what it does is when you pump it up, it forces this sort of adhesive into any of the holes and seals them right up.

And it's saved my bacon so many times, especially, like, I have so many clapped clapped out crappy little things at the cottage Wes they're all have, like, continual leaks. You have to pump it up every time you use it, and it's good for 2 weeks. Don't do that. Pump it full of slime.

You're good to go. Stuff is awesome. Especially if you you run over a nail or something like that and you you have to get Node,

touchline That's what I was thinking. Yeah. Yeah. Can you just squeeze it into the the like, where the like, can you squeeze it externally onto a hole as well, or do you have to do the No. Internal? Because the way that it works is via air pressure, and it squeezes itself out

of it. So you have to you gotta squeeze into the tire, roll the tire around a couple times, and it it sort of coats the inside of the tire. And then as soon as you pump it up, it forces the slime through any external cracks. That's how it works. Tire people hate it because then they have a Wes of goop to clean up when they fix your tire. But What is this goop?

Yeah. It gets just like

I could see those tire tire folks, yeah, not loving it. You can do it preemptively as well. Meaning that if you have, like, a bike tire or something like that, you can you put it in your tires. And then if you've run over something, the slime just immediately comes out. There's videos online where somebody sticks a staple into a tire, and you can see it just go, and it seals itself.

That's sick. Oh, man. I did not know this existed.

Yeah. That's sick. I think for your emergency kit.

I know. I just bought on Prime Day one of those, battery powered jumpers. Awesome. And I have 1, the battery powered inflators. It's like, I'm on my my emergency kit's ready to go. I'm I'm gonna sick pick a a website here, and it's a really simple website. It shows you the power of what kind of it's like an even, like, old school web type type of website, and it's called disc prices Scott.

And, basically, if you're needing an x your hard drive Vercel, even like a NVMe or any kind of drive, disk drive, internal or external.

There's a big old list of options. You can tell it what you want. And what it will tell you, it'll order them by the price per terabyte or price per gigabyte of this drive or price per terabyte. Right? So that way you can see relatively, like, this drive might be 8 terabytes, but it's priced cheaper price per terabyte than this one that's 4 terabytes. So it also checks Yarn, like, prices really Wes. So you can, check any given point to see, like, you know, what what the current drive prices are at. I need some more drives for my Synology, and so I've been keeping an eye on this to see if there's any deals for me. Oh,

would it kill them? This is, like, the most primitive website ever. Would it kill them to to tiger stripe these rows of data so you can, like That's the one take. Yeah. You look at the price, and then you have to, like, mouse over to the link.

You can just double click on no. You can't.

Yeah.

Firefox has has the ability to select a table row, but it's not on Firefox anymore. No.

I guess that's a a easy user script. This is a cool website. Wow.

It's massive. Yeah. $11

per terabyte.

Freaking Apple putting, like, 256 gigs in a laptop, which is criminal. They should not be doing that. Forget and then I finally caved on my phone. I finally caved and bought the, like, Apple, like what's it called? Like, you get, like if you run out of space on your phone Oh, yeah. The, cloud, Icloud. Cloud, Icloud. And then, like, for, like, 2 months, they stopped bothering me about it, and then it ran out of the 200 gigs. Now they're trying to get me to upgrade. They're like, leave me alone.

I know. I record so much video of my dance practice that I, like, fill it up in no time, and then I'm gonna leave it. And it's like, yeah, it's a hassle. I don't wanna I don't wanna buy pay anymore

than what I'm paying. My wife is the worst at that. Her phone is always full, and she deletes all her apps because there's no Node. So she just deletes apps. And then every time I tell her you have to get a new app to, like, pay for charging for the car, she's like, I there's no room for apps. And then I, like, go on her phone, and her, like, Gmail or

has, like, 800 gigs. I'm just gonna buy her, like, an 11 terabyte phone. Never have to worry about it. I always do buy the largest capacity phone even though So so cheap. Expensive.

It's just yeah. I I I work with too much media to have, low low gigabytes on anything, honestly, just because video files take up so much, and so much of my life is video files. So yeah. But why can you buy

I know that like, I'm not mister Android or whatever, but, like, why can you buy a little, like, 1 terabyte SD card or little micro SD card for like, how much is a 1 terabyte micro SD card?

Yeah. I know. This up. Well, I you yeah. I know. That would be kind of $129

Node meet Canadian.

Like, why cannot we just just give us a bit of extra? I know I realized it's a little slower than your than the Wes, the stuff that's wired right into the iPhone, but, like, give me a better option, please.

I agree. Yeah. I know how hard I know they don't why they don't want to. They want you to buy the ad Vercel. Yeah. But just give give, yeah, give me a little port in there and plug it in. You can cover it. You can make it waterproof. We all know you can make it waterproof, so that's not a good excuse. Yeah.

I know they just don't like people having that type of control over their platform. Users shaking right now.

I know. I was I was one for a long time, and, I'm going to keep keep my things to myself about I do love Android. So alright. Well, that's it. Shameless plugs. Check out Syntax on YouTube, at Syntax FM on YouTube. We do so much great stuff. You can get every episode that we're releasing over on YouTube. And a lot of them, we're doing video showing code. You wanna see code? We show code. We show code all day long, and there's a lot of great tutorials.

CJ does a lot of deep dives and all kinds of stuff. So if you're interested in more video content, more high end syntax stuff, check us out on YouTube.

Alright. Catch you later.