JS Danger is back! Suz, Emma, and Divya square off in our don’t-call-it-jeopardy game show. Will Emma totally redeem herself? Are Divya’s trivia skills as on point as her debate skills? Will Suz murder Jerod in a fit of terrible-question-inducing rage?! Listen and play along!
Linode – Our cloud of choice and the home of Changelog.com. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code
changelog2020. To learn more and get started head to linode.com/changelog.
Click here to listen along while you enjoy the transcript. 🎧
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?
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?
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.
I’m not American in that way, I don’t automatically go like “I win!!!” [laughter]
Are you throwing shade right now? This is starting…
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.
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…
[00:04:04.29] 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]
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…
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?
Yeah, that was my second guess.
Incorrect. -300 for you. Suz, would you like to steal?
What is a detail element?
[win sound] Details…
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.
[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.
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.
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.
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.
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?
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?
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!
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?
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.
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?
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.
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.
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.
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?
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.
I’m out for blood, so…
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.
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]
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.
Non-studying… [laughter] I’m purely just grabbing general knowledge…
Okay, Suz… Your turn.
Can I get Name That Stack for 300, please?
[00:15:58.27] 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?
The answer is the ELK Stack.
Oh, okay. I would never have known that.
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.
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.
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.
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.
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.
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.
Can I do Turns Out JS for 400, please?
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?”
And you get those 400 points. You now have 700, and just passed Divya for second place.
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.
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 –
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…
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?
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.
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.
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.
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.
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?
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?
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.
It is time – I’m very nervous about this now.
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.
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…
Okay, fine. I accept this then. I just forgot the topic.
Yeah, me too.
Okay, whose turn is it?
I think it’s mine.
Okay, Divya’s turn.
That was Emma’s question, right?
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…
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.
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?
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`?
That’s a good one.
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…
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.
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.
I’ll take a crack at this… What is <br>?
[fail sound] Ohhh…! So close, Divya.
That’s what I would have said…
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.
But you kept the game close… Emma, your turn.
I’m gonna do Internet of T for 500, please.
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.
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.
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.
Is it one?
Select active links… Is it like a `focus`, or something?
Are you gonna try a steal?
Okay, so what’s your steal answer?
[fail sound] Sorry, that’s incorrect. Suz, would you like to steal?
Yes. What is a :active?
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.
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.
Yeah, like before, and things like that.
Those are freaking confusing.
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…
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.
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.
What is TCP?
Sorry. Thank you.
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!
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.
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.
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…
I’m not doing it… [laughter]
The correct answer is the Vibration API.
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.
Say HELO to start the conversation.
[laughs] I have no idea what this is… Say…
This is the first thing to send on this protocol.
Say HELO to start the conversation…
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.
I think you could say the web, yeah… Roughly.
I’m gonna guess.
What is Telnet?
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.
Start with the HELO. This is how servers send email to each other.
Next up is Divya.
That is interesting.
That was at a 200. Just saying. [laughter]
That should be like… Yeah. 600.
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…
…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.
I can steal.
Suz, ready for a steal?
Hold on. Jerod, I just wanna say, you skipped my turn.
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…
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.
[fail sound] That was incorrect.
Are you stealing?
Oh, are you kidding me?
[fail sound] Oh, that’s also incorrect.
Oh, wait… What?! Okay… Carry on.
Suz, would you like to steal?
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.
Yeah, see - I didn’t think it was that either.
The correct answer is p:last-of-type.
Oh, last of type…
Does anyone use that?
…right, because they aren’t children.
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.
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…
So I’m gonna do CSS Select Star for 200, please.
Okay. Select all elements with class=party.
Oh, my gosh…
[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]
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 –
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…
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.
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?”
[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]
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?
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.
[00:52:02.08] 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, 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.
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!
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.
[fail sound] I’m sorry, I can’t count that.
It’s Jerod’s personal portfolio, isn’t it? [laughter]
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…
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?
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]
You know, it’s where people get free subdomains for their things.
This was definitely a 1,000 question, for sure.
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.
I don’t think so, but…
I have no idea.
…we’ll give Divya the correct answer there. I think she got it.
And if not, listeners, you can correct us later. Suz, your turn…
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, 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.”
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.
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.
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.
Yeah, that’s true.
Let’s do Web APIs for 800.
There you go…
Arrgh, I feel like I should know… I should know this.
A set of APIs…
I don’t know. I don’t use any of this stuff, so I have no idea.
Okay. [fail sound] Divya for the steal?
I’m gonna take a crack at this one. I don’t even know if it’s right… What is CSS-in-JS? I don’t even know if that’s a set of APIs though.
[fail sound] Nope. Not what we’re looking for.
Alright, it’s not.
I’m gonna take a crack at it. Is it “What is Houdini?”
Actually, Houdini is a very good guess.
That’s a good guess. This one bit everybody. This is the CSS Object Model.
Just like the DOM, but the CSS.
I didn’t know that was an API.
I don’t know if that was an API… I thought it was just a model.
I thought it was a representation of a tree, yeah. Rude. Absolute rude.
Well, is the DOM an API?
The DOM has an API.
Yeah, you have an API to interact with the DOM.
It’s not directly…
A set of APIs. You’re gonna argue that the DOM is not a set of APIs?
Well, Houdini is a set of APIs.
Honestly, Houdini is a set of APIs.
I liked your answer. I liked Houdini.
That was a good answer.
I appreciate it.
I appreciate that answer.
I’m actually happy to lose points on the fact that my answer was better. [laughter]
Alright… That’s a win/win. Or a lose/lose. Okay.
That was a good answer.
Alright, let’s see, what do we have… Should I do Obscure Web APIs, or – hell, let’s just do Obscure Web APIs for 1,000.
Avoiding Node Drama at all costs… This makes it possible for a server to send new data to a web page at any time by pushing messages to the web page.
Ah, yes… Why is it every time I know the name, it totally – I have really bad… Ah, I know this! What is sockets?
[fail sound] I’m sorry, that’s incorrect. Suz, would you like to steal? This makes it possible for a server to send new data to a web page at any time by pushing messages to the web page.
Yeah, I don’t think it’s what Divya is talking about, because that’s not obscure. I don’t think that web sockets are obscure.
I know exactly what this API is, and I think I know the name, but I’m actually gonna pass on it.
Oh, wow. Extreme self-control.
I just wanna see if I’m right.
I definitely don’t wanna steal.
It’s such a simple name… That’s why I don’t trust it.
So the correct answer of the API is called Server Sent Events.
Yes… Because here’s the thing - Server Sent Events is like one version of it though… It actually has other – there’s another thing that [unintelligible 01:02:30.17]
There’s other ways of accomplishing the same goal.
Exactly. So I didn’t trust myself to pick the right one. Server Sent Events is the Safari one, right?
I think it’s more than just Safari, but you could be correct.
I’ve never actually used it; it’s so obscure, and there’s other ways of doing it, so…
Well, it’s problematic, because it’s multiple – yeah, anyway…
Alright, let’s move on… That was Divya’s turn. It’s Suz’s turn.
Oh, my God…
Node Drama or Talk Protocol To Me. I feel like this is an obvious choice for you, isn’t it? Protocols…
Well, the two – I’ve been performing the best in these two categories… [laughter]
You are. You’re poised to win here.
I don’t think that’s true. I’m not enough in the lead. I’ve only got 900 on everybody, so… I’m gonna do Talk Protocol To Me for 800.
Alright… Ping! This IP protocol was developed by DARPA in 1981, and is still used today.
Um, IP protocol… And it’s Ping, which is the trick… I feel like this is absolutely a trick question. A hundred percent.
You’re always attacking my questions.
Well, Jerod, we’re all in the negatives pretty deeply, so…
I actually thought I made this board easier than the last round, Emma. We need a new question writer.
I know what the Ping is bloody hinting at, too… Okay, I know this, but I don’t know what the simplified term for it is. As in, I’m over-thinking it.
Okay. Do you have a guess?
No, I’m gonna say the wrong answer, just because it’s the only answer I have, which is [unintelligible 01:04:23.13]
…but that’s not – actually, that was their invention, so it’s not actually the protocol.
Right. We’re looking for the protocol. Emma, do you want to steal this one?
I’ll steal. What is UDP?
I’m sorry. The correct answer is ICMP. The Internet Control Message Protocol.
Oh, yeah. Yeah.
I guess UDP is still used and is pretty popular.
If you’re ever pinging another computer or running traceroute, you will be using ICMP.
Yeah, I always forget this one. I thought it was actually literally IP.
So it’s Emma’s turn. We have Node Drama for 800 or 1,000, and we have Talk Protocol To Me for 1,000.
Well, they both seem terrible, so let’s go with the least amount of points, please… Node Drama.
After IBM acquired the owner of this popular Node package, it’s leading maintainer was forced off the project.
It’s sad, because I worked at IBM, and my parents worked at IBM, and my grandparents worked at IBM…
Well, I don’t think it was their fault.
No, but I feel like I should know this… I have no idea.
Okay. [fail sound] We’ll go to Divya for the steal.
I feel like my guess is wrong, because the name has already been surfaced… And actually it’s a popular Node package, so I don’t know. I’m just gonna pass.
Okay. Suz for the steal?
Oh, I’m absolutely gonna hard pass.
Yeah, I don’t know this one.
Okay. So the name of the package, which has actually changed hands multiple times, started by TJ Holowaychuk, and then transferred over to StrongLoop, which was then acquired by IBM, and the maintainer of the project worked for Sencham which was an IBM competitor, the project is Express.js.
Never would have guessed.
It is a very important project in the Node community, which is why [unintelligible 01:06:34.20]
That’s probably the only one I should have known about…
Alright, we have Node Drama for 1,000 and Talk Protocols To Me for 1,000… And Divya, it’s your turn.
Alright, let’s do Node Drama. Let’s get into it.
I have never heard of this package… Drama is a package that implements this conceptual model…
Since it’s so hard, I will add that Drama is a bit of a play on words… Or a conceptual play.
Hm… I’m gonna have to pass, because I have no idea what that is.
Okay, so -1,000 for Divya. And Suz can steal.
I know of the package, but I don’t remember exactly what it does… But I know what it’s related to, so I’m just gonna pass, because it’s not even solid enough for me.
I’m passing, because if they both get theirs wrong, I somehow win. [laughs]
I’m probably gonna stand to lose to Emma.
There you go. So Drama is the name of a package that implements the Actor model.
Ha-ha-ha. You’re so funny, Jerod.
No, I’m not funny. I didn’t name the package. The package name is Drama…
That’s so good. I wanna play with this now. [laughs]
There you go. You learn something new every day. So that was Divya’s turn. Suz, you’re the late one for the board of Double Trouble, Talk Protocol To Me for 1,000. I’d tell you a joke about this protocol, but you may not get it, and that’s totally okay.
Is this “What is UDP?”
[win sound] Wow… Divya was off by one.
I was off by one, yeah.
[laughs] All good.
Okay, at the end of Double Trouble we have Emma with -2,100, Divya with -3,100 - try not to laugh, Jerod - Suz in first place with -200.
First place in the negative… [laughs]
We’ll be right back for Final Trouble. It’s gonna get dangerous!
And we are back for Final Trouble, wherein each contestant bids how much they think they can score before they answer. The category, ladies, is “This prolific JS Party panelist has appeared on 67 of our 129 episodes.” Please send me how much points you’re willing to wager.
Wait, I screwed that up. I didn’t give the category.
Yeah, you did. You gave us the question. [laughter]
I gave you the question. Son of a gun!
I mean, I wasn’t gonna say anything…
Well, you guys just sent me your bids, but now you’ve gotta send me your answers. Just send me both…
…and we’ll come back and answer it. Oh, gosh…
Okay, the bids and the answers are in. Let’s start with Suz. Suz, you wagered 200 points, and your answer of the prolific JS Party panelist is the one and only Kball, and that is correct. [win sound] So Suz has zero. A valiant effort. Very good. A very good round for your first time.
Let’s go to Divya. Divya wagered 500 and she also answered Kball, so she got that correct. We’ll give her 500 points. [win sound] And you end up with -2,600.
That leaves us with Emma, who also answered correctly, Kball, and she wagered 300,000 or 3,000,000.
It was 3,000,000. [laughter]
It was 3,000,000. So with that amazing bid, Emma wins this round of JS Danger.
She buried us.
Oh, that is smart…
I know, neither… Yeah, I was trying to be modest.
So displaying her savvy for gaming and her desire, Emma Bostian totally redeems herself. You are the winner of JS Danger HalfStack Edition. Congratulations.
Oh, gosh… Thank you. I’ve been waiting my whole life for this.
And that’s our show. If you think this was a ridiculous game, you are correct. This game is ridiculous every single time we play it. We have lots of fun. We hope that you enjoyed it… And that’s our show for this time. We’ll catch you all next time. Say goodbye, everyone.
See you next time.
Our transcripts are open source on GitHub. Improvements are welcome. 💚