639

July 12th, 2023 × #JavaScript#Web Development#Interview Questions

Stump’d × JavaScript × GraphQL × Memory Safety × Web History

Scott and Wes use AI to generate challenging interview questions and quiz each other on web development topics ranging from JavaScript to CSS history.

or
Topic 0 00:00

Transcript

Wes Bos

Welcome to Sidtacks. Today, we've got a stump for you. This is where Scott and I will try to stump each other with interview questions.

Topic 1 00:20

Scott and Wes use AI to generate interview questions to ask each other

Wes Bos

We are going to again, last time we coded up a little AI prompt and rid. Use that to generate all the questions because we have pretty much run out of interview question websites over the years, rid. And it seems that the AI is the endless fount of really good questions and answers. So let's Get on into it. I I'll start it off here with the first one for Scott.

Wes Bos

The first question is, rid. In which year was JavaScript introduced? And I have a rid. Set of options here that I'm able to give a, b or c, and I'll say I'm not going to say them by default, but if you rid. Say, alright. I need a hint, and I'll give you the the possible options.

Scott Tolinski

Yeah. I I think for this one, because it is such a I I mean, I could guess, but I'm not gonna be correct. So if I had options, I think I would do better.

Wes Bos

Alright. You want me to give you I'll give you the options. Rid. 1993, 94, or 95.

Scott Tolinski

Those are all too close. I was hoping they'd be a little bit more spread out.

Scott Tolinski

I am going to say 1995.

Scott Tolinski

Got it. Nailed it. Do you know why I went with 90.95? Why? Was because that's what I was going to guess before you gave me the prompt.

Scott Tolinski

Rid. But I wasn't confident on that. I was maybe at a 5 out of 10 in the confidence game. So

Wes Bos

yes. It was created by Brendan Eich, rid Who worked at Netflix at the time.

Wes Bos

He's a creator of JavaScript. He worked at Netflix? Oh, not Netflix.

Wes Bos

Netscape.

Wes Bos

Imagine you worked at net I don't think Netflix was around. I don't think it was around in 2005, let alone 1995.

Wes Bos

That's hilarious. I wonder when was, Okay. There's there's a follow-up question. When was Netflix Netflix.

Scott Tolinski

Launched?

Wes Bos

2002. Wow. I'm surprised.

Scott Tolinski

97. No. I don't believe that. Who'd you ask that? Did you ask chat g p t that? No. That's,

Wes Bos

it's from Wikipedia.

Scott Tolinski

What did they even do? Because DVDs really didn't That was so Netflix was created before Google? Rid No. Based rental business in 1997.

Scott Tolinski

Was it just VHS?

Topic 2 02:39

Discussion on the history of Netflix launching DVD rentals before streaming

Wes Bos

Was founded in 98. Like, yeah. When was DVDs? Rid Down the rabbit hole we go. Yeah. The rabbit hole. A DVD was invented in 95, so there's no way the DVD was ready for rental in 97. Rid So it must have been VHS. What a what a wild thing. I I would have never have guessed that.

Scott Tolinski

That's interesting. Alright. Here's a question for you, Wes.

Scott Tolinski

Rid Which HTTP status code is typically returned by the server when a requested resource is not rid Found. Oh, come on. That's too Oh, that's easy one. 404.

Topic 3 03:04

Question on which HTTP status code indicates a resource was not found

Scott Tolinski

Yep.

Scott Tolinski

That's easy. Too easy.

Wes Bos

Yeah. With with this prompt, you rid. You can sort of come back at it and say give me an extremely hard one about x, y, or z. Okay. Let me say I I'm saying give me a harder one about rid. HTTP status codes.

Scott Tolinski

Okay.

Scott Tolinski

So which HTTP status code indicates that the client must authenticate itself To get the requested response.

Scott Tolinski

Oh. Oh, I know this 1.

Wes Bos

40 rid 403 unauthorized?

Scott Tolinski

It's, would you like the options?

Wes Bos

No. Yeah. Give me the options. Okay. That's this is good because because I don't wanna just hear the answer yet. Okay. Options are 401,

Scott Tolinski

403, and 409.

Wes Bos

It's 409.

Scott Tolinski

It's 401.

Scott Tolinski

I I I just had to write that, like, a a bunch of times when I'm doing the,

Wes Bos

You know, what is what is the 409

Scott Tolinski

status code? That's a great question. I don't know. Never use it. One status code conflicts

Wes Bos

Indicates that the request could not be processed because of a conflict in the request, such as requested resources not in the expected State or the result of the process request would create a conflict with the resource.

Wes Bos

Oh, never used that one before. Yeah. I have not either. Rid. What is a pseudo class, and could you give an example of 1?

Scott Tolinski

Yeah. A pseudo class, rid As opposed to like a pseudo element, I suppose. A pseudo class would be like hover, to be able to select something if its current status is being hovered.

Wes Bos

Is that correct? Is that a class or pseudo class yet? A pseudo class is a keyword that can be added to a selector to style elements that are in a particular state rid or positions such as hover, which applies states when the user hovers over an element.

Scott Tolinski

Got it. Got it. Rid. Got it. K. JavaScript question.

Topic 4 05:18

Question on the JavaScript function to delay execution

Scott Tolinski

What JavaScript function allows you to delay the execution of a function rid a certain number of milliseconds has passed.

Wes Bos

Set time out. Some I I find like Some of these are too easy. We gotta I gotta figure out how to give it even harder ones. Yeah. It tells me

Scott Tolinski

a difficulty level medium. I'm gonna say no more medium ones because we're not We're not medium.

Wes Bos

Okay. We're not medium. So this one's this one's telling me this is a very hard what's the difference between a media query and a conditional statement in JavaScript? Rid. That makes no sense because the answer is 1's in CSS and one is in.

