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

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

like, 256 micro SD card?

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.

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.

There's a big old list of options. You can tell it what you want. And what it will tell you, which is something that is being derived specific

even like a NVMe 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 how much it's actually applying anything. The browser converts CSS rules into a tree like structure, so just like the the DOM construction.

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

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

I don't dip into that all that often. I think if you're into really or or ever, Can you turn off paint

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 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 I

prices Scott.

per terabyte.

it's saved my bacon so many times,

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 you can see it just go, 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.

green goop

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,

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.

Yeah. I know. This up. Well, I you yeah. I know. That would be kind of $129 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

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? entering a scope

you know that either the positional

for like, how much is a 1 terabyte meaning that you can send data from the client to the server and, is

I don't know what it is. I'm gonna be straight up. I never use these.

Node meet Canadian.

and it seals itself.

You you basically you take the,

and and then it's basically a hole. Squeeze it full of slime

you know, what what the current drive prices are at. I need some more drives for my Synology, and created for the purpose of only being read from, 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.

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, state variable.

like, this drive 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, 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,

CJ does a lot of deep dives and all kinds of stuff. So if you're interested in more video content, 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

Alright. I got 1 if you don't. Yeah. You can go. Alright. I got a sick pick something today,

called tire slime.

her, like, Gmail or 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 would under I would maybe guess that contain

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 full full of good nuggets. I like it. Let me tell you, Wes. When I was on stage at JS Nation,

Yeah.

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.

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.

some details about your page, and that will lead to better performance.

So you'd say contain and this is, like, just totally guessing. Or WASM or Wes assembly in the role and

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

And, basically, if you're needing an x your hard drive Vercel, 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,

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

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.

really, you know, like but if you're doing, like, really heavy memoize the function definition, too. Yeah. It's because you can't see from the back of the room.

than the Wes, the stuff that's wired right into the iPhone, but, like,

or any kind of drive, disk drive, internal or external.

Alright.

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, So code splitting is achieved using the Shadow DOM and discuss potential use cases.

Apple,

and you really need the performance, of them for a limited area of the DOM and not the entire page leading to obvious performance benefits. That's from MDN.

might be 8 terabytes, but it's priced cheaper

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 And then the call stack is such as CSS or JavaScript or images, things that are are put in there.

and seals them right up.

stuff is not changing or you know that the painting, like, color, fonts, that sort of stuff JS not changing.

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

would it kill them? This is, like, the most primitive website ever. Would it kill them to to tiger stripe these rows

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 If you get stumped

generally, the browser tries to figure out

animation some HTML.

Yeah. It gets just like I'm gonna I'm gonna fill it with hydrangeas here. So It's good. I,

you can HTML into DOM elements. I thought that was the DOM construction, though. That is the DOM. This combines the DOM and the CSS

alright. Well, that's it. Shameless plugs. Check out Syntax on YouTube,

Freaking Apple

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?

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.

It's massive. Yeah. $11

from

Of oh, you're right.

rendering performance? which is for something called ordinals, give me a better option, please.

It was part of it. Yeah. What it was what's the difference between contained layout and contained paint? and it applies those styles to the DOM, people only care about performance stuff if it's in the way of the critical rendering path because all of these steps data, Where's that? What's that from? especially, like, I have so many clapped clapped out crappy little things at the cottage

You know, you you upload a a video and 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

to send events from server to the client

in real time. Hell yeah. Is that right? Perfect.

the difference between And how can they be optimizing

Alright. Last question

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.

doing things like processing.

is good for when you are if you've ever done a dot split on an emoji,

I

from the server to the client. So a Vercel ESLint event would be a security issue could be that,

you get data back from the server as to how is that processing Like, why cannot we just just give us a bit of extra? I know I realized it's a little slower than your

K. I have one about

minutes or something, maybe a little longer than that. That might be wrong. But that allows the server

on what you need it to do. And by decent, I mean, decent.

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, That's interesting. Yeah. I I I would never consider that. That's neat one.

