JS "Danger" Party

The sound of those BMC beats means you know what time it is - it is JS Party time, y’all… And we are here to have some fun, and to play a game. We have a special guest - Scott Tolinski is with us here. Hey, Scott. Thanks for joining us.

Glad to be here.

And of course, joined by two regular panelists. I’ve got Nick Nisi here. What’s up, Nick?

Ahoy-hoy!

And of course, Emma Bostian is with us. What’s up, Emma?

Hey, everyone. How are you?

Very good. Emma, last time, you came up with this crazy idea of a JS/Web/Developer trivia game, that’s kind of like Jeopardy, but we can’t call it jeopardy, so I’m calling it Danger, because… Reasons. And you hosted it last time, but now you’re here to compete. What’s up!? Are you ready to go?

I feel like karma is coming back around, but I’m ready.

Okay… So here’s how this is going to work. We have a Jeopardy-esque - but not Jeopardy, due to copyright infringement reasons - board, that we can see, that y’all can see, but we will read aloud all the things… And each person - Nick, Scott, and Emma will take turns picking questions off the board, and trying to get the highest score, just like you would in the game they call Jeopardy.

Our categories for the first round - this is not double-trouble, this is regular trouble, regular danger… We have five categories. The first category is DOM Observer, the second one is CSS Tricks (notice there’s no hyphen there, because it’s not the website), the third category is Books and Authors, category is Browserified - I’ve never actually had to say that out loud… Browserified?

Browserified.

[03:52] Thank you! And the fifth category is Essential Elements. Each of those has five choices, 100 points up to 500 points… And we’ll start with our guest, because that’s polite and kind. So Scott, you are up first, my friend.

Oh, no.

Please pick a category and pick a point value, and let’s see how you do.

Okay, let’s do Essential Elements for 100.

Okay, starting off easy…

Gotta warm up…

Essential Elements for 100. To, dawg… Xzibit heard you like browsing contexts, so he used this element to put a new browsing context inside your browsing context, so you can browse contexts while you browse contexts.

Ding! Do I ding, or do I…?

So we can’t play the exact way, since latency and timers, internet stuff… [laughter] So you don’t have to ding, because this is your turn. What happens is you get to guess, only you. If you get it wrong, then we will get a chance to steal from Emma and Nick. And if you get it right, then you get the points.

Okay. I would guess these are HTML elements I’m guessing, so an iFrame…

Ta-daa! You are correct, sir.

I’m gonna be honest, I would have gotten that wrong. Just the exhibit and the dogs just threw me…

[laughs] It makes it easier for me, that’s how I typically…

Okay, you’re gonna do well then, because I try to spice up these, somewhat…

Oh, gosh…

I mean, it’s hard to come up with interesting questions about HTML elements, but we’re trying. So Team 1 gets 100 points.

Nice, nice, nice…

Congratulations, Scott!

Don’t get too comfortable over there…

That one’s off the board. Emma, you are up, my friend. Pick a category, pick a point value.

I’m gonna go CSS for 300, please.

CSS Tricks for 300. This sometimes useful, sometimes annoying algorithm at the core of CSS defines how to combine property values originating from different sources.

Are these combinators?

I think you’re thinking a little too hard…

Specificity!

Well, chance to steal…

No…!

Nick, would you like to steal?

Yes.

Your answer is…?

What is the cascade?

What is the cascade!

Hey, I thought I was good at CSS…

So Nick gets the ta-da! And I forgot to play the fail sound, because I’m a failure of an Alex Trebek… Team 2 is Emma, you go down 300 and Nick goes up 300.

Okay, I’m gonna challenge – I don’t think the cascade is an algorithm, okay? I disagree with that.

This exact phraseology was pulled off of the Mozilla Developer Networks website, in which they call it that.

I’ve got a problem with them. I disagree.

So you can take that up with the fine folks at Mozilla…

[laughs]

…and check with the experts. Okay.

Whatever…

So Emma off to a slow start. She is playing her best version of Chris Hiller from last time.

[laughs] Whatever.

Now it is Nick’s turn.

Oh, no.

Nick, please select a category and a point value.

Okay, I’m gonna be safe and I’m gonna go with Browserified for 100, please, just because I wanna know what this category is.

Okay. So as of March 2020, this browser commended 4.42% of global market share.

What is Firefox?

What is Firefox!

Alright!

Wow, that’s less than I thought. Wow.

I am gonna get all of these wrong…

Nice job!

That’s less…

Yeah, that is less than you would think.

It is, unfortunately.

That includes mobile though, of which they have no – they have nothing on mobile, so…

What makes up the other 96%?

Chrome.

Chrome.

[laughs] That’s shocking, honestly.

It is, yeah.

Okay, so after one round of play, Scott has 100 points, Emma has -300, and Nick is sitting in first place with 400. We’re going now to round two. Scott, your turn. Please choose a category and a point value.

Let’s do Essential Elements for 300.

Essential Elements for 300. This penultimate header element in descending importance.

I don’t know what penultimate means. Penultimate… Is it– penultimate.

No questions allowed, sir. You can’t ask questions… [laughter]

[08:06] I’m not asking questions here…

He’s talking to himself.

I’m talking to myself here, yeah… Okay, penultimate, I have to figure out what that means first.

Running out of time…

H5?

Wow…!

Second to last?

Second to last. Yes, penultimate means second to last, and it’s in descending importance. So there’s H1 through H6, and that puts H5 as the second to last, the penultimate. Very good answer.

I don’t like that you’re trying to confuse us with your jargon. Like, we’re all layman people, okay?

Have you ever watched the show Trouble?

I’m losing my English from living abroad. This is unfair.

This is JS Danger Party here. Things are getting dangerous. Emma, your turn. There’s some dangerous language at play.

Oh, I’m also going to just bring up the fact that Rebecca in the chat says “Technically, he doesn’t have to answer as a question”, so technically, we should be answering these as questions…

Oh, shoot… That is correct. I will do better, Rebecca. That was never explained to me.

So I think everyone should go back to zero, but anyway… [laughter]

Starting now… Starting now we’re gonna enforce–

Let’s maybe do Books and Authors for 100…

