Do you want JavaScript again or more JavaScript?

Welcome to JS Party, JS Jeopardy edition! Yaay, we’re so excited! This should be super-fun. I’m really pumped. It’s more than just JavaScript, so don’t get too excited, but JS Jeopardy sounded way better than Miscellaneous Web Frontend Question Jeopardy.

I’m gonna explain the rules really quickly, and then we’ll just go ahead and jump right in. The way this is gonna work is I have put together a Google presentation that no one else can see… Which is fine, because we’re gonna be talking. I’m gonna share this with you now, so you’ll be able to see the categories on the screen and see which ones have been taken already… So let me get this up…

Schmancy!

Yeah I put way too much effort into this. I should have had this all worked out, but you know… Last-minute preparations. So while I’m getting this up, we’ll start with Jake, since Jake is our guest… Really quickly, Jake, do you wanna introduce yourself while I get my life together over here?

Sure. I am Jake Dohm, web developer at Good Work Software Consultancy out of Dallas. I build websites and tweet about JavaScript at @JakeDohm. Don’t come troll me, or do… Yeah.

Awesome. We’re super-excited to have you on, and I’m just gonna wish you the best of luck. So here are the categories for round one. We’re gonna start off with five categories, in increments of 100 points. So they start at 100, they go all the way up to 500, and there are five questions in each category.

The first category is CSS, the second is JavaScript level 1, the third is JavaScript level 2, and those levels have no semantic meaning. They’re just miscellaneous JavaScript questions… But I did try to grade them, so that the 100 questions should be maybe a little bit easier than the 500’s. Then we’ve got the Web as the fourth category, and lastly, I’m Feeling Lucky.

Which is about Google?

No, it’s not… [laughter] They’re just random. We’ll have topics, but I thought that sounded more funny than Miscellaneous. So this is round one… We will do a round two afterwards, and then we’ll have a final question where you can bet all or nothing.

Uh-oh…

Yeah. As opposed to you ringing buzzers, because this is not a practical way to do this, we’re gonna start with Jake. Jake, you’ll just pick your category and your question. If you get it right, perfect; we’ll just move forward. We’ll go to Kball next. If you get it wrong, I’m gonna let Kball have the chance to steal it. But if Kball gets it wrong, we’ll end it there and he can start over in a new category. How does that sound?

Wait, what about Chris?

Chris comes third. I just didn’t wanna go through the full process of explaining it…

But do we all get the chance to answer it?

I suppose you could, why not? I mean, the rules can change.

The double steal.

Yeah, double steal. So if Kball gets it wrong and Jake gets it wrong, Chris has the chance to get it right. Alright, so Jake, pick your poison!

Let’s go JavaScript level one.

[04:04] JavaScript level one, for what point value, sir?

I’m gonna start off easy, let’s go 100.

For 100. This is to declare a block-scoped element, but cannot be redeclared.

Const. What is const?

Correct! 100 points go to Jake.

Woo-hoo!

I’m also low-key gonna be having to do math in my head while we do this, because I’m gonna be keeping a score in PowerPoint… So just watch my math, please. Alright, so JavaScript Level 1 complete. Alright, Kball, you are up.

Alright, let’s go with CSS for 500.

Oh, my goodness, you are starting off strong. CSS for 500 - this is the point system with which styles are applied to HTML elements.

What is specificity?

Correct! Not a lot of people know specificity as a term…

Yeah.

And a lot of people don’t even know specificity exists.

Alright, should we do a diversion into specificity? [laughs]

We can go off on little tangents… And I just wanna preface this with the fact that - why are we doing this? 2020, obviously, is a new year, if you didn’t know… And that means a lot of people are probably gonna be looking for jobs, a lot of jobs are now hiring, and as a result, you’re gonna have to go through technical interviews… So this is just some casual prep for that.

Sweet!

Yeah… Noice! Specificity - I wrote a blog post on it, we can link it in the show notes if you’re interested in learning more… But there’s also ones with Star Wars characters, and stuff, so we’ll link that one too, because - Star Wars. Chris, you are up.

I’m Feeling Lucky for 100.

I’m Feeling Lucky, for 100.

I’m feeling anxious. [laughter]

Same.

Go ahead…

This occurs when there’s a recursive function without an exit point.

Oh, stack overflow?

Correct! You’re all doing real good…

Oh, what is a stack overflow, I’m sorry.

Yeah, I know… It’s hard to remember that phrasing… But yeah, that’s really good.

I thought that was gonna be an infinite loop.

Well, I guess technically–

[unintelligible 00:06:19.11]

Yeah… I’m feeling anxious - I feel like that’s the title of this episode.

[laughs]

I think I got that question on a job interview once; I was fresh out of college and I just had no idea… So I’ll never forget that. Alright, Jake, we are back to you.

Well, I’m gonna stick with JavaScript. We’ll go level 1 for 500.

For 500… JavaScript level 1, for 500… Okay. I’m just scrolling to the section on my iPad if I’m singing, that’s why. When trying to access a property of an object, the property will not only be sought in the object, but on this.

It will not only what?

It will not only be sought or looked for on the current object, but on this.

The object prototype?

Yeah! Nice!

What is…

Yeah, it’s okay. We’ll be a little lenient.

I’m a newb.

So Jake is now 600, we’ve got Kball at 500, and Chris is at a measly 100. You should feel anxious, Chris… [laughter] I’m throwing shade, I’m sorry; I’m a little sassy. Alright, Kball, you are up.

