STUMP'D Interview Questions - CSS Edition

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to Syntax, the podcast with the tastiest web development treats. Today, we have Stumped for you. Stumped is a game that we play here on the show where Scott and I try to ask each other interview questions about web development, And we see if the other person can answer them.

Usually, we make fools of ourselves, and we learn a thing or two along the way. Rid. Today, we're gonna focus entirely on CSS. The last time we did 1 on just JavaScript questions, so today is entirely CSS questions. Rid. So buckle up for that. Today, we are sponsored by 3 awesome companies, Sanity, which is a structured content CMS, Sentry, rid which is an error exception in performance tracking and Cloudinary, who does your image hosting, transformation, Optimization, you name it. Wow. We'll talk about all them partway through the episode. I'm really excited to talk to Scott today bell, and he won't tell me until he starts the show.

Cracking up about this right now. I'm like, yeah. So to give you some context, I live in a major city. This is not, like, in the wilderness here. Was it last week or a week ago, There was a thing on on the Ring app, and it's like, hey. There's a bear in the neighborhood over here. And I, like, looked at the map, And it's like I don't know. It's it's a pretty good distance from our house. It's, you know, a couple miles. I'm like, okay. That's weird that there's a bear here. And a bunch of people are like, I've never seen a bear in Denver.

No way there's actually a bear here. Because, yeah, maybe in Boulder, right, there in the foothills, whatever. Bear in Denver, no, I don't I don't think that's a thing. And then I get another ring alert Maybe, you know, 20 minutes later, and it's like, hey, I just saw a bear in the neighborhood, and then this one's, like, 2 blocks from our house. And I was just like, oh my of all of them. Like in our backyard. And I'm I got my office door open. The dogs are outside. I'm like, there's a bear. What kind of bear is it? Gonna be a black bear. Okay. Yeah. Black bear. They're gonna be pretty chill. I mean, black bears around here, they're not gonna just attack you. Like rac raccoons. Yeah. Yeah. They're like raccoons. Right? They're just looking for a thing. I still would not mess with a black bear. Oh, of course. I ain't getting near that thing. We live by a gulch, like a big river, And so it's probably just grazing down the river looking for fish or whatever. Gulch. So this was a bunch of people were thinking that was like a, you know, just a prank. I was thinking, it could be a prank. Right? Never seen a bear. Never heard about a bear here. And then I saw a news report. It's like, we found the bear.

They found the bear, and they found it pretty close. And so I thought that was the end of it. I just got a ping on my Ring app a minute ago, and it says, bear spotted rid. At park.

Look at the park. That's the park we go to, and then it says bear on walking path. There's another bear. Why? What is going on with these bears?

Oh, that's hilarious. We once had a bear. We were renting a cottage in Pennsylvania, and there was a all of a sudden, we're just kinda rid Just, like, hanging out, and all of a sudden, their bear just walks across the thing. And we grab all the kids and get them inside, and everyone's like, oh my gosh. There's a bear. And then my brother-in-law,

he starts walking away, and my brother-in-law follows it down Oh, yeah. You don't follow Bear. I don't follow Bear. No. Definitely not. Wow. Yeah. 1 time we were at a Airbnb.

It was in Rocky Mountain National Park. But, like, you just see a black bear chilling in the tree a little off in the distance. Like, oh, he's just rid. Taking out the tree. Yikes. He's close enough where you can see him from your room, but, you know, it's cool.

I don't know if I've said this before, but, like, you ever rid around with some friends and you're not sure what to talk about or you want some really good stories, all you have to do is just drop a little story about a raccoon or a moose or a bear,

and then all of a sudden, the stories just start come cranking out, and everybody has these rid Crazy stories. Everybody's got something. I went to lunch one time with a guy, and he was telling me about he used to work in in Boulder at a restaurant. Rent. In Boulder compared to Denver, Boulder's in the foothills of the mountains. Right? It's, like, basically, mountains are right there, and he said it was his job rid to scare the bears away from the trash can with pots and pans. So he would run out and start clanging together some pots and pans to get the bears to run off. Like, it is a big raccoon. Like, So I think people out here just view bears a little bit differently.

Alright. Let's get into

stumped. Yeah. In case you wanted Bear podcast episode today, yeah, you got it. We should start a secondary podcast of Bear chat. Bear chat.