Wes Bos

That's no. Alright. We maybe we need to tweak this prompt. Rid Yeah. The joys of AI here. Who? Oh, I like this one. Who first proposed the idea of using separate style sheet language for the web And when? Who

Scott Tolinski

by name, or can I give you a brow it it looks like the answer is

Topic 5 06:13

Question on who first proposed CSS as a separate style sheet language

Wes Bos

rid? A name

Scott Tolinski

and a year. Oh, I don't I don't know a name here, but I would imagine It is an Internet Explorer at some point, so maybe somebody that worked at Microsoft, but I I'm not I'm not sure.

Wes Bos

Rid can I get some options here? The first answer is in 1994 while he was working at CERN with Tim Berners Lee, rid b, Brendan Eich in 1995 when he was developing JavaScript or, c, John Resig in 2006 While he was working on the jQuery library.

Scott Tolinski

You know what? I'm going to say Brendan Ike only because that year.

Wes Bos

The answer is rid. Haikon Loong Lee is a so I'm just looking up his Wikipedia.

Wes Bos

Rid A Norwegian web pioneer and standards activist, CTO of Opera Software Okay. Until the browser was sold to its new owners in 2016.

Wes Bos

He was best known for developing cascading style sheets Mhmm. While working with Tim Berners Lee and Robert Kai Kilo rid At CERN in 1994.

Wes Bos

And CERN is the oh, wow.

Scott Tolinski

Rid. European Organization For Nuclear Research? No. That doesn't You don't know CERN? No. I don't think I do. They do that, the big, hadron collider. That's Sir. Oh. They're, like, slam and particles together.

Wes Bos

And they develop CSS?

Scott Tolinski

Yeah. Well, first, they had to slam Style sheets and browser. Style sheets together.

Wes Bos

Well, that's interesting that it was proposed to do a separate style sheet Rather than do it inside of your HTML, I guess, or or maybe even like, was CSS only in line at first?

Scott Tolinski

Who knows? And if only we could find that out. Alright. Next question is, which of the following statements about JavaScript's Strict mode are true. Okay? So which This is good. Which of the following are true? Use strict makes All global variables local to the script.

Scott Tolinski

Use a strict enables additional JavaScript to debugging features.

Scott Tolinski

Use strict changes previously accepted bad syntax into real errors.

Wes Bos

The third one, use script. Use strict rid. Makes previously accepted bad syntax into actual JavaScript errors. Ding, ding, ding. Oh, that was a good one. Yeah.

Wes Bos

Not bad. Oh, so also with this AI is I'm able to input your answer and see if it's good enough, which is kinda cool. So my question here is, rid. What is event driven programming in Node. Js, and how does it work? In Node. Js? Yeah. And we had one similar to this on the last dump, I think. It's not exactly a Event driven programming. I don't know. It makes me think of signals,

Scott Tolinski

but I don't I don't know what kind of answer this is looking for. Well, Shoot me your answer. I'll give it to the robot and see what they think. Event driven programming is programming where you're rid Using events as the main form of man, I don't I don't know a good way to distill this thought other than just saying, Hey. It's by responding and listening to events, which doesn't feel like

Topic 6 09:13

Discussion on event driven programming in Node.js

Wes Bos

a complete Alright. I gotta rid say event driven program is responding and listening to events. Let's see what it tells you.

Wes Bos

You are correct.

Wes Bos

I oh, no. No. It's not.

Wes Bos

Rid. Basically, I just I apologize for this mistake in my previous question. No. You're right. So the answer here is event driven programming is a programming paradigm where the flow of the program is determined by events rid. That are received by the program at runtime.

Wes Bos

It works in Node. Js by using the event loop and continually listens for events that are associated with callback functions. Rid Oh. Events are that's the whole event loop behind JavaScript. Right? You throw stuff on the event loop. When it when it comes back,

Scott Tolinski

rid. You are resolved. Yeah. That makes that makes way too much sense. Okay. Here's a good one. In GraphQL, how do you mark a field or type in the schema as deprecated?

Topic 7 10:36

Question on JavaScript memory safety and managing memory

Wes Bos

Rid. It's at deprecated on the field. So you would do it After the field name? Correct. Ding ding ding ding ding.

Wes Bos

Alright. Here is a good one. What was the primary motivation for the development of XHTML, rid and how did it differ from HTML?

Scott Tolinski

XHTML.

Scott Tolinski

You know what? I'm guessing that the XHTML rid was, created to I'm I'm basing this on the assumption that XHTML is XML because, rid That is what I understand about x HTML. And if it's not, then this this whole answer is incorrect.

Wes Bos

So, basically, it was developed to pass data rather than structure. The answer here is the primary motivation for the development of X rid was to provide a more stricken standardized version of HTML that was compatible Yeah. With HTML, While HTML was more loose in browser specific markup language, I think that's pretty that's pretty close.

Wes Bos

Yeah. Yeah.

Scott Tolinski

I'm not gonna give myself credit for it. I'm I'm not I'm not feeling I'm not feeling positive about it. Alright.

Scott Tolinski

In JavaScript, if you create a new my object rid From a constructor, my constructor, which of the following is true? Okay. K. So you've created a new object rid. From a constructor, which of the following is true? My object dot underscore underscore proto underscore underscore underscore rid score is equal to my constructor.

Scott Tolinski

My object I'm just gonna say dot proto. K. Yeah. My object dot proto is equal to my constructor rid dot prototype.

Scott Tolinski

My object dot proto is equal to my constructor dot underscore underscore proto.

Scott Tolinski

