Hasty Treat - Stump'd

and returns the same output

and, it's a function without a hook.

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,

anything else. So given that it's it's a pure function. Right? Given that it takes in data, it always returns

it's a function that takes in props HTML and React event handling? And I I went into the answer just to get a little bit more, 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.

100% of the time, guaranteed, Stumped.

a dog without a collar. It's, you know,

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, This is an intermediate one, but this doesn't seem this seems like an easy one.

the exact same thing. Yeah. I'm gonna give you that. Correct. There's no side effects.

It's a

any gotchas with this.

So

I'm trying to think if there's, like, any,

The discuss the differences between an

resolved,

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

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.

I don't know, it's like a if you throw, does that just that just rejects it? Yep.

can be, So what is they're looking for the differences between local storage and it's a mason jar without some cold brew in it.

rejected,

Alright. Next question

undefined, without parentheses.

JavaScript

In which states can a promise be? 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, and

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

What is a data type? Because it doesn't say what are the.

data types?

Not like what are they, but, like, what are like, what is a data type? Okay.

Number, string,

null You have 2 more. Symbol

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

What are Obviously,

Boolean.

for Scott.

I've I've asked you that on the podcast, and you rattled them off. No problem. I had to really think about that.

and try it out today. You're gonna get 14 days for free with that LogRocket

URL. So check it out.

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

Fahrenheit, which

I'm doing okay.

38 degrees here, which is They

Bos, and Scott, el toro Loco,

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

Tolinski.

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

It's, like,

syntax,

Node if you've never used LogRocket, you wanna check it out at logrocket.comforward/ My name is Scott.

a 100.4 and the other person has to attempt to answer it. Wes will make fools of ourselves. Fools.

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

soft skill, web development, the hastiest, the craziest, the tastiest web development

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing,

Welcome to Syntax. In this Monday,

unprecedented access to solve this problem. So check it out at logrecorddot it just says what are JavaScript data types, but it looks like it's looking for what 7 data types are.

Americans get much hotter, I know, but it's hot for a Canadian here. I'm used to snow.

treats coming in hot. Here is Wes, barracuda,

Stumped.

comforward/syntax

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?

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.

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.

the values,

the inconsistencies Malicious. Get us.

where a function which mean that it goes outside of the function regardless of

product a, b, c, and then someone does another fetch request for product does some sort of does not have any

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

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, That was not as hard. Not as

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 what the standards body and the people from the browsers have, in React? So you have, like, a click handler, and you wanna pass an argument to a method.

you have, like, a like, a fetch request. And if somebody does a fetch request for on the attribute

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,

remembers

Alright. Next question for mister Tolinski.

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

Caching. Yes. But, yes, you are you are on point. Yeah. Your answer described it fine,

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

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

A React question.

Oh,

So the the spec is just Wes are using this 30 seconds of interviews .org, which has a whole bunch of, like, like, little okay. But but it no. That's not true in HTML elements. Like, if you put a handle click parenthesis I didn't know that. What book did Stojan Stefanov? in HTML, it's not gonna run until the the event handles. Oh, no. No. I know. I'm saying like That is correct.

HTML specification I'll I'll give you that. I I think the one of the keys there, if you're getting this interview question, is,

actually how they've implemented it. And those are supposed to line up, but sometimes they don't, and there's cross browser

Because you know this weird thing.

Is that good?

difference between and inline event handlers in React JSX?

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

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? but you just have to tell me what the output of it is. So you've got 3 variables, a, b, and c.

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

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

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.

and a browser's implementation thereof.

putting in your brain.

The first variable a is is an array where the items are 1, 2, 3. The 2nd

side effects,

but it's a good good one to go along with the the last one we just did. And what is a pure function? that will love my friend when clicked.

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

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.

of 1, comma, 2, comma, 3.

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

the exact same output. And that that function

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

Oh, there you go. A pure function is a function that, given its inputs, will, a 100% of the time, always return Yeah. We need some, like, expert level, like, intentionally double quotes

React camel cases its event handlers.

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.

they they mean what is the difference between, or or you could also use single quotes as well. And then, also, React, you pass it reference to the function to an event handler is

So you on click, on submit, things like that. What's the different Node a couple differences between the 2?

clarity on this. But,

Yeah. I think that's true of any function, though, not just a ESLint event handler,

Yeah. Otherwise, it runs in the JSX.

So,

oh.

One difference is that, wasn't that Eloquent?

There you go.

their own event system that, like, mirrors the Dom one. Is that correct?

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

And in HTML, you actually

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,

Aren't they not the same? Like, aren't the the React ones just their own thing, synthetic events that are, like, Yeah. Let me let me keep going here because,

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

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

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

I'm gonna get I'm gonna give you a fail on that. And

in a in a attribute It's like, fulfilled, which is resolved,

The other difference is that, HTML uses

that's big big f for me. Wes, I'm gonna get you Node here. Popping it open.

Yeah.

inline event handlers on a button,

How do you pass an argument Eloquent Java c variable c, where it is a string

arrow functions to just simply call because

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 HTML specification

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

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.

yeah. When the tab is closed you're very close.

Explain local storage

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

Eloquent? heavy process of of doing some math or even, like, I've done it in the past where

and session storage.

session storage. Oh,

JavaScript design patterns. That was his book. You know what? It's funny. When I I was saying that, I I was like,

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

he says what? 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

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

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

Well Wes, yeah. Crockford did,

You're just about there, but I'm I'm gonna need some clarification on when exactly a session storage,

you reboot your computer, I, Oh, that's

Yeah. So in in Douglas Crockford's,

Peace.

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

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

And that's probably also handy. I wonder if you have 2 different tabs of a website open We should oh, cool. Well, I learned something. I got stumped, though.

what did he do? What states can a promise be? It can be

but session storage will be cleared For whoever wins gets to ask the 1st question,

is cleared. Is it when the browser is closed? 30 seconds of interviews Scott or .org.

like, a on, like, a restart of the browser or something like that.

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.

you know, JavaScript, he or or eloquent JavaScript on page thirty four, it's

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,

malicious questions.

if that would be separate session storage. That's a great question. Very well maybe. I bet. I bet.

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

What is the output of

and double equals only performs a check on the values and not the 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, 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

2 arrays, even though the values are the same, it doesn't do a deep check. It just checks for reference of objects. Yeah.

Is that your final answer? I

So,

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,

a equals equals c, You trusted my partner. Why. It was double equals,

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.

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.

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

you know, I don't.

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.

Alright.

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

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.

So, that's it. Do you want a rock, paper, scissors?

quick little gotcha questions. And not necessarily gotcha questions, but just interesting things, and they vary from easy all the way up to hard.

And we just wrote a little snippet that we paste into the console that will randomly grab 1 of the 300 questions

on here,

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