Alright. You wanna go rock, paper, scissors for who gets to go first? So when we do this, to give you some how it's made, Wes always writes a script to randomly pick 1, and rid And I can always count on Wes to have a script that will randomly pick one of these things. I feel like if something is my superpower,

writing ran. Random code into the console Oh, yeah. That does stuff on the page as my superpower. It's totally your superpower. I 100% agree with that. This is the first time I've done this rid. Where I need to select a random thing, and I use the array dot at method instead of the square brackets. And I'm a big fan because I didn't have to floor the value. If you are new or you didn't listen to the podcast where we talked about that, there is a new at method rid in JavaScript on all arrays, and you can say dot at, and you can say at 1. That will give you the first thing or 0, actually. That will give you the first thing. But you can do negative one, and that will give you the last thing. And the cool thing about that is you can pass it a decimal, and it will do the rid Flooring for you. So if you pass it math dot random times, in my case, questions dot length, and it gives you 32 point Seven, it'll just floor it for you and give you the 32nd question. Or in our case, it's 33rd because it's 0 based. Alright. Let's do rock, paper, scissors, see who goes 1st. Ready? Yes.

Rock, paper, scissors,

throw. Shoot.

Rid Come on. Scissors. We both did scissors. Rock Paper.

Paper. Scissors.

Scissors.

Shoot. Oh, you win. Alright. You get to ask first. It's It's so funny with the latency. Each one gets progressively slower. Alright.

The first question that I'm going to ask is, which property allows you to control the shape or appearance of the marker of a list.

List style type. List style type. Wow. Boom. I never use list style type. That's amazing. I would I I wouldn't know the list style, but list style type You always shorthanded, not a big bullet person? I can't tell you the last time I've ever changed it. It's always either it's on or it's off. I don't care. Who cares?

Awesome. I got a question for you.

What is a pseudo element, and what is a pseudo class?

Pseudo class. That's interesting. I know what a a pseudo element is when you use the double colons and then after, And then you can define, essentially, an element in your HTML using content. Yep. And the content can be anything from an entity to text to whatever, And you can style that baby up and whatever.

Now what is a pseudo class? Is a pseudo class the same thing just with 1 colon instead of 2? No. Okay. I know there is a subtle difference there between the 2 colons and the 1 colon. Yeah. And the 2 colons used to have less browser support, but now it's 2 colon all the way. Rid I don't know. What is a pseudo class? A pseudo class is what? Like, an nth child of maybe? That is an example of 1. So, like, a pseudo element, you got it right. That's an actual element that is rid created when you use them, and a pseudo class is

used to define a specific state of an element, most likely being hovered, rid Checked. Okay. Key enabled.

Oh. Oh. But, of course, required,

nth of child, nth child. Just it is an element that you declared, but it is in a specific state. You know what? I I don't know if I would've called those a pseudo class, but that makes sense. Call them pseudo Selectors. Because it is. They're all Yeah. Pseudo selectors. Right? They're defined a certain way with the colon, and that is what, like, the rid Syntactical defining characteristic of it is, but it interesting. I've never heard the word pseudo class before. I I was thinking that might have been something interesting, but yeah. Do you want a chance To get some bonus points here, Scott. Yeah. There are

5 pseudo elements. Can you name all 5, or can you name more than 2.

Can I name more than before and after? Yeah.

Was one of them the scroll bar? Nope. Okay. Then no.

There is first letter 1st letter. Oh. First line and selection.

So first line is a pseudo element?

Yeah. If you wanna style the or add, I would call that, like, a pseudo class. Yeah. Pseudo selector. But it's And all of those things too, the first line and first letter. Interesting.

That's blown my mind, yeah, that you'd call that an all. Re Selection. Oh, selection. Yeah. Selection. Kinda makes sense there, I guess. Yeah. Well, see, if the scroll bar was one of them, I would've gotten selection Because that's the other thing that you go to the the custom snippet CSS snippets for. Yeah. Yeah. Alright. Alright. Well Stump me. It's time to get stumped. Ready. Who's ready to get stumped? Alright. Next question here for you is this is a doozy, Wes. What is the difference between a block rid In line and in line

fuck. Get the easy ones. That's easy. A block element is something that takes the whole rid Flow of the document, the whole width, generally.

