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.
Chris Coyier:Oh, I can't wait. Thanks for having me.
Jerod Santo:Do you like to live dangerously?
Chris Coyier:That's my middle name...
Jerod Santo:\[laughs\] No, that was my middle name; didn't you hear my intro?
Chris Coyier:Dang it.
Jerod Santo:We also have Sarah Drasner here. Sarah, do you have a competitive spirit?
Sarah Drasner:I do, but not as much as Chris, who has broken both of his wrists in the last two years.
Jerod Santo:Ouch... Chris, how did you break your wrists, man?
Chris Coyier: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.
Sarah Drasner:Yeah, and he was putting out articles the whole time. \[laughter\]
Jerod Santo:It sounds like you do like to live dangerously after all.
Geoff Graham:Well, editing those was something else... \[laughter\]
Jerod Santo:That voice you hear is Geoff Graham. Geoff, welcome to the show.
Geoff Graham:Yeah, nice to be here.
Jerod Santo:And I've wondered - have you ever considered suing Instagram for trademark infringement?
Geoff Graham:I think so, once or twice, but for probably different reasons than you're thinking. \[laughter\] What are you thinking?
Jerod Santo:Well, they're using your name, man. Graham. They're using it. Come on. Not fair.
Geoff Graham:Oh, sure. Well, I hold exclusive copyright on the H and the extra A that's there as well, so I'm okay.
Jerod Santo:Excellent. And we are also joined by Miriam Suzanne.
Miriam Suzanne:\[04:14\] Hello!
Jerod Santo:Welcome. Did you bring your trivia skills with you?
Miriam Suzanne:Nope. \[laughter\]
Jerod Santo: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.
Chris Coyier:Oh, I get to kick it off. That's exciting! I'll take Bleeding Edge for 100, please.
Jerod Santo:Bleeding Edge for 100. Some animations can cause dizziness and nausea in people with vestibular disorders. Media queries to the rescue.
Chris Coyier:Do I have to form my answer in the form of a question, or whatever?
Jerod Santo:You could try...
Chris Coyier:What is Prefers Reduces Motion?
Jerod Santo:That is correct. \[win alert\] 100 points to you, sir. Very well played.
Chris Coyier:The snowball is going.
Jerod Santo:Yeah, there you go. Now we're playing; we're having some fun. Sarah, you are up. Please pick a square.
Sarah Drasner:Oh... I'm interested in Movies Worth CSS-ing for 100.
Jerod Santo:Movies Worth CSS-ing. Keanu Reeves infiltrates a gang of bank-robbing surfers in this 1991 cult classic.
Sarah Drasner:Isn't it Point Break?
Jerod Santo:Point Break, you pulled it out somehow, at the last second. \[win alert\] Very good.
Sarah Drasner:Wow! \[laughs\]
Geoff Graham:Incredible. Jeez...
Jerod Santo:Excellent, excellent.
Chris Coyier:And it was there because Break was in the title, or what? Or Point?
Jerod Santo:Yeah, like breakpoints...
Chris Coyier:Oh, Point Break, breakpoint.
Jerod Santo:There you go.
Chris Coyier:Okay, thank you.
Jerod Santo:Okay. Geoff, your turn. Please pick a square.
Geoff Graham:I'm gonna keep it going right there - Movies Worth CSS-ing, 300.
Jerod Santo: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.
Geoff Graham:Oh, good Lord... I'm gonna have to pass on that one. I have no idea. I'm just not Bruce Willis-savvy.
Chris Coyier:Steal... Oh, wait.
Jerod Santo:Alright, so a pass gets you -300, and then Miriam gets a chance to steal. Would you like to steal?
Miriam Suzanne:What is the Fifth Element?
Jerod Santo:\[win alert\] That is correct. Very good, very good. A successful steal.
Sarah Drasner:Good job.
Jerod Santo:And you now get the board.
Miriam Suzanne:I guess I'll jump back over to Bleeding Edge for 200.
Jerod Santo:Bleeding Edge for 200. This experimental CSS property allows animations to be driven by a container's scroll position.
Miriam Suzanne:What is animation scroll timeline?
Jerod Santo:Hm...
Miriam Suzanne:\[08:08\] Scroll timeline?
Jerod Santo:Yeah, scroll timeline. We'll give it to you. \[win alert\] Very good!
Miriam Suzanne:Wooh!
Jerod Santo: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.
Chris Coyier:Bleeding edge for 300, please.
Jerod Santo: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'.
Chris Coyier:It's AVIF.
Jerod Santo:\[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.
Chris Coyier:Okay... \[laughter\]
Jerod Santo:Would anybody like to steal a non-AVIF answer?
Sarah Drasner:That was my answer... \[laughs\]
Geoff Graham:Mine, too.
Jerod Santo:Okay... Maybe you guys can school me. So this was according to caniuse.com, and the feature is called JPEG XL.
Geoff Graham:Oh.
Jerod Santo:Is anybody familiar?
Chris Coyier:Oooh... My answer is more right. \[laughter\]
Jerod Santo: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.
Chris Coyier:I'm not cheating, I'm really right.
Jerod Santo:Okay... \[win alert\]
Sarah Drasner:I agree, I agree.
Jerod Santo: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.
Sarah Drasner:I'm gonna do Tricky CSS Sites for 100.
Jerod Santo:Alright. For 100. Often a top 100 related search results, but that doesn't mean devs love it.
Sarah Drasner:Oooh... I can picture it in my mind. The green site! Uhm...
Jerod Santo:\[fail sound\] Time's out. Sorry. Tip of your tongue...
Sarah Drasner:I know the answer, I just --
Jerod Santo:Geoff, do you know what's that we're referring to?
Geoff Graham:What is W3Schools?
Jerod Santo:\[win alert\]
Sarah Drasner:Yes!
Jerod Santo:That's it...
Sarah Drasner:I've been picturing you in my mind... \[laughs\]
Jerod Santo:Yes, we all have it burnt into our retinas.
Geoff Graham:\[unintelligible 00:10:25.18\]
Jerod Santo:Okay, Geoff, your turn. Please pick a square.
Geoff Graham:Oh. Bleeding Edge, 400.
Jerod Santo:Bleeding Edge for 400. The new cookie store API has a more modern interface than document.cookie, and can also be used in these.
Geoff Graham:What is custom properties?
Jerod Santo:\[fail sounds\] I'm sorry, that's incorrect. Miriam, would you like to steal?
Miriam Suzanne:No, I would not.
Jerod Santo:Chris, would you like to steal?
Chris Coyier:I don't really understand the question... That's fine. Skip.
Jerod Santo:Skip. Sarah, would you like to steal?
Geoff Graham:We're not talking about local storage, are we?
Jerod Santo: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...
Chris Coyier:Was it a web worker? Oh, it's service workers.
Geoff Graham:Yeah...
Jerod Santo:Tough one. Geoff so far selecting the difficult ones... Let's move on.
Chris Coyier:So you can't use a regular cookie in a service worker? TIL...
Geoff Graham:Yeah.
Jerod Santo:Miriam, your turn. Please select a category.
Miriam Suzanne:Let's do Tricky CSS Sites for 200.
Jerod Santo:Okay. Browser support tables for modern web technologies, including CSS.
Miriam Suzanne:What is Can I Use?
Jerod Santo:\[win alert\] You got it.
Miriam Suzanne:And/or MDN?
Jerod Santo:Hm... There's some crossover there now, isn't there? Alright, you got that one. We're back to Chris.
Chris Coyier:I'll take Tricky CSS Sites for 300.
Jerod Santo:\[12:02\] Okay, here we go. This site demonstrates what can be accomplished by only changing the CSS.
Chris Coyier:Oh yeah, CSS Zen Garden.
Jerod Santo:That's right. \[win alert\]
Sarah Drasner:That's one for us old fogies. \[laughter\]
Jerod Santo:That is an old-school one, isn't it...?
Geoff Graham:Yeah, there's a new version of it - Style Stages.
Jerod Santo:Really?
Geoff Graham:Yeah, by -- is that Stephanie behind that? Stephanie Eckles.
Chris Coyier:Nice.
Jerod Santo:I'll check that out.
Chris Coyier: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\]
Jerod Santo:We can chit-chat, no big deal... Okay, whose turn was that?
Sarah Drasner:I think I'm next, maybe...
Chris Coyier:Miriam just got it right, right?
Jerod Santo:Okay, so back to Chris then.
Chris Coyier:Or no, I got it right...
Jerod Santo:Oh, you got it right, so it's Sarah's turn.
Chris Coyier:Oh, my God. Great injustice.
Jerod Santo:Very good, okay. Sarah was correct.
Sarah Drasner:God, Chris is just trying to steal... We haven't done Project People yet, so I'll do that one for 100.
Jerod Santo:Alright. Mat Mullenweg.
Sarah Drasner:WordPress.
Jerod Santo:\[win alert\] Very good.
Sarah Drasner:That feels like a softball. \[laughs\]
Jerod Santo:Well, it is a 100-point question...
Sarah Drasner:Yeah, that's true.
Jerod Santo:Okay... Geoff.
Geoff Graham:I'm just gonna keep going in the red... Um, Bleeding Edge, 500. \[laughter\]
Jerod Santo: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.
Geoff Graham:What is border box? Oh, I mean... No, go ahead and take that.
Jerod Santo:You can change it. Do you have a better guess?
Geoff Graham:No, go right ahead.
Jerod Santo:\[fail sound\] Alright. Sorry, Geoff. You're further in the red.
Geoff Graham:It's fine.
Jerod Santo:Miriam for the steal?
Miriam Suzanne:What is background-clip?
Jerod Santo:\[win alerts\] That's correct.
Miriam Suzanne:Thanks for that, Geoff.
Jerod Santo:Miriam is the benefactor of --
Chris Coyier:First debut in 1997...
Jerod Santo:That's why it was "newish". \[laughter\]
Chris Coyier:Fair enough, fair enough.
Jerod Santo:That was Geoff's turn, so it's Miriam's turn.
Miriam Suzanne:Yeah, okay... Tricky CSS Sites for 400.
Jerod Santo:Launched in 2005 when a small team of idealists set out to create a new, free, community-built online resource for all web developers.
Miriam Suzanne:What is Web Platform Docs? \[fail sound\] No... Huh.
Jerod Santo:Chris?
Chris Coyier:I'm not gonna steal, because that was my guess...
Jerod Santo:Okay. Sarah?
Sarah Drasner:This may be too late to be accurate, but Geocities?
Jerod Santo:\[fail sound\] I'm sorry, that's not correct either. Geoff? Are you gonna dig out of that hole?
Geoff Graham: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\]
Jerod Santo:Okay, let's see what the answer was.
Chris Coyier:Oh, MDN
Geoff Graham:That was it.
Jerod Santo:There it was. 2005.
Chris Coyier:Small team of idealists... Large company of idealists.
Jerod Santo:That's according to their own About page right there.
Chris Coyier:Oh, okay, okay.
Jerod Santo:Not my words. Alright, so that was... It's always hard to remember whose turn it is. Who said that one?
Miriam Suzanne:That was mine.
Jerod Santo:Alright, so we're back to Chris then. Chris, pick a square.
Chris Coyier:Okay. Tricky CSS Sites for 500.
Jerod Santo:Alright. He's going back to the well.
Chris Coyier:Gotta take the lead here.
Jerod Santo:This site shows you CSS alternatives for CommonJS UI components.
Chris Coyier:Wow... And I have to guess, right?
Jerod Santo:That's correct, you have to guess.
Chris Coyier:I have to guess... Is it like "You may not need JS", or something like that?
Jerod Santo:\[win alert\] Wow... Way to pull it out! Look at this...
Chris Coyier:Yes...! \[laughter\]
Jerod Santo:How did you pull that one out? Excellent job. Alright, Sarah, your turn. Pick a square.
Sarah Drasner:Let's do Project People for 200.
Jerod Santo:Okay. Another softball - John Resig.
Sarah Drasner:jQuery.
Jerod Santo:\[15:58\] \[win alert\] There you go. Geoff, it's your turn.
Sarah Drasner:I knew the last one, too... \[laughter\]
Geoff Graham:Jeez... Let's go Project People 300.
Jerod Santo:Okay. David Heinemeier Hansson.
Geoff Graham:Basecamp.
Jerod Santo:Open source projects.
Geoff Graham:Ruby on Rails?
Jerod Santo:\[win alert\] Yes, yes. There you go. Very good. Now we're scooting along. Miriam, your turn.
Miriam Suzanne:Movies Worth CSS-ing for 200?
Jerod Santo:A young Peruvian bear travels to London in search of a home, in this 2015 animated comedy.
Miriam Suzanne:What is Paddington Bear?
Jerod Santo:\[win alert\] You got it. Very good.
Chris Coyier:Wow...
Miriam Suzanne:Margining-ton... \[laughter\]
Jerod Santo:Chris, your turn.
Chris Coyier:I'll take Project People for 400.
Jerod Santo:Dries Buytaert.
Chris Coyier: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\]
Jerod Santo:\[fail sound\] I'm sorry, that's incorrect. Sarah, would you like to steal?
Sarah Drasner:Can I say no?
Jerod Santo:Yeah, you can say no.
Sarah Drasner:Okay, wait, I'm gonna make a guess.
Jerod Santo:Okay.
Sarah Drasner:We did CMSes... What if he's like Drupal?
Jerod Santo:Drupal? \[win alert\] You got it.
Chris Coyier:Nice work! You just pulled that out--
Geoff Graham:That was nice...!
Jerod Santo:Wow...
Chris Coyier:Wow...
Jerod Santo:I thought you were going further in the red there. Congratulations, that was excellent. Alright. And it's now your turn as well.
Sarah Drasner:Oh, again? Oh, okay. Project People.
Jerod Santo:Alright. For 500. Mr.doob.
Sarah Drasner:Oh, yeah...! Mr.doob does Three.js.
Jerod Santo:\[win alert\] That's right. Very good.
Sarah Drasner:Wow, I'm pulling it together.
Jerod Santo: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.
Geoff Graham:I'll take Movies Worth CSS-ing, 400.
Jerod Santo: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.
Geoff Graham:Oh, gosh... It's so showing that I don't watch movies. Jeez... I'm sorry, I'm gonna pass.
Jerod Santo:Okay. \[fail sound\] Miriam with a chance to steal?
Miriam Suzanne:Let's go with "Who are the X-men?" "Set X-Height Men"?
Jerod Santo:We're gonna have to say no on that one. You're close, but you're not on.
Miriam Suzanne:Alright.
Jerod Santo:Chris.
Chris Coyier:I'll pass, because it's X-men related...
Jerod Santo:Yes. Sarah?
Sarah Drasner:X-men First Class.
Jerod Santo:X-men First Class! \[win alert\]
Chris Coyier:That's what I was gonna say!! \[laughter\]
Jerod Santo:Storming back to take the lead. Alright...
Geoff Graham:Beautiful.
Jerod Santo:And that leaves with just Movies Worth CSS-ing for 500. This is Miriam's -- or is this Chris' turn?
Miriam Suzanne:Yeah, that's me, I think.
Jerod Santo:That's you, okay.
Miriam Suzanne:Yeah.
Jerod Santo: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.
Miriam Suzanne:What is the Color Rebecca Purple?
Jerod Santo:\[win alert\] You got it.
Chris Coyier:Wow...
Jerod Santo:Wow. Very good.
Chris Coyier:Well done.
Jerod Santo: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.
Geoff Graham:I sure do.
Jerod Santo:\[19:57\] Don't worry, Geoff, Double Trouble is just around the corner.
Miriam Suzanne:A real comeback for Sarah...
Geoff Graham:Yeah, it was amazing, pulling Drupal out...
Sarah Drasner:Yeah, I was really drowning... \[laughs\]
Geoff Graham:That was clutch.
Chris Coyier:Well done, everyone. Except Geoff. You didn't -- \[laughter\]
Geoff Graham:I just hope my boss isn't watching... \[laughter\]
Sarah Drasner:Don't we all...?
Break:\[20:22\]
Jerod Santo: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.
Chris Coyier:Oh, my God...
Sarah Drasner:That's cool. Also, Miriam has a leg up on the Framewords category... \[laughs\]
Miriam Suzanne:Do I?
Jerod Santo:Are you a framework aficionado?
Miriam Suzanne:I don't know.
Sarah Drasner:She made one. \[laughs\]
Miriam Suzanne:I guess that counts...
Jerod Santo: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.
Chris Coyier:Okay, let's try Divitis for 200.
Jerod Santo:Alright. <div name='please'>Press me</div
Chris Coyier:I hope it's a button...
Jerod Santo:\[win alert\] You got it. Alright, we go to Sarah.
Sarah Drasner:I'm gonna try Actual CSS Tricks for 200.
Jerod Santo:You can use multiple background images and nested divs to achieve the rounding effect possible with this one property.
Sarah Drasner:Rounding effect like -- well, I guess you can't tell me.
Jerod Santo:Remember that it's a hack, so this is something that people did before the property existed.
Sarah Drasner:I see. Is it CSS gradient?
Jerod Santo:\[fail sound\] Nope. Geoff to steal?
Geoff Graham:What is border radius?
Jerod Santo:\[win alert\] That's it.
Sarah Drasner:Well, I was thinking --
Jerod Santo:Alright...
Miriam Suzanne:Good memories of the sliding doors...
Jerod Santo:Oh, yes...
Geoff Graham:Nice.
Jerod Santo:Geoff began his comeback, and now it's your turn, Geoff. You get to pick a square.
Geoff Graham:Alright, let's keep digging out... Framewords for 200, please.
Jerod Santo:Framewords for 200. Simple and flexible HTML, CSS and JavaScript for popular user interface components and interactions. From Twitter.
Geoff Graham:What is Bootstrap?
Jerod Santo:\[win alert\] There you go. And we go to Miriam.
Miriam Suzanne:Let's do Actual CSS Tricks for 400.
Jerod Santo:Many people aren't clear why this fixes anything, but they reach for it anyways when things don't look right.
Miriam Suzanne:Hm... What is c-index?
Jerod Santo:\[fail sound\] That's a good guess, but not what we were looking for. Chris?
Chris Coyier:My guess is that it's a pun, and it's clear. Clearfix.
Jerod Santo:\[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.
Chris Coyier:Framewords for 1,000.
Jerod Santo:Oh my goodness, he's going big. The less formal CSS framework. Its goal is to be as minimal as possible when adding classes.
Chris Coyier:Adding classes... I don't know. It's not Tailwind, but I'm gonna say Tailwind.
Jerod Santo:\[fail sound\] That is incorrect.
Miriam Suzanne:Their goal is to be as maximal as possible.
Jerod Santo: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?
Sarah Drasner:Um... Tachyons?
Jerod Santo:\[fail sound\] Sorry, that's also incorrect. Geoff, would you like to steal?
Geoff Graham:I'm gonna go out on a limb, yes...
Jerod Santo:\[laughs\] Despite all advice, they're just going for it...
Geoff Graham:What is PaperCSS?
Jerod Santo:\[win alert\] You got it!
Chris Coyier:No way...!
Geoff Graham:Oh...!
Jerod Santo:Very good.
Miriam Suzanne:Nicely done.
Jerod Santo:It was an obscure one.
Geoff Graham:Thank you, thank you.
Chris Coyier:Sarah, I think...
Jerod Santo:Yup, Sarah, your turn.
Sarah Drasner:I wanna do Actual CSS Tricks for 800.
Jerod Santo:Okay, for 800. It used to be a trickier aspect of CSS, but Flexbox and Grid have made it trivial to pull off.
Miriam Suzanne:Floats.
Jerod Santo:\[fail sound\] Not what we were after there... I can see where you've gone there... Geoff, for a steal?
Geoff Graham:What is aspect ratio?
Jerod Santo:Not quite right...
Geoff Graham:\[28:10\] No? Shoot...
Jerod Santo:Miriam.
Miriam Suzanne:I'm gonna go with "What is layout?"
Jerod Santo:Well, that's such a generic thing to say... \[laughter\] Layout. It's a large aspect.
Chris Coyier:Is it the holy grail?
Jerod Santo:\[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.
Chris Coyier:Just because everybody's risking it all, I'm gonna say columns.
Jerod Santo:\[fail sound\] Also not what we were looking for.
Chris Coyier:Oh, nice...
Jerod Santo:The question from hell...
Sarah Drasner:Welcome to the grid, everyone...
Miriam Suzanne:Equal height?
Jerod Santo:It's the thing that everybody complains of all the time - how to center things. Vertically center, horizontally...
Chris Coyier:Oh... That's fair, that's fair.
Miriam Suzanne:Okay.
Jerod Santo: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.
Chris Coyier:It's hard to even see who's winning anymore...
Jerod Santo:It's just blood on the streets... Geoff.
Geoff Graham:I'll do Divitis for 400.
Jerod Santo:Alright. <div> This text is important, serious, or urgent </div>
Geoff Graham:What is -- no, that's not gonna be it. Shoot... What is alert?
Jerod Santo:\[fail sound\] Nope. Miriam to steal.
Miriam Suzanne:What is <strong>?
Jerod Santo:\[win alert\] You got it. <strong> Alright. And it's your turn as well, Miriam. Back in the white.
Miriam Suzanne:Yes...! I'll do Divitis again. Let's go with 600.
Jerod Santo:Okay, Divitis for 600. <div>JSON</div> stands for JavaScript object notation.
Miriam Suzanne:What is <abbr>?
Jerod Santo:\[win alert\] You got it again. Very good. It's an abbreviation. Okay, Chris, to you.
Chris Coyier:I'm so nervous... I'm gonna die. \[laughter\] I want Divitis for 1,000 though.
Jerod Santo:He's going for 1,000 each time. Alright. Go big or go home. <div value="70" max="100"
Chris Coyier:<progress>
Jerod Santo:Oh, you got it. \[win alert\] <progress>
Geoff Graham:He knows this one.
Jerod Santo:Well played, sir... And Sarah, your turn.
Sarah Drasner:I want Framewords for 800.
Jerod Santo:Okay. This 8bit-like CSS framework is brimming with '80s nostalgia.
Sarah Drasner:That feels like something I would know... I don't know the answer.
Jerod Santo:Okay. Geoff, would you like to steal?
Geoff Graham:No, thanks.
Jerod Santo:Miriam to steal?
Miriam Suzanne:Nope.
Jerod Santo:Chris to steal?
Chris Coyier:Too risky.
Jerod Santo:Yup.
Chris Coyier:But I'll say, is it the Windows 98-looking one?
Jerod Santo:That's a good second guess. It was actually NES.css... Which is a very cool framework.
Chris Coyier:Yes, it is cool.
Jerod Santo:Alright, moving on... It is now Geoff's turn.
Geoff Graham:Let's take Framewords 600.
Jerod Santo:I noticed you guys are ignoring the Node category... \[laughter\]
Sarah Drasner:Absolutely.
Jerod Santo: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.
Geoff Graham:What is -- oh, geez... Ready-to-use frontend components. This is straight off their homepage, huh?
Jerod Santo:This is right off their homepage. They make a big deal out of the end - no CSS knowledge required.
Geoff Graham:No CSS knowledge required. Okay... What is Material?
Jerod Santo:\[fail alert\] I'm sorry, that's incorrect. Miriam? Saying no?
Miriam Suzanne:No, I don't know.
Jerod Santo:Okay. Chris, steal?
Chris Coyier:Too risky...
Jerod Santo:Sarah to steal?
Sarah Drasner:I'm already in the red, so I'm just gonna keep going... \[laughter\] Is it Prismic?
Jerod Santo:\[fail alert\] No, sorry. The framework is Bulma.
Chris Coyier:\[32:06\] Oh...
Miriam Suzanne:Oh, okay...
Jerod Santo:There you go. Alright.
Chris Coyier:I like Bulma, it looks good. It's a nice-looking one.
Jerod Santo:It does look nice. Marketing copy could use some work maybe... \[laughter\]
Chris Coyier:Yeah, because it's like "CSS knowledge helpful."
Jerod Santo:Right.
Chris Coyier:Whose turn is it?
Jerod Santo:Let's see... That was Geoff's turn, so Miriam - your turn.
Miriam Suzanne:Actual CSS Tricks 600.
Jerod Santo:Okay. This is the best PLACE for your style rule to ensure it gets applied.
Miriam Suzanne:PLACE is all-caps. Why is PLACE all-caps?
Jerod Santo:I'll tell you afterwards.
Miriam Suzanne:Inline? What is in-line?
Jerod Santo:\[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.
Miriam Suzanne:Oh, okay. Yeah.
Jerod Santo:So it was kind of a hint.
Miriam Suzanne:It actually did help. I was just thinking of the way people used to write HTML all-caps all the time...
Jerod Santo:Alright. Very good, you got it right. Chris, your turn.
Chris Coyier:I feel like I'm contractually obliged to take Actual CSS Tricks for 1,000.
Jerod Santo: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.
Chris Coyier:I'm gonna say conditional comments.
Jerod Santo:I'm gonna say you are correct. \[win alert\] Very good.
Chris Coyier:It feels good to be number one... \[laughter\]
Jerod Santo:Alright, Sarah, your turn.
Sarah Drasner:Oh Node You Didn't! for 200.
Jerod Santo:Okay, wading into the Node waters. Miss the browser? This function might console you. It works pretty much the same in Node.
Sarah Drasner:I mean, this feels too obvious...
Jerod Santo:It is the easiest in the column.
Sarah Drasner:Alright... Console.log?
Jerod Santo:\[win alert\] You got it.
Sarah Drasner:I'm like, "Is this a trick?" \[laughter\]
Miriam Suzanne:It sure feels like it.
Jerod Santo:Alright, Geoff, your turn. Pick a square.
Geoff Graham:Framewords, 400.
Jerod Santo:A utility-first framework to rapidly build modern websites without ever leaving your HTML.
Geoff Graham:What is Atomic CSS?
Jerod Santo:\[fail sound\] Incorrect. Miriam to steal?
Miriam Suzanne:I think you're on the right track. What is Tailwind?
Jerod Santo:\[win alert\] That's it.
Miriam Suzanne:Thanks, Geoff. \[laughter\]
Jerod Santo:Miriam is benefitting from her placement on the board here. So... Your turn as well.
Miriam Suzanne:I'll take Divitis for 800, because I am not touching Node.
Jerod Santo:A common equation in physics is E = MC<div>2</div>
Miriam Suzanne:What is <sup>?
Jerod Santo:\[win alert\] You got it.
Chris Coyier:I'm jealous.
Jerod Santo: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.
Chris Coyier:I'll get the 600 one. I've got ground to cover.
Jerod Santo:Okay. He's not going for 1,000 this time around...
Chris Coyier:No.
Jerod Santo:You have to use 'requite' instead of 'import' in Node because it relies on this module system.
Chris Coyier:CJS probably? CommonJS?
Jerod Santo: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.
Sarah Drasner:I'm gonna do Oh Node You Didn't! for 400.
Jerod Santo:Node.js runs on this JavaScript engine, which is also at the core of Google Chrome.
Sarah Drasner:It's... God. My brain is -- V8.
Jerod Santo:\[win alert\] That's right. Very good. You guys are drilling the Node questions.
Chris Coyier:That's a delicious tomato juice...
Jerod Santo:Geoff, you've got 800 or 1,000.
Geoff Graham:1,000. Let's do it.
Miriam Suzanne:Thanks.
Jerod Santo:'this' in the browser's global scope refers to 'window', but in Node it refers to...
Geoff Graham:\[36:03\] What is the document?
Jerod Santo:Hm... \[laughter\]
Geoff Graham:Mercy points, mercy points.
Jerod Santo: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!
Miriam Suzanne:Okay.
Jerod Santo:If you want to read an environment variable or exit from a Node program, you must use this core module.
Miriam Suzanne:Read an environment variable... I think I've done that before... Maybe.
Jerod Santo:Do you remember the module you've used?
Miriam Suzanne:Nope.
Jerod Santo:\[laughs\] Okay... Do you wanna hazard a guess, or we'll just subtract the points.
Miriam Suzanne:Hm... I think you can just subtract the points.
Jerod Santo:\[fail alert\] Okay. -800. We go to Chris for the steal?
Chris Coyier:No...
Jerod Santo:A pass?
Chris Coyier:I could guess, but I'm absolutely not going to.
Jerod Santo:Okay. Sarah to steal.
Sarah Drasner:Dotenv?
Jerod Santo:That's close, but incorrect. \[fail alert\] Dotenv is... Yeah. Geoff to steal.
Geoff Graham:Well, that was what I was gonna guess, so I'm just gonna let it slide.
Jerod Santo:Alright. The module is called process.
Sarah Drasner:Ooohh...!
Geoff Graham:Okay...
Jerod Santo:So process.exit, process.env...
Chris Coyier:Yeah, there you go.
Sarah Drasner:Yeah, okay...
Jerod Santo:Etc. Thus concludes round two, Double Trouble.
Sarah Drasner:I'm going down [\laughter\]
Chris Coyier:Did your miss make me win? Yes...!!
Jerod Santo:Well, the game's not over yet. We still have Final Trouble. The game's not quite over yet, so...
Chris Coyier:I've gotta go actually, so... Just kidding. \[laughter\]
Jerod Santo:Well, then Chris loses by forfeit...
Chris Coyier:I'm taking my chips...
Jerod Santo: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.
Sarah Drasner:\[laughs\] It's like, "Poor Sarah..."
Jerod Santo:So let's go ahead and do that, and then we'll start round three right after this.
Break:\[38:30\]
Jerod Santo: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.
Geoff Graham:This should be in R&B right now...
Jerod Santo:Here comes the stressy part. I have everybody but Sarah's.
Chris Coyier:I don't like it. \[laughter\]
Jerod Santo: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...
Geoff Graham:Very appropriate choice, by the way...
Jerod Santo:Thank you. And Sarah is also in. So final results time... Chris, you wagered 4,901... \[laughter\]
Geoff Graham:Jeez...
Jerod Santo:I forgot to mention that our gameboard only works in 50-point values, so...
Chris Coyier:Oh, sorry... \[laughter\]
Jerod Santo:Good strategy, but illegitimate due to technological hurdles...
Chris Coyier:I think you know what I was going for there...
Jerod Santo:Yes. Your answer was TLC, and that is correct.
Chris Coyier:Ah, yes!
Jerod Santo:You got it.
Chris Coyier:I was gonna write Tender Love & Care, but I'm glad I abbreviated it.
Jerod Santo: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!
Sarah Drasner:Yay! We're all kind of winners.
Jerod Santo: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.
Chris Coyier:I'm going to Disneyworld! \[laughter\]
Sarah Drasner:However, Miriam wasn't too far behind...
Jerod Santo: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.
Sarah Drasner:Thank you for having us.
Geoff Graham:Yeah, thank you.
Miriam Suzanne:Thank you so much.
Chris Coyier:It was a huge pleasure. Yeah, show my face bigger. \[laughter\]
Sarah Drasner:Don't we get like a hot dog, or something...? \[laughter\]
Jerod Santo:Oh, he's hot-dogging alright...
Chris Coyier:I'll get $50 off Linode hosting. Just kidding... \[laughter\] Alright...
Jerod Santo:That's JS Party for this week. Thanks everybody for playing along, and we'll talk to you next time.
Outro:\[44:33\]
Jerod Santo:Gotta go back and strike that JPEG XL one from the record... \[laughter\] Is that a thing? I don't know...
Chris Coyier:It is, but I don't know if it's new... And AVIF is new and has all the press lately.
Jerod Santo: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...
Chris Coyier: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?"
Jerod Santo: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?"
Chris Coyier:Yeah, they're just adding an old deprecated thing. I'm like, "Oh, good job. Thanks for that. Super-useful."
Jerod Santo: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.
Geoff Graham:XL makes it sound like it's huge...
Jerod Santo:Doesn't it?
Chris Coyier:Yeah... it's a terrible name.
Jerod Santo: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.
Sarah Drasner:Why don't you ask Lea Verou to be on the call?
Jerod Santo:Yeah, that's a good call.
Chris Coyier:Alright, should we do it? +