JS Danger: HalfStack Edition

Hello, and welcome to JS Danger, our “Don’t-call-it-Jeopardy” game show, where three contestants put their web dev knowledge to the test. I am Alex Treb– I am Jerod Santo, and I’m your host today. Let’s get to know our contestants. First up, Emma Bostian. Emma, you hold two JS Danger accolades. The first one was the inventor of this format, and the second one is you are the lowest score in human history. [laughter]

Okay, go big or go home, Jerod. I don’t like to half– can I say that on air?

No.

Okay, I don’t like to not… Never mind.

You can’t not curse…

Thanks for having me. [laughs]

Happy to have you. Suz Hinton is here. Suz, you’re a long-time partier, but you’re a first-time Dangerer.

Yes, that’s right.

Does that mean you’re nervous?

I’ve done JavaScript trivia games before, but I haven’t done it on the spot, and that tends to be – this is basically interview mode for me, where I forget everything I know, because I’m on the spot… So it’s gonna be funny, I think.

That’s how it works for everybody is what we’re finding. Divya is back. Divya, you are used to dominating our debate episodes, but how is your trivia game?

We’ll see… I don’t wanna preemptively make any claims.

Okay.

I’m not American in that way, I don’t automatically go like “I win!!!” [laughter]

Ouch.

Are you throwing shade right now? This is starting…

[laughs]

She’s on her game, she’s ready to play.

I just at every opportunity like to mention to everyone that I’m not American, and I’m not associated… I just live here.

Well, this is how the game works - we have a gameboard; if you’re watching on video, you’re enjoying that. If you’re listening on audio, have no fear. We will post a video somewhere, of course. This is a podcast, so it will sound great. You can play along without the video, but it’s a nice companion. And we have categories.

There are three rounds. Round one is Trouble, round two is Double Trouble, and then the Final Trouble will finish the game… Of which we have five categories, five questions… If you’ve played Jeopardy, you know what it’s like.

I think I need Jeopardy explained, because it’s very confusing to me and I didn’t grow up watching it.

Okay.

I’m not from this country, and then also all I know is that you ask questions to answer, and that’s very confusing to me… So I’m sorry. I wasn’t briefed on this.

We can get rid of that rule for this if you would like…

[04:04] Yes, we will not dock you technically. We will probably correct you out of habit, we will not dock you. So yes, the clues are given in phrase form, and the answers are in question format. So if it’s a person, you say “Who is…”, if it’s a thing, “What is…” So you just prefix your answer with those prefixes to make it question-sounding… But we’re not gonna hold it against you.

Here’s how it works in terms of the game here. It’s a little bit different than the typically Jeopardy where you buzz in, because of latency and internet and timing. So we go person by person. Emma is first. Emma will pick a category and a point value. I will then present that question just for her, so she has an opportunity to answer that in the form of a question. If she misses it, there’s a chance to steal. We’ll go in order - Divya will have a chance to steal; she can pass, or she can try to steal. If she tries to steal and gets it wrong, she also gets a negative on that question. If she steals it, she gets the points and it ends. If Divya passes or gets it wrong, Suz gets a chance to steal. Same rules apply to her, and then the next round begins. Any questions?

What do we get if I win?

You get to totally redeem yourself. [laughter]

Thank you.

So for round one trouble, our categories are Array Prototypes, the Internet of T (answers in that column will all begin with T), Name That Stack, Turns Out JS (which are all things that compile to JS) and It’s All HTML Semantics. Emma, the board is yours… What would you like start with?

Maybe I’ll start off decently, not balls to the wall. Let’s go for HTML Semantics for 300, please.

For 300… This creates a disclosure widget in which information is visible only when the widget is toggled into an open state.

What is an accordion? But that’s not an HTML element…

[fail sound]

Can I steal?

So we’ll go to Divya for an opportunity to steal…

Oh, sorry. Sorry. I didn’t know what the rules were.

It’s alright, you’ll be next. Emma, -300. Divya, a chance to steal?

What is a select element?

[fail sound]

Yeah, that was my second guess.

Incorrect. -300 for you. Suz, would you like to steal?

What is a detail element?

[win sound] Details…

Oh, man…

Nice.

This element is very popular on GitHub, because you can put it in your issue and you can put a stack trace or a long piece of details in there, and it will toggle the carrot. It will hide it by default. Very good.

I use other things like logs if you wanna show a stack trace in a GitHub issue, but you don’t wanna have this long, scrolly thing for people. It’s very helpful.

Exactly. So there you go. Suz steals the round. She’s got 300. Emma and and Divya starting off rough…

Thanks, Jerod. Thanks for the encouragement.

Let’s move to the next question. How do I do that…? There we go. First-time board user here. Alright, so it goes now to Divya. Your turn to pick a category and a point value.

Alright, can I do Name That Stack for 200?

Name That Stack for 200 - this stack would go well spread on a piece of toast. [laughter]

I love that this is for Divya, too.

Yeah.

[laughs] Wait… I’ve got it.

This stack would go well spread on a piece of toast.

This is brilliant.

Um, what is… Oh my gosh, why am I blanking on this?

You’re either gonna get this right or totally hate yourself.

[08:01] Yeah.

I mean – it’s not Vue…

This *stack* would go well spread on a piece of toast.

Jerod, you’re being you’re being a little lenient with the time, sir!

Oh, JAMstack. What is JAMstack. Oh, my god.

[win sound] That is correct!

I was thinking framework for a second, and I was like “There isn’t one…” Okay, yeah.

I was so close to stealing that…

Yeah, you’re right. I waited a little long. I’ve gotta be more of a –

Yeah, I feel like we need to deduct points from you as a host.

Well, I’m giving all my points out, so I don’t have any left to give. That being said, it’s Suz’s turn… Suz, the board is yours.

