Hasty Treat - Stump'd

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, barracuda, Bos, and Scott, el toro Loco, Tolinski.

Welcome to Syntax. In this Monday, hasty treat, we're gonna be playing a game of Stumped. Now this is a game that we probably haven't played in, like, a year or so maybe. It was a game that Wes and I made up to try to stump each other with Internet questions. Yeah. It's been a long time. It has been a long time. It's been too long. Been too long since I've been embarrassed on a,

on a popular podcast. So, let's go I forgot about it. Somebody somebody, like, said, hey. You should do a stump. And I was like, oh, yeah. I forgot about doing stump. Oh, yeah. That exists. Yeah. Yeah. We should do that.

So my name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me as always is the Wes Balas. How are you doing, Wes?

I'm doing okay.

It's, like, 38 degrees here, which is a 100.4 Fahrenheit, which Americans get much hotter, I know, but it's hot for a Canadian here. I'm used to snow.

Yeah. Yeah. It's been in the hundreds up here too. Well, up here down here. I'm I'm way far down compared to you, but yeah. So this episode's sponsor is LogRocket.

Node if you've never used LogRocket, you wanna check it out at logrocket.comforward/ syntax, and you're going to be blown away by some of the cool stuff it does. Basically, it gives you a session replay of a bug error exception happening as it happens. So that means you can scroll scrub through the video. You can get your network request as they happen. You can get the console log as it happens, the Redux store, or any of those cool things that you have never seen from an error and exception handling tool. This is not just like some bread crumbs to try to find the problem. This is literally how the problem happened, giving you unprecedented access to solve this problem. So check it out at logrecorddot comforward/syntax and try it out today. You're gonna get 14 days for free with that LogRocket URL. So check it out.

Stumped.

Yeah. So Wes are using this 30 seconds of interviews .org, which has a whole bunch of, like, like, little little, like, quick little gotcha questions. And not necessarily gotcha questions, but just interesting things, and they vary from easy all the way up to hard.

They are what what are the categories? HTML, CSS, JavaScript, React, Node, and Sanity.

And we just wrote a little snippet that we paste into the console that will randomly grab 1 of the 300 questions on here, and the other person has to attempt to answer it. Wes will make fools of ourselves. Fools.

So, that's it. Do you want a rock, paper, scissors? For whoever wins gets to ask the 1st question,

I win. I papered his rock. It's so hard with the latency. Wes we what happens is we each end up going slower each consecutive time because we're both trying to account for the latency.

Okay.

My brain skills are are really firing on all cylinders today as you can tell. Alright. My question here is the intermediate one. It says, what is the difference between

HTML and React event handling? And I I went into the answer just to get a little bit more, clarity on this. But, they they mean what is the difference between, inline event handlers on a button, and inline event handlers in React JSX? So you on click, on submit, things like that. What's the different Node a couple differences between the 2?

Aren't they not the same? Like, aren't the the React ones just their own thing, synthetic events that are, like, their own event system that, like, mirrors the Dom one. Is that correct?

That is correct.

It's not that's not on here, but you're right about that. But that's that's not what it says here. There there are some actual Woah. Woah. Woah. Woah. Woah. Physical

Yeah. Let me let me keep going here because, oh.

I'm gonna get I'm gonna give you a fail on that. And that's okay because, like like, how often do you write in, like, event handlers on a on, like, a button. Right? Very probably never. Never. No. Before that, I used jQuery.

There you go.

One difference is that, React camel cases its event handlers.

So it would be on click with a capital c in React. And on HTML, it's all lowercase.

The other difference is that, HTML uses double quotes on the attribute or or you could also use single quotes as well. And then, also, React, you pass it reference to the function without parentheses.

And in HTML, you actually inside the quotes, you put the parentheses on the end. That's a a sort of a gotcha that that people have.

Yeah. Otherwise, it runs in the JSX.

Yeah.

Yeah. I think that's true of any function, though, not just a ESLint event handler, 30 seconds of interviews Scott or .org.

So, okay. But but it no. That's not true in HTML elements. Like, if you put a handle click parenthesis in a in a attribute in HTML, it's not gonna run until the the event handles. Oh, no. No. I know. I'm saying like

I'm sorry. What I what I meant is that React.

No matter what what what you put a function on anything, it's going to run. That's true. Regardless in React. Yeah. Okay. So, that's big big f for me. Wes, I'm gonna get you Node here. Popping it open.

This is an intermediate one, but this doesn't seem this seems like an easy one.

What are JavaScript data types? Not like what are they, but, like, what are like, what is a data type? What is a data type? Because it doesn't say what are the.

Although sorry. Like, is it asking what the what the types are in JavaScript? The

it's it just says what are JavaScript data types, but it looks like it's looking for what 7 data types are.

Oh, okay. Alright. This is I always like doing this Node, and I always screw it up.

