802

July 31st, 2024 × #JavaScript#React#WebDevelopment

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

Scott and Wes ask each other interview questions to stump one another and teach web development concepts.

or
Topic 0 00:00

Transcript

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Beautiful.

Scott Tolinski

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.

Scott Tolinski

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

Topic 1 02:08

Rock paper scissors game to determine who asks first question

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

Both paper.

Wes Bos

Scissors. Alright. Ready?

Scott Tolinski

Yes.

Wes Bos

Rock, paper, scissors,

Scott Tolinski

throw. Shoot.

Wes Bos

No.

Wes Bos

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

Scott Tolinski

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

Wes Bos

Go.

Scott Tolinski

Rock, paper, scissors,

Wes Bos

shoot.

Wes Bos

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.

Scott Tolinski

Okay.

Scott Tolinski

Okay. 1st question.

Topic 2 03:22

Difference between React useMemo and useCallback hooks

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

Oh, man.

Wes Bos

That's good.

Scott Tolinski

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

Wes Bos

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

Wes Bos

UseCallback is memoizes the function definition, whereas use memo.

Wes Bos

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?

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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?

Topic 3 06:05

Explanation of tree shaking concept in JS bundlers

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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?

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Topic 4 09:21

Difference between CSS grid-template-areas and grid-area

Wes Bos

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.

Scott Tolinski

Areas? Grid template areas.

Wes Bos

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.

Scott Tolinski

That's absolutely correct.

Scott Tolinski

Woo.

Scott Tolinski

What are what are some common pitfalls do you suspect?

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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?

Topic 5 12:09

Temporal dead zone in JS let/const variable declarations

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Oh, that's very fun.

Scott Tolinski

Okay. This Wes fun.

Scott Tolinski

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

Topic 6 13:43

JavaScript event loop explanation

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Scott Tolinski

That's wild.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 7 17:30

Shadow DOM in web components for encapsulation

Scott Tolinski

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.

Scott Tolinski

Yeah.

Wes Bos

Beautiful.

Wes Bos

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?

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

Okay.

Scott Tolinski

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.

Topic 8 20:06

Critical rendering path in browsers

Scott Tolinski

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?

Wes Bos

Critical rendering path. Okay.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

The That should give you a hint.

Wes Bos

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?

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

into Node render tree.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

Yeah.

Wes Bos

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?

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Segmenter.

Topic 9 26:30

intl.Segmenter API for splitting text by locale

Scott Tolinski

Yeah. I Man. Oh.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Topic 10 30:14

WebAssembly concept and usage in web development

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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

Topic 11 32:14

Svelte stores for state management

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

Yeah. I was getting a little rambly there.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

That's good.

Topic 12 35:45

Code splitting concepts and usage

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Yep. Awesome.

Wes Bos

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

Scott Tolinski

Yes. Yes. Absolutely.

Wes Bos

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

Wes Bos

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

Topic 13 37:09

Advanced web accessibility techniques

Wes Bos

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.

Wes Bos

Oh.

Wes Bos

From Zelinski Tavern.

Wes Bos

Where's that? What's that from?

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

Mhmm.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

I think that's correct.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

That was a masterclass.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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?

Wes Bos

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.

Topic 14 45:42

Server-sent events vs websockets

Wes Bos

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.

Wes Bos

Beautiful.

Wes Bos

Alright. Last question of the day.

Wes Bos

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.

Wes Bos

Of oh, you're right.

Wes Bos

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

Wes Bos

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.

Wes Bos

So it's the CSS contain property.

Topic 15 47:45

CSS contain property for performance

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

Yeah.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

Alright.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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

Wes Bos

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?

Scott Tolinski

Yeah. It gets just like

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

Yeah.

Wes Bos

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

Wes Bos

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

Scott Tolinski

It's massive. Yeah. $11

Wes Bos

per terabyte.

Wes Bos

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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?

Scott Tolinski

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

Wes Bos

Node meet Canadian.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

Alright. Catch you later.

Share