Stump'd JS + CSS Interview Questions

Yep.

It's

And on this.

of the total The value of that property is going to be repeat, the container. Yes. It makes it one equal fraction of the container. Of the container.

and you're going to repeat

each of them? is fractional, but it is a fraction of the

Like literally an image is a big one or a word that does not have a maybe half an hour coming up with some brutal ones,

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

FR No. Well, like JavaScript 0 1fr. And what that will do is it will enforce

K.

900 pixels wide, So 3 columns of 300.

available space.

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.

what what does FR do? 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,

Fraction

Mhmm.

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

that is so you have 3 columns. Let's say they're

3.

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

So Yeah. If you have something

What what does that mean?

a grid template columns.

line break on it. And so I have a visual tweet

Basically,

Or s e c are not real? BDI,

Oh, okay.

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

I know there is a BDO element,

site

directional.

The bathroom's here. A clean, Is that backwards? Did I didn't die? No. That Oh. So that is

isolate element, you're basically saying the text,

some of them are deprecated.

isolate element

sparkly clean bathroom. Yeah.

bidirectional 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

Yep.

SEC. Definitely SEC. SEC is fake. Correct.

Contains in isolation from its surrounding text and can be by by, Basically,

where,

Let's say if you're on a road trip

sec.

a possible word break tag, and it tells the browser, hey, if you got a break, if you got to break this word,

So b d I I got some really, Interesting. I wanna say I got some curveballs for you. Alright. Why don't you start it off? Alright. Here, is all about rendering performance.

Do it here. Yeah. So if we had, How would I make a grid of 3 equal columns with 20 pixels 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 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.

BDO is bidirectional text override element.

HTML tags. However, What everybody does, however, 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

something To do a custom container, it was contained. And the idea she said that this was needed and Sentry is going to give you some insights into say, a German last name or an image,

sec.

I don't think there's a BDI make each It was contained It was using to develop.

One of them is an imposter.

element.

K. Sight, s c I t e,

and,

w b r are fake? Which of these MFers

Number 1, b d I.

that every single column is of equal width. Wow.

We're o for 2, and that's fine because, It's, 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 best way to do it is to

Okay.

I'm about to make it o for 3. Okay, Wes. How about this 1? Okay. Which Of the following, which of these elements it's a very interesting property that Which is not contained, believe it or not. Contain

grid column a min max of between Only 1 of them or or I have to guess 1 of them is not real.

piece of content that Alright.

regularly

There's a couple of different options, but one of them is you can contain it to

This is I see. This is why this one is going to be tricky because Which is 1 fraction, comma How they're rendered size wise,

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.

or correctly or just at all. So contain

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

specifically contained sounds like so many other things that you might you're thinking of container

and container type container, And you can set this To contain layout, contain 1 f r,

like, just in general container,

is was that 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

with CSS. But that was scrapped

and is So it's Then it will say, okay. Well, I had 900 minus 400. Right? And now I've got, If you have something in one of those columns that is wider than 300, I like that. The following I'm going to say it's BDI.

it's interesting. Yeah. Because the contained property is 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 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.

we now have Container.

So The XMP That is what contain is for. I don't think that's right now that I'm saying it. The other thing is just the insights you need to fix your fix your bugs and get on 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.

size, style,

I'm reading an old Miriam blog post. Obviously, yes. Container for container queries,

it tells the browser Stuff. Oh, man. I could have made this a lot harder too. I could have asked you for all the different

to be honest, when I was reviewing this, I was like, I gotta spend The elements' contents are not displayed outside of its bounds. That sounds a lot like overflow hidden. Right? However,

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,

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

container type.

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 CSS how things are laid out, paint. And these things are really interesting because if you do, let's say, Contain paint.

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

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

lot more time with this because I just straight up don't use contain

we have size, layout, paint, and strict in CSS Contained. And the idea was that we would create custom contains the The SAMP tag what happened leading up to your bug, where it happened, who's using it, What type of browsers, 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 Elements.

and

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, Three columns. You're you how how wide are the columns? Equal. Equal. Okay. So you do

which Of

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

but it was HTML tags are all valid What you use for container queries. Currently? Oh, maybe not. I'm reading an old

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

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 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 the actual Contain is part of CSS that will auto Wow.

So there's a couple there's a couple in there that, you put and that's not a good example.

if you're stumped by your bugs. Certainly, I've been stumped many times, you split it up proportionately.

where we are just gonna be surprised. Yours are brutal?

ask each other interview type questions, Okay. So if you have, 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.

Boss, and Scott, El Toro Loco,

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

Jov Welcome to Syntax. We got us stumped for you today. This is where Scott and I

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda, Tolinski.

CSS contain is a way to tell

Okay. Good. Because,

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

Watch it on the width layout or the height or both.

contain and why it exists? WBR

set the width of an element.

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

the stuff. It will first say, alright. Well, that that image needs 400.

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 ideally

tell you what I think it is.

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

Mhmm. The TT tag So it was related.

tag

Mhmm. The VAR tag