JS Danger: CSS-Tricks Edition

Welcome, everyone, to JS Party. I’m Jerod “Danger” Santo, and today we have a very special treat for you. Our “Don’t call it Jeopardy” game show is back, and we’re joined by the team behind CSS-Tricks; maybe you’ve heard of it, css-tricks.com. They’re gonna face off and see which one’s the best.

Chris Coyier is here. Chris, thanks for coming on JS Party.

Oh, I can’t wait. Thanks for having me.

Do you like to live dangerously?

That’s my middle name…

[laughs] No, that was my middle name; didn’t you hear my intro?

Dang it.

We also have Sarah Drasner here. Sarah, do you have a competitive spirit?

I do, but not as much as Chris, who has broken both of his wrists in the last two years.

Ouch… Chris, how did you break your wrists, man?

I was mountain-biking, and I was really just competing against myself, really… And it was my elbows, which I’m not sure which is worse, but… I could type with the elbows things, so I’m saying it’s a little better maybe.

Yeah, and he was putting out articles the whole time. [laughter]

It sounds like you do like to live dangerously after all.

Well, editing those was something else… [laughter]

That voice you hear is Geoff Graham. Geoff, welcome to the show.

Yeah, nice to be here.

And I’ve wondered - have you ever considered suing Instagram for trademark infringement?

I think so, once or twice, but for probably different reasons than you’re thinking. [laughter] What are you thinking?

Well, they’re using your name, man. Graham. They’re using it. Come on. Not fair.

Oh, sure. Well, I hold exclusive copyright on the H and the extra A that’s there as well, so I’m okay.

Excellent. And we are also joined by Miriam Suzanne.

[04:14] Hello!

Welcome. Did you bring your trivia skills with you?

Nope. [laughter]

Well, then you’ll fit right in, because we are here to have some fun and to play JS Danger. This is very much in the jeopardy style, so we will do a round-robin selection of squares from the game board. There are two rounds, and then a final trouble round. The first round is called Trouble, and there are four categories. Each category has a theme. We will take turns selecting a square. If you get it right, you get the points from that square. If you get it wrong, it goes to the next person in line. They have a change to steal. So if it’s Chris’ turn, Sarah will have a chance to steal, then Geoff, then Miriam, and so on. If you steal, you get the points. If you miss the steal, you also go negative, so be careful with the steals.

Let’s go ahead and look at our categories, and I’ll describe what their themes are. The first one is called Project People. This is where you are trying to match coders with the projects that they started. The second category is called Movies Worth CSS-ing. These are movies with CSS-related things in their titles.

Category three is called Tricky CSS Sites. These are websites that aren’t CSS-Tricks, and yet people still somehow learn CSS from them. The next category is called Bleeding Edge. These are newish browser features. So there you go… Chris, the board is yours, please pick a square.

Oh, I get to kick it off. That’s exciting! I’ll take Bleeding Edge for 100, please.

Bleeding Edge for 100. Some animations can cause dizziness and nausea in people with vestibular disorders. Media queries to the rescue.

Do I have to form my answer in the form of a question, or whatever?

You could try…

What is Prefers Reduces Motion?

That is correct. [win alert] 100 points to you, sir. Very well played.

The snowball is going.

Yeah, there you go. Now we’re playing; we’re having some fun. Sarah, you are up. Please pick a square.

Oh… I’m interested in Movies Worth CSS-ing for 100.

Movies Worth CSS-ing. Keanu Reeves infiltrates a gang of bank-robbing surfers in this 1991 cult classic.

Isn’t it Point Break?

Point Break, you pulled it out somehow, at the last second. [win alert] Very good.

Wow! [laughs]

Incredible. Jeez…

Excellent, excellent.

And it was there because Break was in the title, or what? Or Point?

Yeah, like breakpoints…

Oh, Point Break, breakpoint.

There you go.

Okay, thank you.

Okay. Geoff, your turn. Please pick a square.

I’m gonna keep it going right there - Movies Worth CSS-ing, 300.

Somehow our squares got mixed up there… 300 is in the 200 spot. I’m gonna go ahead and blame Nick for that (even though it’s my fault). In a colorful future, a cab driver (who is Bruce Willis) unwittingly becomes the central figure in this search for a legendary cosmic weapon to keep evil and Mr. Zorg (played by Gary Oldman) at bay.