So we're talking about is the prototype or the my object dot underscore underscore proto equal to my constructor, My constructor prototype or my constructor underscore underscore prototype?

Wes Bos

It is constructor prototype because Yes. Good. The first one would be the first one is the class itself. And if you want something to be inherited, you put it on the prototype.

Wes Bos

And then the underscore underscore proto is how you literally reach into something that has already been instantiated And to modify its prototype.

Scott Tolinski

Yes.

Scott Tolinski

Beauty. Oh, that was a good one. Rid I like that. I'm actually impressed because just even just having to say all of those things was a bit much. You did you did good summarizing it.

Wes Bos

Oh, this is a weird one. This one seems kinda cheap, but I'm gonna do it anyway. Okay.

Topic 8 13:21

Discussion on JavaScript prototype inheritance

Wes Bos

Okay. What is a type eraser in type script. And how does it affect the generated JavaScript code? What is a type

Scott Tolinski

eraser? And how does it affect the JavaScript code? I've never heard of this.

Scott Tolinski

Let me just let me take a wild stab in the dark. A type eraser, and how does it affect the JavaScript code? How would This is a trick question. Does it not affect the JavaScript code? I'm gonna say a type eraser removes the type and does not affect the JavaScript code.

Wes Bos

Yeah. It's it's a long way of saying when TypeScript is compiled.

Wes Bos

It removes the types because JavaScript doesn't understand the types at all, right? So the process of compiling it, I guess it's called type erasure.

Scott Tolinski

Very nice. Alright. Next question here. In TypeScript, which syntax can be used to define a user defined TypeGuard.

Wes Bos

In oh, that's I know this one because I just wrote a I just recorded a video on it. So in TypeScript, rid when you write a user defined type guard, you write a function that returns true or false. However, the return type All of that function is not a boolean. The return type is is. So you would say like you take in animal And you say animal is pet. Or in our case, we have a food type that could be a sandwich or a pizza, And we needed to write a type guard that says this food is pizza, so we needed to narrow it down from rid food, which could be a sandwich or a pizza down to Yes. All the way down to just pizza. What an answer. Wonderful. Yeah. You know you know what's a funny thing? We'll talk about that really quickly. Is that Filter in JavaScript does not type guard.

Wes Bos

So, like, let's say you had, like, an array of rid Strings and numbers and you've filtered for just numbers.

Wes Bos

Simply filtering alone is not enough to narrow the type from string and number down to just number. So you have to say the return type of your filter is number, rid. And then that will make TypeScript smarten up. And it's kinda weird that it it doesn't do that, but I guess it's the

Scott Tolinski

limitation of TypeScript in its, like, static nature. Rid. Mhmm. There's, like, certainly times when I'm writing TypeScript where I'm like, I feel like you should understand that this can only be a string. You should get it. Right? We all get it.

Wes Bos

Oh, here's a good one. This is something we have a show on

Scott Tolinski

that's coming up. What is a closure in JavaScript, and How is it used? Yeah. And this is one of those concepts that I should know, but I in practice, I almost never never really, rid. Really care too much about a closure. A closure is a function that could have when I was studying for things, I could have told you exactly like the, The parroted version that you'd get off of a how to site.

Topic 9 16:07

Question on closures in JavaScript

Scott Tolinski

A closure is a function that returns a function with its own scope. Rid. Yeah. Yeah.

Wes Bos

That's a pretty good way of putting it, where you have a function, And then inside of that function, you have variables, and then you return a function from that.

Wes Bos

And that inner function is able to access rid. The outer scope of the parent function so that you can sort of carry around data rid by calling that function over and over again. So the big example is always like a counter. Right? You have a function called make counter, and then that returns an increment function. And every single time you run that increment function, it still has access to this invisible variable of the upper scope.

Wes Bos

We have had a card on it for, like, rid. 2 months probably, and, we should probably

Scott Tolinski

probably do that one. Yeah. I I think that's one of those topics, especially, like, a lot of developers, rid. They hear the term, and it sounds like a jargony type of term, or they see it being used. And it's it's like, alright. When am I actually using this in my own JavaScript? Is ready. Right? Alright. Next one is which of the following internal Node. Js modules provides asynchronous rid. File IO.

Scott Tolinski

I'm not gonna give you them because then you're gonna get it. Okay. Which of the following

Wes Bos

provides asynchronous File IO? Rid. That's the f s forward slash promises library. Sure.

Scott Tolinski

Or just f s. But, yes, f s. Yeah. Well, FS.

Wes Bos

Yeah, I guess so. Because even, like, the callback Because FX, it's like a Yeah. The FS callback functions are still asynchronous. Right? But, they just they're just callback based instead of being promise based.

Topic 10 18:22

Question on Node.js modules for asynchronous file I/O

Wes Bos

There is but they also have a set of in. Synchronous functions as well, which is it's it always frustrates me when you see people do little demos, and they always use the write file sync. Rid FS. WriteFileSync just because then they don't have to get into callbacks or whatever. And it's bad practice to do that. You shouldn't be using that because it locks up your entire application.

Wes Bos

So it's much better to use the await rid FS dot write file promise, which is now available. It has been for quite a while. This is a good one. Rid. In programming, what does memory safety

Scott Tolinski

mean? Memory safety is that you're not rid. Using more RAM than is available

Wes Bos

from the computer. I think that that's pretty good. So memory safety is a property of Programming languages, and their compilers and run times that ensures programs do not have undefined behavior related to memory management. Achieving memory safety rid implies that the program's memory access, read and write, are well defined and do not violate memory safety rules.

Wes Bos

Common memory safety violations include dereferencing null or invalid pointers, accessing memory out of bounds, buffer overflow or other flow, and memory leaks. These errors can lead to program crashes, security vulnerabilities, and undefined behaviors. I remember when I learned C rid In universities, I took 1 computer science class.