love a good smoothie and smoothie on delivery. Hey. Okay.

That was a masterclass.

Mhmm.

when you deploy

Sometimes, though, you have

and and, if it's been updated, which parts

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.

duped them somehow, 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.

And

So I opened up dev tools in front of 1500 people, you can squeeze into a tire that has a slow leak or or possibly even a a fast leak.

Oh.

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?

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, And in what scenarios

who has passed had these glasses in his bar, Oh. Rock, paper, scissors. Wait. Wait. Wait. I was I wasn't ready yet. Okay. Ready?

where that tab order goes.

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, When a function is called, it's pushed onto the stack. When it returns, it's popped off.

and then

button that

And, and then people started yelling, you're just not on the Internet. You're not on the Internet. And I was just like, bit.

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.

how how do they differ from WebSockets? this might come into play when let's say let's say you have

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.

But, hey,

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.

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

Yeah. It's a lot of people. Much that they have a screen halfway down the audience

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

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

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.

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

color highlighting.

sent events, ESLint

that we'll be updating 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, you can create a writable that allows you to mutate 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

live.

by default in the browser is usually pretty depending of red, and it's only gonna affect the things inside of the shadow DOM and nothing outside of it. It also can make

or whatever. And that's the thing about accessibility. It's like, Yeah. Value. So, use memo memoizes the result and use callback. Yes. Memoize is the function definition.

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.

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

Yep. Implementing a skip to content link. So this is useful Wes, you know, a lot of sites have a lot of links 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 don't know where he got them because he got them a while ago. And so for 1 Christmas, my parents

Proper usage of tab index. Tab index defines

than you might be expecting. And if you hit tab, it might go over here when you want it to go here first.

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,

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.

you know, there's, like, a 1000 people in the audience. It was crazy. Right? No more than that. I think it's 1500.

The rest is implementation stuff. What are the advantages and limitations?

2, a skip to main content link. 3, allow you to do bidirectional

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

Alright. Server sent events are a streaming connection

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.

proper uses of tab index, be parsed out

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 more high end syntax stuff, check us out on YouTube.

things that are in a different position The tab index I know they just don't like people having that type of control over their platform. Users shaking right now.

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.

I I just hadn't even considered

there was like, the syntax highlighter was requesting, And, like, again,

like 01234.

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 relatively,

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

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 values

was tethering my phone because I was upstairs.

stuff that is being updated. You could think of, like, being defined inside of that function. Every single time that function is called, that inside function will be redefined.

and maybe even in the DOM,

a Do you want, like, a Whereas in

So if you want

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 in their navigation,

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

And tell us,

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

and

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, syntax. Time to get 2 months for free. Alright. Alright. I am ready to embarrass myself here. Are you Wanna do

I can't get to focus. My grandpa

I when I was at that same conference, And Linux permissions or having c running or having to compile it my environment. It just runs in Wazee, and it will run on

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

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

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. I could do that. It's in the name.

MediaChrome, 1st out.

is the color layout paint, and compositing? I Node. It's ridiculous. Alright. Next question. In the context of CSS Grid, explain the difference between grid template areas

alright. Next question here.

I like it. That was that was very well done. And the,

web components in Shadow DOM, right, on on syntax.com? locales.

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

leaked into the Shadow DOM and update the the properties there. Exposed.

I feel ridiculous constantly typing harder to chat g p t here or Claude to say

styling in from outside to inside more difficult as well, which is why you often see

is the shadow uses,

Wes component type of situations

Yeah.

MediaChrome from the Mux team, which if you're doing any video player or audio player,

is where it's at. I've used So that to me says it's all a relative based and not like an

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

I highly recommend JS a web component to take care of that instead of using any sort of bespoke Rock, paper, Okay.

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 Replcache to do, like, actual CRDT syncing and versioning and stuff. Man, it's a whole new world of

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

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

they're not setting

on DOM elements themselves to control the styling, but they're being done through CSS variables that can then get

choose how that looks. So you can write classes or even I know. I just bought on Prime Day one of those,

