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

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and 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.

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.

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.

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.

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

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

I am going to say 1995.

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.

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

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

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

Netscape.

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

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

Launched?

2002. Wow. I'm surprised.

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

it's from Wikipedia.

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.

Was it just VHS?

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.

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

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.

Yep.

That's easy. Too easy.

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.

Okay.

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

Oh. Oh, I know this 1.

40 rid 403 unauthorized?

It's, would you like the options?

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,

403, and 409.

It's 409.

It's 401.

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

You know, what is what is the 409

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

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.

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?

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.

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.

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

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

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

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

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.

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

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

rid? A name

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.

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.

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

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

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

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.

And CERN is the oh, wow.

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.

And they develop CSS?

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

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?

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.

Use a strict enables additional JavaScript to debugging features.

Use strict changes previously accepted bad syntax into real errors.

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.

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,

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

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

You are correct.

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

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.

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,

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?

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

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

XHTML.

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.

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.

Yeah. Yeah.

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.

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.

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

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

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?

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.

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

Yes.

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.

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

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

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

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.

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

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.

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

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.

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

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

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.

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

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.

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

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.

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.

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

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.

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

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

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

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.

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.

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

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

I can give you,

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.

And the there's a specific word for that.

It's not like muxing.

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

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

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

Multiplexing.

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.

Rid. Alright.

Oh, okay.

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.

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,

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.

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

You could preload it, and, I

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.

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.

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.

They only allow you to select your output resolution.

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.

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

CDNs offer faster video loading by serving the video,

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

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

Const new object equals object dot create old object.

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

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

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

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.

Okay.

Well, they have the answer as the spread operator.

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.

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.

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

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

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

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.

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

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

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

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

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

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,

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

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

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.

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

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.

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

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.

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

is basically a checkpoint to confirm a specific type.

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?

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

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

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,

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

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.

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

and rendering tasks. Macro, micro, and rendering?

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.

Okay.

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

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

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

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.

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.

But your answer makes sense.

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

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

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

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.

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

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.

Which version was that?

Oh, because we e s 4.

Got it.

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,

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.

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.

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

Rid Mhmm.

52,009.

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.

That is rid Very wild.

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.

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.

Rid Generators. That was out in e s six.

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

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

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

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.

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

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

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.

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.

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

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.

What happened?

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,

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.

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

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

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.

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.

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.

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

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.

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

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

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

Criticisms of CSS? Rid Yeah.

Okay.

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.

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

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

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.

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.

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.

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.

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.

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

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

CSS end guarding was launched May 8, 2003

Oh, 2000 3.

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.

Oh, Canadian. How's the Wikipedia?

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

Dave Chia is a Canadian web designer.

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.

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

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.

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.

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.

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.

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.

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

sick Pick a projector.

We got a laser projector for outside.

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

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.

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.

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

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.

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.

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.

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

a 32 watt 3 port charger.

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.

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.

And what brand it.

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.

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.

So I'll link up the one I got.

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

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

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.

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.

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

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.

Peace. Peace.

Head on over to syntax.fm

for a whole archive of all of our shows.

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