Wes Bos

We had to, like, define our own memory, which is weird. In JavaScript, you want to make a variable, you just make it. Or you want to make a string? Who cares how big that string is? Right? You just do it and the JavaScript will figure out how much memory it needs, and then you're no longer using that string. It's no longer referenced anywhere.

Wes Bos

And that's what garbage collection is, And the JavaScript will clean up. So in some programming language, you have to manage all of that yourself. You have to kind of know ahead of them. Even like rid. With the new syntax website with the MySQL, I just made, like, a string bar car 255 or whatever. Rid. And then I had some text that was too long for that.

Scott Tolinski

Oh, yeah. You had to make it up whenever you text change it to a text type.

Wes Bos

And there's, like, so many different string inputs in my SQL, whereas even with numbers, right? Rid. A number is a number. A JavaScript, a string's a string, and that's it. The that's one of the things that

Scott Tolinski

I I had to pick up in Rust, How many different types there are? In in Rust, you have so many different types based on all kinds of things.

Scott Tolinski

So so you're always having to consider a little bit more. You're not just working with a number. You're working with different types of, you know, an 8 bit integer or Unsigned 8 bit integer, a 16 bit integer. I need that stuff. So it's it's a different world having to worry about memory here. I I watched, I used to Displaced Gamers is a YouTube channel where they get really nitty gritty into the RAM. So, like, the entire Premise of the channel is he, like, does kind of step through debugging in real video games, like NES video games.

Scott Tolinski

And we'll talk about how you can watch the ram and see how this change in ram value actually, like, here's all the ram Yeah. Slots. And here's the specific amount of RAM slots, and they only have this many. So here are the tricks they're doing to swap out things out of the different RAM slots so that they have room for it. It's, a very wild work. Crazy. Alright.

Topic 11 21:37

Discussion on optimization techniques for HTML5 video

Scott Tolinski

Next, question for you is what mechanism does HTTP rid t t p 2 introduced to reduce latency and improve the loading speed of web pages.

Scott Tolinski

I can give you,

Wes Bos

rid Yeah. Well, like, well, I'm trying to figure out what the word is where HTTP is h p u HTTP 2 essentially allows the server to send multiple resources over a single connection.

Wes Bos

And the there's a specific word for that.

Wes Bos

It's not like muxing.

Wes Bos

Can you give me the give me the option? Close to muxing. It starts with an m.

Scott Tolinski

Oh, I, well, I just blew it then. Multi rid You're hot. You're hot.

Wes Bos

Multiplying? Rid Give me what's the answer? Yours is what? Multiplexing.

Wes Bos

Multiplexing.

Wes Bos

Isn't that what muxing is? You are Multi I don't know. I don't know. Muxing versus multiplex. The abbreviation used to represent a multi multiplexer is mux. Okay. I was right.

Wes Bos

Rid. Alright.

Scott Tolinski

Oh, okay.

Topic 12 23:12

Question on HTTP/2 and multiplexing

Scott Tolinski

Okay. Look at you. I did not know that. That's, you stumped the the the stumper and the, cushion. There's like like, I'm trying to think.

Wes Bos

You know, like, your cable if you have cable on your TV, you have there's, like, 1 wire. Right? And you think, like, how can all these TV shows go over 1 wire? Or Sometimes people Check out all these shows on one wire. Yeah. On one wire. Or, like, sometimes people you can run, like, power over e a power rid. Not power over Ethernet. You can power power line adapter. You can run Internet on your home's power. Like, how how do they do that with 1 or 2 wires? And and the answer That is they multiplex it, meaning that they put it into a single thing at one end, send it over the wire, And then once it hits the other end, they unpack it. They demux it. Oh, this is a good one. What are some strategies for optimizing the performance of HTML 5 video on a web page, particularly from mobile devices. Well, I mean,

Scott Tolinski

streaming, 1, you stream it rather than Straight up just reference and play the, the file. The entire video file? Yeah. Then so that's that's probably the biggest one. What else could you do? You could compress it. You could compress the source video using a different codec.

Scott Tolinski

You could rid. Lower the quality of it. You could lower the file size.

Scott Tolinski

You could preload it, and, I

Wes Bos

I don't know what else What else would be there? That's good. So I think you got it right. You can chop it up into multiple things, which is, your idea of streaming it. Rid Send multiple files at once. You can compress it, you said, so you can change both the bit rate and the resolution. That was a kind of interesting one. I talked to the folks from Mux at a conference recently, and I was telling them about the pains of doing coding videos because when you're compressing, specifically, I'm using I was trying to use the What's Descript? And the output the output of Descript always was just a little bit muddy on the text.

Wes Bos

And I think the answer to that is because most people are compressing video where they want rid. The typical compression, yeah, is that you you can have a you want a high resolution, but a lower bit rate, and it looks pretty fine. Rid.

Wes Bos

But I guess with mine because it's it's taxing you want really crisp. It's kind of the opposite where you want rid. A extremely high bit rate because you want as much information as possible, but the resolution is not nearly as important. I think that's why rid. The Descript Descript doesn't allow you to turn any bitrate knobs.

Wes Bos

They only allow you to select your output resolution.

Wes Bos

And I think that's why the videos never quite looked. And it's the reason why I was not able to use Descript because Their videos just didn't didn't look all that nice.

Wes Bos

So the one the one answer they have here is to use a CDN.

Wes Bos

CDNs offer faster video loading by serving the video,

Scott Tolinski

from a server closer to the user's location. Okay. Yeah. Well, yes. That yeah. That tracks.

Scott Tolinski

