Stump'd JS + CSS Interview Questions

Jov Welcome to Syntax. We got us stumped for you today. This is where Scott and I ask each other interview type questions, And we try to stump each other, and you learn a thing or two about web development along the way. So in the past, we've gone through existing interview questions. We did a couple where we had the AI try to stump us. And then this episode here, Scott and I spent maybe half an hour coming up with some brutal ones, where we are just gonna be surprised. Yours are brutal? No. Well, So there's a couple there's a couple in there that, they're going to be learning opportunities. Let's just say that. Stuff. But we have I love it. We chose different categories this time. So we have CSS layouts, JavaScript base, JavaScript DOM, Server JavaScript TypeScript, HTML Elements.

Anything goes in CSS accessibility, performance, and deployment. So these are different categories.

We each come up with a single question For each category, we are going to try and stump each other. Yeah. You think you think you're stumped by some of your bugs? Let's talk about Sentry. You're going to want to use Sentry in your applications if you're stumped by your bugs. Certainly, I've been stumped many times, and Sentry is going to give you some insights into what happened leading up to your bug, where it happened, who's using it, What type of browsers, just the insights you need to fix your fix your bugs and get on and have happy customers. Check it out, Sentry. Io. Stuff. Coupon code tasty treat for 2 months free. Alright, Scott. You ready? You ready to get absolutely destroyed? Yeah. Are you ready to get absolutely destroyed? I think I'm gonna get the job. I think at the end, we'll have to tell each other if we would hire each other.

Okay. Good. Because, I got some really, Interesting. I wanna say I got some curveballs for you. Alright. Why don't you start it off? Alright. Here, try to decide how much of a bang I wanna start this off with. Let's start off with a bang here. Alright. Can you explain CSS contain and why it exists? Stuff. Oh, man. I could have made this a lot harder too. I could have asked you for all the different values for CSS contain and what they do, but I'm just and say, what is contained and why does it exist? CSS contain was added

as something that was needed for container queries. Right? Is that what I'm no? Nope. Okay, let me tell you what I think it is.

CSS contain is a way to tell the a browser. No, there's 2 things I think it might be. I'm going to say both of them and you can tell me. CSS contain is a way to tell the browser to watch Watch it on the width layout or the height or both.

That is what contain is for. I don't think that's right now that I'm saying it. The other thing is Contain is part of CSS that will auto set the width of an element.

There's a couple of different options, but one of them is you can contain it to the min content or max content, And then it will still be a block element but size itself according to the content inside of it.

So no. You're you're running that list. Right? No.

This is I see. This is why this one is going to be tricky because specifically contained sounds like so many other things that you might you're thinking of container and container type container, like, just in general container, Which is not contained, believe it or not. Contain is, it actually a very interesting property in CSS and one I think we should be Spending some serious time on because I don't know if a lot of people use contain regularly or correctly or just at all. So contain is all about rendering performance.

Basically, it tells the browser which Of the, which types of things that it should be even worrying about or rendering.

And you can set this To contain layout, contain size, style, paint. And these things are really interesting because if you do, let's say, Contain paint.

The elements' contents are not displayed outside of its bounds. That sounds a lot like overflow hidden. Right? However, It's, this is based purely on performance. So it's not there to visually hide things. It's there to say, hey. Just don't even render anything outside of this. Worry about checking for anything outside of Yes. So this thing is all about performance, and it can affect how things are laid out, How they're rendered size wise, it's a very interesting property that to be honest, when I was reviewing this, I was like, I gotta spend lot more time with this because I just straight up don't use contain ever, and it might be handy in some situations where performance is critical. There's a lot of little nuance to this. I feel like we did a show on this after we had Miriam on,

and she said that this was needed So that container crews could exist. But yes, I see what you mean. It's like like there's some things in it's Similar same with, like, will change in CSS is that sometimes the the browser can figure out what it should be doing for best perf, But sometimes you can just explicitly tell it, hey, don't worry about X, Y, or Z, and you can get better perf out of it. Oh, man, I can't believe I've got that wrong. The other part I was thinking was with Mac's content.

So it's

that is not it. Man, you just dumped me. Okay. Yeah. I well, the thing is is is and I don't know how tightly related it is to container queries because if you look at the docs for it, and you do a command find for queries or container queries on it, doesn't mention them at all. So,

it's interesting. Yeah. Because the contained property is What you use for container queries. Currently? Oh, maybe not. I'm reading an old

