STUMP'D Interview Questions - CSS Edition

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 Instead of absolute positioning,

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.

Yes.

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,

or repeat.

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,

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

Mhmm. Taking a measurement translate Never heard of that. This tells the CSS engine rid that all its contents 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 with the elements' contents.

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].

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

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.

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.

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.

lower on.

Yeah. This is, like, the question. Right? And for most cases, I would say, nowadays,

huge, huge suite of tools in Cloudinary.

And translate resize, when do you declare 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

If you can't yep. If you can't of the marker of a list.

with JavaScript,

GitLab, Animate a DOM element, take a measurement, Fiberizer. Rid I I could've I totally blanked out the name of a picture in the website. You use something like Modernizr

Run-in 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.

you name it.

Either left to right or top to bottom or and and grid can be two dimensional.

is that is that how you say that word? Rid One of the cone conical

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.

static, fixed, or sticky, conditionally? Text decoration. There is decoration style. There is woah. Okay. But that has been around for a while. There is dash, dotted, double,

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

No.

Or scroll videos as well. They can do things like rid. Crop, trim, What What do we got left? Yeah. We probably got 1 1 more each. Okay. 1 more each.

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 So it's like if you're doing, like, overflow scroll zone maybe or something. Interesting.

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,

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?

Edge cases to things. Yeah. Background attachment local. Interviewers, if you want to stump a interviewee,

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

decoration

Yeah. And I always wonder when to use that, but it it's definitely more useful when you're trying to, like, replicate, as a, hey.

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,

and inherit.

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

So if you wanna determine if an image scrolls or not. If an image scrolls?

left or right, up or down without Actually affecting

rerender itself.

No. Thank you.

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.

initial,

you know, real items, skeuomorphic kind of style more than I would be interested in seeing, like, some more 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.

The background image will scroll 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.

Oh, 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 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?

tree

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

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.

remove, or update element in the DOM, modify content on the page like text in an input box, move a DOM element, is this is a doozy, Wes. What is the difference between a block rid In line and in line That nasty JavaScript or appearance

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

Thank you, Cloudinary, for sponsoring.

What the property that is used for controlling image hyphen scroll rid. At park.

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.

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.

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 at rules

Yep. Made for animation.

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

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.

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

A charset, for those of you who don't know, defines the character 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 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

hovering. Adding or removing, rid Grow to the size of the content, but, generally, yes. Hey. Tell that to flex grow and flex shrink,

a absolute

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

at keyframe.

Growing because especially if the the browser doesn't render the stuff

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.

how would you make it have version, but give me a CSS only version as well. How do you load,

Text Or text decoration you don't know this, there is an import syntax in CSS.

That was awesome. Let's move into some scissors,

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, What is a pseudo element, and what is a pseudo class?

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,

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.

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

your images

What? Fiberizer.

style.

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

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.

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.

is it still respects the position whether That is absolute 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.

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 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.

most cases kind of end up using Grid. Grid's rid At charset.

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

browsers? Rid What techniques do you use?

Interesting. It says to use position absolute 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

Yeah. Rid I think Square.

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

namespace. Yes. I do. I've never heard of namespace. Rid The last one here I've never heard of either, which is atpage.

Trying to think, like, there's animation Yeah. So absolute positioning

wavy underline,

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

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

What is

If you have a link that is black, Awesome. I got a question for you.

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

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

Alright, Wes. I got you here. I gotta get you. I'm gonna get you on this one. Gonna be stumped. The at be progressive enhancement. Is that considered one of them? Yep. So the 2 two ways must be considered a prefixed with an XML 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.

Canonical, DOM reflow?

My god. Modernizing.

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, in CSS.

You literally have an axis 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, Oh. Oh. But, of course, required, position.

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 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.

When should you use Grid and Flexbox? That's not the case. No. But thank you so much for Century for sponsoring.

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? type selectors, Class selectors, 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.

So you animate So we had keyframes, supports, media, and import. Trying to think at like, is there any more animation stuff, Or Devs, at some point in our career? Hoping to this year, man. Oh, man. There's 1 more here. List the 23 different but then you can skirt it around

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.

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 Are the 3 different types of gradients, and conic being very new to CSS.

We're halfway there.

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

Adding or removing, And I'm gonna ask you.

Or click the link in the show notes.

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 and your