In JavaScript, which of the following is not a correct way to create a new object which inherits an existing object.

Scott Tolinski

Const new object equals object dot create old object.

Scott Tolinski

Rid. New object is equal to brackets, spread operator, old object.

Scott Tolinski

New object is equal to new, Old object dot constructor.

Scott Tolinski

So which of these is not a correct way of creating a new object which inherits From an existing old object.

Wes Bos

Oh, rid. I'm gonna say the dot constructor version. The spread one the spread one is weird to me because that only takes a rid copy of the top level ones, and then we'll reference nested values, which is maybe what you want because The prototype will be looked up, so I'm gonna say the the dot constructor.

Scott Tolinski

Okay.

Scott Tolinski

Well, they have the answer as the spread operator.

Scott Tolinski

Rid the reason why and, honestly, from the wording of the question, I don't it makes me wonder about that. So I asked it specifically, why why isn't the spread rid 1 correct here.

Scott Tolinski

And it says that the spread operator creates a new object and copies over the old properties from old object. However, while it does copy the properties of old object, it does not set up the prototype chain.

Scott Tolinski

This means new object will not have old object in its prototype chain, and it does not truly inherit from old object.

Scott Tolinski

Okay. That makes sense. Yeah. It does, but I don't know if the wording of the question

Wes Bos

was wonderful. Yeah. Alright. I got one for you here. What is the difference between function declarations and function expressions in JavaScript and when should each be used. A function declaration

Scott Tolinski

is defining a function where a function expression is simply it's rid Creating yeah. Because the function expression doesn't actually create the the function. To create a function from a function read. You put it into a variable.

Scott Tolinski

So it is a function itself is the function expression where a function declaration is defining and saving it as a function.

Scott Tolinski

And, Yeah. I I I know it in practice, but what what is the, what's the answer here? Like, what what is an expression

Wes Bos

specific? You got the The answer there. Maybe talk about the differences.

Wes Bos

Can I have a follow-up question? It's like, what's the difference? Like, why would you want to use rid A function declaration over a function expression or vice versa. A function

Scott Tolinski

Expression can be used without giving you the function a name and defining it. Rid. So it can be used without defining it.

Wes Bos

Okay. That's that's good. You're right. So a function expression is where you put a Named or unnamed function into a variable. So you say const myfunction equals, and it could be a regular function. It could be a Arrow function is just basically a function as a value, whereas a function declaration is where you write the word function And then you you declare what it is. So the difference between the 2 is function declarations are hoisted, Whereas,

Scott Tolinski

function expressions are not hoisting. Interesting. Yeah. I never think about hoisting ever. Sounds delicious. Hoist this. Alright. It rid.

Scott Tolinski

It it does. I do hoisin is one of my favorite things in the whole world. So yeah.

Scott Tolinski

I was I went this rid This is, weekend looking for that Japanese barbecue sauce that you were saying. What's it called? It's a no. I I'm not I'm gonna mess it up if I try to do it off memory. Rid. But it yeah. It's a Costco special right now.

Wes Bos

Bakken's? Yeah. Something like that. They didn't have it out at Costco. I've been wanting it for so long. It looks delicious. Rid. It is. And it

Scott Tolinski

we we just made, like, a stir fry the other day, and I was like, oh, man. It's the perfect use case for this. Let me just Go to go nuts on this, and it it was lovely. It's like a nice little teriyaki, vibe to it.

Scott Tolinski

Alright. Next question. In JavaScript, what rid. Is the value of this inside of an arrow function defined within a non arrow function?

Wes Bos

The value of this is not Redefine when you're inside of an arrow function, so it will simply just go up the scope chain until it finds something that is this. Rid And in your case, this will be equal to the parent function. Beauty.

Topic 13 31:05

Question on the value of this in arrow functions

Wes Bos

I like that. This is a good question. We kinda answered this one, but I think you could have a good answer for this. In TypeScript, what is a type guard, and how is it used to ensure type safety in your code? What is a type Guard. Type guard

Scott Tolinski

is basically a checkpoint to confirm a specific type.

Scott Tolinski

Rid. So, typically, if you have maybe, like, a type that is could be multiple things, maybe it's a union, rid. You're trying to access a property on something that doesn't exist. You need a type guard to step in here and say, hey, if this thing is the following type, Then we can continue with this code, potentially accessing, you know, methods on a string if you're rid have guarded it to be that it is in fact a string. So it's basically, like I said, a checkpoint to only allow a specific rid through. Beautiful. And can I ask a follow-up question?

Wes Bos

You may. What is the difference between a type guard and a type, assertion or sometimes called a typecast.

Scott Tolinski

Typecast casts a a spell onto a type. It says you are this.

Scott Tolinski

Rid. It says, yeah. No. A typecast is essentially not forcing, but it's telling rid Something what type it is, where a type guard is checking what type it is. Beautiful. Yeah. I always say the type assertion is the trust me, bro,

Wes Bos

Whereas a type guard is literally making sure that it is before you go ahead.

Scott Tolinski

Yeah. The yeah. Nailed it. You get Don't take a bounce back. One. Yeah. Pouncer, that's a good way to put it. Yeah. No. Yeah. Well, let's see that ID. Alright. Alright. In JavaScript, what is the order of execution of the Following tasks.

Scott Tolinski

K? The order of execution, macro tasks, micro tasks,

Topic 14 33:11

Question on JavaScript task execution order

Wes Bos

and rendering tasks. Macro, micro, and rendering?

Scott Tolinski

Woah. So which of those are first? So a macro task is something like set time out. A microtask is something like a promise or a callback, and a rendering task is something like request animation frame. So what is the The order of execution.

Wes Bos

Okay.

Wes Bos