Books and Authors, okay… Here we go. YDKJS, the popular series of books diving deep into the core mechanics of JavaScript is authored by this JS Party guest.

Who is Kyle Simpson.

Who is Kyle Simpson, indeed! Good job, Emma.

I’ve read all his books.

Yeah, they’re good.

Team 2, you’re digging your way out of –

I read lots of books, so maybe this is my category.

That might be your category. You might want to come back to the well. Okay, Nick’s turn to select a category.

Alright… I’m gonna do DOM Observer for 200, please.

DOM Observer for 200… This is the state of a failed promise. It better have a good reason…

What is reject.

What is rejected. I will take it. A pending promise can either be fulfilled with a value, or rejected with a reason. Good job, Nick.

That’s the answer to “What is the status of my job application?” [laughter]

Nick, with 600. And we go back to Scott. Top of the board!

Heating up! Let’s do Essential Elements for 400.

You like your HTML, don’t you?

You’re riding the wave…

Living in it, yeah.

According to a random [unintelligible 00:10:24.04] with zero due diligence performed, the shortest valid HTML document includes a doc type, and this one other element.

One additional element…

We’re gonna need an answer.

I know… Let’s go ahead and just say HTML.

You didn’t answer as a question, Scott.

What is HTML?

Incorrect.

Oh, crap…

Now we go to Emma for the steal… You can pass. You do not have to steal it. We’ll go to Nick for a steal.

Do I lose points if I get it wrong though, because it’s a steal?

Yes.

Oh… I don’t think I’m in a place to do this. I’m gonna pass.

This game wouldn’t be called Danger if you didn’t lose points, stealing…

I’m gonna pass, because that would have been my guess.

Okay. Nick, would you like to steal?

Yes. What is a title?

Oh…!!!

It needs a title? What?! I didn’t know that…

I saw the same random gist.

Did you see that?

Yes!

So all you need is doc type HTML…

He wrote that random gist! He wrote that just for you, Jerod. [laughs]

…and then title, and this will pass W3C validator, with just a very small amount of HTML.

Crazy…

I’m surprised it’s not an HTML tag, but whatever…

Me too.

So - steals… Team 3. Holy cow. Nick, you have 1,000 points.

I’m catching up to you, Scott. You wait.

Ah…!

Okay… That was Scott’s turn, so now we go to Emma for your turn.

Let’s choose CSS Tricks for 200, please.

CSS Tricks for 200. Floated objects do not add to the height of the object they reside in properly. To fix it, one must… How do you fix them?

[12:10] Um… What is clear fix?

Clear the floats. Congratulations.

Yaay! I don’t know how to use clear fix, because I use Flexbox, but it’s fine.

This is an ancient question, from an ancient day.

Guess what, Scott. We tied!

Oh…!

Okay, so Scott was zero…

Did I tell you I trash-talk, by the way? [laughs]

Emma with zero… Nick, in a commanding lead with 1,000…

I appreciate the competition.

And Nick, it is now your turn. You’re both the lead and the board, sir.

Alright… Let’s go with Essential Elements for 200, please.

Essential Elements for 200. This element was once all the rage, because you could put it inside a map element, and add links to different parts of an image.

Oh, man…!

Yeah, what was this called?

Get it wrong, get it wrong…! [laughter]

Oh, man… I lose points either way, right?

Correct.

What is an anchor tag?

Anchor tag… Incorrect. Scott for the steal?

Because you could put it inside a map element and links to different parts of an image… I don’t know what this is called, I’m gonna pass.

He’s gonna pass.

I know what it is.

I’m also passing. I’m totally passing.

Used to be all the rage. Everyone’s passing.

Yeah, image maps…

I ain’t got no points for this…

So apparently the hardest one… What is area?

Oh…

I haven’t seen this be used since the SpaceJam site.

Yeah, exactly. You would put coordinates of some kind, and then you’d also put an href. So there’s your anchor, Nick. It would be on the area. And that anchor would be clickable in the coordinates given. This was definitely an old school thing…

Sorry, I’ve got dogs barking.

It’s all good.

It’s okay… [laughter]

That’s why we call it Danger Game. [laughter] I don’t even know how that applies… Okay. Whose turn was that?

That was mine.

That was Nick’s.

Okay, so we go back to Scott, top of the board here…

Alright…

I think I need to lose 200 points.

I need to gain some points here. Let’s do CSS Tricks for 100. Play it safe, hopefully.

That’s what you think.

Yeah, right.

Frontenders once employed multiple background images and nested divs to achieve the rounding effect possible with this one property.

What is border-radius?

Correct, sir. What is border-radius. Good job, you get 100 points. Okay. Next up, Emma.

We’ll do CSS for 400, please.

Location, location, location. There’s no better place for your style rule to ensure it gets applied.

What is in-line styling?

What is in-line styling. Correct!

Specificity paid off!

You get 400 points.

Thank you!

We’re now back to Team 3. That’s you, Nick.

Alright, let’s do DOM Observer for 300, please.

Where am I? Look through the window, and figure out this useful piece of information.

What is location?

What is location indeed. Very good. [unintelligible 00:15:19.21] location is a read-only location object. You can also assign a DOMstring to it. Good job, Nick. You get 300 points.

Only give me 100.

After multiple rounds that I’m not counting, we have Scott at 100…

I think Emma just got some free points.

Did she? Did I just give them to the wrong person?

Oh…! I didn’t even notice. I was like “Wow, I’m doing so well…” [laughter]

Hold on… I’m not actually sure how to go back now. Who was that? That was… Yeah, I’ll just subtract off of hers, and add to Nick’s. Okay, that works.

I should be at 1,100.

I don’t know how to do that. You have 1,300, sir. [laughter]

Welcome to JS Danger, where the points are made up, and the points don’t matter. [laughter]

That’s right. This is no safe game over here. We don’t know what’s gonna happen. So Emma has 400, and Nick has 1,300, although it could be technically 1,100, but we’re not gonna nitpick.

He’s way above, it doesn’t matter anyway.

[16:12] Okay, back to Scott… Please pick a category and a point value.

Let’s do Essential Elements for $500, please.

Okay, here it is. Want to bump up the size of some text? This now obsolete element once used to do the trick.

Um…

Full disclosure, I did not know this was a thing until I found this…