container type.

Container type is now what's used, where you have size, inline size, and normal. Oh, it's container.

I'm reading an old Miriam blog post. Obviously, yes. Container for container queries, but it was It was contained It was using to develop.

To do a custom container, it was contained. And the idea is was that we have size, layout, paint, and strict in CSS Contained. And the idea was that we would create custom contains with CSS. But that was scrapped and we now have Container.

So it was related.

That's why I thought so, but I have What do we get for being early on these things? Yeah.

How would I make a grid of 3 equal columns with 20 pixels between each of them?

With 20 pixels between each of them. So you have a garbage

of content inside of each of those. So I've got 3 columns. 20.

Yep.

K.

Three columns. You're you how how wide are the columns? Equal. Equal. Okay. So you do a grid template columns.

The value of that property is going to be repeat, and you're going to repeat 1 f r, Which is 1 fraction, comma Mhmm.

3.

Is that backwards? Did I didn't die? No. That Oh. So that is

What everybody does, however, what what does FR do? What what does that mean?

Fraction of the total the container. Yes. It makes it one equal fraction of the container. Of the container.

1 fractions, then they're all equal size, 3 equal size. No. They're not.

FR is fractional, but it is a fraction of the available space.

So Yeah. If you have something that is so you have 3 columns. Let's say they're 900 pixels wide, So 3 columns of 300.

If you have something in one of those columns that is wider than 300, say, a German last name or an image, stuff. It will first say, alright. Well, that that image needs 400.

Then it will say, okay. Well, I had 900 minus 400. Right? And now I've got, the rest there. Now I'm going to divide up the available space to you. So 1 FR, 1 FR, 1 FR is not equal columns.

It's ideally you split it up proportionately.

You know, that's why 2 FR to 1 FR would be stuff. 2FRs double the available free space once everything has been divided on each other. So are you saying that it's not correct Because if something is bigger, it will make one of the columns bigger. Is that what you're saying? Exactly.

Okay. So if you have, Like literally an image is a big one or a word that does not have a line break on it. And so I have a visual tweet on this.

And the actual the best way to do it is to make each grid column a min max of 0 1fr. And what that will do is it will enforce that every single column is of equal width. Wow.

Look at that new one. Not a funky one. That's that's the, like, thing that gets everybody. Like, oh, yeah. Equal columns, and it works great until you have some weird piece of content that Alright.

We're o for 2, and that's fine because, I'm about to make it o for 3. Okay, Wes. How about this 1? Okay. Which Of the following, which of these elements are fake? Which of these MFers are not real? Okay.

Number 1, b d I.

K. Sight, s c I t e, w b r Yep.

Or s e c sec.

So b d I site WBR sec.

Only 1 of them or or I have to guess 1 of them is not real.

One of them is an imposter.

I'm going to say it's BDI.

I know there is a BDO element, I don't think there's a BDI element.

BDI, the fact that you knew BDI, BDI is basically the same thing as BDO. It's very close. BDI is bidirectional isolate element where, BDO is bidirectional text override element.

Basically, bidirectional isolate element, you're basically saying the text, Contains in isolation from its surrounding text and can be by by, directional.

Wow.

Yeah. Okay. I so I have a Well, well, hold on. Let's talk about which ones are actually fake. So site, do you think site is real or fake? I thought you said I thought you said I had to there was only 1 of them. 1 of them is fake, and BDI is not fake.

Oh, okay.

SEC. Definitely SEC. SEC is fake. Correct.

Do do you know what WBR is? I thought that was an interesting element. Yeah. I gotta change my question because My question for you is, what's the difference between a b r and a WBR tag? No way. No way. Okay. A WBR tag is a possible word break tag, and it tells the browser, hey, if you got a break, if you got to break this word, Do it here. Yeah. So if we had, something like JavaScript you put and that's not a good example.

Let's say if you're on a road trip and, yeah, and there's, like, a nice bathroom, but you know there's a not nice bathroom down the road. You're like, hey. Might as well do it here.

The bathroom's here. A clean, sparkly clean bathroom. Yeah.

I like that. The following HTML tags are all valid HTML tags. However, some of them are deprecated.

A witch. Which of the lists are deprecated? How many of them will be deprecated? You have to you gotta tell me. That's you're you're part of the interview here. The mark tag I love it.

The XMP tag Mhmm. The TT tag Mhmm. The VAR tag the The SAMP tag