So let me let me write this down again. So you said a macro is

Scott Tolinski

set time out. You could imagine this. You have a set time out, a promise, callback, and a request animation frame. Which of Those or what's the order in which those are executed? I'm going to say

Wes Bos

micro, then So micro promise, then request animation frame and then macro.

Wes Bos

The only reason I say that is because the trick to put something at the end of the event loop is to put a set time out with 0 milliseconds and that will stick it on the end of the event loop.

Wes Bos

Make sure the rendering rid is often happening in Jess testing or, like, rack testing library where you're like, it's not rendered yet. Set a set time out of 0, and then it will Make sure that it's rendered before then. So according to the answer, Wes Yeah. It is macro micro rendering.

Scott Tolinski

But your answer makes sense.

Scott Tolinski

So I Micro rendering. The order of execution is macro micro rendering.

Wes Bos

Interesting. Because the set time out, I guess, gets called immediately, but the callback of set time out would be a micro task. Yeah.

Wes Bos

And that is put to the end, but it's still going before rendering.

Wes Bos

That's that's a good question. That's, like, really nitty gritty. I bet we should dig into that or maybe get somebody on to talk about the order of operations.

Wes Bos

Yeah, I would be into that. That was a good one. Alright. I like this.

Topic 15 35:13

Discussion on history of ECMAScript versions

Wes Bos

So we have different versions of ECMA script. Rid. You know, like, ES 6 is probably the most popular one that you know about. There's one version of ECMA script that was never finalized and therefore scrapped.

Wes Bos

Which version was that?

Scott Tolinski

Oh, because we e s 4.

Wes Bos

Got it.

Scott Tolinski

Yeah. How did you know that? Rid Because I remember that ES 5 was the one that was you know, everybody talked about as being ES 5. Yeah. And I remember the the reason why that was, like, a big deal was because the version before that with a cluster of not, working or not not not enough working, but not being able to be. Yeah. So That's all I remember about that specifically. So,

Wes Bos

ECMAScript version 4 was the version of ECMAScript specification, was never finished. It developed started in two thousand, but was abandoned in 2008 due to disagreements among the committee members. Some of the features that are proposed for ECMAScript were eventually Added to later versions of the specification while others were abandoned or reworked.

Wes Bos

Oh, experience led to changes at the script rid. Standardization process including focus on smaller, more incremental changes and more open, transparent decision making. That's crazy. So 3 was launched in 99.

Wes Bos

So Equinox Script 1, 97, 2, 98, 3, 99.

Wes Bos

Rid Mhmm.

Wes Bos

52,009.

Wes Bos

So 10 years between that. It's actually wild to me to think that 99 to 2009 is 10 years, And then ECM script e s 6 is 2015, which were almost 10 years from the launch of that.

Scott Tolinski

That is rid Very wild.

Wes Bos

Yeah. You could tell me that that was was launched just last week, and I would have said, oh, yeah. Rid. So what what was what was scrapped in ECMAS script? All classes were proposed. That's actually funny because we didn't get classes until we hit ES 6. Rid Yeah. 10 years 10 years later, packages.

Wes Bos

ECMAScript 4 proposal included a module system based on packages that would be Have to enable developers to identify the origin of particular code modules. Woah. This two faced disagreement And the module system was reworked and eventually added in a more limited version form in the specification.

Wes Bos

Rid Generators. That was out in e s six.

Wes Bos

Oh, you're gonna like this one. Typing annotations.

Wes Bos

ECMAScript 4 proposed rid typing annotations to JavaScript, which would have enabled static analysis and verification of code. However, this aspect of the proposal was not Well received and was abandoned in favor of alternate. Is that true? Yeah. Sometimes

Scott Tolinski

you you gotta just say, is that true rid to if you're getting this information off of. Yeah. There's a

Wes Bos

hokey there's a post on esdiscuss.org from 16 rid. Years ago, I'm still working on my static analysis tool for ES 4. This tool will make use of custom type or type like annotation.

Wes Bos

I wonder if there's already syntax guidelines for something like this.

Wes Bos

Yes, so it was it was proposed. That's wild.

Wes Bos

And then the last 1 is meta classes and meta objects. ES 4 proposed features for meta object programming, which enables dynamic Programming techniques like introspection and reflection.

Wes Bos

However, this proved to be too complex and was subsequently dropped from the proposal. Rid I think we both we have those now both with the reflection is via the proxy API, custom getters and setters, And I think the meta object thing or meta classes is the decorator proposal.

Wes Bos

Rid. So here we are. 20 years later, we got them.

Wes Bos

Wow. What a Wow. I a wildest. Yeah. That's that would have been a good show on its own. Just rid. Discover deep into ES 4.

Wes Bos

What happened?

Topic 16 39:26

Discussion on abandoned ECMAScript 4 proposal

Scott Tolinski

The real truth. We could do, like, one of those click baity videos. I was working on something that was like the history of Internet Explorer myself, like, diving through each version and, like, what it That would be cool. To the table. So we we can, Have something in that realm. Alright. Next question here is, what is the result of the following comparison in JavaScript? You have empty array brackets is double equal sign, exclamation point,

Wes Bos

empty array brackets. So what is the what so, basically, empty array double equals Bang empty array. Right? What's the output of that? Okay. So empty array is its own object.

Wes Bos

Another empty array is its own object, but a bang in front of that.

Wes Bos

So empty array is still something, so that's True. So bang is equal to false.

Wes Bos

So that would be and double equals checks the only the type. Rid. So the output of that would be basically, you're saying is true double equals false.

Scott Tolinski

Rid. And so the answer to that would be false. So I invite you, if you're sitting in front of a computer, to type this in.

Scott Tolinski