Let’s go with the Web for 500.

The Web for 500. You guys are just diving right in. Where is this… The Web for 500. This is a conceptual model and is a set of communication protocols used in the internet and similar computer networks.

Can you repeat the question?

Absolutely. This is a conceptual model and is a set of communication protocols used in the internet and similar computer networks.

[07:57] The conceptual model… Interesting. Huh.

Doo doo doo doo…

Yeah, I know…

Five more seconds. Take a guess.

I’m gonna say “What is HTTP?” but I don’t think that’s right, because that’s not a conceptual model…

Wrong…

Oh, no…

I think you let that term throw you off. Unfortunately, that is incorrect, so it moves on to Chris. Chris, would you like me to repeat the question?

What is the OSI model?

That is also incorrect.

Aw…

Oh, no… Jake it’s up to you?

Okay, could you repeat it one more time, so I can not get it? [laughter]

This is a conceptual model and is a set of communication protocols used in the internet and similar computer networks. Why don’t you ignore the words “conceptual model” - this is a set of communication protocols used in the internet and similar computer networks?

I’m so bad at this type of thing…

I call shenanigans…

…communication. Like, I don’t know… LAN? What is LAN? [laughter]

If it’s protocol, I would say TCP/IP.

See, that would have been correct.

Oh…!

But conceptual model - well, there is this model of the network stack, and…

I was in between TCP/IP and HTTP, but… Whatever. We got it.

Well, hold on to that term [unintelligible 00:09:24.13]

And why choose TCP instead of UDP?

Because that’s the only one I knew… [laughs] Don’t judge me. Alright, well that round nobody got any points, so… We’re back to Kball I believe at this point, right?

No, because I picked the last question, so it should be Chris.

Oh, then it’s Chris’ turn.

So everybody’s picking these big ones, so I’ll do JavaScript level 2 or 500, please.

You’ve got it. This gives you access to an outer function’s scope from an inner function.

What is hoisting?

No, unfortunately it’s not hoisting. It’s one of these things that everyone always clams up on when they have to give a definition for… Jake, do you have a guess?

Can I get the question one more time?

Yup. This gives you access to an outer function’s scope from an inner function.

An outer function scope from inside an inner function…

Oh, I think I – never mind.

Global scope?

Incorrect, unfortunately.

Yeah, I didn’t think so…

Kball looks like he’s got it.

What is a closure?

Correct! It is a closure! I hate defining closure. That is one of the hardest things… You know, I never get closure. I need closure…

Dang it… Great steal.

We all need a little closure.

Yeah, that’s why it’s in the 500 point value. That’s a hard one to remember. I think we’re back to Jake now…

I’m gonna get a little out of my comfort zone and hit up that CSS for 400.

Okay, CSS for 400. This is a long one. I can read it more than once.

Okay.

This is used when you wanna modify your site or your application depending on a device’s general type, such as print versus screen, or a specific characteristic and parameter, such as screen resolution or browser viewport width.

What is media queries?

That is correct. Media query!

Boom! I had to get one.

You know, it was just the end of last year I realized media queries was not just about browser resolutions, it’s also about like if people have – what is it?

It’s like “prefers reduced motion” and stuff, right?

Yes. They also have like accessibility media queries, which is really cool.

Yeah.

So… Awesome. Kball, you are up.

Alright, I’m Feeling Lucky for 500.

Alrighty, I hope you are feeling lucky…

Did I get those points, Emma?

No.

Let me get those sweet, sweet points. I’ve gotta see my score all tied up with Kevin here…

[12:00] After we finish this round I’ll say out loud the point values again, don’t worry.

Sweet.

Yeah. If I forget to update, please let me know. Alright, Kball, you just wanted I’m Feeling Lucky for 500.

I chose I’m Feeling Lucky for 500.

Alrighty, good luck. This is a type of computer security vulnerability typically found in web applications, which enables attackers to inject client-side scripts into web pages viewed by other users.

What is cross-site scripting?

Correct. Cross-site scripting, or XXS. Abso-fruitely.

[laughs] Abso-fruitely… I haven’t heard that. I like that.

Chris, you’ve really gotta catch up, my friend. For the listeners benefit - Jake has 1,000 points, Kball has 1,500, and Chris has 100. Yes, 100. Come on, Chris! You’ve got this!

I’m not good at interviews, or Jeopardy.

[laughs]

No one is. That’s why I’m hosting and I’m not playing.

[laughs]

God, do you wanna trade? Alright, so… JavaScript level 1 for 400.

Alright, for 400. This is a primitive value automatically assigned to variables that have just been declared, or the formal arguments for which there are no actual arguments.

What is undefined?

Correct, yay! 400 points. Chris is now at 500. Alright, Jake, you’re up.

Alright, let’s go JavaScript level 2 for 400.

Okay. This is a function passed into another function as an argument, and then invoked inside the outer function.

What is a callback?

That is correct. That is correct… That was for 400…

What is npm install promisify? [laughter]

What even… [laughs] Oh, gosh. Alright, Kball, you’re up.

Okay, let’s go with the Web for 400.

The Web for 400. This is a small piece of data that a server sends to the user’s web browser.

What is a cookie?

Correct! I don’t understand why things in programming are named after food, or animals…

[laughs]

Alright, Chris…

You get a cookie, and you get a cookie, and you get a cookie… [laughter]