An inline element is something that is literally in line. So you create it, and it does not break onto a A new line. Maybe the amount of width that it takes is deciphered by the content that is inside of it, and you cannot apply a width or height to it. And then an inline block element is like inline, but it also allows you to override those values by giving them a within a height value. Mhmm. Mhmm. Mhmm.

Mhmm. Mhmm.

Alright. Here we go. I'm gonna give you a good one. I got that one right. Correct? Do you need to ask? Yes. I you got it. Do I know the basics? Rid Video number 2 of how to write CSS. Yeah. Or HTML

CSS.

What is a combinator selector? Rid Man, for me, the things I get hung up the most in in these questions is not the concepts. It's like, what are these things actually called? Yeah.

So I would assume this is something like a plus, like, the siblings. I don't know if the sibling selector would be included in that, but the neighbor selector, the plus, Or the this little squiggle, the tilde selector, which allows you to do anything. So the plus is anything next to this thing, And the tilde is the same thing, but, like

is that it? Combiners, the things like the plus and the tilde and, yeah? Yep. You got it. A combinator is a character and a selector that connects 2 selectors together. So Oh. Till the Is the parent selector 1?

Not the parents, like, the child? The yeah. Yeah. Parent child is a selector even though there's no character. Right? So, yeah, you got it. You nailed it. Okay. Cool. Next question is oh, yeah. Also, Wes, this was a 2 parter. The first part's easy. The second part's not as easy. Alright. Let me have it. What is specificity and how to calculate specificity?

Specific specificity. Yeah. Yeah. Yeah. Yeah. I can't rid Say spec specificity.

I think it's a bid at this point.

No. It's literally not. Speh specificity rid is the calculation of when 2 rules are overlapping, color black, And then another selector says color green. How do you choose which one wins out over the other? And the answer to that is there's a complicated calculation called specificity And things like the selector specificness goes into it, where they are, are they in line, do they come later in the document versus the other one, is it ready. Style tag versus a linked. All those things play into how they are calculated.

How that actually happens, like, if you were to give me 2 selectors And tell me to calculate it myself? I have no clue how how to actually do that. I just know sort of the 90% of the way there, where they are rid And that's good enough for me. Yeah. So you don't know the calculation?

I don't know the calculation. Tell me what it is that I'm stumped. Yeah. You know, there is, like, some point value thing to it that exists. Doesn't say that. So this basically says, you know, the following types increase by specificity, type selectors, Class selectors, ID selectors, contextual selectors are more specific than single element selectors.

The embedded style sheet is closer to the element of the style. The last rule yeah. I mean, this is all basic stuff. I know all those. Right. Yeah. Rid. So it doesn't actually tell you how to calculate it in here. Okay. So I think you get enough points because You've identified how to determine specificity.

Yeah. But what's the number for the whole number thing? Okay. So here is the point Value. There's specificity values.

So let's see. Here's an explanation about how to calculate specificity.

Rid So the result of specificity calculation takes a 4 comma based values, a, b, c, d, where the value in column a is the most important, and d is the least important. Okay? So inline style has a 1 in column a. So inline, most Specific. Right? Then an ID adds a 1 in column b, and the class is a 1 in column c, and then an element reference is a 1 in column d. Read. You can read the values as if it was a number. For instance, 1 comma 0 comma 0 comma 0, as in just the element, reads as 1,000.

So 1,000 is a higher number than 100, which would be an ID selector. So 1,000 greater than 100, More specific. Right? So that's how it goes is is it just ends up being like a ginal number.

Rid But, yeah, it's kinda interesting there. I've never ever been like, let me pull up the numbers and populate this specificity.

That's not rid that people typically do. So if you're you're hearing these numbers and thinking, oh gosh. I don't know this. I don't know if you necessarily need to know the those specifics, but it's there. Yeah. My eyes just glaze over when I start to hear that.

Me too. That's why I did the the science man voice because it was Science man. Yeah.

Rid It was time to get into science man mode. Alright. The next one the next one we have here is a true or false Question. This is gonna be pretty simple, I think.

The translate function in CSS can move rid of an element on the z axis or zed axis for all y'all Canadians.

True or false? This is a trick question. Translate itself cannot move the z. You need translate three d or you need translate z. Ding ding ding ding ding.