Can we do the Internet of T for 200, please?

The Internet of T… The heart of every HTML document. Remember, answers in this category all begin with T.

The heart…

This is the heart of every HTML document.

So I’m getting really esoteric and I’m thinking the heart is kind of in the middle, but kind of on the left, which – like, I can think of one element that starts with T, but…

Go ahead and give it a guess or we’ll have to count it wrong.

What is text?

[win sound] Wow, you got it! Text. Of course–

That’s the heart? Really?

Of course, text is the heart of every HTML document. What’s on the inside? It’s all text in the middle.

Okay… These questions are so obscure. I’m gonna lose again.

Good job, Suz. You’re killing it with 500 points.

Oh, no, it’s going to be [unintelligible 00:09:40.00] [laughter]

Emma, the board is yours.

Alright, let’s go with Array Prototypes for 300, please.

Nobody likes to start off easy with 100. This is interesting.

Nah…

Okay, Array Prototypes. This extracts a section of the calling array and returns a new array.

It’s either – I’m not gonna say it, because if I get it wrong, I don’t want the next person to get it. Arrrgh…! What is slice?

[win sound]

Yay! Okay. I almost mixed those up.

Nice job! Slice it is. You’re now back to zero points. You’re out of the red. Okay… Divya.

I’ll do a 100. I’ll do – let’s see… Turns out JS for 100.

Turns out JS for 100. Google’s language that compiles to native machine code got its second win thanks to the Flutter framework. Is this for 100? This is hard.

This is 100. This is pretty odd.

My bad… It sounded easy when I wrote it.

Google’s language that compiles to native machine code…

Are you familiar with the Flutter framework?

I’m not.

Okay. Well, give it a guess. Give it a goog. You’re running out of time…

Yeah, I don’t know… What is – what is some native thing… Arrgh!

[fail sound]

I don’t know… Yeah.

Okay, opportunity to steal. Divya goes down by 100. Suz, you’re up to steal.

Is it what is Dart?

[win sound]

Oh, Suz is gonna kill us.

What is Dart. Good job, Suz. With this steal, 600 for Suz, and it is now your turn, as well.

Can we do It’s All HTML Semantics for 200, please?

You bet. This represents text which is highlighted for reference or notation purposes.

This could be a couple of things, as usual… It’s very ambiguous.

Hm, ambiguous…

Represents text which is highlighted for reference or notation purposes. Um… I’m just gonna go for it and not waste time… What is quote?

[12:04] [fail sound] Incorrect. Sorry. Emma for the steal?

I’m not stealing this time.

Emma passes. Divya, would you like to steal?

Represents text which is highlighted for reference or notation purposes… Wait, what category is this under again?

This is under It’s All HTML Semantics. These are semantic HTML elements. You can pass. You do not have to steal.

I feel like I’m already losing, and I don’t know if it’s a good idea to just guess.

So you can pass. You don’t have to steal.

I will pass.

Okay, so the element which represents text which is highlighted or marked for reference is the mark element.

Oh… It’s a very ambiguous question, that’s all I can say.

Yeah, yeah.

I take so much heat here, as the – well, whoever wrote these questions, we’ll fire them and we’ll get somebody new.

It was definitely Nick, wasn’t it? This is the kind of stuff Nick enjoys.

It could have been.

Or Dylan.

I’m not gonna say who it was. Okay…

It was Nick or Dylan. Or both.

So that was Suz’s question, so now it’s Emma’s turn.

Can I do array prototypes for 400, please?

You bet. This returns a new array that is the array joined with other arrays and/or values.

What is concat?

[win sound] You are correct. And I lost my soundboard, so I was furiously looking for it… The array prototype concat will return a new array that is the array joined with other arrays and/or values. Very good, Emma. You now have 400 points. It is Divya’s turn. Emma knows her arrays.

I do.

Let’s see… Let’s do something easy. HTML Semantics for 100… You know what, I’m just gonna–

I don’t know… This one topic area is very tricksy.

Okay… A section of a page whose purpose it is to provide navigation links, either within the current document or other documents.

What is navigation, or nav?

I’m gonna need one or the other.

What is nav?

[win sound]

Hurray!

I feel like it’s unfair to use the word in the phrase, but that’s just me…

It’s 100 points. Come on. It’s the easiest one.

Yeah.

I’m out for blood, so…

Suz’s turn. [unintelligible 00:14:29.19]

Can I do Array Prototypes for 200, please?

You bet. This returns a new array containing the results of calling the given function on every element.

What is Array.prototype.map?

[win sound] Very good. 200 points for Suz, bringing you to 600. Emma, your turn.

We’ll do Array Prototypes for 500, please.

Going big or going home.

Nice.

This adds one or more elements to the front of an array and returns the new length of the array.

What is Array.prototype.unshift?

[win sound] Very good! Killing it on the arrays.

Can you tell I’m studying for interviews? [laughter]

I can tell that you [unintelligible 00:15:14.11] Okay. Divya…

Let’s see… Turns out JS for 300.

For 300. This purely functional programming language has a built-in architecture for building frontends.

What is Elm?

[win sound] Elm is correct.

I would never have known that.

Hurray!

Good job.

Non-studying… [laughter] I’m purely just grabbing general knowledge…

Okay, Suz… Your turn.

Can I get Name That Stack for 300, please?

[15:58] Name That Stack for 300. A majestic four-footed beast, or a tech stack centered around a popular search solution.

What…? Okay, a majestic four-footed beast, or a tech stack centered around a popular search solution. A majestic four-footed beast… I’m gonna hate myself if I find out what this is… A majestic four-footed beast… Which could be anything – because I think all four-footed beasts are majestic [laughter] Or a tech stack centered around a popular search solution.