Oh, good Lord… I’m gonna have to pass on that one. I have no idea. I’m just not Bruce Willis-savvy.

Steal… Oh, wait.

Alright, so a pass gets you -300, and then Miriam gets a chance to steal. Would you like to steal?

What is the Fifth Element?

[win alert] That is correct. Very good, very good. A successful steal.

Good job.

And you now get the board.

I guess I’ll jump back over to Bleeding Edge for 200.

Bleeding Edge for 200. This experimental CSS property allows animations to be driven by a container’s scroll position.

What is animation scroll timeline?

Hm…

[08:08] Scroll timeline?

Yeah, scroll timeline. We’ll give it to you. [win alert] Very good!

Wooh!

I heard “animation”, I’m like “That’s not right”, but then you kept talking and I’m like “That sounds pretty good.” Alright, very good, so you’re in the lead. Looping back around - Chris, it’s your turn. Please pick a square.

Bleeding edge for 300, please.

Alright, here we go; they’re going after the Bleeding Edge. This modern image format is optimized for web environments. It boasts better image compression than webp, jpeg, png and gif - with a hard ‘G’.

It’s AVIF.

[fail sound] I’m sorry, that’s incorrect. It may also be true, now that I’m thinking about it, but it’s not the one that was on the website.

Okay… [laughter]

Would anybody like to steal a non-AVIF answer?

That was my answer… [laughs]

Mine, too.

Okay… Maybe you guys can school me. So this was according to caniuse.com, and the feature is called JPEG XL.

Oh.

Is anybody familiar?

Oooh… My answer is more right. [laughter]

Alright, I’m gonna defer to Chris. Let’s go ahead and give him the points, because you’re probably more right than I am. [laughter] Thank you very much, Chris.

I’m not cheating, I’m really right.

Okay… [win alert]

I agree, I agree.

Everybody agrees, he got it right! [laughter] What’s funny is we were test-driving this before the show and Nick also answered the questions, and he also said AVIF, so that’s where I was like “Hm… Maybe I’ve got it wrong there.”

Alright… Sarah, your turn.

I’m gonna do Tricky CSS Sites for 100.

Alright. For 100. Often a top 100 related search results, but that doesn’t mean devs love it.

Oooh… I can picture it in my mind. The green site! Uhm…

[fail sound] Time’s out. Sorry. Tip of your tongue…

I know the answer, I just –

Geoff, do you know what’s that we’re referring to?

What is W3Schools?

[win alert]

Yes!

That’s it…

I’ve been picturing you in my mind… [laughs]

Yes, we all have it burnt into our retinas.

[unintelligible 00:10:25.18]

Okay, Geoff, your turn. Please pick a square.

Oh. Bleeding Edge, 400.

Bleeding Edge for 400. The new cookie store API has a more modern interface than document.cookie, and can also be used in these.

What is custom properties?

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

No, I would not.

Chris, would you like to steal?

I don’t really understand the question… That’s fine. Skip.

Skip. Sarah, would you like to steal?

We’re not talking about local storage, are we?

Is that a steal or a question? [laughter] I’m not supposed to tell you that until you submit a steal. I would say probably skip the steal maybe… [laughter] Nobody is stealing… Let’s go ahead and show they answer. They can also be used in service workers…

Was it a web worker? Oh, it’s service workers.

Yeah…

Tough one. Geoff so far selecting the difficult ones… Let’s move on.

So you can’t use a regular cookie in a service worker? TIL…

Yeah.

Miriam, your turn. Please select a category.

Let’s do Tricky CSS Sites for 200.

Okay. Browser support tables for modern web technologies, including CSS.

What is Can I Use?

[win alert] You got it.

And/or MDN?

Hm… There’s some crossover there now, isn’t there? Alright, you got that one. We’re back to Chris.

I’ll take Tricky CSS Sites for 300.

[12:02] Okay, here we go. This site demonstrates what can be accomplished by only changing the CSS.

Oh yeah, CSS Zen Garden.

That’s right. [win alert]

That’s one for us old fogies. [laughter]

That is an old-school one, isn’t it…?

Yeah, there’s a new version of it - Style Stages.

Really?

Yeah, by – is that Stephanie behind that? Stephanie Eckles.

Nice.

I’ll check that out.

They kind of revitalized the Zen Garden too at one point, and you could actually submit pull requests to it, and stuff. Oh, sorry… Let’s get back to the game. [laughter]

