277

August 24th, 2020 × #JavaScript#React#WebDev

Hasty Treat - Stump'd

Wes Bos and Scott Tolinski quiz each other on web development questions in a game called "Stumped" with silly banter

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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.

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

Wes Bos

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.

Scott Tolinski

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?

Wes Bos

I'm doing okay.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Stumped.

Wes Bos

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.

Topic 1 02:27

Wes and Scott play game 'Stumped' to quiz each other on web dev questions

Wes Bos

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

Topic 2 02:43

Categories for questions: HTML, CSS, JavaScript, React, Node, Sanity

Wes Bos

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.

Topic 3 03:03

Wes wins rock paper scissors to ask first question

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

Okay.

Scott Tolinski

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

Topic 4 03:31

Difference between HTML and React event handling

Wes Bos

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?

Scott Tolinski

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?

Wes Bos

That is correct.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

There you go.

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Yeah. Otherwise, it runs in the JSX.

Scott Tolinski

Yeah.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Topic 5 05:55

What are the JavaScript data types

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

Number, string, object, undefined,

Scott Tolinski

null You have 2 more. Symbol

Wes Bos

and Boolean.

Wes Bos

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.

Wes Bos

Alright. Next question for Scott.

Wes Bos

In which states can a promise be?

Topic 6 07:01

What states a promise can be in

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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

Topic 7 07:51

Differences between HTML spec and browser implementation

Scott Tolinski

Oh,

Wes Bos

difference between HTML specification

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Is that good?

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Topic 8 09:18

What is a stateless component in React

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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?

Topic 9 10:10

What is a pure function

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Topic 10 11:40

Compare equality of array and string

Wes Bos

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.

Wes Bos

Is that your final answer? I

Scott Tolinski

you know, I don't.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

Alright.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 11 13:09

What is memoization

Wes Bos

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

Scott Tolinski

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?

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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

Wes Bos

Alright. Next question for mister Tolinski.

Wes Bos

A React question.

Topic 12 15:15

How to pass argument to event handler in React

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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

Topic 13 15:54

Explain local storage vs session storage

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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?

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

Stumped.

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

Malicious. Get us.

Scott Tolinski

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

Wes Bos

Eloquent Java wasn't that Eloquent? Eloquent?

Scott Tolinski

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

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Wes Bos

Peace.

Share