Number, string, object, undefined,

null You have 2 more. Symbol

and Boolean.

That was not as hard. Not as I've I've asked you that on the podcast, and you rattled them off. No problem. I had to really think about that.

Alright. Next question for Scott.

In which states can a promise be?

So I'm trying to think if there's, like, any, any gotchas with this.

What states can a promise be? It can be resolved, rejected, can be, I don't know, it's like a if you throw, does that just that just rejects it? Yep.

The resolved, rejected, initialized? I don't know the the language here. Yeah. Is that it? I'll give it to you. Yeah. So that's it's it's pending, which it says initial Scott. So that's initialized.

It's like, fulfilled, which is resolved, and rejected, which is rejected. Nailed it. I'll give you a 10 out of 10. Cool. Even though I got the words wrong, it's cool. I'm I'm into it. That's

fine. Okay. We have an intermediate question for Wes, and this is in the topic of HTML.

The discuss the differences between an HTML specification and a browser's implementation thereof.

Oh,

difference between HTML specification

and a browser's implementation thereof? Mhmm. I think you I think this one might be easier than you're, putting in your brain.

So the the spec is just what the standards body and the people from the browsers have, come together and propose and very much like the CSS that we have, and it's all been approved as to how it should work. And then the browser implementation is actually how they've implemented it. And those are supposed to line up, but sometimes they don't, and there's cross browser inconsistencies.

Is that good?

Yes. I think that's perfect. Wes don't know. I mean I mean, there's the body and then how how it's the spec and then how it's implemented. I don't know. It's not really too deep of a Yeah. Yeah.

No. That was I thought that was gonna be, like, much harder. I guess this does have some things that say, like, define the rules that must adhere to an owner, be valid according to the specification.

It's like a lot of words to basically say the same thing. Come on. That's a silly question. It's a silly question. Come on. Who who's who's asking that in a interview? You know? Like, oh, do you really know HTML? Because you know this weird thing.

Oh, this is a easy React question. What is a stateless component?

A component that does not have state. In the past, a stateless functional component would have just been on the function component, but now with hooks, they have a state. So a stateless component is literally just a component that has no state, and, it's a function without a hook.

It's a a dog without a collar. It's, you know, it's a mason jar without some cold brew in it.

I, I'll I'll give you that. I I think the one of the keys there, if you're getting this interview question, is, it's a function that takes in props and returns the same output 100% of the time, guaranteed, regardless of anything else. So given that it's it's a pure function. Right? Given that it takes in data, it always returns the exact same thing. Yeah. I'm gonna give you that. Correct. There's no side effects.

Okay. This is a good one to go along with this. I don't think this one's particularly difficult even though it's listed as hard, but it's a good good one to go along with the the last one we just did. And what is a pure function?

Oh, there you go. A pure function is a function that, given its inputs, will, a 100% of the time, always return the exact same output. And that that function does not have any side effects, which mean that it goes outside of the function to update stuff or to fetch data or anything like that. It it simply just depends on what's handed to it and always returns the same thing. Yep. Always returns the same thing. That's it. Nailed it. So this is an intermediate one. It's gonna be a bit a little bit of mouth coating, but you just have to tell me what the output of it is. So you've got 3 variables, a, b, and c.

The first variable a is is an array where the items are 1, 2, 3. The 2nd b is also an array. Same Node. Items are 1, 2, 3. So so far, you have 2 variables. Both of them are their own arrays with 1, 2, and 3 items in it. And then you have, c variable c, where it is a string of 1, comma, 2, comma, 3.

So you've got an array of 123, another array of 123, and then the 3rd string of 1 comma 2 comma 3. Got it? Got it. Now the question is here.

There's there's it's a 2 parter.

What is the output of a equals equals c, and what is the output of a equals equals b? So do you want me to, Node. I got it. I think they're both false. I think they're both false.

Is that your final answer? I

you know, I don't.

So, I would I would think that they are both false just offhand in my brain space when I try to visualize this.

Obviously, the the way that this is all presented is lining up for the the first one to be true and the 2nd one to be false for some reason. But I'm gonna go with false false because that's what my heart's telling me.

Alright.

Incorrect. The first one It is true, false. Is true. So I didn't well It it JS true, false. Can I get bonus points for, at least guessing that that would be the the final downfall? Yeah. You shoulda you shoulda answered it that way.

You trusted my partner. Why. It was double equals, and double equals only performs a check on the values and not the there you go. Double equals. The type. So it converts the array to a string before it before it compares. Man, Double equals. It'll get you. The second1 is false because, 2 arrays, even though the values are the same, it doesn't do a deep check. It just checks for reference of objects. Yeah.

They warn you That's good. When you're learning double equals, that'll get you. And you might just be on a podcast doing a game show, and that's when it gets you. I gotcha.