We can chit-chat, no big deal… Okay, whose turn was that?

I think I’m next, maybe…

Miriam just got it right, right?

Okay, so back to Chris then.

Or no, I got it right…

Oh, you got it right, so it’s Sarah’s turn.

Oh, my God. Great injustice.

Very good, okay. Sarah was correct.

God, Chris is just trying to steal… We haven’t done Project People yet, so I’ll do that one for 100.

Alright. Mat Mullenweg.

WordPress.

[win alert] Very good.

That feels like a softball. [laughs]

Well, it is a 100-point question…

Yeah, that’s true.

Okay… Geoff.

I’m just gonna keep going in the red… Um, Bleeding Edge, 500. [laughter]

The guy likes to bleed, what can we say…? This CSS property sets whether an element’s background extends underneath its border box, padding box or content box.

What is border box? Oh, I mean… No, go ahead and take that.

You can change it. Do you have a better guess?

No, go right ahead.

[fail sound] Alright. Sorry, Geoff. You’re further in the red.

It’s fine.

Miriam for the steal?

What is background-clip?

[win alerts] That’s correct.

Thanks for that, Geoff.

Miriam is the benefactor of –

First debut in 1997…

That’s why it was “newish”. [laughter]

Fair enough, fair enough.

That was Geoff’s turn, so it’s Miriam’s turn.

Yeah, okay… Tricky CSS Sites for 400.

Launched in 2005 when a small team of idealists set out to create a new, free, community-built online resource for all web developers.

What is Web Platform Docs? [fail sound] No… Huh.

Chris?

I’m not gonna steal, because that was my guess…

Okay. Sarah?

This may be too late to be accurate, but Geocities?

[fail sound] I’m sorry, that’s not correct either. Geoff? Are you gonna dig out of that hole?

I have a guess, but I kind of like that someone’s joining me in the red, so I’m just gonna leave it at that. [laughter]

Okay, let’s see what the answer was.

Oh, MDN

That was it.

There it was. 2005.

Small team of idealists… Large company of idealists.

That’s according to their own About page right there.

Oh, okay, okay.

Not my words. Alright, so that was… It’s always hard to remember whose turn it is. Who said that one?

That was mine.

Alright, so we’re back to Chris then. Chris, pick a square.

Okay. Tricky CSS Sites for 500.

Alright. He’s going back to the well.

Gotta take the lead here.

This site shows you CSS alternatives for CommonJS UI components.

Wow… And I have to guess, right?

That’s correct, you have to guess.

I have to guess… Is it like “You may not need JS”, or something like that?

[win alert] Wow… Way to pull it out! Look at this…

Yes…! [laughter]

How did you pull that one out? Excellent job. Alright, Sarah, your turn. Pick a square.

Let’s do Project People for 200.

Okay. Another softball - John Resig.

jQuery.

[15:58] [win alert] There you go. Geoff, it’s your turn.

I knew the last one, too… [laughter]

Jeez… Let’s go Project People 300.

Okay. David Heinemeier Hansson.

Basecamp.

Open source projects.

Ruby on Rails?

[win alert] Yes, yes. There you go. Very good. Now we’re scooting along. Miriam, your turn.

Movies Worth CSS-ing for 200?

A young Peruvian bear travels to London in search of a home, in this 2015 animated comedy.

What is Paddington Bear?

[win alert] You got it. Very good.

Wow…

Margining-ton… [laughter]

Chris, your turn.

I’ll take Project People for 400.

Dries Buytaert.

Oh, no… And I have to guess again. I’m sorry, Dries, I don’t know you. Let’s see… Think of a project that’s something… Does everybody know it? I feel dumb… MooTools. [laughs]

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

Can I say no?

Yeah, you can say no.

Okay, wait, I’m gonna make a guess.

Okay.

We did CMSes… What if he’s like Drupal?

Drupal? [win alert] You got it.

Nice work! You just pulled that out–

That was nice…!

Wow…

Wow…

I thought you were going further in the red there. Congratulations, that was excellent. Alright. And it’s now your turn as well.

Oh, again? Oh, okay. Project People.

Alright. For 500. Mr.doob.

Oh, yeah…! Mr.doob does Three.js.

[win alert] That’s right. Very good.

Wow, I’m pulling it together.

You are, you’re on a comeback. You’re now tied for second place with 800. Chris has 800, Miriam has a thousand. Geoff, it’s your turn.