Killed it. Rid. You're right. Translate can only do x and y axis. If you want to go on the z axis, which is between your nose and the monitor, rid You need to use, like Scott says, translate z or translate 3 d. Yeah. Alright. Nice. Yeah. It is nice. You know what else is nice? Sanity.

Rid. Sanity is the perfect place to hold all of your data for your back end and query it. It's all really, really neat, and Wes rid Knows all about Sanity. Wes, would you like to talk a little bit about Sanity? I do. Sanity, we've talked about them a 1000000 times. You know Sanity. They're structured content CMS. Rid You know, Sanity. But they are

more than that. They do images, so you can resize images on the fly. You can compress them on the fly. Rid. They have this really cool thing where if you have, like, a hero image, you can draw a circle around the thing that matters, like somebody's face rid. Or the product that's in a photo. And then when it crops that image, because you're generating 16 different versions of the image for The picture element, it will make sure that that thing is actually always in view so you're not getting a call from someone at 3 AM in the morning being like, well, on my rid. Android phone, it's being cropped off, and the CEO is not happy about that. So that's rid Really, really important. That's just one of the many things that they do. They do reviewing changes. Maybe I'll talk about that one on the the next ad read. So check it out for your next app or website, rid sanity.i0forward/ syntax. That will give you double the free usage tier. Thank you, Sanity, for sponsoring.

Sick. Okay. Let's get into it here. Rid What is the difference between resetting and normalizing in CSS? Oh, okay. So rid. A re CSS reset will bring

everything back to zeros. And what that means is that there is a set of defaults in the browser, rid. Things like bullet point indentation, h one through h six sizing, some default margin and padding, all those things are some, like, decent defaults.

And a reset will take all of those off and bring you back to absolutely 0, whereas a normalize will just make sure that those defaults are set. Rid. But from browser to browser, that they are consistent because there is a little bit of inconsistency from browser to browser in what their defaults look like. Perfect.

Ring.

Perfect. Alright. We need some hard ones. Feel free to I know. Fish around for a a tricky one.

You know, I'm not gonna give you this one. This one is, what is CSS?

CSS also has cascading file sheets. Oh. Yeah. And for those of you who don't, I don't think we mentioned this after the jump. This is a CSS only stunt. Did you say that? Yeah. I did. I did. I was having the feeling that you didn't say that. Oh, this is actually kind of a interesting one.

Rid How do you load a CSS resource conditionally? And I'm gonna ask you.

You can give me a JavaScript version, but give me a CSS only version as well. How do you load,

conditionally? A CSS file. Yeah. So rid This is not something that I've I'm not gonna even bother with the JavaScript one because that's you just add. Just do JavaScript. You just do JavaScript. You just add the element. Rid So I don't know if this works, and this is just me, you know, galaxy braining trying to come up with something here. But let's say, you don't know this, there is an import syntax in CSS.

What is that import syntax? But it's at import. It's at import. It's been used Forever. In fact, it's funny because Magento used to have all of their CSS way back in the day, all imported, and people would be like, mad about that.

Like, developers, are you mad about that? Like, I I think there was some sort of performance degradation to that in the past. I don't know what it is nowadays. But Either way, there is an import syntax in CSS. So I'm wondering, does the import syntax work with media queries? And, perhaps, you could have a media query that could Then import a specific style sheet. Does that satisfy the condition?

Boo.

You absolutely nailed it. Wow. It's something I've never done before. That was yeah. That That's

rid Good. I was surprised I saw this one. I was like, oh, that's interesting.

So the the example is at media prefers dark color scheme dark, Or you could literally do any media query, and then inside of that media query, at import the URL of the CSS file. I'm shocked that that was right. Interesting.

I'm impressed. I don't think I woulda got that. Okay. Thank you. Thank you, Wes. It also says you can do it with JavaScript with window dot match media, which is kinda interesting. So that's kind of like a media query but in JavaScript. Interesting. Cool? Cool. Wow. Good job. Yeah. Okay. Let's see. Yeah. Give me a hard one. Okay. Here's a good one. Is there a reason

why you would want to use translate Instead of absolute positioning, or is there a reason you'd wanna use absolute positioning instead of translate?