Yeah, maybe you forget about the beast and think about the search solution.

Yeah, yeah, yeah.

I’m so helpful. I don’t think Trebek does this. He just sits there and stares at you. You’re gonna have to take a guess… Now or never.

I’m gonna pass.

Okay, so Suz goes down… And Emma has a chance to steal.

I’m really bad at tech stacks. I know it’s probably around this popular search network framework, to some extent, but I can’t think of any acronyms with this, so… I’m gonna pass.

Alright. Divya, would you like to steal? You got JAMstack right…

[laughs] I know, but at the same time I’m not familiar with tech stacks around search engines. There are not that many. It’s like DuckDuckGo…

Aaargh! I know what it is! Dang it! [laughter]

This is a 400-point question, so…

A duck is not a four-footed beast though…

I know what it is… And it was my first instinct.

Divya, you’re passing?

I’ll pass.

The answer is the ELK Stack.

Oh, okay. I would never have known that.

Okay…

That’s not a majestic beast…

An elk? Have you ever seen an elk run?

It is. It’s very majestic.

The popular search solution is Elasticsearch. ELK stands for Elasticsearch, LogStash and Kibana.

Oh…

Yeah, I kept thinking about Elasticsearch. That’s what I thought of the whole time, and I was like “Who designed this around the Elasticsearch [unintelligible 00:18:19.20]

Alright, that was Suz’s turn, so now it’s Emma’s turn…

Um… Wow, I’ve been sucking at everything else…

You’re running out of Array Prototypes. You’ve gotta go for a 100.

I’d better just go for Array for 100…

Alright… This returns true if every element in the array satisfies the testing function.

What is Array.every?

[win sound] You are now a 100%–

I’m an array expert.

Yes, you are now an array expert.

Very nice.

And you have 1,000 points, putting you in first place.

But that’s it. I’m gonna fail all the rest of them.

You’re in the lead!

You’re in the lead, yeah.

Nice…!

This is great.

I’d like to just say we’re all in the positives here, so I’m feeling pretty good about this group… Divya, your turn.

Okay, I’m gonna do – oh, my gosh… I’m gonna do Name That Stack for 400.

Okay.

Oh, God…

The A is controversial, but these three technologies are staples of the MEAN stack. We’re looking for all three…

Oh, okay. It’s Mongo, Express, Angular, Node.

So which ones are the three?

Do I have to name M, E and N?

Yeah, that’s correct.

Oh, it’s just Mongo, Express and Node.

[win sound] Very good.

I gave the extra A, by the way, so I should get extra points.

Well, the A is controversial. It could be Angular… Some people like MERN, or MEVN, for React or Vue…

Oh, okay. No, it’s actually VENM for Vue.

Oh… [unintelligible 00:19:54.00] Okay, good job. You got it right. Suz, your turn.

Can I do Turns Out JS for 400, please?

[20:03] This controversial language aimed to expose the good parts of JS, with a cleaner syntax. Some of its ideas inspired JavaScript features.

Controversial language…

Aimed to expose the good parts.

I’m going to go with my first instinct here, which could be wrong… But I think it is “What is CoffeeScript?”

[win sound] Very good.

Nice.

And you get those 400 points. You now have 700, and just passed Divya for second place.

Yay…!

Emma, your turn.

I guess HTML for 400.

You killed those 500s…

A self-contained composition in a document page, application or site, which is intended to be independently distributable or reusable.

What is an iFrame?

[fail sound] I’m sorry…

I have no idea.

Divya, would you like to steal?

Hold on, let me read the question…

A self-contained composition in a document page, application or site, which is intended to be independently distributable or reusable.

Like reusable across sites, or what?

Or reusable – I don’t know. Probably on the same page.

On the same page.

Or… Maybe not.

[laughs] This is HTML, right? Yeah…

Are you stealing this, or are you passing?

Wait, wait, wait, I need like ten seconds… [laughter] Till I process this.

Why even –

[laughs]

Okay…

Let’s say “What is section?”

[fail sounds] No, I’m sorry. That is wrong.

Wow, that was a really wrong noise.

That was close though.

Yeah, I know…

That’s our steal wrong, which hasn’t happened yet.

Okay. That’s fine.

So Suz, would you like to steal? It’s not section. I will say that was close though, Divya…

Oh, thanks.

I’ll take a swing. If it’s close, then I feel like my answer might be wrong, but… I was going to say “What is a custom component?”

Are you gonna actually say that, or are you just telling me what you were gonna say?

Yes, what is a custom component?

[fail sound]

Oh…

Suz and Divya both missing on steals. Emma, you missed as well…

Yeah, I did. I missed it.

Did I dock you your points? Yeah, because you were at–

I was at 1,000 before, yeah.

That’s right. Okay, hard to track…

Yeah, she was at 1,000.

Yeah, so Divya was close. It’s actually “article”, which is a very common element, but just a very strange way of describing it…

Oh, my God…

So blame it on Nick, or blame it W3Schools…

I also think custom component is way better.

I actually think custom component is really reusable, if that’s the thing there…

Yeah, I don’t know what article has to do with distributable and reusable. But, you know…

Well, you can have multiple articles on one page, so it’s reusable in that way, but they’re independent entities. You can use an article as a standalone. Anyways, I don’t know… I’m not trying to defend this description; I didn’t write this.

[laughs]

Let’s go on. That was Emma’s turn. It’s Divya’s turn now.

Alright, let’s go for the hard-hitters, I guess. Why not.

Okay.

YOLO. Let’s do Turns Out JS for 500.

Okay. Created and maintained by Facebook, this language offers a new–

Yes! Reason ML.

Woooh! [win sound] [laughter] She didn’t even let me read it…

That was – I don’t even know how that is a 500 question though. It literally spells it out for you.

Yeah, exactly.