I’ll take Movies Worth CSS-ing, 400.

400… Two powerful mutants (Charles Xavier and Erik Lehnsherr) join together to stop a ruthless dictator from thrusting Russia and the U.S. into nuclear war.

Oh, gosh… It’s so showing that I don’t watch movies. Jeez… I’m sorry, I’m gonna pass.

Okay. [fail sound] Miriam with a chance to steal?

Let’s go with “Who are the X-men?” “Set X-Height Men”?

We’re gonna have to say no on that one. You’re close, but you’re not on.

Alright.

Chris.

I’ll pass, because it’s X-men related…

Yes. Sarah?

X-men First Class.

X-men First Class! [win alert]

That’s what I was gonna say!! [laughter]

Storming back to take the lead. Alright…

Beautiful.

And that leaves with just Movies Worth CSS-ing for 500. This is Miriam’s – or is this Chris’ turn?

Yeah, that’s me, I think.

That’s you, okay.

Yeah.

Who started the X-men one? That was Geoff, so it’s Miriam’s turn. Alright, last one on the board for 500 - Steven Spielberg directs Whoopi Goldberg, a black Southern woman struggling to find her identity after suffering abuse from her father and others.

What is the Color Rebecca Purple?

[win alert] You got it.

Wow…

Wow. Very good.

Well done.

Thus concludes round one. Let’s look at the board… We have in first place with 1,200 points Sarah Drasner. Following close behind is Miriam, with 1,100. Chris in third with 800, and Geoff still bleeding after those Bleeding Edge choices, -1,200.

I sure do.

[19:57] Don’t worry, Geoff, Double Trouble is just around the corner.

A real comeback for Sarah…

Yeah, it was amazing, pulling Drupal out…

Yeah, I was really drowning… [laughs]

That was clutch.

Well done, everyone. Except Geoff. You didn’t – [laughter]

I just hope my boss isn’t watching… [laughter]

Don’t we all…?

Now, this is Double Trouble… All point values are doubled, so it’s a good chance to come back… Or fail terribly. So the first column category is Oh Node You Didn’t! These are obviously Node-related questions. The second category is called Framewords. These are CSS frameworks in their own words, so how they describe themselves in their homepage. Actual CSS Tricks - those are hacks that devs have to do to get stuff done… And then the last one is called Divitis. On this one we’ve taken HTML elements which were semantic, and we’ve replaced them with divs, and you have to figure out which element it originally was.

Oh, my God…

That’s cool. Also, Miriam has a leg up on the Framewords category… [laughs]

Do I?

Are you a framework aficionado?

I don’t know.

She made one. [laughs]

I guess that counts…

Okay… That’s one more than I’ve made… And let’s see - we finished off with Miriam, so I guess we’ll go back to Chris. Chris, go ahead and get us started with round two.

Okay, let’s try Divitis for 200.

Alright. <div name=‘please’>Press me</div

I hope it’s a button…

[win alert] You got it. Alright, we go to Sarah.

I’m gonna try Actual CSS Tricks for 200.

You can use multiple background images and nested divs to achieve the rounding effect possible with this one property.

Rounding effect like – well, I guess you can’t tell me.

Remember that it’s a hack, so this is something that people did before the property existed.

I see. Is it CSS gradient?

[fail sound] Nope. Geoff to steal?

What is border radius?

[win alert] That’s it.

Well, I was thinking –

Alright…

Good memories of the sliding doors…

Oh, yes…

Nice.

Geoff began his comeback, and now it’s your turn, Geoff. You get to pick a square.

Alright, let’s keep digging out… Framewords for 200, please.

Framewords for 200. Simple and flexible HTML, CSS and JavaScript for popular user interface components and interactions. From Twitter.

What is Bootstrap?

[win alert] There you go. And we go to Miriam.

Let’s do Actual CSS Tricks for 400.

Many people aren’t clear why this fixes anything, but they reach for it anyways when things don’t look right.

Hm… What is c-index?

[fail sound] That’s a good guess, but not what we were looking for. Chris?

My guess is that it’s a pun, and it’s clear. Clearfix.

[win alert] You got it, the clearfix. A lot of these are older because we don’t have to do them quite as often as we used to. That was Miriam’s turn, so now it’s Chris’ turn.

Framewords for 1,000.