I’m Feeling Lucky for 400.

I’m Feeling Lucky for 400. This is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages.

What is ARIA?

Correct! I will give it to you. I had WAI-ARIA written, but ARIA is totally correct. So that brings up to 900. No pressure, Chris, you kind of need this one.

If you guys are not in the JS Party channel, please join us, because it’s a lot of fun in that room right now. Alright, Jake, you’re up.

Alright, let’s see here… I’m gonna branch out over back into CSS. I’ll do 300.

Okay, CSS for 300. This is used to specify values for animating an element in various stages.

What is keyframes?

Correct.

Wooh!

Woo-hoo! Like, a lot of these you wouldn’t be asked on a technical interview, they’re just good to know.

Yeah. I really need Kevin to drop around here… Alright.

Alright, Kball…

Alright, let’s go with JavaScript level 1 for 300.

Alrighty. This determines the accessibility of variables.

What is scope?

Correct. Correct, scope. What’s nine plus three? Nine plus three is two. I have such trouble adding simple numbers in my head, but I can draw [unintelligible 00:15:50.23] on a board, it’s fine.

Nine plus three is two, so you’re natively adding [unintelligible 00:15:57.12]

Yeah. It’s really hard for me to remember nine plus– well, nine’s not so bad, but other simple numbers… Seven - forget about it. Anyway… Alright, Chris, you’re up.

[16:08] JavaScript, level 2 for 300.

Alright, JavaScript level 2 for 300. Guess what - this is double Jeopardy! I don’t have any noises, so… That’s my noise.

[laughs]

Wait, how does that work again? Oh, he gets to bet something?

No, we double the points, so it’s actually gonna be for 600. So if he gets it right, he gets 600.

Woo-hoo!

Also, if you get it wrong, it’s supposed to detract from your score, but since we’re not buzzing it, I’m not doing that. You just get it if you get it right. Alright, this is gonna be worth 600 if you get it right… This is a function that takes a function as an argument, or returns a function.

What is a higher-order function?

Yeah! Correct! 600.

That’s a good one.

Jake was ready to steal that…

I was… I was so ready to steal!

Well, Jake, he’s coming for you. Chris is now at 1,500 with that, Jake’s at 1,700, and Kball is at 2,200… So that’s getting closer. Alright, let’s see what you’ve got… That’s you, Jake; I didn’t even say that loud, but it’s Jake’s turn.

Let’s see… Well, I think I can get another 300 here, so I’ll take I’m Feeling Lucky for 300.

Okay.

But I’m Not Feeling Lucky, so…

Yeah, let’s see… This is a process of changing the position of a web page or a website in search engine results by using keywords or phrases.

What is search engine optimization?

Correct.

Sweet!

It is about Google I’m Feeling Lucky…

Well, that one… Alright, you’re officially at 2,000.

Don’t forget about Bing, everyone…

Alright, Kball…

Alright, I’ll take that last number 300 on the Web, for 300.

The Web for 300. This is a hardware or software component that stores data so that future requests for that data can be served faster.

What is a cache?

Correct. So Kball is still in the lead by 500 points. Alright, Chris…

Give me JavaScript level 1 for 200.

Alright. This is used to declare a block-scoped element and can be redeclared.

What is let?

Correct. Alright, Jake, you are up.

Let’s do JavaScript level 2 for 200.

Alright, this represents the eventual completion or failure of an asynchronous operation and its resulting value.

What is a promise?

Correct. I hate promises, I hate explaining them… I will never get that right in a technical interview… I promise I will get it wrong… [laughter] Okay, Kball…

I’ll take CSS for 200.

Okay, CSS for 200. This is a one-dimensional layout model which distributes elements along an axis.

What is Flexbox?

Correct. Flexbox is a wonderful tool, and there are some fun games that you can use to learn it, like Flexbox Froggy. Flexbox Defense I think is another one…

I just saw a wonderful article about something done actually by a guy who was on our show at some point… Where somebody created a responsive layout that did three different layouts based on size, without a single media query, using Flexbox.

Dang…

Or four. Four different layouts, actually.

I love Flexbox. It’s one of the best tools you can learn for CSS.

Yeah, Adam Argyle shared that…

Oh, okay… Nice.

Yeah. Anyway, cool stuff. I can include a link to that in the show notes, and it’s gonna be in my newsletter this week; so if you’re on that, you should get it.

Absolutely, for sure.

I love Flexbox Zombies too, the gamified thing by David Geddes So good. Yeah, that’s how I really learned it.

[19:58] Awesome. Well, we’re gonna have all these in the show notes if you wanna check them out later. Alright, we’ve got five questions left before we take a break, so with that I think it’s over to Chris now, right? Or are we on Kball?

No, I just went. It’s Chris.

Okay.

I’m Feeling Lucky for 200.

Okay. This global attribute indicates than an element can be focused in where it participates in sequential keyword navigation.

Say that again?

Yeah, if I can… I messed up reading it. This global attribute indicates than its element can be focused on and where it participates in sequential keyword navigation.

What is tab index?

Yes, absolutely, what is tab index. Noice! Alright, Jake…

Well, I guess I’m gonna have to go with the Web. Let’s do the Web for 200.

The Web for 200… This is a protocol for secure communication over a computer network.

What is HTTPS or SSL? Do I have to pick one?

Yeah, you do… [laughs]