That’s so easy… [laughter] I’m so disappointed.

I have never heard of that before in my entire life.

See, Emma didn’t know it.

I’ve never heard of that.

Okay, sorry. My bad. Sorry, I should not have said it was easy.

So much criticism for these questions…

No, that’s payback for the 100 question… [laughter]

Fair enough, fair enough. The hardest part with these boards is actually figuring out what are hard ones or easy. Okay, Suz. Your turn.

[24:00] Can I get Internet of T for 300? Let’s just be a little bit moderate…

Okay. Everything here begins with T. An object’s sometimes elusive self-reference.

What is this?

[win sound] Very good, this.

That’s not too bad.

Yeah, there you go. Suz gets 300. Now it is your turn, Emma.

Okay, Internet of T for 400, please.

When are we new Date without any arguments?

[laughs]

[laughs]

I’ve never actually read that one out loud before… That’s incredibly confusing.

Okay, new Date is an instantiation. You can see the back ticks there. You’re calling new Date without any arguments. Okay, I was saying it for the audience’s sake.

What is a timestamp?

[fail sound]

I don’t know… Who wrote this?!

Yeah, what are they asking?

Yeah, that’s what I don’t understand.

When are we… Divya, would you like to steal?

I wanna steal.

Okay, I’ll steal.

Okay.

It is time – I’m very nervous about this now.

[fail sound]

Yeah, whatever. Just dock me.

Suz, your turn.

What is now?

It starts with a t.

Oh, I’m sorry. [fail sound]

Are you freakin’ kidding – okay…

What is today?

Oh, my God! Are you kidding me?!

That is absolutely rude.

No, no. That is rubbish.

It is absolutely “What is now?”

Can we all agree that question doesn’t count? Because that was the stupidest thing I’ve ever heard.

I can’t believe I lost points for that. It is “What is now?” How can you possibly allow today? That is the rudest.

When you call new date without any arguments, it always returns the current date today. Internet of T. It has to begin with a t.

Oh, my God… I was like, timezones, whatever…

I’m not a sore loser, but that was very disappointing.

I will find whoever wrote these…

I’ve got a mutiny on my hands… Okay, well everybody got it wrong, so it’s fair.

Oh, God… That was brutal.

I will still say I got it right.

[laughs]

I’m angry.

Suz, it has to begin with t. Now does not begin with t. Okay, moving on…

Oh, my God. I didn’t think of that.

Oh, it begins with t… Yes…

Today.

Okay, fine. I accept this then. I just forgot the topic.

Okay, good.

Yeah, me too.

Okay, whose turn is it?

I think it’s mine.

Okay, Divya’s turn.

That was Emma’s question, right?

Yup.

I sort of wish that the questions had the categories associated, so I can [unintelligible 00:26:41.03]

That’s a good point. We can do that round two of this board.

For the future. Okay. I’ll do the last 200, please…

Okay, this Turns Out JS, 200. Boasting static type checking and other tooling goodies, this claims to be JavaScript that scales.

What is TypeScript?

[win sound] Correct answer, TypeScript.

I hope Nick is proud of me.

I’m sure he is.

Well, Nick’s in the chat saying he didn’t write it, so… [laughter]

That’s not actually Nick. That’s an impostor.

You’re not saying he’s proud of you because you got his question; there’s another reason.

I didn’t say Nick wrote it, I just didn’t say he didn’t write it. Okay. Suz’s turn. Full disclosure, I wrote all these questions, so you can blame me.

Name That Stack for 500, let’s do it.

Which one?

Name That Stack for 500… Although I feel like all the other ones were…

The team at Neo4j would love you to use this stack. It also includes GraphQL and React. This is a true 500…

I don’t actually know – I’m not sure I know what the stack is actually called, but I know exactly what you’re talking about… The team at Neo4j would love you to use this stack. It also includes GraphQL and React.

We’ll need an answer.

No. I mean, I know this is not correct, but I’m just gonna throw it out there - what is Apollo?

[fail sound]

[28:11] Yeah. It’s a tool, not a stack.

Suz misses. Emma can steal.

I will not steal.

Emma passes. Divya can steal.

I don’t even know… [laughs]

Then I would say just not stealing.

I’m not gonna steal, because I don’t even know what it is…

Yeah, wise choice.

Suz was on the right track. The technologies are GraphQL, React, Apollo and Neo4j. So the stack name is called The Grand Stack.

Oh, I’ve literally never heard of that.

Oh, the Grand Stack…

I had not heard of it either, so… That’s why I said, this is a pure 500. That’s a tough one.

Yeah. I knew Apollo was wrong.

Okay, we go to Divya…

Alright, let’s do… Hm. Hmm… [laughter] I’m on the up and up, so I don’t wanna get very boastful at this time.

You are. You’re now in first place.

Let’s do 100. Let’s do Internet of T.

Internet of T. Reminder, all answers must begin with t. Rotate, scale, skew or translate an element.

What is transform?

[win sound] Very good.

That’s a good one.

Yay!

Divya with 600 is still in the first place. We go to Suz. There’s three left.

Yeah, so there’s no chance of me being able to come back unless I get the two 500s, so…

Well, I’ll remind you that round two is Double Trouble. All points double. So this game is nowhere near over.

Wait, there’s another round? It’s been like half an hour already.

Well, we’ve got an hour.

I guess… Well, I feel like I should – I don’t care about getting a quick win at this point, so…

Okay.

The HTML Semantics are incredibly, incredibly tricky, but I will take that anyway… Over an esoteric thing starting with t.

This represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. This could be many things. It’s definitely HTML, right?

Yes, this is an HTML element. Everything in this category is an element.

Represents a position within text where the browser may optionally break a line, although its line-breaking rules would not otherwise create a break at that location.