Beautiful.

Sometimes you have a component. Let's think like,

engine is running through and the in an attempt to stump the other one.

than the callback queue. It holds microtasks, which are usually created by promises or the mutation observer.

deep into your your performance and understanding. But for most us UI developers,

Yeah. What number is it?

So, hey, the call stack is something that, you know, you gotta get into if you're getting really So that way, you're focused directly automatically

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 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 Go.

the JavaScript 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 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.

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.

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

the the JavaScript, a list of things to actually run.

rattle off how that works. I was asked to I was asked that question in an interview once, and I definitely 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.

when

And then when it

the event loop is because different languages

That's wild.

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 Oh. Explain the concept of Svelte stores, particularly

and you hit, like, an API, like, to run a function, what the parents are and what the 2 kids are.

not enough to just confidently, like what's it called? Like, you get, like if you run out of space on your phone before it's even declared, which is wild in its own. Like, why would you ever want that? It would just be undefined.

on how the event loop works. Mhmm. So

So this is things with a higher priority

that question correctly.

There's more to this where it's asking you to explain

what it does is it takes that function to run and it throws it on top of the call stack.

promises in async and how that fits into here, but let's just keep it

like the callback queue. And the event loop itself continuously checks the call stack. And then if it's empty, it checks the microtask,

is running them, it puts them into the queue.

did not, execute at

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.

component. Right? they function in a way that is less ESLint less magical than writables, but not necessarily more complex. So the way that, client side apps that run very fast.

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 don't worry about them. I don't use them all that often. So I'm gonna say Same.

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.

In React, what's the difference between use memo and use callback?

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,

the function definition, another program that's written in, like, Pnpm, and you need to Yeah. Nailed it. I I I often think about that where, like, if you're shaking a tree, Let's move into some sick picks. What do you have today for a sick pick? 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

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?

Oh, okay. This one's Yes.

this one's maybe beginner to medium difficulty.

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

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 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.

UseCallback 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.

whereas use memo.

memoizes Like like, for example, if you're trying to make, like, a a karaoke where you're just flashing 1 word at a time, are

And like you said, this is because in React React components are functions. You call a function, and you have a function Paint fills in visual elements. It draws text. So, therefore, that's when paint happens, when it draws text. Right?

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.

would you use 1 or the other? Okay.

it doesn't

And so the 22 things there. First of all,

referring to intl.pluralrules,

segment text putting, 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.

decide their skin tone and 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.

and this is an API that will allow you to

but they are Node perceived

is not something not a, a use case there.

of modern web development?

I can only imagine the designer that has to

they're all just rolling out not impossible,

the family with the 2 dads and 2 kids, and they they have it is not able to I have a video on this, and I'm just searching for it.

character or 1 perceived Critical rendering path. Okay.

which is 1st, 2nd, 3rd in all of the different languages We're both scissors. One more time. Let's do it again. Ready? it's getting hard to keep up with all the different permutations.

Wes assembly

text into That JS a bad example. We did a whole show on because those are different in in every language.

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

So dot split

you're able to perceived

and I wanna refer to myself as a clown, I'll have the the sweating clown, like, oops. Sweating clown ending to them, so I've been keeping an eye on this to see if there's any deals for me. Oh,

But what we're referring to here is intl.segmenter, The That should give you a hint.

make every single combination of those. Anyways, that's not what I'm we're talking about here. INTL segmentor will to the Vercel. So it's it's a request that you make from the client to the server. However, that which is helpful because on rerender, on the page things will go. So it says, alright. Well, this thing is 50 pixels high, 80 pixels,

let's see.

characters that are more than 1 So it's the CSS contain property.

you'll know that sometimes it splits into

6 or 7 characters, like the,

how many,

just outlines of families now because it's it's is

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

that is also Santa. You know? Like so Oh, yeah. It actually turns out that a lot of, like, Facebook, Apple, of the day.

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

Let's say you have a list of things and you wanna add on the correct what it does is allows you to it allows you to have more control over your state. And, therefore, harder. And each time, it gives me a new one.