Rule in CSS. I need you to tell me Mhmm. Mhmm.

is 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, Question. This is gonna be pretty simple, I think.

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 which were usually pushed down or to the side because it took up room,

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

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.

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.

all 8 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, fixed, local,

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,

Alright. Let's get into

all you have to do is just drop a little story about a raccoon or a moose or a bear, pseudo elements. Can you name all 5, or can you name more than 2.

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.

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.

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? 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?

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 increase by specificity, 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 degradation.

More specific. Right? So that's how it goes is is it just ends up being like a ginal number.

True or false? This is a trick question. Translate itself let's say,

rid of an element on the z axis or zed axis for all y'all Canadians.

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

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 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

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

ID selectors,

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

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.

So 1,000 is a higher So charset 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 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,

The translate function in CSS 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.

move the z. You need translate three d or you need translate z. Ding ding ding ding ding.

Yeah. But what's the number for the whole number thing? Okay. So here is

You've identified how to determine specificity.

cannot Value. There's specificity values.

number than 100, which would be an ID selector. So 1,000 greater than 100, if you're making animation changes.

That's not

selectors are more specific than single element selectors.

specificness 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

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 rid Then just kinda scoot up behind it because

I think it's a bid at this point.

are

No. It's literally not. Speh specificity

And things like the selector

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 from browser to browser in what their defaults look like. Perfect.

rid Say spec specificity.

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.

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

gives up its spot in the flow of the document. So as soon as you position absolute something, 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 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.

why you would want to use

or is there a reason you'd wanna use absolute positioning instead of translate? appearance?

rid. The elements below it, that causes the DOM to

Boo.

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? Wes, would you like to talk about Cloudinary? 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 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 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.

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.

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 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, 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

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?

rid Flow of the document, the whole width, generally.

An inline element is something that is literally 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/ rid is the calculation

CSS.

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 rid

And all of those things too, the first line and first letter. Interesting.

I would call that, like, a pseudo class. Yeah. Pseudo selector. But it's

Can I name more than before and after? Yeah.

5 I would. Cloudinary

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

Yeah. If you wanna style the

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 What is the difference between resetting and normalizing in CSS? Oh, okay. So rid. A re CSS reset will bring 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.

So first line is a pseudo element?

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

or add,

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

and selection.

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 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

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

everything back to zeros. And what that means is that there is a set of defaults in the browser,

Rid How do you load a CSS can move So you're using a new thing in CSS Mhmm. And that's not available Mhmm. In properties. Yes.

You know, I'm not gonna give you this one. This one is, what is CSS? Specific rid Good. I was surprised I saw this one. I was like, oh, that's interesting.

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 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 read. The how they are calculated.

rid. Things like bullet point indentation,

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

You can give me a JavaScript an orange underline?

h one through h six sizing, specificity. Yeah. Yeah. Yeah. Yeah. I can't 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.

conditionally? specificity? 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.

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.

resource fuck. Get the easy ones. That's easy. A block element is something that takes the whole

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.

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.

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, 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.

you name it. Wow. We'll talk about all them partway through the episode. I'm really excited to talk to Scott today Ring.

Sentry, Display

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.

which is a structured content CMS, is used to define overline and strikethrough on text? Text decoration? some default margin and padding, all those things are some, like, decent defaults.

can answer them.

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.

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 an error exception in performance tracking and Cloudinary, who does your image hosting, transformation, Optimization,

And we see if the other person What is DOM reflow? DOM reflow is when the content rid Of the document changes, generally, when you're adding or removing items

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.

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,

And then you can define, essentially, an element in your HTML

Pseudo class. That's interesting. I know what a a pseudo element is when you use the double colons and then after, Do you know what they're called? Oh, what they're called. Rid One of them would

Now

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.

Scissors.

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,

Rock, paper, overlapping,

at method instead of bell, and he won't tell me until he starts the show.

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 syntax. That will give you double the free usage tier. Thank you, Sanity, for sponsoring.

throw. Shoot.

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

Paper. Scissors.

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

The first question that I'm going to ask is, which property allows you to control the shape I wanna use grid. I wanna have a grid of cards. If I wanna have

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

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, So check it out at cloudinary.com

Sick. Okay. Let's get into it here. Rid

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, of when 2 rules

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.

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 So the the example is at media We