They’re like the same, right? Like, one is the other – let’s see, the protocol is HTTPS.

Perfect. That is correct. Awesome. Kball, you are up.

Alright, let’s see… I’ve got CSS, JavaScript Level 2 or the Web. Let’s do CSS for 100.

Alright, CSS for 100. This display property allows you to set a width and height on an in-line element.

A width and a height on an in-line element. What is in-line block?

Correct. Display in-line block. I mean, I feel like half the answer was in the question, but it’s fine. Alright, Chris - pick your poison. Are we going JavaScript or are we going the Web?

JavaScript.

Alrighty, JavaScript level 2 for 100. This represents the intentional absence of any object value.

What is null?

Correct, what is null. When I’m reading some of these, I’m like “I definitely would not have gotten these”, but to be fair, I pulled up Mozilla’s definitions, so… Alright, Jake, you are bringing us home with the Web.

Let’s do it.

I don’t even know why I was about to ask you which one you wanted. Alright, to finish up this round, the Web for 100. This is the HTTP status code that indicates everything was successful.

What is 200?

Correct, what is 200. And with that, I think that wraps up the round. Did I put your point values the last round?

I think so…

I need about 800 more… [laughter]

So in third place we have Chris at 1,900, in second place - a close second place - we’ve got Jake with 2,500, and Kball is leading with 2,800. We’re gonna take a break, but when we come back we’ve got round two with some other really fun topics.

Welcome back to JS Jeopardy! Just to recap, we’ve got Chris in third place with 1,900 points, but he’s doing really well and we’re really proud of him. In second we’ve got Jake with 2,500, and in the lead we’ve got Kball with 2,800. This round the points are doubled, and we’ve got some new categories, kind of. The first category is HTML, the second one is CSS Part II, the third is JavaScript, the fourth is Even More JavaScript, and the last one is JavaScript frameworks.

I don’t remember who – Jake, you answered last last time…

Yeah.

…so I think we’ll start with Kball this time.

Alright, let’s see… Let’s go with JS Frameworks for 1,000.

JS Frameworks for 1,000. This framework follows the model vue Vue model (MVVM) pattern, was created in 2011, and was just ranked the least interesting JavaScript framework in the State of JavaScript survey.

Oh, shade…

That’s obscure…

That’s why it’s the highest value… [laughs]

I’m not gonna look up the survey, and I’m actually gonna guess based on the MVVM. What is Knockout.js?

That is incorrect. Chris, you’ve got a chance. Come on, you can do this.

No Google.

The most uninteresting?

Yeah, this year…

What is Backbone.js?

No, unfortunately that is incorrect.

Oh, my god…

Alright, Jake, you’ve got a chance…

Okay, can I get the question one more time?

You’re just stalling… [laughter] This framework follows the model vue Vue model (MVVM) pattern, was created in 2011, and was just ranked the least interesting JavaScript framework in the State of JavaScript survey.

2011 is early… MVVM… Honestly, 2011 is a little before my time, but I’m gonna go with – so it’s a framework… Was Angular around all the way back then? That’s pre-Angular…

I’m gonna need an answer, sir…

Marionette? Didn’t that go with Backbone?

I don’t even know what that is.

Yeah, I don’t know… What is “Jake is clueless”?

Alright, you all unfortunately did not get it, but it was Ember…

Oh, snap.

Oh, I was gonna go with Ember! I didn’t think it was around back then.

Yeah, it was. Well, we’re starting off strong this round, so…

It wasn’t called Ember back then though, was it? It was called SproutCore.

Alright, Kball, you’re getting all technical; you still would have gotten it wrong… [laughter] Alright, spicy… Chris, you’re up. [laughter]

I’ll get JavaScript again for 1,000.

JavaScript again for 1,000. Okay, this is the way to opt into a restricted variant of JavaScript.

What is the use strict directive?

Correct. Yay, you’re now in the lead! In a twist of events, Chris has 2,900 points. Kball has 2,800 and Jake has 2,500, so it’s really anyone’s game at this point…

Wow…

Alright, Jake, go for it.

Let’s see… I’ll do Even More JavaScript for 1,000.

Even More JavaScript for 1,000. This is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

What is hoisting?

That is correct. So Jake now pulls out into the lead!

Woo-hoo!

I picked the wrong category… [laughter]

Yeah, I would have picked frameworks too, but that was a good, hard question.

I feel like you were floating on a cloud though, Kball, and you needed a little reality check, so I think it’s only fair…

That’s my life.

I’m savage right now… Alright, well you’re up anyway. You’ve got a chance to redeem yourself.

Let’s go with CSS Part II then, for 1,000.

CSS Part II for 1,000. This is double Jeopardy, so this is gonna be worth 2,000 if you get it correct. Alright… This combines other selectors in a way that gives them a useful relationship to each other, and the location of content in the document.

Can you repeat that?

This combines other selectors in a way that gives them a useful relationship to each other, and the location of content in the document.

[28:18] Ooh…

It is a hard one.

Yeah, so that’s interesting… This gives them a useful relationship to each other… I can think of some examples, but I’m trying to remember what it’s called.

Mm-hm… No, he’s not googling, Jerod. I see his hands… [laughs]

My hands are up here.

But I am gonna need an answer, sir…

What is a sibling selector?

No, unfortunately that is incorrect… But Chris, you’ve got a chance to win 2,000 right now.

Can you please repeat it?

