JS Party – Episode #112
Jake Dohm vs Chris vs KBall in JS Jeopardy
It’s a new year which means companies are hiring and developers are interviewing. So we thought it would be fun to host a fun game of technical Jeopardy.
Rollbar – We move fast and fix things because of Rollbar. Resolve errors in minutes. Deploy with confidence. Learn more at rollbar.com/changelog.
Linode – Our cloud server of choice. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code
changelog2019. Start your server - head to linode.com/changelog.
The Brave Browser – Browse the web up to 8x faster than Chrome and Safari, block ads and trackers by default, and reward your favorite creators with the built-in Basic Attention Token. Download Brave for free and give tipping a try right here on changelog.com.
Notes & Links
Here are some of the topics we covered which might be useful to know in a technical interview! You should never have to define any of these things but knowing their concepts and how they work will help you land a job!
- Flexbox Froggy
- Flexbox Defense
- Polypane App
- Media queries
- Pseudo classes / elements
- Meta tag
- Const, let, var
- Scope / hoisting
- Undefined, null
- Protoypes / the prototype chain
- Higher-order functions
- Callback functions
- Event bubbling / delegation
- Functional programming
- Strict mode
- Prevent default
- Type of / instance of
- Stack overflow
- WAI-ARIA & accessibility
- XSS attacks / security breaches
Click here to listen along while you enjoy the transcript. 🎧
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…
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?
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.
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.
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!
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.
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…
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.
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]
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–
Yeah… I’m feeling anxious - I feel like that’s the title of this episode.
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.
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, 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…
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.
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.
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.
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.
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.
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.
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?
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.
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.
No one is. That’s why I’m hosting and I’m not playing.
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.
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…
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?
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.
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.
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.
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.
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?
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, 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…
Alright. This is used to declare a block-scoped element and can be redeclared.
What is let?
Correct. Alright, Jake, you are up.
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.
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.
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, 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?
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.
I don’t remember who – Jake, you answered last last time…
…so I think we’ll start with Kball this time.
Alright, let’s see… Let’s go with JS Frameworks for 1,000.
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.
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?
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, 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]
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…
Alright, Jake, go for it.
What is hoisting?
That is correct. So Jake now pulls out into the lead!
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.
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.
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!
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.
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.
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?
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.
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.
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.
What is the best library ever made, jQuery?
That is correct, jQuery.
That puts you at 5,100.
The way you said that, I realized why Jake is calling JAKEuery the best ever…
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?
[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.
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.
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. 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?
Alright, cool. Who’s turn is it?
Jake, I think…
I think it’s me.
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?”
Oh, there you go.
Yeah… It’s hard to come up with a definition for that, because it’s like–
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.
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…
[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.
Are you looking for a function?
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.
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?
So now you’re at 6,500… Was that right?
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.
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.
Alright. Kball, you’re up.
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.
Can I get the question?
Yeah. Do you want me to repeat it?
This data type lets you store unique values of any type, whether primitive values or object references. Unique values…
Yeah, what is a set?
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.
I didn’t know there was a difference.
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…
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.
What is React?
That is absolutely correct.
Popular by what dimension? I think jQuery is still on more websites.
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…
…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.
[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?
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?”
Oh, a map… There you go.
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.
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?
Unbelievable. This is hard.
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.
Alright, we’ll try that.
Okay. Give me two seconds to tally it up. Someone sing something…
He came in at 14,799 points. Jake bet 100,000, which was not allowed, and ended up with -91,900 points. [laughter]
So with that, that is a wrap. Kball has won JS Jeopardy, and I don’t have a prize for you other than…
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…
And I was trying to remember when I first got a browser, and things like that, but…
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…
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.
Our transcripts are open source on GitHub. Improvements are welcome. 💚