We’ll need an answer.

I’m gonna pass.

Okay.

This is nothing obvious for me.

Emma for the steal. 500 points on the line, Emma.

No, I’m not gonna go for it.

Okay. Divya with an opportunity to cement her lead.

Okay, I wanna take a crack at this.

Okay.

I’ll take a crack at this… What is <br>?

[fail sound] Ohhh…! So close, Divya.

That’s what I would have said…

Really…?!

The correct element is <wbr>, which stands for word break…

Oh, my God…

And it is indeed esoteric, which is why it’s a 500-point question. You were literally one letter off.

I know…

But you kept the game close… Emma, your turn.

I’m gonna do Internet of T for 500, please.

Okay, Internet of T. This group meets every two months to evolve the definition of JavaScript.

Are you serious? That’s a 500-question? Come on.

Oh, my gosh… Come on.

I know the answer, and it’s totally just blanking me right now.

This is really rude… You got this, Emma.

I feel very attacked for my board here.

[32:00] This is a 500 question, seriously?

I know, ridiculous…

I should have picked that one.

[laughs] Nonetheless, Emma doesn’t know it.

I’ve totally blanked, now that everyone’s over there like “It’s so obvious, it’s so obvious…”

No, it’s fine. You’ve got it.

You’ve got it.

I cannot remember, for the life of me.

Okay, so I’m gonna have to say wrong answer. [fail sound]

Divya’s gonna take the lead.

Yes! What is TC39?

[win sound] TC39 Working Group. Very good, Divya, with a 500-point steal, which means she gets the last clue on this board… Name That Stack for 100.

Let’s do it.

Divya, name the LAMP Stack.

Oh, my–

Uh-oh…

Okay, I know that it’s Apache, MySQL, PHP… And then the L stands for… Linux! Linux, Apache, MySQL, PHP.

[win sound] Very good. That brings us to the end of our trouble round. Emma at -300, Divya with a commanding lead at 700, and Suz pulling up the rear at -800, but don’t–

I told you there’d be a dip.

Don’t delay, we have twice as much trouble right around the corner. Stay tuned for round two, coming up next.

We are back for round two of JS Danger, HalfStack Edition. It’s Double Trouble, that means all points are doubled. Our categories for this round are Obscure Web APIs, Document.title - this is where the clue is the title element of popular websites, and you must name the website. Category three is Node Drama (hopefully no drama in that category), category four is CSS Select Star (these are all selectors), and the last category, Talk Protocol To Me (popular internet protocols). Suz, the board is yours. Where would you like to start?

Oh my God, my colleagues are watching this… This is horrible. [laughter]

Suz, your turn.

Sorry, sorry. I’m gonna pick Talk Protocol To Me for 400, please. That’s my favorite topic.

Okay. This old-school protocol for sharing files typically runs unencrypted on port 21.

What is FTP?

[win sound] The File Transfer Protocol.

Oh, I couldn’t remember if that was Telnet or FTP, but Telnet is more for like text communications…

Yeah, Telnet is 22, I believe…

Yeah, yeah. That’s what it got refused.

Yeah, it was very close. Very good, FTP. Okay. Off to a good start. Emma, your turn.

Alright, let’s see if I can get in the positives. Can we do CSS for 400, please?

Okay, you give the selector, I give you the [unintelligible 00:35:37.00] This is how you select active links. You can just say it out loud.

Isn’t it just a pseudo-selector for active?

We’re looking for the actual selector.

Okay, so a::active.

[fail sound]

Is it one?

[36:02] Divya for the steal?

Select active links… Is it like a focus, or something?

Are you gonna try a steal?

Yes…

Okay, so what’s your steal answer?

Focus.

[fail sound] Sorry, that’s incorrect. Suz, would you like to steal?

Yes. What is a :active?

[win sound]

Wait, wasn’t that what Emma said?

Emma gave me two colons. We were looking for one colon.

No, Jerod, I challenge this.

No, no– what?!

No, it used to be double-colon.

Okay…

It used to be double-colon and they changed it in a more recent version.

Okay. So you’re a:: would also work?

So I would like to challenge this. Technically, yeah. So “The double-colon selectors are pseudo…” Oh, okay. I see. I lied. So double-colons are pseudo-elements, single-colons are pseud-selectors. Never mind. Fair enough.

Alright.

Yeah, like before, and things like that.

Right.

Those are freaking confusing.

They are.

I somehow thought Emma said :active, and I was like “If that’s not the answer…”

No, I did say two colons.

Well, that’s why I said she was so close, because she said ::active, and I was like “Ohhh…!”

I promise I did not see Steve’s answer…

I know, we’ve just asked him to not– no, I didn’t assume anyone did.

Alright, so that was a tricky one. For that category we will be requesting the actual selector for each of those, so… Okay, that was Emma’s turn. Divya, you are up, with 300 points.

Alright. So you said Document Title is guess the website based on the document title…

Mm-hm.

Well, let’s give this a spin, shall we? Let’s do 400. I feel like 200 would be like weird and tricky.

Where developers learn, share, and build careers.

God dang… Is this like “What is Stack Overflow?” or something…

[win sound] Stack Overflow.

Oh, yes…!

You were so unconfident, too… [laughter]

Good job. Okay. Suz.

Can I do Talk Protocol To Me for 600? Sorry, I just love protocols, but I’ll probably show myself out with this one… So let’s do it.

I don’t want any of them, so…

Respond with SYN-ACK if you’ve got this.

Respond with SYN-ACK if you’ve got this. Um, what is sin?

We’re looking for the protocol itself.

Oh, sorry.

It’s alright.

What is TCP?

[win sound] Very good.

Sorry. Thank you.

Hurray!