I can. Don’t get anxious, it’s okay… This combines other selectors in a way that gives them a useful relationship to each other, and the location of content in the document. This is not something people normally know the term for, that’s why it’s valued at 1,000.

2,000, double Jeopardy.

It is 2,000.

What is… I don’t know. What is CSS? [laughter]

That unfortunately is incorrect, but I appreciated the response. Jake, any idea? You’ve had a long chance to think about it, so I’m gonna expect an answer pretty quickly here.

I’m gonna go with the direct descendent selector…

Unfortunately, that is incorrect… But both what you and Kball said are examples of this, and that is a combinator.

Oh, nice… Wow.

And that was even the second word in that question, “This combines…”, so it was similar. It’s a combinator. But yeah, most people definitely do not know. That was definitely a hard one. Alright, Chris, it is your chance.

I’ll do JavaScript again for 800.

JavaScript again for 800. This is the process of building software by composing pure functions, avoiding shared state, mutable data and side effects. This is declarative, rather than imperative, and application state flows through pure functions.

What is functional programming?

Absolutely, what is functional programming.

Yeah, what is functional programming…? [laughs]

Exactly. So you are now at 3,700. Chris is at 3,700 - he is actually in the lead - Jake is in second place at 3,500, and in a twist of events, Kball is last, with 2,800 points. Alright, Jake, you’re up…

My how the turn tables… Let’s see. You know you’re on JS Party when no one wants to take HTML, so I’m gonna brave that. I’m gonna take HTML for 1,000 and see how it goes.

HTML for 1,000. It was really hard to find questions for this category [unintelligible 00:30:53.28] This element is used to draw graphics and animations.

Oh, good night; I know it, I’m just blanking out. Let’s see - to draw graphics, it starts with an F… Figment… Oh, dang it. Ken Wheeler made a library that uses it…

Alright, Jake, I need a response…

What is Figma? I don’t know… Dang it!

Incorrect, unfortunately.

It’s on the tip of my tongue…

Kball, over to you.

I’m gonna go with “What is the canvas element?”

That is correct…

Yeah, canvas starts with an f, too. It’s silent.

…putting you in the lead by 100 points. Nice! Alright, Chris, you’re up again, and you’re doing really well and everyone’s rooting for you.

Wait, what about my turn?

Oh wait – yeah, it’s Kevin’s turn.

Is it?

Because you picked that one, right?

Oh, shoot. You’re up, I’m sorry.

Yeah, that was a steal…

My bad, my bad… Alright, Kball, you’re up.

Riding that momentum, I’m gonna go with HTML for 800.

[laughs]

HTML for 800. This element represents a nested browsing content embedding another HTML page into the current one.

What is an iFrame?

[32:09] That is correct, what is an iFrame.

Speaking of being old, have y’all ever used non-iFrames, like the old frames?

No…

Yeah, you can do that, too. It’s fixed frames, and they do some other interesting stuff.

I’ve never even used iFrames, in all honesty… I didn’t ever really have a reason to, so…

Someday, if you ask, I can tell you the story of when I did three layers of framing to embed essentially navigation from a website into a Shopify page that was trying to feel like it was the same as that website. There’s some really interesting hacks you can do with iFrames, and back in the day I may have done them all… But that’s like ten years ago now, so…

Oh, wow… Yeah, I would love to learn more about your ZURB Foundation days as well…

That’s true; that’s not even that far back, but yeah. Anyway, iFrames are cool and powerful, and you should never use them now, because there’s so many other things you can do… [laughter] Almost never. Almost never use them.

Well, now it is actually your turn, Chris.

Can I get Even More JavaScript for 800?

Even More JavaScript for 800… Okay - this is a hard one, I’m sorry. This refers to the process of using event propagation or bubbling to handle events at a higher level in the DOM than the element on which the event originated. I would not have gotten this right…

Yeah, I’m not sure… What does this have to do with JavaScript? [laughter] Yeah, I don’t know. Pass.

It’s okay. Jake, you’re up. Do you have any idea?

What is event delegation?

That is correct!

Hey! Let’s go!

Jake with the steal!

Eight plus five is twelve, correct?

It’s thirteen, yeah…

Thirteen. This episode is gonna be called “Emma trying to do math.” [laughter] Yeah, event delegation - that’s one that I feel like I’ve been asked in a technical interview, but again, had trouble describing, so…

Yeah. That description - it took me a minute. I had a light bulb moment, but that was after a minute.

I’m glad you got it, because I would not have.

[laughs]

It’s your turn again, Jake.

Okay, let’s go – as scared as I am of this category, let’s go JS Frameworks for 800.

JS Frameworks for 800. This is a JavaScript library designed to simplify the HTML DOM tree traversal and manipulation, and was created in 2006.

What is the best library ever made, jQuery?

That is correct, jQuery.

Yay!

That puts you at 5,100.

The way you said that, I realized why Jake is calling JAKEuery the best ever…

[laughs] JAKEuery.

I think that’s a new Twitter handle. Alright, Kball, you’re up.

Let’s go with the last remaining 800, CSS Part II for 800.

CSS Part II for 800. This is a keyword added to a selector that lets you style a specific part of the selected element.

This is a keyword added to a selector that lets you style a specific part of the… Hm. What is a pseudo-selector?

Um, nope…

Okay. [laughs]

[laughs] That’s over to Chris…

A keyword, right?

Yeah… I’m trying to be shady about this, because you were really close, Kball, but it wasn’t correct.