Oh my goodness, he’s going big. The less formal CSS framework. Its goal is to be as minimal as possible when adding classes.

Adding classes… I don’t know. It’s not Tailwind, but I’m gonna say Tailwind.

[fail sound] That is incorrect.

Their goal is to be as maximal as possible.

Alright, here’s where I’ll remind people to be careful with the steals, because you can lose a thousand by stealing haphazardly. Sarah, do you know what it is? Would you like to steal?

Um… Tachyons?

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

I’m gonna go out on a limb, yes…

[laughs] Despite all advice, they’re just going for it…

What is PaperCSS?

[win alert] You got it!

No way…!

Oh…!

Very good.

Nicely done.

It was an obscure one.

Thank you, thank you.

Sarah, I think…

Yup, Sarah, your turn.

I wanna do Actual CSS Tricks for 800.

Okay, for 800. It used to be a trickier aspect of CSS, but Flexbox and Grid have made it trivial to pull off.

Floats.

[fail sound] Not what we were after there… I can see where you’ve gone there… Geoff, for a steal?

What is aspect ratio?

Not quite right…

[28:10] No? Shoot…

Miriam.

I’m gonna go with “What is layout?”

Well, that’s such a generic thing to say… [laughter] Layout. It’s a large aspect.

Is it the holy grail?

[fail sound] Not what we were looking for. Sorry, it was not what we were looking for. You have to read our minds, as well as get it right.

Just because everybody’s risking it all, I’m gonna say columns.

[fail sound] Also not what we were looking for.

Oh, nice…

The question from hell…

Welcome to the grid, everyone…

Equal height?

It’s the thing that everybody complains of all the time - how to center things. Vertically center, horizontally…

Oh… That’s fair, that’s fair.

Okay.

That might have been too broad of a question, but at least we all got bit by it… Which means it was basically no-op at that point, right? [laughter] Okay, who’s turn was that? Was it Sarah’s turn? It’s Geoff’s turn.

It’s hard to even see who’s winning anymore…

It’s just blood on the streets… Geoff.

I’ll do Divitis for 400.

Alright. <div> This text is important, serious, or urgent </div>

What is – no, that’s not gonna be it. Shoot… What is alert?

[fail sound] Nope. Miriam to steal.

What is <strong>?

[win alert] You got it. <strong> Alright. And it’s your turn as well, Miriam. Back in the white.

Yes…! I’ll do Divitis again. Let’s go with 600.

Okay, Divitis for 600. <div>JSON</div> stands for JavaScript object notation.

What is <abbr>?

[win alert] You got it again. Very good. It’s an abbreviation. Okay, Chris, to you.

I’m so nervous… I’m gonna die. [laughter] I want Divitis for 1,000 though.

He’s going for 1,000 each time. Alright. Go big or go home. <div value=“70” max=“100”

<progress>

Oh, you got it. [win alert] <progress>

He knows this one.

Well played, sir… And Sarah, your turn.

I want Framewords for 800.

Okay. This 8bit-like CSS framework is brimming with ’80s nostalgia.

That feels like something I would know… I don’t know the answer.

Okay. Geoff, would you like to steal?

No, thanks.

Miriam to steal?

Nope.

Chris to steal?

Too risky.

Yup.

But I’ll say, is it the Windows 98-looking one?

That’s a good second guess. It was actually NES.css… Which is a very cool framework.

Yes, it is cool.

Alright, moving on… It is now Geoff’s turn.

Let’s take Framewords 600.

I noticed you guys are ignoring the Node category… [laughter]

Absolutely.

Not a surprise. A free open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. No CSS knowledge required.

What is – oh, geez… Ready-to-use frontend components. This is straight off their homepage, huh?

This is right off their homepage. They make a big deal out of the end - no CSS knowledge required.

No CSS knowledge required. Okay… What is Material?

[fail alert] I’m sorry, that’s incorrect. Miriam? Saying no?

No, I don’t know.

Okay. Chris, steal?

Too risky…

Sarah to steal?

I’m already in the red, so I’m just gonna keep going… [laughter] Is it Prismic?

[fail alert] No, sorry. The framework is Bulma.

[32:06] Oh…

Oh, okay…

There you go. Alright.

I like Bulma, it looks good. It’s a nice-looking one.

It does look nice. Marketing copy could use some work maybe… [laughter]

Yeah, because it’s like “CSS knowledge helpful.”