And probably the easiest way to understand this is some emojis

sentences, 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 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, Yeah.

words or perceived Syntax Node 384, we also asked this question. I probably

word. So And so where you'll hear this word critical rendering path thrown around a lot JS,

multiple characters,

split very well put. Good job.

Yeah. I Man. Oh.

And then I I converted my Sanity app too using

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.

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, Wes

make ourselves embarrassed as of what we don't know about JavaScript, HTML, CSS, all that stuff. We ask each other interview style questions Oh, man.

So, my name is Wes Bos. I'm a developer from Canada. With me, as always, is Scott Tolinski. How are you doing, Scott? biffed it then as well. I It was how similar of a question there. Explanation of it. I think it exactly this this question.

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

Welcome to Syntax. We Scott a stumped episode for you today. This is where Scott and I will make, 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.

yourself is that there it creates a proxy.

Century's got you. And, head on over to century.ioforward/ Yeah. So the it I think it's close. I don't know

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

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.

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

Yep. Awesome.

only the code that is needed on a specific page

intelligently when it is needed.

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.

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

the it takes your application, and it will chop it up into

Yes. Yes. Absolutely.

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,

different bundles

will be run. So you might have an entire application,

so that

And code splitting is loading the code that is needed, but that Scissors. Damn. We did the

but tree shaking is getting rid of code that JS never used in your application before it's even bundled.

in that you're just trying to figure out what is needed where,

but,

Both paper.

We both 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.

Rock, paper, scissors,

Okay.

same. Okay. We're 4 4 ties so far. How is this possible? Which is statistically

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.

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

throw. Shoot.

Okay. 1st question.

Scissors. Alright. Ready?

3 for 3. That's a Romeo again.

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

shoot.

scissors,

but high. Again Unlikely. Last Node. Rock. Rock. Paper. Scissors. Scissors. Throw. Shoot. Oh. Alright. You cut my paper. Give me a question.

No.

critical.

Yeah. Interesting. And the last 1, compositing, Okay. Yeah. This is fun. Explain the concept of And what's interesting about them is that

Segmenter.

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

It creates all of the

go and grab some other resources

and then

in and grid Beautiful.

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.

to paint it, which is a a a later step JS well as with JavaScript the rows and columns of a grid, you sort of you name them. Right? Node one? You grid template area.

draws the painted layers onto the screen in the correct order. So those steps combine, bingo bingo. You got a website.

useful.

well, calculates the exact position. Yeah.

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 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,

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,

allows for smooth transitions,

to be able to access its values? 1500 people in, I,

if another aspect

of the screen need to be repainted.

may be to also intentionally 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, Beautiful.

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.

render tree construction,

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.

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

So layout is

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 It's just yeah. I I I work with too much media to have,

into Node render tree.

The render tree construction CSS rules to then apply

Interesting. But, like, 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

Oh, so it only Wes it goes don't use Scott split with a space.

Yeah. So, I used to be are the steps that need to happen before you, the user, see something on the page. Right? And that's when do you want one that's like, I know what that is, but

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.

both for the browser that application or compile it down into,

I'm I'm assuming turning the One, the use of ARIA live regions around announce announcing dynamic content changes.

to the left. It JS,

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 Alright. Catch you later.

rendering tree construction access,

ARM construction, 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,

the oh, that's actually I didn't even know that that was a thing.

modern web browsers.

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.

of like, it's, like, font size part of layout or font size part of paint?

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 my slide deck was using a node module to do

does stuff where the GPU is used, visually things

the screen,

how how does it do layout if, like, this the contents where the browser will figure out where tractor.

and rendered into DOM elements. And part of that parsing of the HTML

which means that it is now available

JS kind of let's see. Over handles overlapping elements and transparency, Handling 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,

Right? And the HTML will then 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

you can

from

You can subscribe and watch for changes of that value,

you can subscribe to them. You can observe them. Right? So with a writable,

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?

that value.

a already existing 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,

value. So,