Yeah. So absolute positioning gives up its spot in the flow of the document. So as soon as you position absolute something, rid. The elements below it, which were usually pushed down or to the side because it took up room, rid Then just kinda scoot up behind it because I always say that when you absolutely position something, it becomes a ghost. Oh. Right? Because rid It just floats around like that, and it goes over top of everything.

And translate is it still respects the position whether That is absolute static, fixed, or sticky, but then you can skirt it around left or right, up or down without Actually affecting

the content around it, the other elements around it. Skirt. Yep. Skirt. Skirt. Park park. Yeah. Oh, totally. And, also, you'll probably wanna use translate too if you're animating.

I mean, you can use them in coordination with each other, but, yeah, if you're if you're changing the position in an animation. But yeah. Re It translate as more performant than

a absolute position.

Yep. Made for animation.

Made for that type of thing. Cool. Alright. Let's find a good one here. Oh, before we take the next one, let's take a minute to talk about [email protected].

It's the perfect place to rid See all of your errors and exceptions happen in your application in a giant formatted table where you can assign them to people. You could see all of the information about them. You can Attach them to GitHub issues. You can do a ton with this thing. One of my favorite things is the ability to mark something as complete and then see it pop up Back as a, as a, hey.

You said you fixed this thing, and, this thing you didn't fix this thing. It's funny. You can set up special alerts for that and everything. Rid The performance tracking tools, which are brand new in Sentry, are incredible.

We use them very, very, very closely. When we were re Launching our updated version of level up tutorials, we wanted to make sure that we could see exactly how the new site was impacting performance for all of our users. And let me tell you, rid The user misery score went down, so we absolutely rely on something like this. This is a tool that we check every single day. We get alerts set up for it. We use Sentry nonstop. So head on over to century.i0.

Use the coupon code tasty treat, all lowercase, and all one word. And I I do say, when I say I check it nonstop, that's not because I have nonstop bugs. It's because, you know, it's always good to have a handle on those things. Yeah. We're absolutely drowning in Century issues over here.

That's not the case. No. But thank you so much for Century for sponsoring.

Alright. Next question, Wes. What do you got for me? Let's see here. I said something about using the LoveHullUp tutorial set as a a playground And 1 ad read was or or something in this in this show, and somebody's like, I know you use the site as a playground, so I figured this bug might be I was like, no. Don't get that impression. We have tests.

It's not like a like the admin tools. Yeah. That's a playground, but the rest of the site is very, very solid. Read. Alright. Here's that interesting one. And I don't think that there's there's, like, a definitive absolute answer here, but I think that you can come up with a pretty good rule of thumb on one, when should you use CSS Grid, and when should you use CSS Flexbox?

When should you use Grid and Flexbox? Yeah. This is, like, the question. Right? And for most cases, I would say, nowadays, most cases kind of end up using Grid. Grid's Flexbox. I typically reach for Flexbox when I want to fit a bunch of things on one line, And I use Grid, typically, when I want to have some sort of structure to them. So when I need it to have a more secure structure, Sure. I go for Grid. When I want it to be a little bit more flowy, I go with Flexbox, which I mean, that that's such an abstract answer, But that's really the way I approach it. So, like, say, I have cards.

I wanna use grid. I wanna have a grid of cards. If I wanna have rid A navigation that has a bunch of block level elements. You know, you could always have them be inline block, whatever. Yeah. Or you could box box them And then shift them to the right or something like that. So that's typically what I'm doing. I know that you can do multiline Flexbox very easily. I know that there's a lot of overlap there, so that's rid. That's typically why I reach for 1 or the other. You said one thing here is that I typically use Flexbox when I want it on one line and then grid when it is rid. Both columns and rows, and I think that's a good way to put it is Flexbox is one dimensional.

You literally have an axis Either left to right or top to bottom or and and grid can be two dimensional.

And then there's a really interesting thing here that I saw is that you typically use Flexbox When it's content first, and that makes sense because Flexbox flexes to the content that is in the items, and you use grid when it is layout first. Rid. And that's, the both of those things aren't a 100% true, but generally, yes. Those those are true. And, Greg, you can have automatic rows that

rid Grow to the size of the content, but, generally, yes. Hey. Tell that to flex grow and flex shrink, Yes. Yes. That's gotta be one of the most Googled things of all time. Flexbox is squishing my image or growing. What is it doing? You know? Yeah. So true.