Right.

Whose turn is it?

Let’s see… That was Geoff’s turn, so Miriam - your turn.

Actual CSS Tricks 600.

Okay. This is the best PLACE for your style rule to ensure it gets applied.

PLACE is all-caps. Why is PLACE all-caps?

I’ll tell you afterwards.

Inline? What is in-line?

[win alert] You got it. I put PLACE in all-caps because you might think bang important is what you would do, but that’s not really a place.

Oh, okay. Yeah.

So it was kind of a hint.

It actually did help. I was just thinking of the way people used to write HTML all-caps all the time…

Alright. Very good, you got it right. Chris, your turn.

I feel like I’m contractually obliged to take Actual CSS Tricks for 1,000.

Alright… This proprietary Microsoft extension to internet explorer provides a mechanism to turn each of the versions of IE, either specifically or as a group.

I’m gonna say conditional comments.

I’m gonna say you are correct. [win alert] Very good.

It feels good to be number one… [laughter]

Alright, Sarah, your turn.

Oh Node You Didn’t! for 200.

Okay, wading into the Node waters. Miss the browser? This function might console you. It works pretty much the same in Node.

I mean, this feels too obvious…

It is the easiest in the column.

Alright… Console.log?

[win alert] You got it.

I’m like, “Is this a trick?” [laughter]

It sure feels like it.

Alright, Geoff, your turn. Pick a square.

Framewords, 400.

A utility-first framework to rapidly build modern websites without ever leaving your HTML.

What is Atomic CSS?

[fail sound] Incorrect. Miriam to steal?

I think you’re on the right track. What is Tailwind?

[win alert] That’s it.

Thanks, Geoff. [laughter]

Miriam is benefitting from her placement on the board here. So… Your turn as well.

I’ll take Divitis for 800, because I am not touching Node.

A common equation in physics is E = MC<div>2</div>

What is <sup>?

[win alert] You got it.

I’m jealous.

You avoided my opportunity to say “Not much. Sup with you?” [laughter] I’ve been waiting for it the whole game. Chris, your turn. There’s only Node questions left.

I’ll get the 600 one. I’ve got ground to cover.

Okay. He’s not going for 1,000 this time around…

No.

You have to use ‘requite’ instead of ‘import’ in Node because it relies on this module system.

CJS probably? CommonJS?

Yes, correct. [win alert] You got it. Not technically 100% true anymore, but it was true t the time of the writing… Because sometimes you don’t have to anymore. Okay. Sarah.

I’m gonna do Oh Node You Didn’t! for 400.

Node.js runs on this JavaScript engine, which is also at the core of Google Chrome.

It’s… God. My brain is – V8.

[win alert] That’s right. Very good. You guys are drilling the Node questions.

That’s a delicious tomato juice…

Geoff, you’ve got 800 or 1,000.

1,000. Let’s do it.

Thanks.

‘this’ in the browser’s global scope refers to ‘window’, but in Node it refers to…

[36:03] What is the document?

Hm… [laughter]

Mercy points, mercy points.

Yeah, we’ll give it to you. [laughter] Module.exports is the current module, so if you’re in a document – there is no document object, but the current module, which would be top-level thing in the current document. So - close enough… We’ll give it to you.

Alright… Which leaves Miriam with Oh Node You Didn’t! for 800. Here we go!

Okay.

If you want to read an environment variable or exit from a Node program, you must use this core module.

Read an environment variable… I think I’ve done that before… Maybe.

Do you remember the module you’ve used?

Nope.

[laughs] Okay… Do you wanna hazard a guess, or we’ll just subtract the points.

Hm… I think you can just subtract the points.

[fail alert] Okay. -800. We go to Chris for the steal?

No…

A pass?

I could guess, but I’m absolutely not going to.

Okay. Sarah to steal.

Dotenv?

That’s close, but incorrect. [fail alert] Dotenv is… Yeah. Geoff to steal.

Well, that was what I was gonna guess, so I’m just gonna let it slide.

Alright. The module is called process.

Ooohh…!

Okay…

So process.exit, process.env…

Yeah, there you go.

Yeah, okay…

Etc. Thus concludes round two, Double Trouble.

I’m going down [\laughter]

Did your miss make me win? Yes…!!

Well, the game’s not over yet. We still have Final Trouble. The game’s not quite over yet, so…