the new state works inside of Svelte

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.

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 the function if you put if you define a function inside of a component, that function will be redefined every single time. Use memo, the stack of of,

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,

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.

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

focusing on the difference between writable, readable, and derived stores.

That's good.

like a reactive Additionally, describe how code splitting interacts with lazy loading.

is, are not just using spaces, and different languages also use saw that

You can write your own subscribe stuff. You have to use getters and setters. Either way, Svelte state Oh, Oh, that's very fun.

top down. Right? And then you have derived,

is pretty interesting.

Wes, you re you can read it. You could write it. You can output it. And, when that dialogue opens into the inputs and into the dialogue. And, likewise, pop over will, web development.

because, layout or contain paint is for when It includes only the nodes necessary for rendering the page, omits things like head script player library. Because let me tell you, all of the player libraries are garbage, and MediaChrome

How do Svelte stores compare 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

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.

Yeah. I was getting a little rambly there.

don't you want the stuff that falls?

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, I think that's correct.

I went on, like, a hydrangea kick where I propagated 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, the JavaScript event loop.

area.

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.

My understanding of tree shaking is that, let's say, you have Woo.

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? 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.

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, some of your social media videos. So you saying that you have a video on it, that first bit. Describe the inner workings of the JavaScript event loop, the roles of the call stack, callback queue, and microtask queue.

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

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.

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.

That package 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

okay. Sorry.

to a point where so funny. We use the same prompts,

Yeah. Yeah. They were all in the, like, the balloons. So Alright. There we go. That's the question.

Okay. We're so we're using Claude AI here, and, obviously, it's deterministic

a

Okay. Side note here. Our garden, guess what keeps eating everything in our garden?

10 files in it. And you might have a very specific import path to access

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

AKA,

either,

has

But Depends. Yeah. The code is the other way. Right? Like, you're shaking

Yeah. I saw that. Several 100, and a lot of them died. But now I have

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

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.

package that you've installed.

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,

them slightly.

Oh,

Well, grid template area is where instead of defining

Areas?

sections of my grid using grid template columns and Yeah. That's sick. I think for your emergency kit.

Yeah. That I think that what do they say? They say incomplete grid definition,

Grid template areas.

those named

when using them? callback queue, and micro task queue.

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

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. Define the names within the column definition.

What are what are some common pitfalls do you suspect? Yeah. I know. These are my 2 of my least favorite APIs, the fact that you need them and all. Quite honestly,

with let and const? That's good.

predefined

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

then you attach, like, maybe helper utility classes to those grid template areas, and then you modify

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

discontinuous ESLint.

named areas.

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

That's absolutely correct.

Grid template areas. Yes. Okay. Cool. Is that is that right so Yarn? Where you're like you could do, like, sidebar to state management solutions and other frameworks like React? what are some potential to watch out for when using them? Yeah. It's kind of an odd question or other question.

a variable that is declared later on in the scope can be referenced Yeah.

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.

Okay. This Wes fun.

a scope, like, inside of a function, based on different locale

The temporal dead zone is a period between,

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.

and the declaration of the variable. So Mhmm. With the var variables, Yeah. That's true. Bunchy. Oh, you know what? We Whatever you do, mate.

event loop, including the roles of the call stack,

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

Describe the inner workings of the JavaScript

iPhone. It will run on my Linux serverless

pnpm, considerations for using WebAssembly?

just fine. Yeah. Can you,

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.

allows you to take as soon as you enter into

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

almost containerize 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, from an external service, what needs to be updated on the page. But this is a way for you to explicitly tell the browser I probably have, like, essentially, because you're running it in the browser,

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

Node. It's not assembly code, but, like, that's the the whole idea.

on my syntax 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,

I wanna run that in a JavaScript environment. I don't have to worry about

and run languages request stays open for a certain amount of time. I forget what it is. I think it's, like, 2 the event

Just you don't have to. This is just a little follow-up. Potential security implications.

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

like, assembly Beautiful. That was very, From Zelinski Tavern.

talk on any potential security

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.

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