Just it's not what you expect for it to happen rid The devolved functionality. Yeah. Please don't do that. Yeah. Alright. Give me one. Let's see. Oh, this is a good one. Oh.

Alright, Wes. I got you here. I gotta get you. I'm gonna get you on this one. Gonna be stumped. The at Rule in CSS. I need you to tell me all 8 at rules in CSS.

Oh. And the at rule is the the a little Wiggly a. Yeah. You have at media. At media.

At import. At import. Some of these are gonna be real hard. You'll have a possibility to get a few more. Rid At supports?

Yeah. Nice one. Like, what's the content queries one? There's 2 low hanging fruit. Two low hanging fruit. Keyframes?

Keyframes? That's one of the low hanging. Yeah. Like CSS.

Trying to think, like, there's animation at keyframe.

We're halfway there.

So you animate So we had keyframes, supports, media, and import. Trying to think at like, is there any more animation stuff, Or when do you declare

oh, font fonts. Font face. That yep. Okay. Okay. You got the the low hanging fruit here. So we got rid Three more. Media. I think I'm tapped out. I don't think I can think of the other ones. What are the other ones? Tell me. So Stumped. Yeah. See, I don't know if you would've gotten any of these 3 because I don't know if I would've either. I think I probably could've gotten the other ones except for supports. I don't I never think of supports for some reason.

So charset rid At charset.

Yep. Oh, yeah. That's one that you see, but you never write, really. You probably don't write yourself. Yeah. Especially, like, North American Totally.

A charset, for those of you who don't know, defines the character set to be used by the style sheet. It's usually set to u t f hyphen 8 rid as a string. Next one that Wes did not get was at namespace.

Never heard of that. This tells the CSS engine rid that all its contents must be considered a prefixed with an XML namespace. Yes. I do. I've never heard of namespace. Rid The last one here I've never heard of either, which is atpage.

Aw. You use atpage? Twice. Once when I automate this rid. Printing of my sticker envelopes. Mhmm. And second, when we go back to the episode where I sold T shirts Oh, okay. With TypeScript, We

printed the label the shipping labels. We used that page for that to define it and interest. So you you were dancing around it. Oh, you're right. Yeah. You were dancing around it with the printing stuff. When you started saying that, I was like, so close. So at page describes the aspect of layout rid If somebody got that wrong in an interview, I'd be like, yeah. I get it. Yeah. Totally. Wow. That was a good one. Okay. Yeah. Entertainment value, it was good. Be a good one to ask on stage, although now, not anymore. Which property

is used to define overline and strikethrough on text? Text decoration?

Nailed it. Oh, I nailed it. Okay. I was gonna say, is this a trick question? I intentionally left underline out of there out of the question. I like Strikethrough. I I actually use Strikethrough. Not regularly, but I use it enough where I it's not, like, shocking to me when it pops up. I got a follow-up question for that one.

If you have a link that is black, how would you make it have an orange underline?

Oh, You know, because this is newer, isn't it? Yeah. Yeah. For me, I would do border bottom.

I would or I would do an absolute if I wanted rid An absolute Like a after pseudo element? Yeah. That's 2 ways.

So is there a property that I'm just gonna invent right now if it doesn't exist, which is rid Text decoration style.

Text Or text decoration appearance? No.

Text decoration. There is decoration style. There is woah. Okay. But that has been around for a while. There is dash, dotted, double,

Solid wavy. Yeah. So is this just text decoration color? It is. You got it.

So that exists. Lot of people don't know about that one. Yeah. I don't know about it. Yeah. Yeah. You can change the color of the underline, overline, wavy underline, you name it.

Interesting. Yeah. I thought that'd be a lot nice little bonus question for you since you just nailed the first one. Bonus. Yeah. And, I mean, I got it with some help, but, you know, give me a bunch of easy ones.

Yeah. Rid I think Square.

It's funny because I'm much better at CSS. So all of these questions seem easy to me for the most part, unless they're, like, obscure or, like, intentionally, rid You know, difficult here.

Oh, man. I got a a really hard one for you. I don't even know if it would be interesting. I have one that's interesting. Maybe not hard, but rid Definitely interesting for the audience here.

What is DOM reflow?

What is DOM reflow? DOM reflow is when the content rid Of the document changes, generally, when you're adding or removing items with JavaScript, that causes the DOM to rerender itself.