What is a pseudo-attribute?

Also very close, but not correct. Jake knows it, doesn’t he?

I think so… What is a pseudo-element selector?

That is correct. Pseudo-element. There’s no selector. So it’s just pseudo-element.

[36:06] I’m gonna dispute that… [laughs] So pseudo-elements - would you argue that they’re actually styling a part of that thing? They’re a way to select without – no, I guess that makes sense… Never mind.

The description is a little mind-bendy.

Yeah, it’s like the :: before and :: after, so yeah, it’s technically an element that’s not an element.

Yeah. Well, in the newer generations there’s also pseudo-elements like first letter, and things like that, which do match that description that you’re using there a little bit more closely than how I would think of a before/after… But okay.

Right…

Alright, I withdraw my objection.

Okay… Glad to hear it, because I don’t think I had a case. [laughter] Okay. Chris, you’re up.

JavaScript again for 600.

JavaScript again for 600. This is a type of event propagation where the event first triggers on the inner-most element, and then successively triggers on the ancestors of the target element in the hierarchy, until it reaches the outer-most element.

What is event bubbling?

That is correct! Event bubbling. Yay! Okay, that was 600, so… What’s seven plus six? Someone help me. What’s seven plus six?

Thirteen.

Thirteen. 4,300. Wow, this is embarrassing… I went to college, I promise… I just really didn’t do well at math. Okay, so…

I’m cheating, because my kids are currently working on this stuff, so…

Oh, maybe I should practice with them. In first place so far we have Jake at 5,900, we’ve got Kball at 4,600, and Chris at 4,300. Yeah, I think let’s do one more round, then we’ll take a break and we’ll come back for the last little piece… What do you think?

Sure.

Sounds cool.

Alright, cool. Who’s turn is it?

Jake, I think…

I think it’s me.

Okay.

Yeah. I’m gonna go with CSS for 600.

Okay. This is a program that lets you generate CSS from its own unique syntax. This is not an easy one.

A program? Would you say an application?

Yeah… I would say this is like a tool that lets you generate CSS from its own unique syntax.

Hm. From its own unique syntax… I’ll go with “What is PostCSS?”

That’s a little too specific, so unfortunately I need it to go to Kball.

I’m gonna say “What is a CSS preprocessor?”

That is correct.

Oh, there you go.

Yeah… It’s hard to come up with a definition for that, because it’s like–

Yeah…

I was also gonna say - PostCSS is kind of interesting… It’s like, it’s Babel for CSS, so it could be used with your own unique syntax, or it could just be mucking around with your CSS.

Yeah.

It’s a CSS transpiler.

Hm, nice. Well, Kball, it’s up to you now.

Okay. Well, I’ve had best luck so far with HTML, so I’m gonna go with HTML for 600.

Okay. This element represents data that cannot be represented by other HTML meta-related elements, like base, link, script, style or title.

Can you repeat that?

Yeah. This element represents data that cannot be represented by other HTML meta-related elements, like link, base, script, style or title.

Okay, let’s see… I’m gonna do the interview thing and talk my thinking out loud…

Please do.

[39:58] So that inclines me to believe it is a meta attribute of some sort, because of both the examples given, and there was the word meta in there… So it’s some sort of meta attribute, and I’m actually gonna just go with the meta element, because the other examples were elements.

That is correct. And yeah, it was a little obvious if you listened to the definition… [laughs] But you know, I just went with it anyway.

I tell you, it did not feel obvious.

Okay. Well, it does if you know the answers… [laughter] It’s funny how that works; I’d be a terrible interviewer. Alright, Chris, you’re up.

Can I get Even More JavaScript for 600?

Yeah, Even More JavaScript for 600. This tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object. I would not get this…

Are you looking for a function?

Yeah.

Okay. Object dot – I don’t think I ever use this [unintelligible 00:40:57.20]

I don’t think it’s a proper function, let me take that back… It’s a special keyword, I guess, that would check whether the prototype property of a constructor–

Oh, yeah - what is the in keyword?

No. Think about prototypes. I have to pass it to Jake just to be fair, but think about the prototype chain.

What is “has own prototype”?

No, that’s also not correct.

Could you repeat the question?

Yeah. This tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.

What is instance of?

That is correct, yes. Instance of.

Oh, that’s good stuff.

Yeah, that’s a hard one. Alright, so with that we’ll take one more quick break, and then when we come back, we’ve just got a few more questions, and our final question, and we’ll see where everyone stands.

Alright, so we are back with the final wrap-up for JS Jeopardy. Unfortunately, Chris had to leave, but we have given him an honorary medal of survival, because he survived… And I think he hates me now. But in any case, Chris, you did a great job. And let’s just continue… I don’t remember who we left off with?

I think it’s Jake’s turn.

Alright.

I’ll take JS Frameworks for 600… The last 600.

Alrighty. This is an open source JS framework and was developed by Google in 2010.

What is Angular?

That is correct.

Woo-hoo!

So now you’re at 6,500… Was that right?

Yeah.

Okay, cool. Kball, you’re up.

I’m gonna continue to shy away from those JS frameworks and I’ll go with HTML for 400.

HTML for 400. This is an instruction to the web browser about what version of HTML the page is written in.

Ooh, what is that called…?

Oh, it has been so long…

I know exactly where it is, what it looks like… Oh, gosh. I have no idea what that’s called. I’m gonna say “What is the page directive?”