That’s alright, I didn’t say that out loud; I wasn’t clear. So we’re looking for the protocols in that category. Good job, Suz. You have 600 points. It’s Emma’s turn, you have -700.

Okay, you don’t have to remind me. I’ll try to redeem myself… [laughter] You know, we’re gonna go big or go home. Let’s do CSS Select Star for 1,000, please.

Oh, my goodness!

Yes!

Maybe it’s a hidden easy one. We’ll see. Okay, this is how you select all elements with a _blank target.

So it would be [“target=_blank”], with a dot in front of it, because we have to select all elements.

I’m gonna give it to you… [win sound] I’m not sure if that’s technically correct, but it was very close. And maybe they both work. What I was looking for was [target=_blank], but potentially – did you put double quotes in there?

You can put the quotations. You are allowed to.

You can put it.

[39:58] You can put quotations.

Okay. I thought that might work, which was why I gave it to you. I just wasn’t sure.

No, you’re allowed to.

Fair enough. Good job, you got it right. It’s 1,000, so you now have 300 points.

Hurray…!

Finally… [laughter] It’s all downhill from here.

Okay, Divya, your turn.

Alright, let’s see what Obscure Web APIs is for 200.

Oh, I’m so scared of this.

Shake, rattle and roll your way to unique features with this APIs hardware knowledge.

What is WebGL?

[fail sound] I’m sorry, that’s incorrect. Suz, would you like to steal?

Yeah, um – does it have to be the exact name of the feature?

Yeah, it has to be recognizable.

It has to be recognizable…

If I know what you’re talking about, it’s fair.

Yeah, what is the gyroscope or accelerometer API?

[fail sound] Not quite close enough, I don’t think…

Ugh, come on…

Emma?

I’m not doing it… [laughter]

The correct answer is the Vibration API.

Oh, gosh…

Oh, okay. I thought it was the [unintelligible 00:41:00.04]

I also thought shake, rattle and roll was just like a metaphor to mean animations…

Yeah, I thought it was just doing this.

Yeah… My initial idea was gonna be a “shake to undo” reference, but I thought that was too easy, so I changed it to shake, rattle and roll. Now you have the inside baseball – I’m sorry, that was a bad one. Okay, let’s go to Suz.

Talk Protocols To Me for 200. [laughter]

She’s staying consistent…

We’re all staying in our lanes.

I’m glad.

Say HELO to start the conversation.

[laughs] I have no idea what this is… Say…

HELO.

HELO… Is this a trick question? [unintelligible 00:41:43.22]

This is the first thing to send on this protocol.

Say HELO to start the conversation…

Yeah.

Why is there only one L?

Because that’s the actual text that you send, HELO.

Oh, I see. So we’re talking about the web, right?

We’re talking about the internet.

The internet…

I think you could say the web, yeah… Roughly.

I’m gonna guess.

Okay.

What is Telnet?

[fail sound]

Okay. I forget how you start with Telnet. I think you can just type, right?

I think you just type out whatever you want, yeah. You’re just connected. Okay, Emma, would you like to steal?

I would not.

Okay. Divya, would you like to steal?

I’m passing. I don’t know.

Okay. So HELO is the first message sent in the beginning of an SMTP conversation.

Oh…! I actually didn’t know that. That’s cool. I learned today.

The Simple Mail Transfer Protocol. The second thing you say is mailfrom, so that was too easy…

Yeah. I knew the mailfrom.

Oh…

That’s awesome.

Start with the HELO. This is how servers send email to each other.

Nice.

Next up is Divya.

That is interesting.

That was at a 200. Just saying. [laughter]

That should be like… Yeah. 600.

[unintelligible 00:43:09.27] Okay.

I wanna open the Pandora’s box. I wanna know what Node Drama is.

Divya wants some drama.

What number should I pick…?! Let’s pick 400. Let’s see what’s behind that.

Okay. A December 2014 fork…

Oh, God…

…that was later merged in after establishing the Node.js Foundation. We’re looking for the name of the fork.

Oh, gosh… Was this “What is Node Together?” [fail sound] No, I think this was before.

It’s incorrect.

I can steal.

Suz, ready for a steal?

Yeah.

Hold on. Jerod, I just wanna say, you skipped my turn.

Oh, shoot.

[43:59] Just saying. Because you went from Suz to Divya.

Oh, no…! Okay, so after me…

We’ll loop back around you. We’ll go Emma, Suz, and then we’ll go back to Emma.

I’m just being a hard ass. It’s fine.

No, because this changes the path of the game.

We wanna be fair.

Yeah, this does change things.

I’m sorry. So Suz, you have a chance to steal here.

Is it “What is io.js?”

[win sound] Very good, io.js was the…

God, I remember that so clearly…

Oh, nice.

I remember literally where I was working, and all the discussions around this.

So there’s some Node Drama for you. We’ll go back to Emma now, since I skipped her, and then we’ll go to Suz next, and then we’ll start the next round. Emma, your turn.

We’ll do CSS for 800, please.

Staying consistent… Select every <p> element that is the last <p> element of its parent.

p::last-child.

[fail sound] That was incorrect.

Really?

Divya, would you like to steal?

It’s single-colon.

Are you stealing?

Yeah.

Oh, are you kidding me?

It’s p:last-child.

God…

[fail sound] Oh, that’s also incorrect.

Oh, wait… What?! Okay… Carry on.

Suz, would you like to steal?

What?!

How many points is this?

This is worth 800 points.

A lot. Yeah.

How is that possible?

Because it’s not a child. You want all of them, you don’t want the last child.

Yes. Every <p> element.

I haven’t done this in a while, but I’m gonna do p:last.

[fail sound]

Yeah, see - I didn’t think it was that either.

The correct answer is p:last-of-type.

Oh, last of type…

Very close.

Does anyone use that?

…right, because they aren’t children.