Shoot, I actually know what this is. What is large? No…

For the steal. Emma, you’ve got a shot at it.

I’m not even gonna remotely try.

Nick, would you like to steal?

Nope.

I will say this, Scott - you were dangerously close. What is big?

Yes, [unintelligible 00:16:59.00] something stupid.

It is stupid.

[laughs]

So this was used a lot like the strong tag, or the em, where you put around some text… And it would actually just take the current text you have it wrapped around and make it one font size larger than the surrounding text, completely non-semantically. So there you go… So that goes down, Scott, now at -400 after that huge, huge failure.

Oh…!

And we are back to Emma.

Oh, gosh… Alright, I’m gonna try CSS Tricks for 500, please.

I thought you liked Books and Authors. You got it once and you just completely–

I do, but now I’m scared, because I feel like that was the only programming book I knew the author for.

With Flexbox you can center an element on the page…

Ha-ha-haaa! Sorry.

…by setting these two properties to center.

What is justify-content and align-items?

Very good! She knows her Flexbox, people. Okay, that’s 500 points. That’s a big win. Your turn, Nick. She’s catching up on you.

Oh, no… Okay, I’ll do DOM Observer for 400.

Okay. Spawn a web worker to keep your interface snappy, and communicate with it by calling this method.

Oh, no…! I can’t think of the exact method, but I know it… Ah, I don’t know it.

Scott for the steal.

Keep your interface snappy, and communicate with it… What is request animation frame? No.

Emma, would you like to steal?

I am passing this so hard.

Emma passes. So Scott goes down, and Nick goes down 400 points. The correct answer is post message.

Oh, there it is. Yes!

I don’t work with workers.

Worker.post message sends a message, you send it a JavaScript object, and you pass data back and forth that way. Okay, well - it’s tightening up, except for our special guest, who seems to be falling by the wayside, but… It’s still early.

Well, he’s almost at 900, just negative.

Yeah, we’re absolute-valuing these values, right?

Sure, sure.

Let’s do Books and Authors for 300.

You got it. This co-authored book’s sales pitch says “Learn how to design beautiful user interfaces by yourself, using specific tactics explained from a developer’s point of view.”

Oh, god…

I know it. I totally know it.

This is just straight up their marketing copy, right off their homepage.

I have no idea. I don’t read books, so… This is a bad topic for me.

You shouldn’t have picked this topic.

I shouldn’t have picked this topic.

That was dangerous.

I thought I was gonna get lucky, but… Co-authored book’s sales pitch…

I totally know this, I think.

It’s co-authored… So I’m supposed to be answering the book itself, or the author?

The book.

The book.

Co-authored is just a hint that it’s written by more than one person, but the book title is what you’re after.

Gotcha. Learn how to design beautiful user interfaces by yourself, using specific tactics explained from a developer’s point of view…

You’re stalling…

I am stalling, because I don’t know the answer.

Well, this is one of those you know it or you don’ts.

Yeah, I don’t know the answer to this… What is Modern Web Design.

[20:09] [laughs]

Incorrect, sir. Emma for the steal.

What is refactoring UI?

What is refactoring UI. Correct!

I love this book!

And with that, Emma steals her way into first place.

I think it was co-authored by the guys who made – what’s that called… Not [unintelligible 00:20:28.23]

Tailwind.

Tailwind, yeah.

Yeah, Adam Wathan and somebody else, that I–

Steve Schoger.

Steve Schoger, Steve Schoger!

That’s correct. Okay, that was Scott’s picks. Now we go to Emma.

Let’s do books and authors for 200, please.

Right in your wheelhouse. Not just for web devs, the authors of this famous programming book were also co-signers of the Agile Manifesto.

I have no idea, I’ll just pass.

Okay, I’ll have to make you a fail sound. Okay. And Nick for the steal…

I lose points either way, right?

No, you only lose points if you fail to steal. You can pass.

Oh, okay.

Emma loses points either way, because it was her question.

Okay. You know what, I’m just gonna guess. I’ll say “What is the Pragmatic Programmer”?

Yeah, totally.

Shoot, I thought I was looking for the authors…

The Pragmatic Programmer, by Andy Hunt and Dave Thomas. These two fellas also co-signed The Agile Manifesto back in the day. There you go. Okay… So that knocks Emma down to size. Nick, it’s your turn.

Alright. I’ll do Browserified for 300, please.

With 38% of global web market share, this operating system is number one.

I feel like this is a trick. Okay… What is Android?

That is correct! Windows, at 35%. Close second in iOS, at 14%.

I would have guessed Windows, but it makes more sense, because mobile…

I was smelling a trick question there.

Did you answer it as if it was a trick, like Android is the trick answer?

Yeah, because nobody thinks of Android. I mean, I don’t think of Android, so…

You sniffed it out. And you get however many points that was… 300 points. Good job. Okay, Scott, you’re up.

Alright, I’m gonna need some big points here, or big – yeah, let’s go 500 and let’s do Books and Authors.

Books and Authors for 500. This tome has been stacked underneath Crockford’s Good Parts to poke fun at both books’ subject.

So this tome has been stacked underneath – I know the book; it’s an O’Reilly book. I don’t know that exact title… Shoot.

I will say you’re on the right path. It is indeed an O’Reilly book.

Dang. I don’t know what it’s called. What is the Complete Guide to JavaScript

I’m gonna have to call that a fail.

Dang. I knew it was something like that.

Pretty close. Do we have Emma care to steal?

I don’t. I’m gonna – no.

Nick - for the steal?

I’m gonna say “What is JavaScript Complete Reference?” [fail sound] Oh, no…!

Ouch! Nick, you were so excited with that answer. The answer is “What is JavaScript: The Definitive Guide”?

Oh…!

Your enthusiasm… I assumed you had it. That brings you down to 700. So after these rounds, we have Scott at -600, we have Emma at 1,000 in first place, and Nick barely holding on to second with 700. Well, I guess you’re way ahead of Scott, but just holding on to your point total.

[laughs] Oh, gosh…

Let’s be nice to our guests here, folks. Come on. Let’s let him get some points here.