[44:05] That is incorrect. I’m looking for a very specific word.

What is doctype?

Yes, well done!

That is correct!

I forgot… I could not remember. Well done.

I was racking my brain… It’s been so long since I’ve put a doctype on something…

You earned that one.

Okay, so that was for 400. So Jake’s at 6,900, Kball’s at 6,400… It is a very close match. Alright, Jake, you’re up.

Let’s go with JS Frameworks for 400.

This is an open source JavaScript framework created by Evan Yu in 2014, and is very quickly gaining popularity.

What is the second-best framework/library after jQuery - Vue. [laughter]

I thought you were gonna say React. I was like “Oh, no… So much shade!”

[laughs] I mean… Both are great, don’t get me wrong.

I like Vue a lot, and the community is really nice.

Truth.

Alright. Kball, you’re up.

Let’s go with JavaScript again for 400.

Okay. This data type lets you store unique values of any type, whether primitive values or object references.

What is a variable?

That is incorrect.

[unintelligible 00:45:12.26]

Can I get the question?

Yeah. Do you want me to repeat it?

Yeah.

This data type lets you store unique values of any type, whether primitive values or object references. Unique values…

Yeah, what is a set?

That is correct.

Oh, I see. Got it. Yeah, I misheard. Oh, well…

Sorry, my bad. [unintelligible 00:45:35.22]

No, that’s entirely on me. You said the same words to me as to Jake.

No, I only got it with the second reading, when she said “unique”. I was like “It can’t just be an object…” Yeah, that was a good question.

Alright, Jake, it’s back to you.

You’re running away with it.

Let’s see… I’ll take CSS for 400.

This is a keyword added to a selector that specifies a special state of the selected element.

It’s not a specific state… What is a pseudo-selector?

Incorrect. Alright, Kball, you know this. It is a keyword added to a selector that specifies a special state.

Yeah… I know the examples of it, right? This is like hover, or…

I know, I know…

…focus… What is it called? It’s not called a pseudo-selector, because that’s… Hm.

It was pretty close, just sayin’…

What is a state selector?

No, you changed the wrong part of the answer. It’s actually a pseudo-class.

A pseudo-class… Oh, yeah. Okay.

Yup.

I didn’t know there was a difference.

Yeah.

A pseudo-selector is gonna do something like first child, or something like that, right? That’s gonna –

Oh, yeah… There you go. Alright. Learn something every day.

Um, are we back to Kball? Is this Kball’s…?

Yeah. By the way, we’re noticing – these types of interview questions, if you’re asking these, don’t.

Don’t. Don’t do it!

Don’t do it. Jake, I actually don’t know your background, but between Chris and I, we have dozens of years of experience, lots of huge product stuff… Jake, I’m sure you’re very successful, I just don’t know your background… And we’re totally missing these, because they don’t actually measure anything that will help you code.

No. Although to be fair, I was asked to define a closure and I just looked at them and I was just like “Um… Okay…”

That’s actually a really good – you should call them out. If you’re getting asked these questions, call out your interviewer. Be like “What are you testing for? You’re not testing for my ability to code.”

[47:50] Yeah… That’s really hard though. It’s really hard in the moment, when you’re the – “subordinate” is not the right word, but you’re not in a position of interviewing, so it’s really uncomfortable to just call someone out and be like “Well, actually, it’s a terrible question…” “I can explain how it works and I can show you what it’s useful for, but I can’t give you a definition.”

Yeah. And hopefully, at some point you flip into the mode or there’s enough abundance for you or there’s enough opportunities for you where you’re also interviewing them, to be like “Is this a place I wanna work?” and if they’re asking questions like these, the answer is probably no. So yeah… I mean, there’s lots of good ways to do interviews, there’s lots of bad ways to do interviews, and we should be having this conversation – I think we talked about this in the All Things Open episode and a few other things. This type of interview question is not helpful for interviewing… But it’s fun. So let’s keep rolling out, I don’t wanna detour us too far.

Correct, yeah. And as a last note, these are really good topics to know about. You don’t need to know their definitions, but understanding pseudo-selectors is really important, understanding CSS specificity is important, and understanding scope, closure, all those things. In any case…

Oh, absolutely. And they are valuable topics, and these are really useful – this would be really good as a way to like “Oh, I don’t know anything about that. Let me go study it.” But yeah, don’t be using them in interview questions. Alright, last 400, Even More JavaScript.

Even More JavaScript for 400. Do you know how hard it is to find things on an iPad when things aren’t organized…? Okay. Even More JavaScript for 400. This operator returns a string indicating the type of the unevaluated operant–

What is the type of operator?

I didn’t read that definition out before… I literally was like “Give away…” Yes, the type of… Okay, Jake, you’re up.

I’ll take HTML for 200.

HTML for 200.

Trying to steal Kball’s Gimme HTML over there.

This element represents a portion of the document whose content is only indirectly related to the main content.

What is aside?

That is correct. You have 7,900 and Kball has 6,800. It’s okay, Kball, there’s a last chance you’ll have to catch up.

It’s all good. Let’s go with CSS Part II for 200.

CSS for 200. This defines the element(s) to which a set of CSS rules apply.

What is a selector?

That is correct! Finally, selector is in the answer! [laughter] That brings you up to 7,000. Alright, go for it, Jake.

Okay, I’ll take JS Frameworks for 200.