But that this is I think the reason you got that wrong is because you probably don't use double equals, and so you don't even know the inconsistencies

of using double equals because you just don't use it. Use it ever. Yeah. Yep. Yep. Yep. Yep. This is a good one. Although, man, a lot of these hard ones, they just don't feel hard enough for you, Wes. I'm trying to stump you, and I know you're not gonna get stumped by this. So here's Node. What is memoization?

Oh, that's where a function remembers the values, so that when it runs the 2nd time, it doesn't have to recompute those values. Yeah. What's a good word for that that,

I would like to it's in the good to hear sections.

Something that's good good for me me to hear to make sure you understand this concept.

Yeah. So, like, maybe we should give an example for people listening. If you've got like a, I just wanna hear a word. There's a specific word I'm looking for. It's a word. Like, if you have, like, a function that, does some sort of heavy process of of doing some math or even, like, I've done it in the past where you have, like, a like, a fetch request. And if somebody does a fetch request for product a, b, c, and then someone does another fetch request for product e, f, g, and then a 3rd person comes along and and ask for a, b, c again, it can go, oh, I already have that. I I memoized it. I remember it. And you can, like, store that in, like, a map or an object or something like that. You are just dancing around on this work. You're it's like it's like the word What's the word? JS on the floor, and you're just, like, leaping over every single time it's directly in front of you. Caching.

Caching. Yes. But, yes, you are you are on point. Yeah. Your answer described it fine, but they they really wanted to hear that word caching, and I you know, Wes, I just did New York. But, no, you you got it. You got it right. So

Alright. Next question for mister Tolinski.

A React question.

How do you pass an argument to an event handler in React? So you have, like, a click handler, and you wanna pass an argument to a method.

You have to. Just kinda comes back to the Yeah. Fact. So if you just have Earlier, we talked about. If you just have parens at the end of your function, it runs. So you've Scott, there's several ways you you can the way that I'm doing it is I'm writing an inline arrow function inline anonymous arrow functions to just simply call because that will love my friend when clicked.

Beautiful. Do you know another way that is very not so popular anymore? Find.

Because I nailed it. Yeah. I got a hard HTML question for you, and that is what is HTML 5 web storage? Explain local storage and session storage.

So what is they're looking for the differences between local storage and session storage. Oh,

I've looked this up once. I've never used session storage. I remember, like, finding it in the dev tools. I was like, oh, what's that? I'm gonna guess that the difference between local storage and session stories, they're both key value stores.

However, local storage will stay with the browser, but session storage will be cleared on, like, a on, like, a restart of the browser or something like that.

You're just about there, but I'm I'm gonna need some clarification on when exactly a session storage, is cleared. Is it when the browser is closed?

When the tab is closed, I'm gonna say. So when the tab is closed, not when the browser is closed. No. When when no. When the entire browser is closed. Like, when you quit the you quit the browser, you reboot your computer,

something like that. You're smiling. Let's say you have a Chrome rendering bug preventing you from looking at the screen. No. The answer is Wes, yeah. When the tab is closed you're very close.

Not when the browser JS closed, although that will do it. It's just not the the, you know, the main one. No. No. But, like, if you if you close the browser you go close the website and go back, that session storage will be will no longer be there? Just when the just when the tab itself is closed.

And that's probably also handy. I wonder if you have 2 different tabs of a website open if that would be separate session storage. That's a great question. Very well maybe. I bet. I bet.

We should oh, cool. Well, I learned something. I got stumped, though.

Stumped.

Stumped. Alright. Is that it? That's it. Alright. That was fun. We should we should do that again. Yeah. We should do this. It was maybe we should,

actually do this again. That'd be fun. Yeah.

I feel like we need some more, like, real hard ones. Yeah. We need to find a new pool because just about all of these, I was like, he ain't gonna answer this. I've heard him talk about this before. So

Yeah. We need some, like, expert level, like, intentionally malicious questions.

Malicious. Get us.

Yeah. So in in Douglas Crockford's, you know, JavaScript, he or or eloquent JavaScript on page thirty four, he says what?

Eloquent Java wasn't that Eloquent? Eloquent?

Well Wes, yeah. Crockford did, what did he do?

JavaScript's good part. Yeah. The good part. No. Eloquent JavaScript is Martin Haverbeck.

I didn't know that. What book did Stojan Stefanov?

JavaScript design patterns. That was his book. You know what? It's funny. When I I was saying that, I I was like, JavaScript, the good parts Wes coming out of my mouth, and I was like, no. Wait. That's not JavaScript, the good part. It's all good. I was like, well, yeah, I corrected myself into that. It's not the first time you second guessed yourself today, Scott. I trusted my heart twice, and my heart has led me astray.

Alright. Let's wrap it up here. Thanks so much for tuning in, and we'll catch you on Wednesday.

Peace.