If you're listening to the show, we can do empty array brackets, Two equals, bang, empty arrays, hit enter, and one of that bad boy says true.

Scott Tolinski

This question involves JavaScript's loose equality operator type coercion and how JavaScript interprets rid Different values in Boolean context. So this is all of you, newer developers out there, when you hear people say, hey. Use the triple rid Triple equals because the double equals can do some weird stuff. This is one of those things where you're like, I don't know why that would work that way, but it does. So an empty array rid

Wes Bos

is truthy when using the double equals operator, but an empty array No. An empty array is false when using the double equals. That's crazy.

Wes Bos

Rid. Well, that was a good one. Yeah. Interesting.

Wes Bos

Oh, it's kinda interesting. This is another history one.

Wes Bos

K. What were some of the major Criticisms of CSS early on, and how were they addressed later in later developments of the languages.

Topic 17 41:42

Discussion on loose equality and type coercion in JS

Wes Bos

Criticisms of CSS? Rid Yeah.

Scott Tolinski

Okay.

Scott Tolinski

So criticisms of CSS would have been, Well, based on one of the questions we'd asked earlier, I'm gonna go ahead and say, rid How they're defined, like, what in in what file they're defined, and therefore they were pushed into separate files In later versions? What kind of issues would people have with CSS when it first came out? Yeah. I don't know. Yeah. Other than other than that, what other kind of issues may be limited amount of colors, not ability to use rid. Typefaces and fonts, which are all addressed.

Scott Tolinski

Yeah, positioning stuff, which was addressed by floating initially.

Scott Tolinski

Rid. Yeah. I don't know. I guess, for me, I don't know what that initial feature set would have been that it it came out with. It goes way back. One of the main criticisms of CSS Early on was it was too complex

Wes Bos

and difficult for web designers to learn and use. At the time, there are only a handful of web browsers, each with varying levels of support for CSS, which made it difficult to create consistent designs that look the same across browsers. It's true that was very early in my career, but I rid Certainly felt that. Another criticism was CSS lacked certain features that were important for layout, such as the ability to position elements, you said that, relative to other page elements Or to create grid based layouts to address the issues, CSS underwent several developments over the years. For example, With the release of CSS 2 in 1998, CSS introduced many of the features to make it rich in a powerful styling language such as selectors, rid. Cascade in inheritance positioning in the box model to address the issue of browser compatibility. Web browsers began to adopt standardized rid. Implementations of CSS, the introduction of Internet Explorer 5 Yeah.

Wes Bos

In 1999 became a major milestone in this regard. Can you imagine getting CSS rid. Internet Explorer 5 and be like, finally, this is so much better.

Topic 18 43:51

Question on early criticisms of CSS

Scott Tolinski

It's it's funny. You know, I think you could depending on how far back you went in the history of CSS, you could think of, like, every single release as being something that solved rid. Some criticism of CSS over the years.

Wes Bos

It just one of those ones that's constantly evolving, constantly growing. What did you do before the box rid model. You know? I guess it was just text documents.

Scott Tolinski

Yeah. Yeah. I remember you specifically doing tables for everything, rid not even thinking about the box model, not even really thinking about margins and any of that stuff and just dropping stuff in a table And then using table cells to shift the layout in all kinds of ways. And and really not even thinking about CSS. It wasn't until rid. Zen Garden came about when I was like, oh, you can do so much without tables.

Wes Bos

So here, when did CSS Zen Garden come out? 95.

Scott Tolinski

Just rid Just because that's been a good year for me this episode.

Wes Bos

CSS end guarding was launched May 8, 2003

Scott Tolinski

Oh, 2000 3.

Wes Bos

Rid. By designer and developer Dave Shia and demonstrated the power and flexibility of CSS. I wonder what ready. Dave, she is up to these days is a hockey player. Damn hockey players always ruin search for everybody.

Wes Bos

Oh, Canadian. How's the Wikipedia?

Scott Tolinski

I thought you're talking about the hockey players. Like, you're you're surprised that the hockey player is Canadian? Oh, no.

Wes Bos

Dave Chia is a Canadian web designer.

Wes Bos

Mezzo Blue on Twitter. I follow him. I didn't know that he was the guy that made this. Wow. Has an article about CSS Sprites from 2004.

Wes Bos

Man, this has been a whole history lesson. I'm glad I threw some of those history questions into the prompt because this has been kind

Scott Tolinski

of interesting to learn. Yeah, totally. Yeah. No, I agree. And that's like, I'm actually very interested in that kind of stuff anyway.

Wes Bos

Yeah. Maybe we should try to have some of these. Maybe we'll do, like, rid. Once every 2 months, we'll have, like, a history episode. We have somebody on from the early days.

Wes Bos

I think that'd be kind of fun. Maybe we should make a list of, like, What were the major milestones of web development? And we'll have them on like, Jquery is probably a big one. Rid. Zen Garden is a big one. Tweet us at syntax. Fm. We'd love to hear what you think about what major milestones over the web development rid. Should be covered.

Wes Bos

Eric Myers probably should have on. We've talked to him a couple of times about coming on, so maybe we should push that through preprocessor.

Wes Bos

Oh, like Compass and Sass was probably a big one, and some of the Paul Irish stuff. Yeah. Maybe we'll start a new, like, ready. Once every 2 months history episode. I would love to do a history episode. Absolutely. Count me out. Yeah. All right. I'm putting it on the books. Rid. Let's move into the next section of the episode, which is our sick picks.

Wes Bos

Do you have a sick pick for me today? Yeah. So I'm going to

Scott Tolinski

sick Pick a projector.

Scott Tolinski

We got a laser projector for outside.

Scott Tolinski