Right.

I just wanna say, look at our scores and they’re all negatives… What does this say about the board? [laughter]

It means that it’s a challenging game.

Judge the board all you want… It is a challenging game.

It’s a challenging game and we’re over-confident. [laughter]

Yes, we definitely are.

I think that’s a fair statement. So that was Emma. Now we’re gonna skip Divya, because we went out of order.

Yup.

We’ll go to Suz.

Okay. I feel like I kind of ran my luck out with Talk Protocol To Me… So we’ll save that for maybe a Suz catch-up steal round…

Okay.

So I’m gonna do CSS Select Star for 200, please.

Okay. Select all elements with class=party.

Oh, my gosh…

.party?

[win sound] .party.

I thought that was a trick question. I was like “Oh, my God, I’m gonna get it wrong…” [laughs]

It’s almost too easy…

I would have been mad if it had been a trick question.

It’s more that I didn’t really think about it, I just kind of blurted it out, so…

I will just say that with that answer, it moves you in the first place with 0 points. [laughter]

Very nice.

You say that like it’s a good thing, but…

It’s a non-negative number, so it’s good.

That’s right. You’re out of the red. Emma, your turn.

CSX for –

Excuse me?

CSX for six–[laughter] I’m not even drinking…

CSS for 600… Select input elements with no required attribute.

With no required attribute…

That’s correct. How do you select input elements with no required attribute?

Okay, so it probably uses the not pseudo-selector… Okay, so the [required::not]. I don’t know…

[fail sound] No.

I don’t know…

Divya, would you like to steal?

I’ll pass.

[47:56] Okay. Suz, would you like to steal?

I do, but I’ll pass, because I’m not 100% confident.

There we go. It’s <input>:optional.

And that would have been wrong.

What?!

So if you select <input>:optional, it will give you all the inputs that do not have a required attribute… Which is kind of cool. I actually learned that making this. Okay.

Hm. I’m learning a lot. I used to be the selector queen, but then in the last five years I’ve lost my edge… So this is awesome. I’m so happy I’m learning this.

Awesome. Happy to hear that. Divya, it’s your turn.

Let’s do Document.title for 600.

The front page of the internet.

Oh, my gosh… Is this like “What is Reddit.com?”

What is Reddit.com. Very good.

I wouldn’t have gotten that.

It’s not my front page, but yeah…

You see, they write their own titles… So this is like websites according to themselves.

I mean, I figured… People at Reddit think they are the front page, but… Only for dudes.

[laughs] Suz, your turn. The front page of internet for dudes… It just doesn’t have the same ring to it. [laughter]

I’m gonna take Obscure Web APIs for 400, please.

Okay… This API replaces the now-deprecated WebVR API, to make room for AR2.

Ohhh… I know this one.

Um. Is this a trick question?

It depends on how tricky you think it is. I don’t think so.

Okay, my best answer is “What is WebAR?”

[fail sound] Incorrect.

Ohhh! I know what it is. Dammit. Okay…

Emma, your turn for a steal…

I’m not gonna steal, I don’t know anything about APIs…

Okay, Divya for the steal.

I’ll steal. Is it “What is WebXR?”

Yes.

[win sound] Correct.

I always forget that A is not the generalizer. It’s the X.

Yeah, it’s like “eXtends”…

Right. If you put VR and AR together, you have Extended Reality. Some people call it mixed reality, but they used an X instead of an M.

Yeah, Mixed Reality is like the Microsoft term.

Yeah. So WebVR is old and busted, and WebXR is gonna be replacing it here soon. That is an obscure Web API though. That was Suz’s turn, so we’re back to Emma.

I’m just gonna preface this with - I feel zero confidence about the rest of these, so… This is just gonna be a massive dumpster fire. I guess I’ll go with Document.title 200, please.

Okay… News and podcasts for developers. *Smirk* *Wink-wink* *Nudge-nudge*. News. And Podcasts. For Developers. [laughter]

Trick question…

Divya, no clues.

I’m not, yeah.

I have zero idea, because I don’t listen to podcasts.

This is like worse than when you didn’t know Feross was a maintainer…

Oh, God… [laughs]

What is Hacker News? I don’t know…

[fail sound] That is wrong, and we are offended. Divya, would you like to steal, please? Please, steal…

Yes, I would like to steal… What is The Changelog?

[win sound] Yay! Changelog.com, where we make news and podcasts for developers… [laughter] Okay, I’m not offended… This is Divya’s turn…

You’re gonna fire me, aren’t you?

No…

Alright, let’s do Obscure Web APIs for 600.

Okay… This API gives you visibility into tasks that take 15 milliseconds or more… For you performance nerds out there.

Oh, gosh… What is – oh my gosh, I think I know it. Shoot, what is it called…?

This API gives you visibility into tasks that take 15 milliseconds or more.

[52:02] It’s at the tip of my tongue… Performance thingy… I’m not gonna get – oh, God… I know it, because I’ve used it…

We’ll need an answer soon.

What is… What is that thing called?!

Now or never.

I’m blanking. You can just pass, yeah.

[fail sound] Okay. Suz, would you like to steal?

No, I don’t have the fully-formed name in my head, so I’ll pass.

Okay. Emma, would you like to steal?

Heck no…

Okay, so the API that gives you visibility in the tasks that take 15 milliseconds or more is the Long Tasks API. That is a tough one. Okay, that was Divya’s turn… So it is now Suz’s turn.

I’m really bad at the Document.title stuff, because I literally just don’t go on sites that the developers go on. I don’t go on Hacker News, or I wouldn’t even know what the tagline of Hacker News is, for example… So I’m scared of that topic.

Okay. Are you scared of Node Drama? You seem to know Node Drama.

Node Drama…! [laughs]

I mean, I don’t like the topic…