I somehow knew you were going there. I hope you get this one right… This library was developed by Facebook in 2013, and is still the most popular JavaScript library.

What is React?

That is absolutely correct.

Popular by what dimension? I think jQuery is still on more websites.

[laughs] Ooh…

Oh, we’re not doing this right now… [laughter]

No, it is the most popular among current developers. It’s just the law of legacy…

Yeah, I don’t mean popular in terms of usage necessarily, I mean in terms of likability.

Oh, likability… Now, there - I don’t know if React is gonna win on that, but… Usefulness, or usability…

Well…

…being used… I don’t know. I’ve been having to use React recently, and I’m telling you, it’s making Vue look better every day.

Yeah, it is. Kball, we’ve got two categories left. Do you want JavaScript again, or Even More JavaScript?

Well, let’s go with Even More JavaScript then.

[laughs] Let’s do it… Okay, your last question - this method tells the user agent that if the event is not explicitly handled, its default action should not be taken as normally would be.

What is prevent default?

[51:59] That is correct, prevent default. I don’t know if it’s default or default. I never know how to pronounce it… Alright. Okay, Jake, take it home - JavaScript again, for 200. This is the very last question before we get to the super-final round, which is literally just one question. Okay, JavaScript again for 200.

Alright.

This data type holds key-value pairs and remembers the original insertion order of the keys.

What is an object?

No. Kball, you look like you know it.

I wanna go with “What is a map?”

That is correct.

Oh, a map… There you go.

That is correct.

It’s that insertion order thing.

I was like… it can’t be set again. Yeah, yeah… That’s a good steal.

Alright, so here’s where we’re at - Jake, you’ve got 8,100 points. Kball, you have 7,400 points. There’s one final question, and I’m gonna need you to each write in the chat, the public JS Party chat right now, how many points you’re wagering on this answer. You can wager nothing, and just take it and run, or you could bet it all, and who knows - Kball, you might come out on top. So write in your chat, final Jeopardy, how many points you are staking on this answer.

Do we write it before we know the question.

Yeah…

Is this supposed to go on the Slack chat?

Yeah, it is. Are you not in it? I’ll post yours for you, Jake. Just tell me how much you wanna bet.

Sweet, okay. Let’s see… Should I just go for it all? That’s a hard one.

You can, but it would ensure that you win. Kball, do you know how much you’re gonna bet? Are you going all or nothing?

Do we have to let the other person know? [laughter]

Well, otherwise you’re gonna change your answers. [laughs]

Yeah, let’s each Slack them to Emma.

Alright, you each Slack me your answers, and then…

Alright, I’m sending it to you in the Zoom chat privately here.

Perfect. Perfect. And then I have to do more math additions, which is really not my strong suit.

Let’s just go for it.

Do we both get a shot at this last question, or is it like whoever gets it first?

Yeah, you do. You both get a shot. I don’t know how to make this objective, to where you both… One of you I think has to say it first.

We’ve gotta write it to you, so that we can’t change it, and then we each read our answer?

Okay, yeah. Alright. So Kball, you send me your answer in Slack; Jake, you send your answer to me in the Zoom chat. Here’s the final question - this is the year that JavaScript was created.

Unbelievable. This is hard.

Oh, shoot.

Is it gonna be whoever gets closest here?

No, absolutely not. [laughter] Jake, you can’t bet way more than you have. [laughter]

I’ll bet the whole of them. I’m betting all of them.

[55:07] Alright. Welcome to the game where the rules don’t matter. That’s a different game.

[laughs]

Alright, I need your answers, please. What year was JavaScript invented?

Alright, we’ll try that.

Okay. Give me two seconds to tally it up. Someone sing something…

[laughter]

[whistling]

Not bad.

Alright, here’s where we landed. The question was “This is the year JavaScript was created.” The answer was 1995. Which means Kball has won…

No…

He came in at 14,799 points. Jake bet 100,000, which was not allowed, and ended up with -91,900 points. [laughter]

Unbelievable.

So with that, that is a wrap. Kball has won JS Jeopardy, and I don’t have a prize for you other than…

Bragging rights?

Yeah, that’s about it.

Congrats, Kball. You had a really great run there.

[laughs] I can’t believe I got that right, 1995.

I know. I did 1997. I was close(ish).

I was two years old.

I was just – oh, that makes me feel old. I was trying to remember… Because it was Netscape, right? Netscape Navigator…

Yeah.

And I was trying to remember when I first got a browser, and things like that, but…

Wow.

In any case… As a last closing note, to Kball’s point, if you’re an interviewer, please don’t ask these questions. But if you’re interviewing, these are all really great concepts for you to know… And try to love. [laughter] With that, thank you again, Jake, for coming on. It was an absolute pleasure. I’m looking forward to seeing you in Amsterdam, at Vue.js Amsterdam. I don’t know, is JS Party showing up there at all? I don’t believe so…

I don’t know, but if not, maybe you should reach out to them and see… If you’re gonna be there, Emma, reach out and say “Hey, can I host a show?”

Yeah, absolutely. I’ll get back to you on that. That sounds like fun.

And if they wanna fly somebody else in - I mean, hey…

That’s true.

We know a guy.

Awesome. Well, I hope that everyone listening has a great day and is not terrified of me or of technical questions… And with that, I hope everyone has a great Thursday.

Thanks, Emma. Thanks, Jake. Thanks, Chris.

See ya!