[laughs[

And whose turn is it now? It is now Emma’s turn.

It’s mine… I’m gonna do the last Books and Authors, please.

[24:09] Okay. Whether it’s High-performance JavaScript or Understanding ECMAScript 6 that you want to learn, grab a book by this prolific human who codes. So now we’re looking for the actual name of the author of these books.

I feel like I know it, but I’m not 100% sure. But I lose either way, so…

Correct. So please lob a guess.

Do I have to guess his whole name?

As long as I know that you know who it is, I’ll count it.

The only person I can think of right now is that guy Axel R. Something… But that’s my only guess. [fail sound] Yeah, I don’t know.

I can’t count that, so you’re gonna lose points on this…

I know…

Down 400. Nick, for a steal?

I’ve got it down to two people.

Do you wanna live dangerously?

Yeah, I wanna live dangerously. I’m gonna go with “Who is Nick Zakas?” [correct sound]

That’s the one I was thinking! He’s the one with the black and white profile photo, right? Doesn’t he, black and white photo? No, he doesn’t. But I know who you’re talking about.

He’s the creator of ESLint, and I think he goes by @slicknet on social media.

That’s the guy I meant to talk about.

So Nick steals some points, and steals the lead with that move… And it’s also his turn.

Alright. Let’s go with Browserified for 400, please.

This site-specific browser application for macOS was built on WebKit 2 and featured on many blogs for its ability to make web apps more like native apps…

Oh, man…

…during the height of the SSB craze.

Oh, I think I know what this is.

Yeah…

You probably ran this app, Nick…

I did. I’m gonna say “What is WebKit JS?” I know that’s not right.

Wrong, and terrible guess. [laughter]

I’m passing, I have no idea on this.

Yeah, I’m passing, too. I ain’t doing it.

Scott will pass, Emma will pass. The correct answer was Fluid.

I’ve never heard of it.

Fluid.app by Todd Ditchendorf. Again, a little bit older…

Ditchendorf, that’s a cool last name.

…back when single-site browsers were very popular. Probably in the 2012(ish) range. Okay. We now go to Scott. You have Browserified for 200 or 500, and you have DOM Observer for 100 and 500.

Let’s do Browserified for 500.

Okay. This discontinued web browser specialized in providing Web 2.0 facilities and social networking integrations with MySpace, Facebook and YouTube. Download.com rated it 5 out of 5 stars.

Yeah… I know the title of this, and once again, I only have a little bit of it. Because I know somebody who used to work there. What is – gosh, I don’t know.

What is your answer?

What is Rockforge? [fail sound]

What is your answer… [laughs]

Okay, Emma, chance to steal.

Nope, no way.

Nick, interested in stealing?

Hm… No.

[laughs]

The correct answer - this discontinued web browser is called Flock.

I was thinking of Rock Melt. That’s the one that I had in my brain.

Hm. Maybe of the same ilk. There was a time when everybody thought they were gonna launch new browsers as startups…

Isn’t that a rapper though?

Rock Melt, the discontinued proprietary social media browser.

Okay. So that’s a pretty good guess, too.

2014.

Unfortunately, you have to go down another 500 points…

Bring it on!

I’m so glad he took that one, because…

[laughs] And we’re back to Emma. There’s now three options on the board, in round one.

I’m gonna get all of them wrong, so let’s go DOM Observer for 100.

Okay. This commonly used mixin contains methods and properties for objects that can have a parent.

[28:02] Commonly used mixin, contains methods and properties for objects that can have a parent… I don’t know.

Is that your final answer?

No! Objects that can a parent – I don’t know, does this have anything to do with inheritance?

Yes…

What’s that called. I don’t know. It has own property… I don’t remember. I don’t know.

[fail sound] That wasn’t in the form of a question, and also was wrong.

That’s fine, because I went out in flames. [laughter]

So I’m gonna knock you down by only 100. And then we have options to steal, first for Nick and then for Scott. Nick, do you wanna steal?

Yes, I think… The way it’s worded is really weird, but…

This may or may not be copy-pasted off of W3Schools… [laughter]

Oh, man… The mixin part is the weird part.

Yeah, the mixin part trips me up.

Yeah…

I’m just gonna say “What is the prototype?” [fail sound]

Incorrect, sir.

That’s what I would have said too, so I’m gonna pass this, because I don’t know.

I think mixin is probably the word that’s screwing us everybody.

Yeah, mixin was a terrible word to use for that, Jerod.

The correct answer is “What is a child node?” A child node is implemented by element, document type, character data objects… Pretty much lots of things. And it’s anything that has a parent.

So I think the lesson learn is don’t use W3Schools to learn development.

Or anything.

But also, this was the DOM Observer category, and I was thinking JavaScript… Ugh.

Ugh, that’s how I–

[unintelligible 00:29:36.13]

Wow, Scott, I am really impressed with your score.

Thank you. I’m very impressed with myself, so…

Maybe we didn’t explain that higher scores are better. This is not golf, so… [laughter]

Okay, okay, okay… I did okay in the first two questions. I got two questions right.

Hey, there’s a lot of game left. We still have Double-Jeopardy waiting for us.

Oh, yes!

Oh, heck yeah!

So Nick, your turn. We have two more elements in round one. Go ahead and pick Browserified for 200 or DOM Observer for 500.

A chance to gain the lead and not completely blow it away - I’m gonna say Browserified for 200.

Okay. Boasting features such as built-in ad-blocking and VPN, this browser began as a research project in 1994.

In 1994… I’m gonna say “What is Netscape?” [fail sound] Ugh… I knew it.

Scott for the steal?

Oh, I know what it is now…

It began as a research project in 1994. I wonder when it was released though.

Correct.

What is Brave? [fail sound] Yeah… Well, then it came out of Mozilla… So I don’t know. Whatever.

Oh, cool, I guess you can name these teams and put your names on them, so I’m not guessing who’s who.

Alright, I’m gonna pass…

Sorry, I’ve just noticed something… Emma’s gonna pass… Okay, I think the 1994 threw everybody for a loop. Nick, do you know what it is now?

I do. Is it Opera?

[correct sound] What is Opera… It was actually interesting – the reason why I thought it was a good question is because it does sound a lot like Brave, until you see it started in 1994… Which kind of throws you for a loop.

I know, I was just thinking it was a research project, and it wasn’t released then… Whatever.

Right.

Alright, alright, let’s pile it on here.

Last one of the round - this one goes to Scott; we’ve got DOM Observer for 500. Are you ready?

You bet! I am so ready for this. [laughter]

This powerful Web API put the X in Ajax and helped usher in Web 2.0 with living documents.

Put the X in Ajax…

Yes.

Asynchronous JavaScript… Put the X and helped – is it XML? What is XML?

[fail sound] Sorry, you’re close, but no cigar. Emma, for the steal.

Well, that was gonna be my guess, but I don’t know if he marked him wrong because he didn’t ask as a question, or because it was wrong, so I’m just gonna pass.

No, it’s wrong.

Okay, then yeah - I’ll just pass anyway.

It’s related, but wrong.

[31:59] Yeah, I know what it is now.

Nick, would you like to steal?

Yes. What is XHTML?

Oh…

[fail sound]

What?! I thought it’s XHTML. Uh-oh…

This powerful Web API… Is XHTML a Web API?

Well, I don’t know. The wording here is always–

What’s the API that [unintelligible 00:32:16.18] Come on, y’all…

A-ha, blame it on the learning.

XML HTTP Request…

XML HTTP Request…

Oh…!

…is the underlying API that makes all Ajax requests possible, even though pretty much nobody sends XML over it anymore… Or even back then. JSON and HTML.

I just wanted to say a quick note to you both… That passing is a cool thing to do if you don’t know the answer… [laughter] Just saying…

I was very confident.

I haven’t had that many – I’ve lost most of my points on my own questions, so…

This brings us to the end of round one, where we have Scott with -2,800, Nick in second place with -100, and Emma in first, with 500 points.

[laughs]

Dang…

We’ll see you in round two.

We are back for round two. Some people call it Double Trouble, or Double Danger, or Double Down. I don’t know, you pick your favorite. Our categories for this round are “Can I use?”, Frameswork, npm-Install, Bang Important, and “What a Character”. Emma, you are first up. Please choose a category and a point value.

I’ll take Important for 300, please.

If you want extra non-displayed content inside an element to be replaced with a “…”, set this property to ellipsis.

I know this.

That’s what everybody says.

I used this literally two days ago. What is text-overflow?

Very good. Text-overflow. Nick, this is your turn.

Alright!

Please choose a value.

I’ll go with npm-Install for 300.

Easily run command line scripts and other binaries installed from npm with this related command.

What is Npx?

That is correct.

Nice.

We’re off to a hot start in round two…

Oh, just wait… [laughter]

Scott, it’s your turn to keep the ball rolling.

Yeah, let’s – oh, dear God… Let’s do – I’m gonna get some points here, I promise. Let’s do “Can I Use” for 100.

Okay.

“I’m gonna get some points”, goes for 100. [laughter]

The number one most searched feature on caniuse.com as of April 9th, 2020 - yes, that is the day - is…

Oh, come on…! This is a 100-point question? This is hard! The number one most searched feature on caniuse.com… What is CSS Grid?

Oh, shoot, I showed you the answer. [fail sound]

I was gonna guess that! Dang it, Jerod!

Ohhh…! Jerod fail. Okay.

Flexbox? Really? Everybody can use Flexbox. It’s 2020, people.

But they’re all wondering about it. So the correct answer is Flexbox…

[36:15] Stop wondering about it.

…but it’s because it’s based on what people wanna know, I guess.

Yeah…

They wanna know Grid. Grid is better.

Well, they’re different.

So no steals, because I screwed it up and showed the answer… But we will just act like I didn’t and move on to Emma.

That’s a little unfair, but I guess I’ll let you have it.

I don’t know what else to do, honestly…

Can I do Bang Important for 400, please?

Yes, you may… This HTML entity code is handy for hacky pixel-pushing content around with invisible spacing. Don’t do this at home… Or do, depending on how hacky you are.

HTML entity code? Is handy – what the hell does that mean?

Oh, no…

Nick just realized what it is.

HTML entity code… Oh, what is BR? [fail sound]

It’s a good guess. And we go to Nick for the steal?

What is [37:05] NBSP?

[correct sound] That is correct.

Yeah… Non-breaking space-something…

Non-breaking white space, [unintelligible 00:37:14.23] NBSP.

NSFW, not safe for…

It will force a white space, and you can just have a whole bunch of those, and force a bunch of white spaces…

That was gonna be my other guess…

…and push things around, to your heart’s desire. And I know this one by experience, not just by looking it up. Okay.

Me too.

I know… This is like back in the days of Dreamweaver. It would just add a thousand of them for you.

Yes. Many tools used to generate those, and now they’re just used when something’s slightly off and you’re like “You know what, we just want one more space in there.” Okay. We go to Nick.

Okay… You know what I’ll do - I’ll do npm-Install for 400, please.

npm famously doesn’t wanna be known as the Node package manager, leading to this running joke on the company’s website.

What…? [laughter] What is Nice People Matter? [fail sound] I don’t know…

What?!

npm famously doesn’t want to be known as the Node package manager, leading to this running joke on the company’s website. We’ll go to Scott for a steal.

Um, pass…

Emma, would you like to steal?

I would not like to steal.

So this one was - full disclosure - the last one I did, and kind of lame… The running joke is different acronyms each time you load the page.

Well, I named a different acronym.

Yeah, but that wouldn’t be a running joke, that would be a one-time joke. Nice People Matter. [laughter] Yes, so every time you reload npmjs.com, or whatever the website is, it will have a new acronym, because they don’t wanna be associated with Node Package Manager. So I’m just gonna apologize for that question and we’re gonna move on to Scott.

Yes! Let’s get some points. Let’s do npm-Install for 200.

npm-Install for 200. This npm subcommand introduced in 2018 helps you identify and fix insecure dependencies.

Oh, dang. I don’t know. Dependabot is always telling me about them. [laughter] Let’s see… Sorry, people… What is npm insecure? [fail sound]

Emma, with an opportunity to steal…

What is npm audit fix? [correct sound] I know that because all my packages are insecure… [laughs]

What is npm audit–

I update too frequently. I’ve got updates running every day. I have an update right now.

I haven’t updated since 2011.

Dang.

Alright, Emma, it is now your turn to update your score by selecting another question.

Maybe let’s try “What a Character” for 200, please.

What a Character for 200. Full of opinions, this developer rose to fame by looking at different JavaScript snippets and saying “Whaet?!”

[40:05] Um… Define fame. [laughter]

I know, yeah… [laughs]

1:Full of opinions, this developer rose to *quote-unquote* fame by looking at different JavaScript snippets and saying “Whaet?!”

Um, who is Mark Dalgleish? [correct sound]

Oh, shoot.

Wait, really?

Wrong button. [fail sound]

No…! [laughter] I was like, I had no idea.

Oh… Let me double that up there. [fail sound] Incorrect. Nick for a steal?

Yes. Who is Gary Bernhardt?

That is correct, Gary Bernhardt.

Watch Scott being answered to one of these questions.

That’d be dope.

Nick, it is your turn, sir.

Alright, let’s do… Oh, no. I’ll do Frameswork for 200, please.

Frameswork for 200. This Model-View-ViewModel based framework was released in July 5th 2010. It was a big hit in and around Microsoft.

What…? I have no idea, so I’m just gonna say “What is Backbone?” [fail sound]

Incorrect.

That’s a good guess.

That’s a good guess, yes. Scott has an opportunity to steal.

Model-View-ViewModel…

Released on July 5th, 2010. It was a big hit in and around Microsoft.

Yeah, 2010… What was I doing in 2010? I’m gonna pass, because I don’t know.

Okay, Emma for the steal.

What is Ember JS?

[fail sound] I’m sorry, that is incorrect. The Model-View-ViewModel based framework that was big around Microsoft was Knockout.js.

Oh yeah, Knockout. I remember you.

We used that…

There you go.

You could have really thrown us for a loop and say that it was a knockout around Microsoft. [laughter]

I said that it was a big hit.

Oh, that is good, yeah. Dang. That is very good.

Thank you. I’m trying to throw you guys bones, but not be too obvious… Come on. Alright, whose was that? That was Nick’s?

Yeah.

That means we are back to Scott. Scott, let’s select a question.

Let’s do Frameswork for 300.

Okay. Don’t call it a framework… This platform for robotics and IoT was first released by Bocoup in 2012.

Robotics? What?! Don’t call it a – this platform, IoT… What is NodeRed? [fail sound]

That’s a good guess. IoT is definitely a place that NodeRed plays… But it’s incorrect. Emma, would you like to steal? Robotics… Keyword, robotics. Not to give you too much help…

Um, I’m gonna pass. But before I pass, Jerod, I just wanna say we’re all in the negative, so this should just reflect on you. [laughter] That’s all.

I’m smart, I should [unintelligible 00:42:57.02]

Ouch… Ouch. Well, you know, trivia is tough.

You said that early. I’m moving into the positives right now. [laughter]

Okay, Nick for the steal.

What is Johnny-Five?

This is correct.

The hell is Johnny-Five?

It sounds like a Cartoon Network show.

It is a robotics and IoT platform first released by Bocoup in 2012. It was a very popular thing for controlling bots.

[laughs] Dang it.

Okay. We are on to Emma… I should give a score update at this point. Scott has -600. Remember, this is double trouble… Emma has -600 in this round, and Nick has 400 in this round. We will add the two rounds together at the end and see where we stand. Emma, your turn.

I’m gonna just go big or go home. Let’s do Important for 500, please.

You can display an ordered list in its opposite order by setting this property on the element.

Uuh…

You can display an ordered list in its opposite order by setting this property on the element.

I don’t know, because I feel like I would do this with Flexbox – not for an ordered list, but maybe “What is list order?” [fail sound]

That was a good guess.

Yeah, I didn’t know. I had no idea.

Good guess. We go to Nick for an opportunity to steal.

[44:15] I’m gonna pass.

We go to Scott for the steal.

Big pass.

The property you can set directly on an ordered list to reverse the order is “reversed”.

I was gonna guess that too, and I was like “No, it’s too easy. There’s no way.”

No, thank you.

Okay. We are on to Nick. Your turn, sir.

Alright, let’s go to Frameswork for 400, please.

Angular’s big 2.0 announcement backfired, because developers were angry over this major hurdle.

What is incompatibility with Angular 1?

That is correct! Backwards-compatibility, upgrade paths… People were very angry with Angular 2.0. You get 400 for that answer, and we move to Scott.

Okay… You know, I’m already in the hole big time. I’m not gonna get out of it without big moneys…

That’s where I’m at… [laughs]

This is true, this is true.

So Frameswork 500, let’s do it!

Frameswork for 500. This new framework described itself as a Rails-like framework for monolithic full-stack React apps without an API?

What is Blitz.js?

Correct! Very good. That brings you back out of the negatives for this round.

Wooh! This is the first positives I’ve seen in a long time.

Okay. Emma, your turn.

I’m so unconfident in all of these… How about “What a Character” for 300?

Curious about style? Ask the creator and maintainer of JavaScript’s standard.

Uhhhh…

Curious about style?

Who is Rachel Andrews?

I’m sorry, that is incorrect. Nick, would you like to steal?

Absolutely not.

Nick hard passes. Scott, for the steal?

Hard pass. Double hard pass.

Double hard pass. Well, I would say that this one is most insulting, as JavaScript’s standard style maintainer is JS Party panelist Feross Aboukhadijeh.

Oh, no… [laughs]

Well, he ain’t here, is he, so…

No, he’s not here.

I’m the guest, so I shouldn’t have known that, so…

No, I wouldn’t blame you, Scott. I’d blame Nick and Emma.

Are you throwing us under the bus right now?

I think you just threw Feross under the bus. Okay. Moving on. Sorry, Feross. We’ll get you next time. Nick, it is your turn.

Alright, npm-Install for 500.

He’s going big, and he might be going home.

Yes, hopefully.

Last published two years ago, and once the center of a major controversy, this package still has over five million downloads in the past week.

Oh, no… That’s like every package.

I know… [laughter]

Fair, fair…

[laughs] Oh, man… Last published two years ago… Center of a major controversy… I’m gonna say “What is Leftpad?” [correct sound] Oh, yes!

Yeah.

You are correct, sir. And yet, five million downloads in the past week. It is still going strong. Okay, so 1,100 for Nick, and we go back to Scott.

Oh, boy. Let’s do Frameswork for 100.

Scott likes the frameworks. One way, two way, or no way. This controversial feature of many UI frameworks has inspired many blog posts over the years.

Controversial feature… What is data binding?

Correct! Very good.

That’s what I would have said, too. Well, you gave him an easy one.

It’s 100.

It was 100.

I know…

It’s your turn, Emma. There’s three more one-hundreds out there if you’d like to go for them… [laughter]

I’ll be fine, we’ll do Important for 200, please.

For 200?

[47:59] Yeah, I’m just gonna keep complaining anyway. [laughs]

Okay. “Not allowed”, “wait” and “help” are all possible values of this CSS property.

What is cursor? [correct sound]

Good job! That was a tough one.

I only knew that because of “not allowed”.

That was tough, yeah.

I didn’t know “wait” and “help”, but I knew “not allowed”.

I tried to grab more obscure ones, but when I was reading it back, I was like “Dang, this is way harder than I thought it was”, so that’s a good job. Way to get it. Okay, to Nick.

Okay, let’s do – I have a commanding lead… “What a Character” for 400, please.

What a Character, for 400. Backbone and _dotjs made him known, CoffeeScript made him (some say) infamous.

Who is Jeremy Ashkenas?

Correct! Very good. Your commanding lead just got more commending. Scott, it is your turn.

Hey, Jerod.

Yes.

Jerod, I don’t know if you added my points from my cursor.

Oh, my apologies. Let me go back to that.

I need every point I can possibly get.

Sorry, let me go here…

It’s all good, I just wanted you to know I’m not -1,100 anymore.

I gotcha, my bad. Lots to juggle here. I wonder how Alex Trebek does it. Okay, whose turn is it and what are we doing?

It’s me.

Scott’s, okay.

Let’s do npm-Install for 100.

npm-Install for 100. This utility library is the number one most depended-upon package on npm.

Utility library, the number one most depended-upon package. Utility library… What is Lodash?

Very good! What is Lodash.

Isn’t npm on npm? Couldn’t npm be the answer?

Is it a utility library?

It’s THE utility…

It’s a CLI.

If you go to npm’s Explore stuff, you’ll find that they list Lodash as their number one depended on… So no, Nick, it can’t be.

Wrong.

Back to Emma. I will dock you points if you do that again.

I feel like I need some points, so I feel like I should just go hard, maybe… Let’s go like “What a Character” for 500, because I’ve been so successful already with that category…

This full-time open sourcerer has over 900 source repos on GitHub and over 1,100 npm packages. They are prolific indeed.

That’s a lot of packages.

I have no idea, so I’m just gonna guess Jessie Frazelle. [fail sound] I know she does open source, so it was the only person I knew. [laughs]

We will subtract 500 from your score. And Nick for the steal? Everybody will know this person once the name comes out…

Yeah, his picture has him as a dinosaur… I’m trying to think of his name though. I’m gonna pass because I can’t think of his name right now.

Okay. Scott, would you like to steal?

No, not a chance.

The full-time open sourcerer that has over 900 source repos on GitHub and over 1,100 npm packages is Sindre Sorhus… Or I don’t know if that’s how you say the name.

I would never have gotten that.

I have no idea who that is. I have never heard that name before.

Likewise.

But it sounds like–

Okay, I take it back. I thought everybody would know that one.

No…

He is a dinosaur.

Yeah, he is. You’ve used his software, I guarantee it.

Definitely, yeah. Alright, let’s do Important for 100.

This property specifies the stack order of an element.

Specifies the stack order of an element… Is it of this property – oh, I see. What is z-index?

Very good!

I think I got skipped there, but that’s okay.

Oh, shoot. Sorry.

It’s okay…

I’m hyped up caffeine, I’m bouncing all over the place here. [laughter]

Your commanding lead can handle it. Okay, we’ll go to Emma. We have one left in “What a Character” and we have for “Can I Use”. People do not like this category.

I’m really struggling, so let’s just go out flaming. How about “Can I use” for 500.

Okay, she goes for the gusto. Even Apple is experimenting with this image format, that supports lossy and lossless compression, as well as animation and alpha transparency.

[52:13] Oh… I know this, because I’ve just read the Image Performance book… Shoot. Oh, no…

Even Apple is experimenting with this image format, that supports lossy and lossless compression, as well as animation and alpha transparency.

I’m gonna be really mad at myself, because I know the answer, but I can’t remember the actual name of it… So I’m gonna have to say I have no idea.

I’m gonna try. What is WebP? [correct sound]

Yup, that’s exactly what I was gonna say. That makes me so angry.

You got it, what is WebP. Nice steal. Apple drag their feet on this for years, and they’re finally experimenting with it. Okay, so we’re into four more choices in round two, and we go to Nick.

“Can I Use” for 400, please.

6% of browsers will let you bring your favorite browser tabbed life with this newish feature.

Uh, what is animated favicon.

Um…

Don’t give it to him.

I’m not gonna give it to you. [fail sound] You’re very close, but your winning. We’ll go to Scott for the steal?

Pass.

Oh, he passes.

[laughs]

I was gonna let you have the steal.

I don’t know what it is.

I’m gonna swipe left.

I assume that means you’re passing?

Yes.

Okay. [laughter] The correct answer, which you were very close to, is SVG favicons.

Oh…

And of course, you can animate an SVG favicon… So - almost had it, but no cigar. Okay, to Scott.

Um, could you subtract his point value, Jerod?

Oh, he sure did.

Did I?

Yeah.

Do it again.

I just did it again. [laughter]

Yeah, just do it once more.

What’s your correct score? 1,600?

1,600, yeah. I was at 2,000 before that.

Okay. So top of the order here, I should say… For round two we have Scott at 500, Emma at -1,900, Nick at 1,600, and I will note that these scores will double before getting added to round one. Scott, your turn, sir.

“Can I Use” for 200, please.

Can I Use for 200. All major browsers support the prefetch resource hint, except this pesky laggard.

[laughs] I like that.

All major browsers support the prefetch… Wait, was the hint an actual hint? Oh, resource hint.

Resource hint.

I didn’t read this. Okay. Except for this pesky laggard… What is Safari? [correct sound] It’s a reasonable guess. They suck at everything, so…

[laughs]

Very reasonable guess, and the correct answer. Okay. Emma, you have “Can I Use” for 300 or “What a Character for 100”.

How about “What a Character” for 100? [laughter] I have destroyed this whole category…

You’re so depressed. This Twitter account playfully stirs up mischief by taking people’s statements out of context.

Um… I have no idea.

This Twitter account playfully stirs up mischief by taking people’s statements out of context.

Sounds like every Twitter account, right?

Yeah… [laughter] I don’t know… What is I Am Devloper? I have no freakin’ clue.

I thought that was a good guess.

That is a good guess.

Thanks.

Nick will know this one.

Yeah. Who is Horse JS?

Oh, that was my other option.

[correct sound] I should have got an animal reference in there somehow, so you knew that it was a horse… [laughter] Sorry, I’m critiquing my questions here, as we go. Okay last one of the round, and it goes to Nick. “Can I Use” for 300 - are you ready?

Ready.

This API for complex rendering and compute using hardware acceleration has 0% browser support.

Oh, no…

Yeah. [laughs] You can use it on 0% of browsers.

[56:15] Um… This is a total shot in the dark, but I’m gonna say “What is Houdini?” [fail sound] I figured.

Any steals? We go to Scott for the steal?

Nope.

Emma for the steal?

Just no. No.

The correct answer - the API for complex rendering and compute, using hardware acceleration, that has 0% browser share is WebGPU.

WebGPU… I knew it was something about WebGL, but…

This is supposed to be supplanting and superseding WebGL in 3D games, and using accelerated stuff. It’s brand new, it has 0% share. It was a tough question, and Nick failed at it.

That’s the end or round two. We have for round two - Scott scores 1,400…

Yeah!

Emma scores -4,000. [laughter] And Nick scores 2,800. We’ll come back for Final Trouble right after this.

We are back for Final Trouble… And a couple of our contestants are in a lot of trouble. After tallying rounds one and two, we have Emma with -3,500, our special guest Scott Tolinski at -1,400, and Nick Nisi with 2,700. We now move to Final Trouble, in which I list a category, you all submit private wagers to me of how much you wager, I ask the question, and then you submit private answers for us to tally.

The category of choice is Offline First. Your category for Final Trouble is Offline First. Please submit to me your wagers.

Okay, the wagers are in. This is the question for Final Trouble, Offline First: This open source JavaScript database was created to help web developers build applications that work as well offline as they do online.

One more time - this is the question for Final Trouble, Offline First: This open source JavaScript database was created to help web developers build applications that work as well offline as they do online. Please submit to me your answers.

I’ve got two of them, going back and forth…

We are waiting for Emma.

[laughs] I have no idea.

Okay, all the answers are in. The wagers are tallied. The math makes no sense, but we’re doing this thing. With a wager of 101.895 Euros..

No, that was a hundred one thousand eight hundred ninety-five.

Oh, you use a decimal point as a separator.

Yeah, that’s what they use in Europe, yeah.

Gosh, okay… [laughter]

Oh, gosh…

Emma’s answer - what is Elastic Search? [correct sound] [fail sound] [fail sound] I hit the wrong button. [laughter] Too much pressure. That answer is wrong, and that point total is ridiculous. You now have negative infinity points.

Up next, special guest Scott Tolinski wagered 100% of his points, so 1,400 points on the line, and he says “I’m wagering whatever makes me beat Emma.”

I don’t wanna get last place. [laughs]

His answer, “What is CouchDB?” was a valiant guess. [fail sound]

No…

And so, he ends up his game at 0. Or -2,800, depending on how you do math.

Whatever…

But way better than negative infinity. Which means Nick Nisi, who wagered 2,700… This is all your points, Nick?

It is. I should have done one less.

He answered “What is Firebase?” [fail sound] Answer fail, and wager fail, because you could have left money on the table, and gotten first place, but now you’ve tied with Scott, in the most ridiculous game of JS Danger in human history. [laughter]

The correct answer, of course - Scott was off literally by one letter… The correct answer, the open source database is called PouchDB.

What?!

Oh…!

[laughs]

Inspired by CouchDB, CouchDB aims to help web developers build applications that work as well offline as they do online. Well, this has been something else…

Enlightening. Enlightening.

Yeah!

We hope you enjoyed it. We had a lot of fun for this edition of JS Danger game. Remember, here at JS Party, Danger is our middle name. I wanna say special thanks to Scott Tolinski for joining us. Thanks as always to regular panelists, Nick Nisi and Emma Bostian. That’s our show, we’ll talk to you next time!

Oh, wait a second… I’ve gotta start over. Because Scott, you have negative as well.

What?! Ha-ha-ha…

Yeah, I wrote you down with 1,400, but you have negative–

I have 1,400.

Wait…

Welcome…!

You had -2,800, plus 1,400. Oh yeah, you’re at 1,400. You’re right. No, you’re at -1,400. What am I doing here? Shoot, we’ve got two people in the negatives. How does the game work? How does Jeopardy work if you have two people in the red? I think they just lose.

That’s why I’m thinking, just let us wager whatever we want. If it works, it works, and if it doesn’t, it doesn’t. It’s not like we’re actually winning money, Jerod…

Oh, I know that… [laughter]

Just bragging rights.

Just bragging rights… Yeah, but Nick’s been beating you guys, and you’re gonna just wipe that out and say “Well, I’m gonna wager…” I’m trying to think out loud here.

I’d just let us wager any amount of money we want. No limits. If Nick’s cool with it, because he’s in the lead, so… It’s up to him.

Sure. Steal it from me, that’s fine.

[laughs] What do you think, Nick?

No, that’s fine. That’s fine, I don’t care.

Okay.

Mine is gonna be in Euro though, Jerod. Is that okay?

Yeah. Totally.

Mine’s gonna be in Bitcoin.

You might as well… The points don’t mean anything. [laughter] I’m gonna list off our point totals, and then I’m gonna explain Final Trouble, and then I’m gonna act as if this isn’t broken, and we’re gonna do the thing. Ready? [laughter]

Yeah…

Let’s do it!