Oh. And Normally, this thing is like $900, and it's on sale for, like, $600, which is a lot of money.

Scott Tolinski

But a projector, like, is something we've been looking at for a long time. We don't have very many TVs in our house. We just have, like, The 1 TV in the living room, in the family room, or whatever. Right? Yeah. But we we really wanted something for outside, especially, like, we're gonna have the cousins over, And they wanna watch movies and stuff. It would be really nice to be able to have something outside. So we looked into, like, getting a cheapo TV to have outside, And, ultimately, we're like, wait, why don't we just get a really bright projector? Yeah. And so we got this little laser projector that works off of battery even, And you can cast to it. You can plug in HDMI to it, and it can work off of battery and and be like, if we're we're just gonna hang outside For the night, you could just plug in this projector, and and now what we have to do is get a a screen because that's the next step is to get a screen. But I've had this thing for, like, a day, and I was just playing around with it. And it does, like, auto focusing.

Scott Tolinski

It rid. Works off of battery. It has cast, and I found it to be really super bright. It's it's probably not gonna be that bright during the daytime of things, but, I was really impressed with it. So I'll I'll post a link to the specific one, and I didn't realize even, like, laser projectors were a thing. I I used to work as a projectionist as I may have told you before, and they used to have to be these massive units with big, old, heavy, bright rid. Bulbs and whatever. You touch the bulbs and you're ruining them.

Scott Tolinski

So the fact that this little thing, it looks like a little Little tiny device has such a a powerful output with not having to ever replace the bulb and stuff. It's just kind of amazing to me. So I'll stick pick the specific one I got. But Just in general, having a little Bluetooth

Wes Bos

battery powered projector, I think, is a sick pick. That's really cool. I've I've been seeing those for a while where people are like, oh, just Throw 1 in your room or whatever. And we've been looking at our basement TV. We're hopefully going to move it into our it's starting to go like you can see Around the edges, it's starting to get like brownish.

Wes Bos

And we're like, we'll just throw that in the gym. And then we're thinking about getting either a new TV. But Part of us is like, maybe we should do, like, a huge ass projector because they're a lot more affordable than they used to be. Like, we have rid. Like a 10 year old BenQ projector at our cottage, and that thing is amazing.

Wes Bos

Like, it's it's so nice and clear. You can't rid. Run it during the day, and I I'm assuming the lasers are probably better at that type of thing, but I'm always amazed at how good that rid You can make the TV very big with it.

Scott Tolinski

Very big. A lot of people are saying the TV is very big. Yeah. Yeah. I'm gonna sick pick A USB C and

Wes Bos

a 32 watt 3 port charger.

Wes Bos

I bought these before we went on our trip, and it's the best way to Charge all of your stuff all at once. So there's 2 USB A's, and then there's 1 USB C that does power delivery.

Wes Bos

And it's just like when you're traveling and you go back to the hotel, you do need to juice your phone up as fast as possible. Everything. So if you get one of these crappy, like, I have so many crappy little nubs or we call them nubs, like the the AC DC adapter And so many crappy cables. And I'm starting to be like, I'm going to throw this start throwing these out because they come for free with, like, You buy something that comes for free with, like, a crappy cable and they're so slow. If you get a bad cable or a bad charger. They're so brutally slow, and sometimes my phone can't even keep up. But I bought, like, a proper one. I got 2 of them for $20.

Wes Bos

And what brand it.

Wes Bos

It's one of these stupid Amazon brands. Woodenta, but been a big fan of it. I know Unkar also sells really high quality stuff. I have a bunch of theirs where it will figure out how fast the device can charge.

Wes Bos

And, man, I'm so happy with these. Also, like, my wife is a cable mover. I always make fun of her. I'm just like, stop. Oh, I'm a cable mover, too. Oh, Yeah. The rule in our house is don't like, I almost want to just, like, bolt it to the thing. Don't move a cable because then you're like, Where's the cable for this? Well, I think I rid. Brought it to the cottage. I think it's in my backpack. It's just buy a good cable and leave it where you need them, and you will always have them. Yeah. But I need it in another room right now. I can unplug this 1 and take it to the other room right now. Get get one for where you need it. So, like, I have good I have nice cables at my desk. I have a nice cable beside my bed. We have a really nice charging station for all the kids Ipads and all that stuff. And it's just life is better when you don't have to figure out where are the cables? Oh, that was not fast enough. Don't plug that one in.

Wes Bos

So I'll link up the one I got.

Wes Bos

Cable movers. I don't know. You can't live your life like that. I I don't mind. Honestly,

Scott Tolinski

it's, it's just quite alright for me. I'm going to shamelessly plug Sentry at century.i0.

Scott Tolinski

Sentry is the perfect place to see all of your errors and exceptions happen. We're working on software right now, and, we're using Sentry in our site.

Scott Tolinski

And we're even getting alerts anytime there's something wrong, even though Nobody's using the site other than us right now, and, unfortunately, it means I'm getting a lot of alerts because I keep breaking stuff. But if you have software that people are actually rid using, and you want to know that things are broken when they're broken, but also you want to know that they're going to be fast ahead of time. You wanna know that everything is going to work rid as it should be, then you really need a tool like Sentry in your life, and and, really, Sentry is the best of them. So check it out at century.i0.

Scott Tolinski

Use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free of this awesome service. Shameless plug. Rid .comforward/courses

Wes Bos

for a list of all of my courses. Check it on out. Use coupon code syntax for $10 off. Rid That's all for today. Thanks, everybody, for tuning in, and we'll catch you later.

Wes Bos

Peace. Peace.

Wes Bos

Head on over to syntax.fm

Scott Tolinski

for a whole archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player or drop a review if you like this show.

Share

Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window