Mhmm. And then the CSS has to be reapplied to the new document. Is that right? Correct. Yes. Yes. What are some more things that could cause

a reflow?

Adding or removing,

hovering. Adding or removing,

Growing because especially if the the browser doesn't render the stuff lower on.

Mhmm. Taking a measurement such as offset height Or get computed style causes a reflow as well. Really? Says just taking a measurement. Yeah. Taking a measurement. Why? I don't know. That's an interesting one. It is an interesting one. Yeah. It says insert, remove, or update element in the DOM, modify content on the page like text in an input box, move a DOM element, Animate a DOM element, take a measurement, change a CSS style, change a class name, add or remove a style sheet, resize the window, or re Roll. So here are some tips to minimize browser reflow, in case you're wondering. Reduce unnecessary DOM depth. Changes at one level of the DOM tree can cause changes at every level of the tree. So, basically, they're saying, don't add unnecessary tree Structure to your HTML if it doesn't need it. Right? Which is, something that Drupal developers need to learn. Am I right, guys? Rid Okay.

I'm just joking here. Oh, that used to be an old joke because Drupal just added a bunch of divs everywhere. It's like, you wanna you wanna do anything? Just add 18 divs to do this. Rid Okay. Minimize CSS rules and remove unwanted CSS rules. Okay. That seems obvious. If you make complex rendering changes such as animations, rid Do so out of the flow with the document.

Interesting. It says to use position absolute if you're making animation changes.

So position absolute and then transform, that's interesting what that's about. Okay. Next 1 is avoid unnecessary complex CSS selectors, re Descendant selectors in particular, which require more CPU

to do selector matching. Interesting. Oh, this is this is a good question. Let's see here. And there's a couple answers here to see how many you can get. How do you serve your pages for feature constrained browsers? Rid What techniques do you use? So you're using a new thing in CSS Mhmm. And that's not available Mhmm. In Older browsers, how do you handle that? You use supports, supports feature, add supports. What if the browser doesn't support supports? You use something called

HTML Fiberizer.

My god. Modernizing.

Yes.

Fiberizer. Rid I I could've I totally blanked out the name of a picture in the website. You use something like Modernizr that what it does is it adds classes based on what Features are supported versus what features aren't supported, and it does so with JavaScript.

That nasty JavaScript

that adds nasty JavaScript to your site. Yeah. Rid There's 2 different ways you can approach Mhmm. These features.

Do you know what they're called? Oh, what they're called. Rid One of them would be progressive enhancement. Is that considered one of them? Yep. So the 2 two ways to do this progressive enhancement Yep. Which is where you start with the thing that works for everybody, and then you add the features that work for Graceful degradation.

Graceful degradation. Yeah. Okay. I knew the word degradation was involved, and I wasn't quite sure if it was graceful or not. So It's good. Yeah. I'm impressed that you got those given the how obtuse that question was. Good. Hey, thank you. I do know some stuff about CSS sometimes. Yeah.

What What do we got left? Yeah. We probably got 1 1 more each. Okay. 1 more each.

Okay. Let's find a Good one then. Oh, this is fun. This is fun. This is fun. Alright. What is the property that is used for controlling image hyphen scroll.

So if you wanna determine if an image scrolls or not. If an image scrolls? If you can't yep. If you can't that. I'll give you a slight hint in the wording of this question that might give you the answer, but Do images scroll? What? What the property that is used for controlling image hyphen scroll image hyphen scroll as a thing. I've never had a image scroll. Give me a hint. So I think you're thinking of being in regards to an image element, which it's not. To give you a little bit more of a hint, it's about background images.

Rid Oh. The word background was gonna blow it wide open so or at least Background scroll can be fixed

Or scroll or repeat.

Is that right? Not repeat, but what's the property that you use to set? Background attachment. Background attachment. Bingo. I would not have gotten it. That's great. Yeah. That's good good answer. Good. Good. Good. Oh, man. Background attachment. You can set background attachment to scroll, fixed, local, initial, and inherit.

What's local? A background image with the scroll with the elements' contents.

The background image will scroll with the elements' contents.

So it's like if you're doing, like, overflow scroll zone maybe or something. Interesting.

Background fixed used to be a thing that everybody did in, like, 1990.