I’ve gotta go actually, so… Just kidding. [laughter]

Well, then Chris loses by forfeit…

I’m taking my chips…

Chris with 2,200 points. Miriam in second with 1,900. Geoff in third now, with -1,000, and Sarah in fourth with -2,400. Now, we’re about to play Final Trouble, and for that everybody must have some points to wager. A few of us are in the red, so what we’ll do is we will add 3,000 to everybody’s score to get Sarah back in the red, and that way it’s still even-steven.

[laughs] It’s like, “Poor Sarah…”

So let’s go ahead and do that, and then we’ll start round three right after this.

Alright, we are back for Final Trouble. This is our very last question… A little bit different than the other rounds. Instead of taking turns, everybody is going to wager some points based on the category given. Then we’ll show the question. Whoever ends up with the most points at the end is our actual CSS trickster winner.

The category is CSS *emoji handshake* R&B. So there’s your category. Contestants please submit to me your wager. You can wager up to all of your points, and… That’s it. Submit your wagers now.

This should be in R&B right now…

Here comes the stressy part. I have everybody but Sarah’s.

I don’t like it. [laughter]

Alright, all of the wagers are in. Let’s reveal our final trouble question. A year before CSS’s debut, this chart-topping trio sang this song… [song sample 00:41:49.03] We have Jeff’s, we have Chris’, we have Miriam’s…

Very appropriate choice, by the way…

Thank you. And Sarah is also in. So final results time… Chris, you wagered 4,901… [laughter]

Jeez…

I forgot to mention that our gameboard only works in 50-point values, so…

Oh, sorry… [laughter]

Good strategy, but illegitimate due to technological hurdles…

I think you know what I was going for there…

Yes. Your answer was TLC, and that is correct.

Ah, yes!

You got it.

I was gonna write Tender Love & Care, but I’m glad I abbreviated it.

Miriam, you wagered 500, and you also answered TLC. Congratulations, you go it right. Geoff wagered 2,000, all of his points, and he answered TLC as well, so you’re correct as well… And Sarah wagered all of her points, and she also said TLC. So everybody got the Final Trouble answer right. Congratulations!

Yay! We’re all kind of winners.

However, there can be only one, and Chris did have the most points, and the highest points at the end… So our winner of this game of JS Danger is the one and only Chris Coyier.

I’m going to Disneyworld! [laughter]

However, Miriam wasn’t too far behind…

Well, that was a blast. Thank you to all four of you for being such good sports, for playing along, and for all of the web dev knowledge that you guys have shared over the years at CSS-Tricks, and continue to share on a daily basis. We really appreciate the work that you all do over there, and we appreciate you coming on the show and playing JS Danger with us.

Thank you for having us.

Yeah, thank you.

Thank you so much.

It was a huge pleasure. Yeah, show my face bigger. [laughter]

Don’t we get like a hot dog, or something…? [laughter]

Oh, he’s hot-dogging alright…

I’ll get $50 off Linode hosting. Just kidding… [laughter] Alright…

That’s JS Party for this week. Thanks everybody for playing along, and we’ll talk to you next time.

Gotta go back and strike that JPEG XL one from the record… [laughter] Is that a thing? I don’t know…

It is, but I don’t know if it’s new… And AVIF is new and has all the press lately.

Right… So those I was getting off of – I was just using Can I Use’s blog… Because I figured as they added new things to Can I Use, they are relatively new features…

Yeah… I don’t know if that’s true. I do that same thing, and I saw one the other day that was called “overflow overlay”, and I was like “What the hell is that?”

Yeah, I saw that too, and I went and looked at it and I was like “This doesn’t seem–” And then they’re like “This is deprecated.” I’m like, “Well, then how is it new?”

Yeah, they’re just adding an old deprecated thing. I’m like, “Oh, good job. Thanks for that. Super-useful.”

So JPEG XL image format has zero support. Global zero percent. But does that mean it’s – maybe it’s brand stinkin’ new. Or maybe it’s so old that no one – maybe it just didn’t ever become a thing.

XL makes it sound like it’s huge…

Doesn’t it?

Yeah… it’s a terrible name.

It does say “JPEG XL competes with AVIF, which has similar compression quality, but fewer features.” So this might be a brand new thing that someone’s trying to do… I don’t know.

Why don’t you ask Lea Verou to be on the call?

Yeah, that’s a good call.

Alright, should we do it?
+