But you remember things.

Let’s do Node Drama for 600. Why don’t we just go for it.

A second major fork dubbed AYO occurred in 2017 amid controversy surrounding violation of this document.

Violation of this document… Was it the Node.js Code of Conduct?

[win sound] Correct answer. The Code of Conduct.

Yeah… I don’t wanna think about that either… It makes me mad.

Yeah, that’s the worst.

This whole thing just makes me mad.

I’m sorry.

That’s fine.

We’re not naming any names in this category. Let’s go to Emma.

Do I have to…?

Come on, Emma. You can do it.

I want Document.title for 800.

Document.title for 800. Discover the world’s top designers and creative professionals.

Well, the “creative professionals” thing makes me think it’s maybe not Dribble, at that point… Or maybe it is…

Is that your guess?

What is Dribble.com? I don’t know…

[win sound] Yaay!

Really?!

Nice!

Oh, thank God. That would have been so embarrassing.

That brought you right back into the game. You’re tied with Divya at -500. Suz still in the lead at +200. We’re getting to the end of this board here. Divya, it’s your turn.

I’ll do the last Document.title.

For 1,000, the JavaScript organization.

THE JavaScript organization… Um, “What is the OpenJS Foundation?”

[fail sound] I’m sorry, I can’t count that.

It’s Jerod’s personal portfolio, isn’t it? [laughter]

THE JavaScript organization… Okay, well… Hurray, negative many points… So Suz is next.

Yeah, I don’t wanna steal, because I can see from Divya’s answer that it’s really easy to mess this one up, because…

Yeah.

It’s technicality-related, so I’m gonna pass. It’s too ambiguous.

Yeah. Emma, you probably don’t wanna steal either…

How did you know?

Because I think this is hard… [laughs] Well, actually, let’s stop the stealing and let’s put Divya’s answer under further review, because…

Because I think that Divya was kind of correct…

The actual answer we were looking for is Js.org.

That’s what I would have guessed. Are you kidding me?!

Yeah, but I feel like OpenJS Foundation is the collective…

Well, that’s why I was starting to think that maybe she actually got it right… But we’re looking for the – what do you ladies wanna do here?

I mean, I’m gonna lose, so I don’t really care…

Well, we’ll just leave you alone, just leave it?

[55:55] Yeah, it’s fine.

Okay.

I’m not petty. It’s all good. I know in my heart of hearts that the real JavaScript organization –

Divya, you were right. You were right. [laughter]

I mean, we can give her the points back. This is our game.

I mean, they do organize a conference and they do rally all the community around it. I don’t know what js.org does…

Do they operate js.org? I think they do.

I don’t know, actually.

I’m gonna go ahead and give it to you. I’m gonna give it to you.

I’m actually looking at js.org.

I think they actually do run js.org.

I’ve literally never seen this website in my entire life.

Neither have I. [laughter]

Well, js.org is THE JavaScript Organization. D’oh…

I mean…

You know, it’s where people get free subdomains for their things.

This was definitely a 1,000 question, for sure.

Yeah, yeah.

Yeah, that’s true.

I just saw Emma pulled up the website, because it’s bright yellow and I can see it in her face… [laughter]

It’s so bright that her face lit up?

This is not the website I thought it was gonna be.

Yeah, I thought it was gonna be the OpenJS Foundation.

I think it’s operated by them, and it’s free for developers to put their packages as a subdomain. So you could have Divya.js.org.

It’s probably just a random dude that bought it, and was like “Donate to the JavaScript Foundation, to my personal PayPal.”

I don’t think so, but…

I have no idea.

…we’ll give Divya the correct answer there. I think she got it.

Thank you!

And if not, listeners, you can correct us later. Suz, your turn…

Hey, Jerod here. As much as I hate to admit it, Emma was right and I was dead wrong on this one. Js.org was created by Stefan Keim, who dedicated it to JavaScript and its awesome community in 2015. Its purpose is to provide short and sleek subdomains for your GitHub Pages site, and it’s completely free thanks to Stefan, Cloudflare, and many other contributors.

You can support Stefan’s work with js.org on PayPal. I linked it up in the show notes for easy clickings. Sorry about that, Stefan. Okay, back to the game…

Suz, your turn. We’re getting to the end.

Let’s do Node Drama for 200.

The runtime’s original developer is now working on rearranging his letters.

Oh, gosh…

Oh, I lied. We do name names. This is a name.

So this is the name of the person, right?

Yeah, the original developer.

Who is Ryan Dahl?

[win sound] That’s correct.

He was Ralph in my head for exactly ten seconds, and I was like “It’s not Ralph!” [laughter] You know when you’re on the spot, my brain is like “It’s totally Ralph.” I’m like “It’s really not… It’s not Ralph.”

That’s hilarious!

I just have to say, this category is very upsetting. [laughs]

Jerod, I also just wanna tell you that that js.org site has 800 followers on Twitter, and the PayPal goes to a random guy named, so I’m pretty sure that’s not legit. Just saying… [laughs]

We’ll have to double-check.

I’m glad Divya got the points. Don’t send them money…

I’m pretty sure js.org is run by the OpenJS Foundation.

Really?!

I think so.

Anyway. I had no idea.

Let’s go to – whose turn was that? That was Suz on Node Drama. She got Ryan Dahl correct…

Yeah, it’s Emma now.

…she now has 400 points. We are on to Emma.

Can I just sit at -500 and let them battle? [laughter]

You’d probably end up winning.

Oh, no…!

Alright, fine. Fine.

You don’t give yourself enough credit.

You got it.

I don’t know any of this stuff. I don’t work with APIs, Node or protocols. I’m not a web developer.

You might surprise yourself.

I bet you there’ll be a 1,000-point question that was easy as pie, because that happened last time.