Would set a background. You'd make a tile. You set it to be background fixed, and the content would scroll on top of it. Impossible to read. Yeah. Quintessential

Nineties web development. Loved it. I'm just reading up on local. That's interesting. You think like, oh, no. I know all this stuff, and then there's always these, like, weird little

Edge cases to things. Yeah. Background attachment local. Interviewers, if you want to stump a interviewee, You put a a question with background attachment local on it, and you say, what does this do? What what is this saying? Oh, man. I'm just going through these. Some of them are like, Interesting because we will both be like, I don't know. Wes, we're on the same page here. We both didn't pick that question for each other for the exact same reason.

Okay. This is a good one. Name the 3 different types of CSS gradients.

Canonical, is that is that how you say that word? Rid One of the cone conical cone one of them's one of them's a cone. Ice cream cone? Yep. Linear and then mesh. What's mesh? Well, a mesh gradient is when you have, like it's, like, very apple y where they have gradients kinda coming in, kinda looks like a mush. It's like you did, like, a bunch of colors and then blurred it. Rid. You can do that with layering gradients on top of each other. I've done that in the past. It looks pretty nifty. We've kind of done 2, but Cool.

Yeah. You're right. Linear, radial, and conic. Conic.

Are the 3 different types of gradients, and conic being very new to CSS.

Yeah. And I always wonder when to use that, but it it's definitely more useful when you're trying to, like, replicate, you know, real items, skeuomorphic kind of style more than I would be interested in seeing, like, some more

artistic use cases of it. Yeah. Well, that was a good episode of rid Stumped. I think we pretty much drained all the good questions from that, which is possibly good. It means that maybe me and Scott could get jobs as CSS Devs, at some point in our career? Hoping to this year, man. Oh, man. There's 1 more here. List the 23 different Display properties. Yes.

No. Thank you.

If it says list 22 of anything, I'm gonna forget when I'm gonna get through 5 of them and be like, what did I already do? There's inline block, flexing grid, inline block None. Contents, none. And then these are the weird ones.

Run-in

What?

Displays an element as either block or inline depending on context.

Rid Never done that. There's a whole bunch of table stuff. Like, there's, like, 12 of them for table and then initial and inherit. Just weird. Cool. Rid. Weird. Weird. Weird. So we went deep into the bowels of CSS.

That was awesome. Let's move into some

sick pics. Before we do, we should talk about one of our sponsors, which is Cloudinary.

Wes, would you like to talk about Cloudinary?

I would. Cloudinary is read. The website that is going to unleash the full potential of your media in your application, what does that mean? Well, they have a whole rid. We have hosted tools for managing your images and your videos as well. They can do things like rid. Crop, trim, resize, format auto. You can change the quality. You can do it really high quality. You can generate rid. All of the different sizes you need for a picture output, you can convert videos into m p fours. You can add text over top of something. You can detect people. Rid Literally, anything you can think of with images, huge, huge suite of tools in Cloudinary.

So check it out at cloudinary.com Or click the link in the show notes.

Thank you, Cloudinary, for sponsoring.

Sick. Cool. Alright. Let's get into the part of the show where we rid Sick pick things, things that we pick that we find to be pretty darn sick, and I'm gonna sick pick an app today. When I say app, I mean, like, for the computer, rid Now for the phone, and this one is a web app, my favorite type of app. It's height app, height dot app, and height app is You could imagine, if you wanna picture in your mind's eye an application, it was like, what if we took the lessons of Notion And made a really good to do app. That is Height App. Height App is really great to do app. In fact, we've been working with this in our our And then set up, like, an automatic filter list, and it was so cool because it basically allowed us to keep our tasks organized in different lists and then rid Tag them essentially with the sprint tag that we're doing, and then it automatically created, like, Kanban boards that were filtered by every member rid The teams are everybody has their own Kanban board on 1 page, and you can see them all, and it's gorgeous. This app is beautiful. You can just go to their website if you wanna get a vibe for this This thing, I mean, you this is the type of app that you go to the the home page and you say, oh, yeah. I like this. Really nice icons, really nice color. Rid The app itself feels and functions very nicely, and we've been using it in our team with 3 or 4 people here and, just sprint planning and stuff. It also connects via GitHub. So you can connect to GitHub. It has some integrations, Zendesk, GitLab,