 Hello, everyone. I think I'm live. YouTube says I'm live, so we'll see. We'll let this come in right on time. Look at that, I think. I already see some questions really quickly about if this is going to be recorded. Yes, it will be. This livestream will stay up and I'll eventually put an edited version up as well. But yeah, thank you guys for coming and joining me. Nice. We are live. Perfect. I see some chat replies coming in now, so good. I'm going to zoom in on the chat a little bit, because it's a bit small for me. And yeah, welcome. I haven't done a live stream in a while, so here we are. And we're going to be doing a CSS battle, but we'll have some fun with it. There's only four challenges and I don't know how long it's going to actually... One of them might take me a while, so this might go longer than I'm hoping it will. We won't be here for too long, but we'll be here for a little while. So we can also just sort of chat in between challenges and other stuff along the way as well, or if there's any questions or stuff, I'll probably take a couple. Not too much in between, but we'll do a little bit, just from time to time. So if you have any random questions or something, we'll do those. The one thing I am going to sort of preface it before we dive in, and actually let's just switch over to my screen. I have too many things open, so I can't see if it's working. It is. Okay. So yeah, the one thing I am going to... We're going to be doing this CSS battle. Part of it is to time myself in doing them. So off screen, I should have a timer going that I can use just to time myself or stopwatch going, because that's always part of the fun is seeing how fast I can do it and giving you guys the chance to see if you can do it faster. Whether you're watching it, if you've already done them, but if you haven't already done them, you can sort of take your own shot at doing them, or just seeing if you do it differently than me. There's always comments. So I'm going to be doing these four right here. There's always comments from people like, oh, why did you do it that way? It's just the first thing that came to mind. Part of it is because I'm putting a timer on myself. It's the fastest way of doing it. Isn't often the best one. The one I'm concerned about is the third one. I have no idea. Absolutely no idea at all. So I don't even, I might, if I pass like a certain amount of time, I will come to the chat for potential solutions because triangles I don't like, but this one I know how to do, I think. No idea at all. So we'll see. Yeah. And some people also saying that it's tricky. So there we go. That's take on the triangle of three circles. Everybody wants me to do that one that will come. I think I'll actually do that one last. I'll probably do these three and then come over to that one. Just because it's this one, I'm pretty sure is the hardest one out of all of them. CSS battle is equal to box shadows. Yeah. Box shadows and gradients is usually the simplest way to do a lot of the things. Just seeing what app do I use to record? I use OBS for everything I do, which is free. So that's good. And OBS is okay by itself. But if you get some plugins, it's good because that's how I do all this stuff, moving myself around and getting bigger and smaller. I can do all that with OBS and just using hotkeys with different scenes but with some plugins so you can actually move instead of transition and stuff. And there's a few other things I use too. But yeah, looking to OBS, if you want to get into recording yourself, look up OBS, figure it out and then look at Twitch stream tutorials because all the Twitch streamers put out all the cool stuff if you want to learn anything. As I can game, how much CSS should I learn before moving on to projects? Just start making projects. Start now. Simple ones, like really basic stuff. Don't start doing what I'm doing now because these things are just for fun. They're silly. They're not real world at all. But just start building like really simple, like here's a card, a simple thing. So maybe you're already doing that and you want to do a bigger project. If you're able to do those smaller things, then go into the bigger ones. But that's the best way. And that into your into your rod, sorry for saying your name wrong, asking how you improve your front end skills exactly the same way. Just build lots of stuff and then you get stuck and then you find solutions. So yeah, we're going to jump in. Let me just have that in its own window. We'll make it a bit smaller. So actually, we'll go into this one. We'll start with this. And then when I'm going to focus on this, I'm not going to look at the chat because I don't want to get any spoilers or get any ideas. My head is in the wrong spot. So let's move that out of the way. This is the final thing I'm trying to build. And then we're going to be building it right here. And one of the reasons I actually wanted to do this is because we have a font size in here now, right? Is it in the settings? Ha, there we go. I can actually make it big enough so you guys can see the font and what I'm doing, which is really cool. They tweeted about feature suggestions. I said that and within a day, I think they put it in. So that was pretty cool of them. All right, so I'm going to start this now. And again, I'll come back to answering questions and stuff. Once I'm finished this round. So here's my timer. We're going to hit start. Let's see how long it takes. So first, easy wins all the time. Let's just go in with a background of that color on. I do this all the time where I forgot to put selectors when I'm doing these challenges. So that's never a good thing. When you have time limits that you're setting on yourself, it's easy to make mistakes. I think we have a single diff here. I don't know if this is just three more divs with borders on them or if there's another way. But I think let's get that middle one. So I'm just going to give this a class of C for center. Again, I don't go for high scores on these. I just go for doing them as fast as possible. So I'm not worried about how many how many characters or anything like that I'm using, which is why I don't mind using aspect ratio, because then I know it's easier. Border radius is 100 VW. And then we need the background color. So it actually shows up background is that. And then here we can say that my way too small, probably 50. That's too big, but then we'll just do a display grid. Hopefully this doesn't muck me up because then we can do a place items of center. And I don't think you don't need heights and widths on stuff. 40, I guess. Yeah, perfect. OK, then we need the outer ones. Do I do those as children just so they're all centered already? They're already going to be centered. Oh, no, they won't. Oh, I'll do them. Let's just try doing it inside. And maybe let's just do outer, outer, out, outer one. Oh, we can't use always do them. Div or not them and it did class is outer A. That's fine. Close div and we'll do outer A like that. So people are I see the chat moving out of the corner of my eye and people are probably like, why is he doing it that way? Outer. Let's just give this a width of 400 pixels, height of 200 pixels. Oh, yeah, that's fine. Position, position, absolute. So it's out of the flow. This will get position relative. So I might have to muck around anyway. Anyway, position relative just so it's inside. So it's already in the center. I might not need to do that, but whatever. That's OK. Let's give it a border of 10 pixels solid that 200, 100. That's probably better. And then left. See, there's 50, a negative 50. And then what? Oh, see, I shouldn't have done it in here. Yeah, left of negative 50 percent top one second. 50 percent left, 50 percent. That's what I wanted. And then translate negative 50 percent, negative 50 percent. There we go. And then a border, border radius of 100 VW. Oh, that's not going to work. I need to do it in pixels because we need an oval. If I do 200 pixels, 500 pixels or percentage as we percentage. There we go. We're close, but we're too high. 80 and not wide enough to 20 to 30. Oh, if you hold shift, you go up and down. So that's OK. And this is maybe 85. And there's a diff that we can turn on. I'm a little bit off 90. I should make mine a different color, actually, just so I can see when I switch. Oh, we nailed it. OK, it was 90. Perfect. OK. So that's all of my outers. So A can actually stay there. Then I'm just going to choose my odor dot odor dot B. I probably don't need, which we'll just get a border color of that. And then why are we not have an odor B? Oh, because I didn't make one. That would help, right? B and C, B and C. We'll just do a D. So the odor is useless now, but that's OK. Border color and then rotate 45 degrees. Why I must have misspelled the other thing 60 degrees. Perfect. And that means my dot D gets a border color. We got it. This one wasn't hard, but it's we're going to have to change the order of stuff, too, I guess. Border color and then rotate. I'm guessing is a negative 60 degrees. Oh, that looks good. I'm going to hit submit without double checking. Let's see. Is it 100 99.7? I'm taking that. Oh, oh, oh, whoops. Zed index, Zed index of 100. I wish it would check faster. 100 percent. There we go. OK, perfect. 535, 530, somewhere around there. There we go. OK, I was really mad there for a second, because sometimes you're off by like that point one percent, but it looked good. OK, perfect. Awesome. TM said it was impossible. I would get 100 percent on it. Was that because I did the grid? I know that used to be an issue where if you use this, it wouldn't work, but I find that lately it's been better. Oh, OK, yeah. So I see somebody in the chat saying my outer B wasn't working in the right. It should I should have done outer B like this instead of having the space, because that's very different, obviously. You'd think someone who talks to CSS all day long would know the difference between those two selectors. Yeah, there we go. Awesome. Happy with that. Five minutes, not too bad, right? I think we did OK there. Thank you for the applause. I'd be curious, actually, if anyone had a different solution for that one, or if that was the way to go, because usually there's comments about better ways of doing all of these. I think the next one will be better solutions than what I'm going to do. Using the small stack layout, that definitely would have worked instead of absolute positioning, just having all the elements stacked on each other. Mark, you did it on the body and with pseudos? Yeah. Can you show how to earn minimal characters? I can't do that. Asslidden? Just because I don't know how. I'm not good at one of the reasons I do these challenges as time limits is because I feel like it's a challenge for me to do it that way, but also because I can get there and accomplish something. Because the minimal character thing is something I'm not good at. I do know if you do want to minimize characters, using inches tends to be the preferred thing, because if you have a pro account, they'll automatically do that. I think you don't want to put stuff like this, like, right, you keep everything together as much as possible, so you're minifying it, basically. You don't want to use classes. You don't even use those. You just use attributes, right? You can just do an A. Is an attribute shorter? Or is it shorter doing an ID? I'm not sure, because to select it, yeah, because to select an attribute, then you're just doing this. I can do an A, like that would select it. So here I can do an A, and you'd save characters. So there's definitely things you can do like that, but there's other tricks too that I have no idea about as well. The queue unit. With the queue unit, save you characters though, because you need like 5,000 queues or something, right? I don't know. I think the only reason inches is shorter than pixels is because you could do like, I don't even know why inches would be shorter than pixels, because you'd think it would be more. Actually, do you need PX? I don't think you need to put the PX if you're doing it. You can just do a 40, and it works, right? Except it's not working. 40 PX, why did I break my center thing? I don't know what I did now. I did something that broke it. Let's try another one with, yeah, you don't need to include pixels. You can just put the units, and that works. There's a few tricks out there, but I don't know of them overall. Oh, you can't see, I'm so sorry. I do this all the time. I'm bad at that. I'm not a professional streamer, obviously. Just saying here, there wasn't much to see anyway, but you don't need units. Oh, I just broke everything, apparently. The border needs units, but the width and height don't need units, probably because that's a shorthand. But yeah, the width and height don't need it. The width here, I broke my center thing, and I don't know why. That's what I was talking about. But yeah, I don't know why inches would be shorter, but the class attribute, that was the one thing here. If I did a, oh, that was my class was equal to C. So instead of a class equal C, you could save units by doing an ID is C, and then, because here it's your C that way instead. So that's shorter, because it's an ID, but then you could also just do a C here, and then for my selector here, it would be longer, because I do it like that, right? But you're saving a lot of stuff here. So I think attribute selectors might be faster, or less characters, that's what I was getting to. Is using aspect ratio a bad practice? No, using, I think aspect ratio is fantastic. The only reason I wouldn't use it in a CSS battle is because it's shorter to declare the width and the height than to do a width and an aspect ratio. I would assume anyway. You can double check your characters. The only CSS battle supports without pixels units. Any actual CSS you're writing, you need to use pixel units. So yeah, don't let that bad habit, don't let that become a thing. One of the things I see Simon saying you could use a tags. I've done it once where instead of using divs, I used I, and then I forgot I had to change them back to display block, and it took me a really long time to do something. So yeah, that's not necessary. Just make sure that you remember that, because inline elements do behave differently. If you're using position absolute, it won't change anything. All right, we're gonna go into this one, and then I'll take some more questions after. Oh, you don't need this. Let me just, apparently you don't need the hex. I need the hex for that one. Maybe there's a different way of doing it though, Mark. Okay, so one second, control shift C. That opened my dev tools, so I don't know why. I did see it select that, so I don't know what this is doing, but it did something in my dev tools too. All right, oh, closing brackets too. Yeah, you don't need to always close things. It depends on what the element is though. So be careful with that. Like divs you need to close, but if I did this with allies instead, I wouldn't need the closing element if I was trying to save on characters. One thing I do, I always say when I start these, I'm timing myself. I do enter them always with an idea. So if I'm trying to go as fast as possible, when I see something, and this is the same, whether it's a layout or something like this, I do have a plan in my mind, so I'll share that with you guys now, is I think I'm gonna do four divs, and this is where I'm already, there's probably some smart people who know how to do this in a different way, but my thought is four divs, and then it's just a gradient or maybe a shadow. I can do it with a gradient or a shadow. I'm gonna do it with shadow because I'm better at that. I don't know, it would be easier. I think I'm gonna do gradients on them. It'd be easier, or I can do an inset shadow. I think they would both work fine, and I'm just gonna sort of position them in the four corners. But yeah, let's see how we can get in here. If anybody's asking questions, they'll probably disappear, so we can ask them again when I finish this one. And so, let's get started with it. We're gonna hit start, and we're gonna delete our styling on there. Let's try doing that thing. I mentioned we're gonna do a div B. Okay, we have to copy paste here because it's gonna go faster. That will be a C, and that will be, whoops, that will be a D. My original idea, so I wanted my four divs in the four corners, but then if I do it with, I don't know if this is gonna work. We'll find out. Let's just say width is, see, I already, yeah, okay, that's okay. Let's just, width is, let's try 100%. For now, height is 100%, and background is this color, just so I see it show up. My body needs a margin of zero. Okay, then we're gonna grab this color, and let's just do a, oh, I'm doing a background, so background color, that's fine then. Do I do it with a shadow? Let's box a shadow. I'm gonna get confused if I do it with gradients. Let's try a shadow. Inset 10 pixels solid, a solid box shadow, 10, sorry, 0, 0, 0, 10 pixels, and this color, I just wanna see what happens. Perfect. The only problem is I think my first shadow would have to be the dark color. So let's just, yeah, I think this would probably be faster if you did it, or less characters. There's probably a really smart way to do this. This one will be this color, comma, and then this one will be 20. So my numbers are wrong, so let's just try 20 and 40. I just want my line thickness, which I think my line thickness is good. So if I did that, I don't know, Mark in the chat had said he did this in 100 and something characters. This is not how you do it in 100 and something characters. Right, the idea is you just sort of come in all the way. This is somebody who doesn't know how to achieve high scores in CSS battle. That you sort of get the idea that I'm going at four here, I think. Right, maybe this would be a 100 and this one would be a 120. That would probably be enough. And then we can take my A and I did an attribute selector and just do a transform, or not even a transform, translate of negative 50, negative 50. Does that look, it's not in the right spot. I don't want a pixel and I have my gradients not, maybe I need one more gradient in there, but why is it not lining up? That sucks, 45 and 45? I'm still not in the right place. I didn't want to have to do this with pixel values. I forget how big the viewport is in negative 200 to 20. No, 180. I should have used a different color. There we go, okay. And then I guess negative 190 upwards. No, lot less, 100, 120, 130, 140. Okay, so I'm just missing, this is gonna work, at least. I'm happy about that, but I'm curious to know what better methods there were. 140 can be that color, shouldn't I be getting? That's this color. Oh no, I need it, okay, we'll copy both of those. 140, 160, and then this one needs the semicolon, whoops. There we go, perfect. Okay, so that works, and then I just have to position them. So not, I don't know if that's an elegant solution or not. So this could just be whatever, that one can go there. This one, why can't, what about if this is negative and this one's positive? Why isn't my positive value working? Where is it? Oh, this is D. A, B, A, B, C, D. What's this? Oh, wait, I know why. I know why. This, I'm gonna muck it all up now, because I got those two in the right spot and I don't wanna move them. Oh, I do wanna move that one there anyway. Okay, position absolute. They were all stacking on top of each other, so moving them like that wouldn't work. Let's just turn this off and then do a D of display none. Oh, really? Display none. Okay, so yeah, that one's in the right spot. So B can get turned on. B's where I thought it would actually be. C can come in with this, but then we do a positive value for both. Perfect, okay, so it did work. My idea did work. I just needed the absolute positioning on there. And then the same translate, but this one is negative, this one is positive, and now I can hit submit. That one took me longer than the last one. Oh no, that's kind of embarrassing. I got it though, 100% match, but definitely not low on characters. You probably could have done this as a single gradient on the body, would be my guess as one way to do it, but it is what it is, I guess. Multiple borders, orange, and then do the same way as you're doing it. Yeah, so I was going to do, yeah, I think there's a few, I think a gradient would have worked. I just, one of the reasons I didn't do it as a solid background, I didn't want to have to do a transparency because then you'd have to like turn things off as you're going. Mark did it. Repeating gradient, body rotated 90 degrees, clip path the corner edge to edge. Yeah, okay, that makes sense. Actually, okay, so Josh asking would percentages work on the translate? It wasn't lining up properly for me, so I just magic numbered it instead, but if you can get there with the percentages, I thought it would, maybe because I didn't position absolute, once you turned that on, maybe it would have worked out better. I'm not sure. Yeah, if I had the reason that I didn't do it on the body with a gradient on it was just because you need the way it's positioned. I'm actually wondering, let's try. Let me move myself out of the way a little bit. If we, we'll just take everything here off. Because Mark said you had to clip path it though, because if we did this as a linear, linear gradient, I'm trying to think, and obviously it has to be a background, background, image. There's ways of doing shapes like this and it's just escaping me at the moment. 50% plus half of line width it would work. Santa saying I should do another battle with Kyle, I should. I wouldn't mind getting other people on too. It's just always fun organizing, timing around stuff. I'm just gonna copy Mark's. I have too many things here. One second. So repeating linear gradient, obviously I have something that's mucking things up. There we go. Look at that. So we have a repeating linear gradient. What's the clip path doing though? I'm so confused by it. I can't write and the rotation too. Obviously you need all of them. Because yeah, my idea was if you could get the gradient repeating linear gradient and then you just sort of like shift it over, you're gonna get it. But the problem is because it's up and sideways, that was the main thing I was concerned about. I'm glad that works, but I don't quite get it. I'd have to break that down more. Gradients are definitely not my strong hand. Programming with m and explain aspect ratio. So it's just for an aspect ratio to work you have to have either a defined width or defined height. It won't work without one of the other one because it's based on that. And then so as long as you have one of the two of them, then you're saying like I want an aspect ratio of three to one, so it's gonna do like width three, the height is one. So the height will be one third of the width or you can do it the other way around. Someone asking what 21 Q is, Q is a unit in CSS. I forget what it stands for. It's from the really old print days. It's a very small unit. RM saying I should do a battle with Laveru. I think they would definitely have the better solutions that I have. I don't know how fast she'd be at them. I don't know. I'm gonna add them on in a little bit. Maybe I could do it one with him too. How can I add a blur linear gradient? If you want to blur, I mean, normally gradients are kind of blurry. The only reason this one wasn't blurry was because of the stops being used. That part I know. So we're going out 21 or 20 pixels, right? Everyone's asking about the Q. It's just the Q is a weird unit. Don't use it in production. So we have that, but we're saying this one starts at zero and 40. So if I took that off, then it's blurry, but we're basically making sure that this is starting at the same place this one was and then going 40 more pixels out and then we just repeat that pattern over again. So yeah, normally it would be kind of blurry, I guess. Or you could always just add a filter blur and blur something as well. Quarter millimeter, there we go. Thank you, that human, Rob human. As Lydon saying, do we need to be good at math to be good at CSS? I don't think so. I'm not good at math. There's going to be a, you know, there are math stuff we can do in CSS now. So for certain problems you come across, there definitely can be times when it would be useful to know math. And so like we have like trig functions and square roots coming and like other stuff, but like you can do most stuff without having to worry about those. Flex or grid, Santha is asking, which one do I prefer? I definitely prefer, well, I don't prefer it. I prefer the one that solves the problem I'm trying to solve. I tend to be using grid for more things than Flex these days, but just because it's for the Laot stuff I'm doing. But yeah, I have videos that sort of look at why I would use one or the other one and it comes down to generally, just depends on the situation. It's not one or the other. You'll have a Flex thing within a grid context that might be within a Flex context. You know, there's different ways you might use stuff, but. Cool, I'm just going to see, can you blur a gradient by positioning a div and giving it a back? I wouldn't, sorry, I'm going to go back really fast because there's an easier way to blur the gradient. And if you're using the backdrop filter blur, there can be performance issues potentially and it depends what you're doing with it. There might be completely fine, but I think the easier thing is just to do a filter blur on an element that you need to be blurry. It'll blur everything, so it depends on how you want to use it, but you know, you can blur a gradient that way too or blur whatever you want, filter blur, instead of having the layer or something on top to blur it. There's times where you need to do that because you're doing that glassmorphism thing, but if I had to blur something, I would probably start with the filter blur. All right, I'm going to jump in. What new features are you most excited for? I was just on smashing, was it smashing talk with Videli and he asked me that too and I don't know. Or no, it was a little bit different. What am I, he asked me what future things are not part of it that I would be excited for. Future CSS that I'm looking forward to, style queries are for me probably the one that I'm really looking forward to. Backdrop not in, did they not fix that? I think it is. Backdrop filter, is it backdrop filter? Yeah, it got added to Firefox if that's the one we're talking about. All right, anchor positioning is another one. That's going to be really good. Anchor positioning solves like a really specific problem that is we keep reinventing new ways of fixing, whereas style queries are going to be like something that I think changes how we work. All right, so I'm going to jump into the next one, but again, we'll take some more questions after this because I'm definitely going to have to prepare myself a little bit for the last one. So here we go for this one, three, two, one, let's hit start. So we'll just do a body. Body has the background of that color. Is that the same color as this? No, it's slightly different. Do I need to do, I think I need to do this with three divs, right? I think, so let's just do the same thing I did. Maybe there's a way of doing it without. Let's just do div A, div copy and paste Kevin, it's faster. B, and we'll do a C. Okay, so we have those. So then here, the width of all of them is going to be the same. It looks like it's probably about 200. I'm just guessing right now. Let's come on my body and do a, we'll do the other method of display grid and then grid template areas, stack, pile, whatever you want to call it. And then can we do nesting in here? Yeah, I'm not going to try now. Body, select all the children, grid, grid, area, stack. They'll all be on top of each other. Oh, and they're centered to you. I didn't think they would be. The height, the height's going to be different for each one though, 100. Ooh, just thought of something though. Okay, we'll just, Oh, actually, can I go in the body and just set a height here? Height, 100 pixels. Oh, I can do that. Perfect. And then margin top of auto, is that going to work? Margin bottom of zero? Didn't, I was hoping that would actually move it all the way down. Negative 100. This is, please never, ever, ever do what I'm doing right now. I just want to line it up. This isn't the right way to do it, but it looks like it's lined up, so I'm going to take that. Never, ever do this, please. Okay. Oh, but see, I've already made a mistake because I'm doing these with width and heights and we have to do all of this with a border. I'm going to do this just with my A for now. Why is my A there? All of a sudden. Oh, see, maybe I was right and I didn't need that. I'm so confused. Okay, I'm going to, one second. Position absolute, we're going to use absolute. It's going to be easier for me to figure out where things are. Background, border, let's just do it. Okay, all my dibs need a border. Let's just select the dibs first. I can do all this here. So if we do a border, it's going to be, let's just try like 50 pixels solid and this color, transparent, right? Transparent and then the border bottom is going to be that color. A border bottom color. Perfect, except it'll be this one or whatever. That's on all of them. So it gives me a triangle and then we can play with the sizes. Obviously this is going to have to be bigger, closer. If I'm using that, I can probably, I don't need these anymore. I'm using absolute positioning. There's probably another way, but whatever, we're going to do it this way. Left 50% translate negative 50% zero, just so it's in the middle. My top, I might move down, or bottom 50 pixels, 75. There we go, okay. So A, the border, this is where I always muck up when I'm doing these triangles that aren't perfect triangles. The border, border, top width, 100 pixels, that was already the same. If I make that 120, does that not change it? This is where I hate doing triangles. Is it not width? I don't, I'm just going to one second. Border bottom will be 200 pixels. This color, solid this color. Okay, so I'm doing the wrong one. So this would still be 100. Actually the height, oh, my height is good. It's the width that's wrong. So my border left width, is that right? 200, let's just say 200 pixels. Aha, it is, okay. And then my border right width is 150, maybe. Why is it that shape? Left, oh, right, 120. They actually, they all need to have, there we go, that one's good. Okay, they all need to have that. So I can bring those, oh no, they don't. This is the one where it's just border bottom color we could do, right? Okay, so we'll copy that. This will have a Z index of 50 and we'll just do the next one down, which is this one. Whoops, copy that. And then this just becomes like 150, no? Oh no, that was the one that stays the same. Darn it. That can come off of here and that one goes there. So then my, oh, and this should be a B, Kevin, okay. Yeah, and then my border, border bottom width is 150 pixels. There we go, it's a little too much, right? Yeah, we got there, perfect. And then I can copy that one, paste it, whoops. Probably would have made sense to go the other order to save on characters, because then I wouldn't have to worry about my Z index, but whatever. So this one's probably like a 160 and then it has this color, 180. Oh, my widths are wrong. I thought my widths were okay, okay, 125. Can you do multiple? There we go, that looks better. Hit submit, seven minutes. Each one has gotten like a little bit longer than the last one. At least we got there though, perfect. Happy to get there. Is there a better way to do that before I look at the chat and the chat's a little behind where I am now anyway, there's a small delay. How could I have done that in a different way? I couldn't have done it with shadows. I think that's the best way to do that one, to be honest. I don't know, I don't have another solution that I can think of. Sir Meow Meow, asking why, what my, this is, this is an attribute selector and I'm just doing it because here I put div A, div A, or B and C, so these are just attributes on there. This is not production code. Don't do this in production. It's just faster, because I'm trying to go quickly. Oh yeah, we could use clip paths as well to draw triangles. I would have failed miserably if I did clip paths instead of this, just because I'm terrible with clip paths. I always muck up, I can't visualize it properly, so I always end up using other ways of doing it. Polygons with SVGs, the whole point of CSS battle is not to use SVGs though, right? This is definitely not something you would actually do in the real world. Why is it, attribute selectors are perfectly fine. And I use attribute selectors in the real world, but these are not really valid attributes. If you're doing your own, you'd have a data attribute. Generally speaking, you can sort of do custom attributes if you want, but you normally are supposed to do a data attribute instead of an ABC. And in this case, it's really just a save on character, so I'd have class, if this was a real thing, I'd do class triangle and then, I don't know, front, class triangle, middle, class triangle, back, or something. So here, I'd set up all of the styles for all my triangles and then my front, my middle, my back, and they'd get different styles, just so it's a little bit easier to understand what's happening. Because if you come across this code and you just have random letters inside of square brackets, people have no idea, or you go back to your own project and you see that, and it's useless. So yeah, you don't wanna do that. Mark van der Mead, thank you very much for that. I really, really appreciate it. Happy to be able to catch you live, always enjoying your content, learn so much, have a great day. You too, Mark, thank you very much. That's really generous of you, so thank you very much for that. Fox DK, yes, I'm gonna edit the video. Most people didn't want this as a live stream, so I said, you know what, I'm gonna do it anyway and just edit it down to just, the parts now will be taken out and we'll just do a normal thing. What is the grid area stack? I have videos on it, if ever you want to look, but then, small CSS, if ever you want, this is a great site, I'll put it in the chat for people that wanna get to stuff with little easy things. I don't remember what you called it though, modern centering, no padding, I think it's in here, isn't it? Someone mentioned it, I think, for this one. Background picture cards, the card's really good, if ever you need a card that does lots of stuff, maybe it's not in here. Or is it this one, the centering? Basically what I was doing was just putting all of the children into one single grid area, so when you do that, they all stack on top of each other. That was the idea. Just say, Bobby, more Twitch streams, eventually, once, maybe at one point, we will, but it'll be a while, but I do want them to come back, so they will come back eventually. Why does animation not work on transform, but works on positioning? I'm not sure why it would work or not work. You know what I just realized? I'm gonna be right back, everybody. I don't know if I have a slide one second. Let me pull up OBS here. I forgot my water, and I'm really thirsty. I poured it before I came, and then I must have left it in the kitchen. One second, I'll be back in like 30 seconds. Oh, this is supposed to say I'm on break, whatever. We'll just do this so people that come will think they caught it at the right time. I'll be right back. All right, sorry about that. I opened my door, my dog escaped. That's always good. Come on, we'll see. We might have to go chase her down in a second. Yeah, about the question for the animations, I'd really have to see what's wrong and why it's not working. Just checking, trying to catch up on the chat. It looks like we're all caught up, though. Cool. Should I use pseudo elements for one div instead of three divs? If your elements are decorative, then yeah, don't put extra divs in there. Just use a pseudo element instead. That would be, that's my main suggestion in general. If there's no content that has to be in there, it's just decorational. There's no reason to put a div. Nevin, thank you very much. Super generous of you, I appreciate that. I'm glad you're enjoying the stream. Can you use before and after with the last challenge? I could, if I find a good use case, sure, I will. I don't know how we're gonna do this, guys. I have no idea. As you saw, I'm already terrible with triangles. I don't think Clip Path, well, maybe Clip Path would be a solution here, which scares me, okay, we'll see. We need more calc. I don't think I need any calc for any of these. Is there a good way to have a div take up the remaining space with scrollable content? I'd have to see the issue. I know there can't, I'm trying to just think off the top of my head. No, there should be. Oh, okay, wait, maybe. So like take up the space that's available and it's like a squishy space, but then if only add the scroll bar, if that available space for it is too small and then you need it. Yeah, that is one of those tricky things for sure. I'd have to play around with some code. I think there's a solution potentially why, yeah, there's potentially a solution, but I'm not sure I can't say it off the top of my head. I think I've done it with Grid though. Swamp nil vivo, I'm not ignoring anybody's comment. I just might not have seen it. If your comment is hidden, it is the only way a comment would be hidden is because YouTube is hiding it. So if you had a link, it won't show comments with links in it. Yeah, that's the only thing I can think of. Yeah, so I'm not gonna start it quite yet, just cause I'll see if there's any other questions that come in for a bit, but I'm gonna click into here just so we can sort of contemplate things a little bit. I can think about it over the next little bit. C wave CSS enthusiasts would be good friends, but you guys are rare. Everyone is more into tailwind and likes. You know what? I'm finding that's not necessarily true. It feels like it, 100% feels like it, but I feel like the people who use tailwind are more vocal and the people who don't just don't say anything. And I'm not gonna say it's not there, it is there. There's a lot of people that are using it and other stuff, but there's a lot of more regular CSS people out there. How do you make triangles with CSS? You'll wanna watch back a little bit, I just did it, and we're gonna have to do it in this one too. So this one, I, okay, we'll talk through my first attempt here. Myaq, Sony, I'm a beginner here, how to make it better. I mentioned it a little bit earlier, so I won't go too in-depth, but you just need to do lots of practice of building stuff, start with like simple things, like find a card or an element or something, like a navigation, just start building like parts of websites. Don't try and do the entire project, just start building out smaller things and then you slowly just build up more complex and bigger things over time. Ask the thing, can I become one of the YouTubers, can I meet with you? I mean, you can definitely join up on YouTube, no problem there. And if you're ever anywhere I am, I'm always happy to meet people. So I'm gonna be, if anybody's interested, I am going to be in Amsterdam in June. I'm gonna be in Wisconsin in August, end of August, and I'm gonna be in New York in October for different events. So I'm doing CSS day in Amsterdam, that conference probably in end of August, beginning of September and smashing comps in October in New York. So if you're at any of those, definitely say hi. We'll see CSS support 3D extruding text in the future. I don't think it's on the roadmap, but I don't know. A lot of tailwind discussion going on, I'm not gonna dive into it too much, but Advanced Team is a website I see different from any website. Swapnil Vivo Advanced Team is a website I see a different from any website design. I'm not sure what you mean. Or just the design looks different. Advanced Team, I'll have to look at it later. Is there any possibility for contribution in CSS and open source projects on GitHub? I'm sure there are, just about finding the right project with the right things that need stuff doing on them. So hopefully you can find some stuff. There's lots of, if you look up like, there's websites that sort of keep track of open source projects and the types of like work that needs to be done on them. So maybe you can find some stuff through those. If you just look up like open source contribution or something like how to or something you'll find sites that sort of help on that side of things. How important is JS and React to Web Dev? Very important. JavaScript, very, very. These days, React is a very big part of it too. But there's alternatives to React. There's not really an alternative to JavaScript, so yeah. Tempo, I'm sorry if I'm missing anyone's question. I am trying to keep up, but yeah. If I do miss any, oh here, I'll start with R-dash first because is it okay to use Tailwind with vanilla CSS using SCSS format? I find it frustrating to update my Tailwind config file for every custom animation. I wouldn't combine those. I find there are different tools for different things. So you're just sort of like layering dependencies on there. I'll make my face a bit bigger for now. So yeah, you're layering extra dependencies that sort of are, their goal is to sort of accomplish the same thing in a sense. So I wouldn't, but maybe it works well. So you could try it and see. So there's no harm in trying and seeing if it works, but I don't know. Yeah, sorry if I don't have a better answer there. When CSS gets mixins and variables that work on media queries, I'm gonna ditch the preprocessors. So the variables on media queries is in the works. Mixins, if it does happen, it's a long way away, but there is talk of it, but it's just, it'd be, I don't think there'd be any, from what I've seen on it, if it does make movement, it's probably three years from production away at least. Tempo saying, I appreciate you. What advice do you have about focusing on vanilla CSS or Tailwind? If you're on my channel, I'm always gonna say vanilla CSS. But I think Tailwind is good to have. If you're looking for a job, there's enough that use it. But again, look at your job market and everything because maybe they're not. So do pay attention to that and see if Tailwind is something that's being requested. But the more, Tailwind is a way to author CSS. So if you don't know CSS, then Tailwind doesn't help you really. How are 3D websites made? Is it necessary to use JavaScript? A lot of the time they're using like things like 3JS and other libraries that make it possible. So yeah, generally speaking. Use DOMU, you find TypeScript easier than JavaScript, but that's just me. I'm assuming maybe you come from a different computer science background, maybe. Because then it just sort of like falls in line a little bit more with what you'd be familiar with. Maybe not. I know for me it's not that way around, but. Festusabu, what is SCSS? Can I show a quick comparison? I can do a quick comparison. I don't mind going on a little sidetrack here. Pen.new. If you didn't know, Pen.new opens a code pen. Super handy. Let's just do a div with a paragraph and go on and don't know if this is the best example. We'll also just do this, color scheme dark to make everybody happy. So it's not too bright and we'll do a font family of system UI and a font size of two remt, so it's bigger. So regular CSS is what I'm writing now. In code pen, you can turn on SCSS or other preprocessors. So one thing you, I was going to show nesting, but nesting is part of CSS now. So let's do a mix in, at mix in, mix in. What should we do? I don't know, something simple. This is going to be, I can't think of a good example off the top of my head. People, what's a good mix in that we could do? Pseudo, Pseudo. So we want to have, is it a, all this do position, which will be before and let's do, let's just do that for now. We probably want some other stuff in there that we could change. But in here, what I'm going to do is, and actually for this, this is going to look kind of weird. I probably should have done a simpler example. But here I'm going to put my position and then we're going to say that it's a content of nothing. And inset, I'm just going to do an inset of zero and a background of red. And here, what we'll do, we'll add this. We'll put a width, there goes my dog, width and height. Right, so then what I could do is on my div. I could do an at include Pseudo and then I could say 100 pixels, 200 pixels. And I think that will work. I might have mucked that up, which I did along the way. Do I need that first? What did I do wrong? I need argument. Oh, whoops. Yeah. It's just, okay, we'll just copy that first. We'll just keep before there. Now that should work. What did I use that on? On my div, I included it, content, position, inset. We want a position, position, absolute. I'm going to go get my dog. So we have the red suit element showing up and then I could, oh, because it's position. We'll take off the inset. It was going full size. And then here we want a width of my width and a height of my height. And we should get, there we go. And then I can go on my paragraph. Let's just copy this. I'm going to go on my paragraph would be my P. I probably should have done something. One second, I'm going to get my dog. Sorry. So let's change our background color here too. We're going to do height width and then we're also going to add in a BG and then my color here will be BG just so we can have different colors. So then we can say that it's red and then this one's going to be blue and we'll do it as an after. So it should show up somewhere else. There we go. And then I can say it's 500 pixels or whatever. It's a really bad example. But you're basically, you know, this content, this will always be here. And then I have these coming in as different things I can set. There's a whole bunch of other better things you can use Mixins for, but for some reason that was the first thing that came to my head. So that's a mix in. You have nesting, you have custom functions you can create and you can do partial files where you're like have lots of separate files and you're bringing them all into a main file. I do have a course where I talk a lot about this called Beyond CSS. So if you want to learn more about it, you can check that out. Sorry about that. A bit of a sidetrack there. Someone I was just asking there should they use .scss or .sas? The syntax I'm using here is the scss syntax. If you want no semicolons and no curly braces anywhere, then you would do it. So this would be valid s-a-s-s. So sass is written like this. Whereas if you want it to look like regular CSS, then you're doing it with a scss file. This is much more common and much more popular, but I get why people like the other one. I used to use .s-a-s-s too. Oh yeah, the weird looking selector. Just laugh, okay, we'll stay here for a second. This one, so this is the parent selector. So because I'm doing the include here, it's gonna be, it's just putting the div. Then we have the .. And then we have this weird thing, which is my pause. So it's just taking whatever we see here. So it's gonna put before and it's gonna put the before here. So this one's becoming before because I had the before there and this one's an after because I have the after there. Here I'm only doing them as variables. So the width, the height, the BG are working. The position I had to do it like this, it's called interpolation, just because it's not the value. Because normally variables are used as values. So if you use it anywhere else, like a selector or as a property, I guess you could do one. I would have to try. But then you have to put the hashtag and wrap it inside of the curly braces. William saying sass looks good. Yeah, I started using only sass, but then when I was teaching and I'd be stuck forgetting semi-colons and curly braces all the time. So I stopped using it and went to SCSS. Plus it is more popular. Simeon saying that you can also have loops. Loops are super awesome. I use loops a lot when I write sass. Kevin, you should do a CSS battle with subscribers. It'd just be so hard to organize. I don't know how I would do it. It could be cool or interesting, but I'm just not sure how I would actually pull that off. If you have multiple divs inside a container, how do you get only three divs in a row? And the fourth goes to the left of another row. Using Flexbox, the divs should have equal gaps. So it depends a little bit, William. I'll do the next bout. I'll answer this question, then I'll do another battle or the last battle. Three divs in a row. The fourth goes to the left in another one. I would, personally, I would use Grid and not Flexbox. It's gonna be a lot easier. That would be my solution. If you have to use Flexbox, then I would just either, if you have a min-width and use Flexwrap, or just use Flexwrap and depending on the flex basis and stuff with the Flexgrow. So there are ways of doing it, but the problem is if you use Flexbox, the bottom one's gonna stretch and be the full size. So, yeah. Sammy, will I ever consider doing react videos? No, I won't. I'm definitely not the right person for that. Sorry, if that's something that you're looking forward to. Okay, I said I was gonna start, but Calculus is, and programming. So there is, with CSS, all the Calculus stuff is here now, right? Or the trig stuff, I should say. It depends on layouts and stuff that you wanna do for animations. I think some of it could be useful. Outside of, like, I don't know. There's smart people. I don't know enough about math to know the good ways of using it, but I always see people doing impressive stuff, so, yeah. Yeah, okay, we're gonna start the next one. That's it. Where is my timer? My timer's here, perfect. So reset my timer, bring the timer in. This is the one that I have absolutely no idea how I'm gonna complete. So I might turn to the chat to get ideas along the way. Only if I get really stuck, though. I'm gonna go at least 10 minutes, and it'd probably be longer. My initial thinking before I start, I think I'm wondering if I could just do, I don't know. I sort of wanna do it with layered triangles, or like, because the problem with a triangle, if I do it, there are two ways of doing triangles that I know of are with border and clip path. Either one of them, either one of them, yeah. If I do a clip path, I can't have something outside of that. So I can't do a green triangle, and then have something go outside of that. Because the clip path is there. The other, I can't do it as a border triangle, because if I do it as a border, you can't put a border on a border. So it'd have to do like two layered, and I'd have to have a triangle border thingy with another one on top of it to make like, I'd have like a white one, and then on top of that, a smaller green one. All of that would actually be fine. I'd be okay doing that. It's these circles that then show through. The only thing is, could I do it that way and then use a mixed blend mode to get that to work? But because we have no solid colors, I don't think it would work, because you always get color shifts when you use mixed blend mode. So the only thing I can think of is, I make, my dog's gonna start barking because my son just got home. The only thing I can think of, come on, is, oh, one second. Yeah, so if I do this as a clip path, is there a way, I make a triangle, and then I also cut out the center using the same clip path. I just don't know how to do that. The advantage is because they're overlapping, like this thing in the middle could be two more pieces. So like here, I could like potentially, okay, that's what we're gonna try and do. I'm just, I'm so bad at this. This is where math would actually probably help out on getting the spacing and the positioning, but that's what I'm gonna try. So I'm gonna hit start and I'm gonna fail miserably. So my body is going to be a background of that color. Then let's just give that a, let's turn off this div for now. We'll give this a background image of a radial gradient that will go. So this is where, okay, let's just try transparent to like, I don't know, is it 100 pixels? I'm really bad at like judging. And then we do this color at 100 pixels. Can I give this with 100% aspect ratio of one, if I do it on the body? Ooh, look how ugly that looks though. We're gonna try mucking around with this. Maybe I can't do it on the body, but I just wanna sort of get the first stages of it done. So, or you know what to be easier? No, I'm gonna do a different thing here. Take that off, take that off, take that off. I don't even know if I need that anymore. We're gonna go on that div. This probably be a lot easier now that I think of it. So this would be a width, 50 pixels. Background will be this color. Let's just make it red for now so we can see it. Aspect ratio of one. So it's a square. This probably be bigger, 75. Yeah, this would be a lot easier. So I'm just doing the blue circles right now. Maybe 100 was the right number. Border radius, border radius, 50%, we'll make it a circle. I don't know what's faster. So I'm just gonna do grid, place, content, and center. Now we can change the color away from red back to this and then I can just do a box shadow, right? Box shadow, 10, 0, 0, 10 pixels, 20. 20 pixels, that color, zero. Oh, 10 was right. So the size, this diff thing is not, okay, one second. Let's go back to being red here. 110, that, yeah, the 110 looks okay there and maybe that's what we need. That looks good. Okay, so we can go back to the actual correct color in the middle and then my box shadow. That's one box shadow. Then we just take another box shadow. One second, so we're gonna have two, that's one, two, three, four, five shadows and the shadows just alternate between colors. This one looks like it'd be like a 40. This one will be a 50. This one will be 90. That's too big, 30, 40, 40, 50, 60. And then this one can be 70. Perfect, at least we got that in place. That looks good. I feel like submitting now and just taking my score like whatever, that'd give me like a 70%, right? Yeah, I think that's easier than doing the radial gradients. So perfect, I'm happy with that. Always go for the easy wins. Let's just give this the A and I'll switch this over to be the A so we have that. Let's do, whoops, div B. I'm gonna call it T for triangle and it'll be triangle Z or it'll do X, well, X, Y just because I can't do it in A. And you can't use numbers, I don't think. So maybe you could, I don't know. Triangle. So let's see if I know how, I don't know how to do clip paths background. Width, 150 pixels, height, 150 pixels, position, absolute, so it doesn't shift anything. Top 25 pixels, 30, perfect. Close anyway. And then the left, 30? No, they won't make it that easy. 50, 45, that looks pretty good. So then my height needs to be a lot more, not quite double, so it won't be 300 and about 250, 200, 225, 235, that looks pretty good. And then here, I don't think the width matters too much unless I start using percentages. Like, do I want it, I think my idea is that it's gonna stop about here anyway. And I don't know if this is gonna work. I'm really bad with clip paths, so this might be really painful and I don't even know if this is the right solution. So we started zero, zero. Let's just go like 10 pixels, 10 pixels and then do a, just so I just want proof. Oh, I don't know. Just so I just want proof. Oh, I already forgot something, polygon. Polygon and then wrap all of that. And just to make it a bit easier to read. Is it, I have spell check, no E in polygon. See, I already, do I need to put pixels here? I don't think so, though, do I? No, I didn't think so. Oh, wait, should I just, yeah, okay. That makes more sense. Zero and then I'll just do another, not a zero there. Let's do 50 and a zero here. I just wanna see, okay, that sort of makes sense. So if I did, this one's gonna go 100% just for now, 100% over and then this one will be 100% down. Oh no, whoops. Let's just, I'll put 50 pixels here and put 100 here, 100%. And then this will actually be at zero. Cool. So zero, zero is here at the top corner, which I think might be slightly off, but that's okay. Zero, zero is the top corner. Then we go all the way over and then we wanna go down to be somewhere over here. So we're gonna go down, if I do 50%, it might be okay, actually. So 50%, there we go, we figured out how to triangle the clip path. My sizing is slightly off somehow because that 50% you think would be lining up better. So my height, I'm actually worried that my, I'm gonna change stuff here a little bit really fast because there's a margin on the body by default. No, that didn't change anything, okay. My top is off a little bit. I see it shifting now though. So the top, that looks better, but then that changes my height. Maybe instead of the height here, I should have done, oh, there we, okay. So that's looking better. Part of the reason it should be off on the top and bottom a little bit, actually, because my thing is too long. So width will actually be like a 190. I'm gonna try and make it line up. Let's just turn off the clip path here. This is gonna break my head though once we, it looks like it should be lining up. Okay, yeah, like this shouldn't have to be shifted down more. Oh, yeah, that's moving it up. I'm so confused. If I do 60, it's there, 50. Oh, maybe I'm okay. For some reason I thought it was shifting and now it looks like it's okay. I don't know, I was imagining things, I guess. Okay, oh, see, when I go this way, it looks okay. When I go that way, doesn't it feel like it's, the fade is tricking me? I don't know. See, it is off a little bit. The diff is helping here. Top, there, okay, that's gonna be close enough. Okay, yeah, there we go. Now, when we get to this point, is where I don't know how I'm gonna do this. If I get to that point, now we wanna move and add another stop here. So, yeah, because this is my point right there. So after that, we're gonna stay at 100. I don't know, maybe we won't, what if we did calc, 100% minus 10 pixels, 50%. And then, is this gonna work? Oh, we have to close my calc. We need to come back up to this corner, which would be if I just did 10 pixels, 10 pixels. I just broke the entire thing. What? Polygon, that's okay, that's okay. Oh, comma. No, the 50% goes here. Okay, see, there we go. There we go, we have something coming together. Now, my sizing is wrong, but that's okay. What if I did that at 15 and 15? See, this is where I'm gonna magic number it, but I'm sure if you know how to make a triangle, you wouldn't have to, right? That's down, so 20 down. Like, I don't know why that, we're so close, but it's a little bit off. And this is where I feel like I shouldn't have to magic number it, but that's all I'm gonna be doing to get like the right shape here, at all. That looks pretty good actually. Okay, so now we wanna go down to over here. So that's the next point after this. We wanna go all the way down. And so we're gonna stick at our 10 pixels and then we'll do another calc of 100% minus, for some reason, 15 worked before, comma. We need two values. This is my, oh no, yeah, that's good, comma. Perfect, it's coming together. Okay, and then from this point, we need to go all the way back that way. So to do that, that's basically the same place that was our 100% and 50. So we can, just for now, so I have something down. And then this would be calc 50 minus 10 pixels, plus 10 pixels. Oh, okay, right, right. Because then from there, it's jumping right back. Oh my God, okay, so minus 10 pixels. And then if I copy that one, oh no, that's not right. I think I just want this, okay, I'm gonna copy this one second. Copy that, this one's just gonna be a 50%. And then that's, no, that's not quite right. I want this one here. Okay, and then this one, maybe that will work. It's slightly off, okay, we're on the right track. So the bottom one, so I hate clip paths. Then we're, that's the top, so it's this one here. So whoops, I don't need Grammarly, go away, 15. The 10 is good, that's going straight. It's this, maybe that's a 10, 20, like 18. There, my top one is still broken now though. I have some issues. No, 18, maybe we just need these all to be 18s instead of, it looks slightly off, but I'm pretty happy like it's off by a smidge. I'm gonna take that. So I have the tx, then we're gonna do a ty. I don't feel stuck right now, I just don't know if this is the right solution. So if I just do a y and do rotate 90 degrees, 180 degrees, you have to do a full rotation. And then a right of 45 pixels and a left of auto, right, right? Okay, so we're good there. And then for that little middle bit, do I just do a div zed? I don't know if I have to close that, div zed that we can just fill in that space. I don't wanna have to, can I? Okay, let's just try zed. Yeah, position, absolute. If I do a, one second, I wanna try this with 100 pixels height, it's way too big, but I just want something that we're gonna have on the screen background of red. I just, okay, I muted when my son got home and I just had this panic that I forgot to unmute, but I didn't. If I do a margin auto, does that go in the middle? What if it's fixed? Oh, inset, inset of zero. There we go, and it's absolute. Ha, cool. That makes it easier to center. So this would be like a 50 and a 50, or let's even make the height 20. Oh, can we do this without even having to muck around? Okay, I'm gonna hit submit. That's not gonna be 100% though. What's my time? 15 minutes. Okay, I'm taking it, 19.9. 16 minutes, I did it. Cool, I didn't think I was gonna get there. Just because normally with clip pads, I follow all over myself. So I'm pretty happy I got that to work. The problem I still have with clip pads is like when I wanna change that and just figuring out where I'm going can be really, really hard. The 100% minus things is definitely useful. I'm really happy that worked because if that didn't work, I'm not sure what I would have done. I thought it'd be harder to fill in that middle bit. But yeah, I'll take a 99.9%. For people saying clip path looks hard to use, just use clippy. I'll put this in the chat. Because you can just make your points. If you need new points, I think there's a custom one somewhere. There we have, we have a frame. So I could have made a triangle or whatever. You drag your points around. If you'd wanna get rid of a point, you just delete it. So, we could have made our own little triangle or whatever using this. That would have been how I would have do it if I was doing it for production. I needed it faster, but because I was doing a challenge, I wanna do it by hand. So yeah, taking the W definitely. Now I do need to ask if there's other ways of doing this. Because I'm super curious if there was a better solution. Simplexible saying do a background transparent and use a border white color. That would be great, but you can't make a triangle. There's no way to make a triangle with a transparent background that I know of. This would have been a perfect use case for swapping polar coordinates rather than Cartesian. I don't even know what that means. I've heard the words before, but I don't know how that would change things. Sengal also getting a 99.9% doing it the same way. This mark around, I'm curious if anybody has another solution for this one. Just run is react native or Java better for Android development? This is not the right channel to be asking. I have no idea at all. CSS battle player, nice. We can make the triangle using a single clip path. Oh, you're doing both instead of like two separate ones. It's one clip path for the entire thing. I love people who do these one second when we copy this. We're gonna comment this out just for anyone who doesn't see this. This is wild. I love the mix of units just to get like the most, something about the clip path it doesn't like. Can you take spaces out? I didn't know you could do that. That's interesting. But like the mix of percentages with these cues and then centimeters where the centimeters or less characters is super interesting to me. Oh, my sizing is also off, but the clip path's not working for whatever reason. But yeah, I'm guessing that would be for the entire shape and not having to duplicate it. Couldn't it just be a div with a border radius to make it a triangle and use borders? Border radius can't make a triangle because it's always gonna round things off unless you know something I don't. If there's a way of doing that, then I would love to know. Use a very, yeah. Using variables would definitely be easier as well than doing it like here, the 18. Like if I just did like offset, right? You just have an offset 18 pixels. And then you use that for every one of them since 18 seemed like the right number. But then if it wasn't, I could make that one change and change everywhere would definitely make my life easier. I don't know, do I not do back end? No, I don't. I barely do front end. I do the front of the front end as Chris Coyer and Dave Rupert coined it. It's two triangles, but you don't need to fill the middle. Oh, right, okay, okay. I didn't need the extra element in the middle. Oh, because you're doing this shape. Right, right, right, I get it. Yes, that makes sense. I appreciate that. So you do like the full triangle going up to here and then you cut out like this shape instead of having something fill in that middle space. That makes sense. I figured, oh, I might've been missing that, sorry. I'm sure it would've worked, but my sizing, it would've mucked it all up anyway. If ever anybody's doing CSS things and they get a 99.9, just consider that a win, because once you get that 0.9 as far as I've tried, you can never get that last 0.1. It usually is just because, especially with clip pads and stuff and some other things, like if I zoom in, or actually, you know what, if I made that little middle thing a little smaller, maybe I would've got it. But sometimes just because there's like a rough edge or something on something, it mucks it up a little bit. So don't stress too much if you get a 99%, or a 99.9, I should say. Can you have two lines going in X? Can you have two lines in an X and have the bottom border? I mean, yeah, we could do it. The one issue, just because of the way they're meeting in the corners, having two elements come together if I'm understanding correctly becomes really hard to get. I don't know if there's like a good way for how these are meeting if you tried to do it with multiple elements. Maybe if you used a skew or something, maybe I'm misunderstanding. This is Mohammed's solution or question that he was asking. But yeah, if you did two lines on the side as like divs and then you had another element coming down this way, I'd just be getting the sharp connection there. I don't think it would work. Perspective, maybe could work. I'm not, yeah, I guess if you pushed perspective to like an extreme, maybe you could get a triangle. I'm not even sure. How does it calculate the match? It just uses like, you can even see when I go on top, there's like a small shift there. It's just comparing the original image. It probably looks at this and you can see I'm a little bit off. So it's comparing the original image to my image and just using, I don't know what testing software they're using or whatever, but there's like visual testing things you can use that will compare what you're, like you have a design file and then you could make your site in CSS and then you can have like a visual testing done that will actually find any differences in it. I'm assuming they're using one of those tools in the back. What is your rank in CSS battle? I have no idea, probably really bad. How do you find your rank? Is it my analytics? I don't know how to find my rank. If you tell me where to find my rank, I will, I will show it to you and it's going to be terrible because I don't play often enough and I don't go for high scores. So just out of curiosity, the CSS battle player posted this in the chat. I just want to try it. Look at that, it works. One second, that's on my triangle. And then I wouldn't need this one. Ha, look at that. So yeah, just the clip path is adding that little bit in and it's with less characters because it's with these Q units and pixels and everything else. Cool, that's neat. If you want to host your website for free, I use almost all of my projects are hosted on Netlify. It's completely free. It's really easy to use. Yeah, that's what I would use. Profile, one day streak total score global rank, 2,411. Can I explain what front end and backend mean? So front end is the parts of a website that the user interacts with and sees on the page. So what I'm looking at now, so you have HTML, CSS and JavaScript. So HTML is the content, CSS is what makes it look the way it does and JavaScript is the things like we have the button here or that's like putting not, oh, even this, probably. They might be, the animation is with CSS, this showing up, I'm not sure. But like, there'll be like modals or like the light dark mode here, switching that so like the interaction with the website will be JavaScript. Those are all on the front end. Back end is like all of the information being stored. So like somewhere there is my global rank that's in like a database somewhere. So, and it keeps track of everybody's total scores and targets played and all of that's being saved, not in an Excel spreadsheet, but you can imagine it like that, this giant spreadsheet of information that's all on the back end. And then that information can be accessed by the front end to pull that information in, usually using JavaScript to like insert that for everybody's profile and stuff. And then I have my profile picture and then all of those types of things all saved on the back end. And then the front end is about making it appear so the user can use it more or less. It's a really high level overview. Not, you can learn a lot more about that, but. Is there a way Gorad's Phillip is asking, is there a way to do a cycle in CSS? I think we can do this with a bunch of divs on every iteration of the cycles. Not sure what you mean by cycles. So if you ask more on that, I could maybe answer you. And again, sorry if I miss anybody's questions along the way here. Can you connect to your domain name to Netlify? You can, if you already have a domain name, there's no problem. Are HTML and CSS still relevant today? I hope so, because that's what I'm teaching. I think they will be for a long time too with everything else you can buy themselves. There's only so much we're doing with them, but yeah, I think they're gonna be relevant for a long time. Oh, so four cycles in CSS. So you can create divs every iteration in draw. No, like a loop. You can't loop in CSS and you're also not creating divs with CSS. So you can, you'd probably want, you'd be using something to create the divs. The easiest thing, like if you have JavaScript creating divs or whatever and you have a custom property on there that can create iterations to change what's happening on them depending, that wouldn't be too hard. And so it would be a combination. CSS would be involved, but what is why? That was just a selector that I had for my why selector here. So these are attribute selectors. It was just so I could go faster. It's not something I would wanna use in production. How often do I use jQuery? Do you even use it these days with the new V4? There's a new version of jQuery out. I didn't even know that. I haven't touched jQuery in years. I used to use it all the time, basically all the time, but I haven't touched it in years now. I don't, and then I don't know much about Shopify theme development and I don't know other channels that cover it actually, which is surprising because I know a lot of weird niche topics but I don't know anyone who covers that but I'm sure there are good things because that is a big market. The RobHumanTime.04 loops, yeah. So you can do loops with SAS if you wanted to or SCSS, but you definitely can't do it for the time being in regular CSS. Fisher, oh, he's answering the question there. Thank you, hidden singer. Show them a real, okay, yeah, we'll do that. Thank you, B1. So normally, I'm showing the attribute selectors. They're very bad examples of attribute selectors. So what you might normally wanna do, what's up? What you'd actually wanna do, let's actually, one second, let's get dark mode back on. Come on, there we go. I already have, my entire background is white because I use it on my screen to like light me. I don't need the website to be light too. Let's see, we have a, okay, there's different reasons you'd use attribute selectors. I'm gonna show you one way I use them that people don't necessarily like but it's an example. So click me and then we have a button and me. And here, so you can have a class of button on both of them. And then you might want this second button to look different. So we could say that it's a data type is going to be accent. So some people use, instead of doing a data type on this, they will use a, just another class because I could just do button, button, accent or whatever, if you wanna do that, that's fine. I just wanna show an example of how we can do it. Data types are often used when it comes to JavaScript stuff too. You wanna add a custom attribute on there because you're actually, do I have? Like one time you might wanna do it is for like theming or whatever you're applying stuff or it's a hook for JavaScript basically is how you can see data attributes. But another example would be my buttons. You could say your button is normally going to be we'll do class of button is normally gonna be let's just do it fast, padding one REM to REM, font inherit. Just so we have something really fast. These I generally like having as Ms. It's gonna be really big, but whatever. And then we do my, I don't know what the background is blue. And then my button with a data type accent is going to be background red, whatever. Very fast example, but it's just one way that you can select things instead of using another class selector and the square brackets just mean select based on an attribute. So, if you wanted to, you could do this. I wouldn't suggest it, but you could do class is equal to button and it's gonna select your classes with a button because class is just an attribute. But we don't have to do that because thankfully they gave us the dot that replaces this, but that's all the dot is really doing. So that's one use of data attributes. They can be used for lots of other stuff though, but just a really quick one. You could also, I've used them for navigations too. So you can do like a nav link that is area current equals page. So you can style your current page based on if it's your current one, but that assumes that you're using your area attributes and stuff, but yeah, there's lots of different use cases for data attributes or for attribute selectors, I should say, other than trying to make very short ones like I've been doing. The only reason I had, the only reason I did it like this is just because this is like a silly challenge, it just goes faster. So this is not something I would ever do in reality. I would do stuff like this in reality instead. This is very simple. Just get it as fast as possible and not worry about naming stuff and using less characters, I guess. The only difference between a data type, again, data types sort of, a class is a more traditional way of styling stuff and selecting stuff within CSS, whereas the data types, as I said, they're often people use them as like a custom attribute that is a good way to sort of indicate the purpose of something. You can use it for state a little bit and other stuff. And it's a sort of like, so it's like, oh, this is part, something I'll be interacting with with JavaScript and that's often how people do it. Like this, if it's for styling purposes, I'm gonna use a class selector. And if it's something that I'm using to hook into a JavaScript, then I'll use a data attribute just to make that distinction. It's not 100% how I do it, but it's an option or one way of looking at it, I guess. What do I think of Wix and drag and drop website builders? I think they have their place in their market and it's fine. I've heard good things about Wix recently. I haven't used it in a long time and it was a really, I was not impressed with it when I did use it. I think they're even opening up like, Wix is like a headless CMS or something. Maybe, maybe I'm making that up, but I think they're up to like more developer friendly stuff these days. But yeah, as drag and drop editors, they have their place. They're allow people that wouldn't otherwise have a website to have a website. So I'm happy with that. There's nothing wrong with making things more accessible. It's people that wouldn't generally be paying a lot for a website anyway. And then those people, when their websites successful, they often outgrow Wix and then end up having to hire people. So I think they're fine. I wouldn't want to use one, but I think they're fine. Can you style, can you do CSS style if you hover the button that the background animates from left to right? Yes, you can. I have videos on that. So if you just look up, just do a search for background animation or gradient animation. Background animates from left to right into another color. Yeah, you'd need to have to have a gradient and you're sort of changing the background position of the gradient. I'm not going to look at the other, I'll look at what they are actually. I wasn't going to look at them, but I'll look really fast, but I don't know if I'll have any insights on them because I'm not the right person to be giving advice on CSS battles at all. Number 11, I know you guys can't see it. I'll pull it up if it's interesting or if I have any insight. Overlapping pieces, I think, right? So like that's a border on a circle and then you're just hiding the other part of it. I think that's what I would do. Just with something that like go on top that's the same as my background color or you clip path it as well, like we saw. That could work if you don't want extra divs floating around. 59, where is 59? A blue circle with stuff on top of it that just makes the background look like it's coming through. Or again, no, I wouldn't want to do that with a clip path. I would probably just try overlaying stuff on top of it. And 56, the skull, the skull is just a single element. Border radius on the top 100, yeah, VW or just a really big pixel value. They can be squared off at the bottom and then there's just like, oh no, actually it would stop down here. So you have the border radius is really big on the top and then small border radius that does like the sides. Another element here and then just overlapping stuff to cover it up. I think that's what I would do. That would be my first try anyway. Siegel, have I ever used CMSs like WordPress? That's how I got my start in web development professionally. I was building child themes with WordPress. So yes, but I haven't used them in a long time. I haven't used WordPress in a long time. More recently, I've used Prismic, I've used Tina CMS, I've used, there's another one that I'm forgetting and I've played around with a whole bunch of CMSs, but those are, yeah, I don't do a lot. I haven't used WordPress in a long time. My error 404, are you going to make another converting a website figment design to code? I will at one point. They just take a lot longer to make than regular content. So I don't do them as often but we'll get there at one point or another. I missed the question, but I agree with that Rob human about AI taking our industry away. And I would say if AI does eventually get good enough to literally replace developers, it's not only developers that have to be worried. Like when it hits that, that means like the self-driving cars are probably good enough to be completely self-driving. That basically any job at that point will be replaced. So the world will be a very different place when that does happen. So I'm not worried about it. Would that be, there'd be a weird transition I guess if ever we get to that point. But yeah, just seeing where it's at now. And often we over, we look at where things are at and we assume they're going to be a lot better than they are. Just because the first 99% is the easiest. Well, the first 90% is usually the fastest and the easiest to get. And you're like, look at this. If we continue at this rate of development we're gonna be like this crazy place in the future in no time, but the 90% was the easy low hanging fruit. And then every increase, like every percentage you go from there is harder, more expensive and takes more time. So when you get to that final like 2% or 1% or even 0.1% that you need to finally make that like last step, it just, that's the hardest part of the entire thing. So it just takes forever and sometimes potentially can't be done. Well, I do a video like my advice to software developers from insert years of experience, probably not just cause I don't have advice in that traditional sense. I could tell people advice with CSS all day long, but I've been like doing so like non, I have the most non-traditional path to getting to where I am now. I don't do a much production work anymore. So that makes it so it's like, who am I to say? I don't know. I've just never had like, I don't feel like my life experience, I could tell you people all about it. I just don't know what advice I would have for like specifically when it comes to helping people within the space in a certain way, just cause mine's been so weird. What are the possibilities for styling text area resize handlers? That's a good question. Asuda elements can be helpful there, just positioning them where you need it to be. And my other son is now home one second. He might make an appearance. We'll see. Sorry, I got a little distracted there. I don't know if I answered the question, but yeah, if there's, I see B1 mentioning, if you have like specific code related questions, link in the description for my discord, it's a lot easier. What react styling links? I don't suggest any cause I don't use it enough and I don't think I'd be speaking from a place of experience there. I think style components are fine. So if you're start there, but yeah, there's other people that probably have much more experience there. How do you complete the projects instead of leave it after some time? That's every devs problem, right? I just remember that a lot of side projects and stuff, it's not about finishing the product, it's about the learning that you do while you're doing it. There was a discussion about that in the discord actually this morning. Learning front end worth it in 2024. I don't see why not. I know the job market's like really rough right now, just cause all the companies seem to be downsizing, but that was also at the end of the dot com bubble and it was a period before that. And then all of a sudden it goes through a huge period of growth and then it goes back and forth and like everything else, it's cyclical. So no reason not to get into it. And Irving asking what I think about full stack. I mean, if somebody's into wanting to do all of it, no problem at all. You know, it's sort of the jack of all trades versus how focused you want to get. There's probably some people that are, I know there are some people that are very talented at all of it, but I don't know, it depends what you want to do. And there's a job market out there for it. Do my kids CSS battle each other? No, they definitely don't. I don't know, I live in Canada. I'm in Halifax on the very east coast of Canada. I had a feeling. Oh, the resize handlers. Yes, before we were distracted. Yeah, I think pseudo elements are a good way. You can sort of position a pseudo element where the rehandler would be just to give it a little bit more space. And I think there is a pseudo element or something we can do to do something with them. But I don't know if it's cross browser or not. How good am I at JavaScript? Mediocre. I can get by with it. I'm fine, but I'm not the person you'd want teaching it to you. How's that? Is it harder to get into front end as a beginner now than it used to be in terms of other? I don't know about that. Just cause I don't know enough about the other branches of software development to know for sure. Aslan, I don't know any developers from Uzbekistan, sorry. Five things I wish I knew before becoming engineer or front ender in field general. See, that's why I think I wouldn't be the best person to have like one of those like general advice for new people type things getting into it. Cause I honestly don't know. Just because I took such a, like I didn't ever envision doing that as a job. So it wasn't like all of a sudden, like I very slowly transitioned over years to sort of go from design into part time development into more half full time development into teaching and like it was just this weird thing that kept changing. So yeah. Josh, didn't we get a bunch of snow a few weeks ago? Yeah, we got, was it two weeks ago? We got, I think it was close to 60 centimeters or two feet between 40 and 60 anyway. And then yesterday was a snow day again for the kids cause we got like 25 to 30 centimeters. So just under a foot. So two nice dumps, but there is East of where I am cause I'm right in Halifax, but if you go all the way out East of the province some areas got over 150 centimeters, which is insane, which is what in feet? Three, four over five feet. So yeah, the pictures from out there was kind of wild. Jackie, you I only stick with regular CSS on my channel occasionally SCSS cause I do teach that as well, but I don't touch on tailwind, but most of it, almost everything is just Vinella CSS on my channel. Mr. Henney, my studio looks great. Thank you very much. I'm really happy with it. Since we moved, that was like one of my priorities was getting this place set up. So I'm happy I finally got something that looks good. It took a while, but we got there in the end. Josh, you're in Calgary. Didn't you guys have really cold weather for a while though? Like absolutely frigid. Just a stream. Yes, I don't do them often, but we're here. Also, you're not a JavaScript guy, but do you have any resources on post CSS plugin development? Everything I've seen is how to use existing ones, but not how to build a new one. Oh, that's a great question. I don't, just cause I've never tried to build one. I should try and do one. I don't know what I do. I don't know what I would create one for, but yeah, I don't. There must be something out there though. If anybody in the chat knows, please leave a link or if you can't do a link, you probably can't do a link. So just put the name of a site or a resource or something. And that 2503 of really good explanations on courses. Thank you. James from Florida. I'm sure you have much better weather right now than we do. What's my day-to-day Brandon making tutorials, basically. That's, well, I mean partially. I have a few side projects that I'm working on too. And I have one potentially very big one coming. If I go back not too far, I was doing more production stuff and doing consulting stuff along with YouTube. Cause I went full-time with YouTube in 2021, 2020, 2021, some time around there. So it's been a while now. So at the beginning of that, I was doing a lot more actual work. So it was like full-time YouTube, but just I didn't have like a job job. But then I just started doing less and less of it cause I could focus on other things and focus on this. So it's a lot of just planning content, making content, learning stuff to teach and all of that. Can I give some ideas on my upcoming videos? I just recorded one today on fixing something for light and dark themes. If you're using the color scheme, what do I have planned? I don't remember at all. My next two videos I recorded like a month ago. So I don't know. I have a cool video coming up on Color Mix next week. I can give you a little preview cause it's fun. So one thing I didn't know until recently is if you have text and then let's put a link here. So if you have text or whatever, it doesn't have to be text, but let's say we have a link here. And so my text, let's just say, or we'll just do the link. We'll say a color and we can use color mix, which is super cool. I love color mix. But what I didn't know is you could use current color in here. So you can say, so let's just say we did, I don't know, what's a darkish steel blue? Just so it's kind of dark. So if we look at that, it doesn't pass accessibility. Probably I'm guessing it won't on the dark background. Oh, it is. Look at that. Okay. I was assuming it wouldn't. It is kind of dark. So let's just say you wanted to make sure that your link color was always working. You can say that instead of steel blue, we can say that the has a color mix of current color, which is basically white. So current color, color, and then steel blue at like 80 or say 70%. So it's going to lighten up the steel blue. Let's just make this like 50%. So we see it even more. It doesn't seem to be working. Why is it not updating my code then? Is that 10%? Is it updating? We just don't see it. Come on. I did something wrong. Steel blue, 10%. Color mix. Oh, whoops. In lab. There we go. Now it will change. There we go. It went to white. It's my head on top of it. We'll move it down. So here we can do like 50%. So it's like 50% the current color plus the steel blue. So you can do it like at 80 or whatever. But the nice thing with that is then if I turned off the light mode. So color scheme goes back to light. Now it's mixing the steel blue with the dark. So you're getting like the best of both worlds because it's based on whatever the text color is. So I thought that was kind of cool. So we have a video on that. A little bit more detail. A background property nobody knows about. I'll leave it there. I have a new one coming up on specificity. Some other, I don't know after that. Nothing too exciting. Do I have, what advice do I have for a YouTuber to other beginner software dev related YouTubers? Your channel is a large and you definitely know what you do. So I got, as a YouTuber, I got here by accident too. Which is like my entire life has just been me stumbling along basically. But consistency I think is really important if you wanna grow a YouTube channel. Just get videos out there and don't be disappointed if nobody's watching your videos for the first six months, nobody watched any of my content. So it takes a long time. The Rob Human, yeah, Color Mix with Hover and Focus is a good, very good idea there too, yeah. Do I have any goals in IT that you're still trying for? No, I mean, I have like projects and stuff that I wanna work on, but I don't have, I sort of got to here by accident. So maybe it's not the best life plan, but I'm just sort of going with the flow and seeing what happens. Do I use vanilla CSS for production grade projects? No, yes. Depends on the project is, it depends, that's like the answer for everything, right? It depends on the size of the project. If it's a small little site that I'm working on, then you have vanilla CSS, no problem at all. Once it passes a certain thing in my head or it has the potential to, then I have sort of a SAS template thinking that I use that's sort of like my own design system-y thing that I've had for a long time. So I use that instead. Josh, Mr. B says the first 100 videos will be bad and no one will watch them. Yeah, the problem I had was after six months, my first, first, first ever video got picked up by search and became my most popular video for four years. So that was great. But yeah, people don't watch at the beginning. So just make content if you ever wanna get into it. Thank you, Ahmed. That's very nice of you. I appreciate it. Do I edit my own videos? Not anymore, but I did for the first six years. I now have an editor for most of it anyway. There are some videos I will edit myself. Jess, I hope we get CSS color contrast or contrast color soon. Yeah, the problem from what I understand, the problem there is all the conversations about the algorithm that's used for checking color contrast is problematic. And so I think they wanna wait until they figure out the best thing to put there. At least that's the hangup that I've heard is there's disagreement on what to do about that side of things. Green thumbs, how do I balance cascading versus scope styles? So generally I go like sort of the global style sheet that's gonna be involve all the stuff that's like my reset all the global-ish styles, background color for the body, font sizes, font family, anything that would inherit that I wanna inherit, all of that stuff. I try and get as much as I can into just my general styling. Then I'll use, I've started using scope styling now for a lot more stuff, but not for the scope styling aspect of it, just for like organizational reasons. So like components, I'll just include the CSS within that component because it just makes sense that it's all living in one place. But as much as possible, I try not to do it for the scope reasons that you get with it. It's more about just, it's a kind of convenient way to be organized. But I try and lay out related things. They're all in my global area. I try to have a lot in the global side of things. It's tech show. I don't know the best way to become a developer. I'm really sorry. I wish I did, but yeah, I just, I'm not sure. Cause as I said, it took me a long time to figure out that's even what I wanted to do. I did it as a hobby forever. It just takes forever for me. So I don't know what the best, the best way to do it is. I do not use HTML or JavaScript and CSS to edit. No, the Rob human. Thanks for hanging out. Navin Patel. Thank you very much. That's super generous of you. I appreciate that. All star Kuro. I have trades felt. I like spelt very, I'm a fan. I've more recently shifted over to Astro instead. Well, not instead. Cause you can use spelt within Astro, but just, I don't know. I started playing around with it and then built some projects with it. But before that, I've built stuff with spelt too. I like it. And I know there's a big release coming out soon. Did it already land? I'm not sure. There's another big change coming to, or big change, big update coming or came, but I haven't been following that too much. So yes, very much to adjust about container queries. Super awesome that we have them. Green thumbs. Thank you so much. That's amazing. I appreciate. I appreciate that very much. Have I tried HTMX and Alpine? I know them, but I haven't played with them, no. I'm a little torn on HTMX and whether, yeah, I probably should play with it, but I haven't yet. Why are there so many new color properties in CSS? When do we use OKLCH and forget about the rest? So I was really excited about OKLCH and just LCH in general, until I realized it's not as easy to pick colors as I thought. I'll see each one second. Is it this one? Yeah, so if you don't know, if you have, let's get an HSL color picker first, HSL color picker. So the problem with an HSL color picker is you choose yellow and you make it like right in the middle of yellow and it looks good. And then you want to change the color. So you go to your blue and you're changing the hue, but you've left the other ones the same. That's why it's amazing, because it's really easy to do that. But the problem is this yellow is like perception wise, the yellow is really bright and then this is kind of dark. So if you have text on top of these things, when should your text be white? When should it be black? And just the perception like, okay, then I did that. I thought I'd be keeping with everything and it falls apart. LCH fixes that in terms of once you get into your things, you just go along with your chroma, not the chroma, the hue, and you just go around and it's always matching the human perception. So if you go to your yellow, whereas the yellow is like here, so you're yellow, you go to the blue, it's just as bright and just as dark and it matches human perception much more closely. The problem is the part here where the top, because you have these valleys that deal with the chroma. So if I go light, I can get into like this really, see how the green here, like I can go at this really high point because we get this like insanely bright green color. Let's just see if, oh, we're not getting, I can't even see it because my monitor doesn't support the P3 colors. But we're getting, like you can get up to this extremely bright color that my monitor can't even show that's not available in any other hue. And so you end up in this weird fallback range where you're getting like really diminished colors for some stuff because of the combination of my lightness. And if you change your lightness, like these peaks change completely and playing around with the chroma, like it was this thing that sounded amazing. And the more I try and use it now, it's just awkward in a sense because as soon as you change your lightness values, the chroma value window changes so much and it becomes hard. Like it's not as intuitive as I was hoping it would be. That's the major issue I have with LCH. And if people know a simple way of helping deal with that, that'd be really cool. But yeah, so that's, I think the issue, there's lots of new color things is when they introduced LCH, they said, well, we might as well bring in other things too. Lab makes sense because lab's better at converting between different color spaces. They sort of just took all the different things and said, we might as well do all of this. They even introduced stuff that's not even, like no monitor can show just so it's future-proofed and other stuff. And if you do want to ditch everything and just use LCH or okay, LCH, you could, I would just wait for browser support to be good enough and then you could or if you don't mind working with fallbacks, that's another option too. Do I like Astro more or View and Next? I prefer Astro, but I do like, I haven't used View in a couple of years now though. And I haven't used it with Next. So that is, I guess, a bit of a limitation. I think one of the things I like about Astro is it's like, you don't have to do anything fancy, but if you want to, you can. So you can slowly like plug and play in this extra stuff and you want to bring View in, we'll make a View component, no problem. I sort of like that sort of agnostic-ness of it all. I think it's kind of cool. But that doesn't mean that there's anything wrong with View and Next. I think, you know, they're cool tools, same, you know, Next.js does lots of really cool stuff too. So like, depends what you want to do and pick one and go with it, I think it's fine. I'm gonna, I might miss a few questions here because I'm just scrolling really fast. So I do apologize. How do you get good at CSS? Do it. The more you write the better at it you get. I think is a big part of it. Woodstrap or Tailwind, if I had to choose one, can I choose Tailwind and then just use AdApply for everything? HTMX is more for connecting to the backend, right? Yeah, I've heard, was it the syntax guys who described HTMX as HTML for backend devs? I think it was them who said something along those lines. Jim McDonald, where are you in Nova Scotia? How many mon, I have an, I don't think I have a way of showing my setup because my camera is really fixed in place. I might have a, no, I don't, do I have a picture? I don't think I have a picture of the setup but I use an ultra wide now. I have the G9. So it's like, it's big. And then I have my camera up here. I don't have my phone on me. I would just take my phone and show you guys but my phone's in the kitchen charging. What are your thoughts about writing CSS from scratch? Time spent versus modifying stuff in example WordPress theme, in terms of longevity, knowing that a lot of sites might live just a year or two. I hope a site doesn't just live a year or two. Versus, I mean, it depends, so much of it depends on the project too, right? And like, what's the budget? What's the priorities and everything else? If I'm starting a new project, I very rarely start a project from scratch anyway. I have like starter templates I use, so I'm not starting my CSS from scratch. If, you know, it depends, yeah, it really depends on what you're building and what the purpose of it is and so many different things. Senegal, do I have, I've been answering your questions and I think every time I say your name, I say it differently, so I do apologize. Do I have a podcast? Well, I participate as a guest on somebody else's. I have one. I've put it to sleep for a little while, but it'll be coming back probably next month. There's another YouTube channel. I don't know if I link it in my description or not, but if you look up Kevin Pellogen or Musings, it might come up. So yes, I have one. It's on YouTube and it's also on all the podcasting news and I do participate as guests. I was just on LogRocket. I have another one I recorded yesterday with somebody else. I've been on at least a dozen, if not more podcasts, so yes, I do both. Are there any books you recommend forgetting? Okay, so I don't know. There is one and I keep forgetting the name of it, so I apologize. Why is there CSS Battle in the title of the stream? Because I did four rounds of CSS Battles earlier and I finished, so I'm just answering questions now. Sorry, firegamer. If you rewind the stream, you'll find them. As I just saw a bunch of people in the chat telling you too, sorry. Andre, the technology showing the setup while filming is called a mirror. Oh, a mirror, I don't have a mirror either. Yes, that's a good point. Do I prefer writing CSS in SCSS or regular CSS? No, I prefer working in SCSS for large projects with what I have in place because you end up spending less time writing it, which I enjoy writing CSS, so if I'm firing up a new project, I'm just these days a small thing, a demo or a single page thing I'm building or whatever, I just write regular CSS, but as soon as it's something that's gonna be at scale, I just save a lot of time, so I'll do it in SCSS instead, just because part of that is what I have in place that just makes everything go faster from there. Thank you very much, Justin. That's nice. Rob, human, you're back. I don't know how much longer I'll be here, but. Show, movie, or series, I've been really enjoying recently and why. I just started watching Peaky Blinders, it's been okay. I think we're only three episodes in. I'm reading, oh no, it's a show, movies, or series. What, I don't watch a lot of TV. I'm sort of trying to get through the latest season of The Witcher. I enjoy it. I don't watch a lot of TV, so. What else have I watched recently? I'm trying to think what I watched before me and my wife started watching Peaky Blinders and I can't remember what it was, so it probably wasn't that good. Kristen Kirk, I just put a video out on that a week or two ago on the difference between media queries and container queries. So media queries, just looking at the viewport, the browser window only, whereas container queries, sorry for knocking the mic, container queries are looking within smaller spaces of where elements are living. And there's sort of limitations to container queries in that sense that you have to have defined containers. But yeah, I would point you to that video. Did it come out already? I think it came out, yeah, like two weeks ago. So more container query and subgrid content. Yeah, I have subgrids like that thing I waited forever for and now I'm like, oh, I could just do this instead and I haven't had to use it as much as I was anticipating I would have. But I was also waiting for browser support to be better, which it's getting there now, so it'll probably have more coming. Death, Marty, no, I don't use the plugin to convert my SCSS files just because I find maybe the latest plugin, like there's probably one now that's been fixed, but like they made a big change and the plugin wasn't being, it was like four years ago, they made a big change to SAS and the most popular plugin project had been abandoned. And so nobody, like you were just on the old version of SAS because you couldn't change it. And then they changed a lot. And so like that's the problem with plugins for stuff like that. And it's not hard to find other systems and build steps to do it for you. I have videos on easily doing it, I think. Am I mostly doing flat websites with no CMS or database or CMS base sites? I do both on my channel. I generally don't do too much. I might do a bit more CMS stuff in the future. It's just longer, so I tend not to. But yeah, in reality, I do touch on both. Most of the side projects I build have some sort of CMS thing running in the background. What do I like best, flexor grid? Is, we talked about it a bit before, but they're both perfect. So I won't say perfect, there's some things with them, but they're both great. It depends on what I need to do. I usually compare it to like, how do you pick the right pair of shoes? You're gonna use your sock cleats to go play soccer, you're gonna wear your dress shoes to go to the office. So they each have their own specific purposes. V1D300, yeah, I just finished all the, oh, I don't remember the name of the series from Sanderson. The one that was on, the one that everybody says you should read, I think they're making the movies on it now. And now I'm reading another one that I don't remember the name of either. I'm not good with book names and I don't have my phone on me, so I can't check. But yeah, I'm on a bit of a Sanderson kick at the moment. My typing speed. Let's find out one second, I'll share my screen. I don't remember what I'm at. We'll have to end it soon. It's 3.30, I'll have to end soon. But how many words should we do? This is monkey type, if ever. This is thanks to some people on the Discord. This is, I found out about it, quote, that's too long. That's, oh, CMR already off to a terrible start. Why I came here, I love. Laugh at that if you want. You can see here, it doesn't match. Is it weird that I'm talking while I do it? Oh, this is longer than I thought it would be. Jesus, I'm going off the rails now, so it won't be as good as I can probably do, but I would be much faster on a shorter one with a catapult. Okay, we're doing a shorter one, I'm tired. I was only like halfway there. Let's do medium. I just thought, like, okay, let's just try this one. This one's poisoned, the water polluted. This one's longer than I thought it would be too. Oh, there we go. They had real, not bad, that's about as good as I'll get. One of these days, maybe I'll crack 100, but yeah, that was a good run for me. But there we go. Douglas counts, is it the one used this instead of media queries? No, it's not that one. I'll get the name of the video. I'll put a link to it. That one's not a bad one to watch either, though, but that one doesn't look at either one of them. And actually, something cool from that is Miriam Susan posted a reply on Mastodon to me about that video, and when I found out, I'll share it with you in a second. I was like, ooh, that's a cool idea. Here, this is, I'll get a share of the link. This is my video on media and container queries. Let's go back to CodePen. So I don't know where I would use this, but let's come here and do it at media. So she was doing it on a container query, but then we found out we can do it here too. We'll just say min width, and I'm just gonna do something random here of like, I don't know, whatever, you can do calcs here. 300 pixels plus 10 pixels. I don't know why I would do that. But you can, and that's not a good example. We had better, or she had a better example here, but let's just do HTML color scheme. Scheme is dark, and I should probably make this like 600, or 300 again. So if we go below that, and it's 600, it goes over. So you can do calcs here. She was using it in a way that was to, because in the video, the one where I said, don't use media queries or you don't have to. So it's like, say you want something to go to three columns, where you can use this to calculate when you go, okay, well, I have my column should be three. I want my column to be 300 pixels. So then you can do 300 pixels times three, and then like plus one rem or something for like a gap number or something. So you can get it to like actually switch based on the size of the children and stuff. And I was like, oh, I didn't know you could do calcs inside a media query. And you can do it with container queries too. And I think that's kind of cool. I don't know what browser support is on that at all. I'll answer a few more questions and then we will have to get going. Have I ever used SusieGrid? Yes, but it's been a very long time. Should you learn a CSS in 2024? It really depends where you're at right now. If you're far along in your HTML journey or CSS journey, I don't see why not. How to choose a better username? That's not a good question for me. I'm terrible at naming things. HTMX, I mentioned before, I don't really have an experience with it, which is basically zero experience with it. So I don't have an opinion of it. Though there you have V1, D300, those are the, I finished the Mistborn and now I'm reading Stormlight, exactly. And I did one in between two that was a one off, but I don't remember which one it was. You have, Karen, I have an entire course about a CSS and learning it. So I hope I'm decent with it. It's called beyond CSS if you're interested. Bamook, I haven't touched React in a long time now. I do have experience with it, but I don't, I tend to avoid it when I can. Should you learn DSA for software development? I'm not the right person to answer on that one. What's a glib text? Is that one of the options in monkey type? I don't see anything. I don't know what that's referencing. Oh, what a glib text. I thought you were asking what it is. You're making a statement. Yes, it was. I thought there was like a setting in monkey type where you could choose like this, you know, what style of quote or whatever you wanted. I definitely cannot speak Hindi. I apologize, but no, I can speak French and that's about it. And my French isn't as good as it should be. Consider I live somewhere where French was the primary language for most of my life. This will be, so as soon as this is done and YouTube processes it, the live stream will be available as a live stream and there will be an edited version without all the Q and A stuff eventually too. Do you use all fingers and thumbs while typing? Yes, I do. This I can show actually, I have a split keyboard. So I sort of, there's one half. So I have, I'm sort of forced to touch type. So I do use both, yes. Or I use all my fingers and thumbs. Is there anyone who knows CSS for emails? Anybody who was a web developer in 1990 to 1990, that decade. There's some good tools. I did an interview with someone who is an email developer on my channel a while back. So if you look that up, you'll probably find I put resources to help. And there's like different things you can use that processors, preprocessors basically to help you make it easier. The reason HTML and CSS is hard for emails because the email clients use very old rendering engines. So I don't, I know Outlook just just got a big update. And I think it was not the previous version but the version before that it might even be, anyway, there is a version of Outlook that uses Microsoft's word, Microsoft words, HTML and CSS rendering engine. So that just gives you a little bit of an idea. Hidden singer, you're sleeping, waiting for me to go first. Yeah, a couple more questions and I'll get, these always drag on because I always say I'm gonna go and then I never do. But I will cut it off very soon. Will front and die in the future? I hope not. I don't see where it's going. Sorry, I thought my dog wanted to come up. No, the, yeah, I don't see why it would die. Hope not, because I'm pretty invested in it at this point. I think it will evolve and change VR or not VR AR will become part of it and how that's gonna work and other stuff. But yeah, I do think it'll change and evolve over time. But it's, I don't think will be turned into anything else at least not anytime soon. And the chatter is slowed down. You demand the pupper? Let's see. She doesn't like being picked up all the time. That's it. There we go. You can see not the happiest to be on, in my arms. All right. Ruby. I think she wants to go for a pee. So I might have to go. I don't have a cat. Just a dog that's smaller than a cat. One more about a CSS file. No, I'm gonna have to jump out. Do you think it's okay? Del Royce? Sorry for saying your name wrong. I would say you look into post CSS and there's like the, you know, you can, if you don't want to go into like down the SAS route or anything because that involves more stuff with post CSS you can bundle multiple files into one. Yeah. My perspective on web components, they're really cool. But I don't know if there's issues with them that I think when it shipped everyone thought it was like, this is what we need. And then once people started using them they realized like, oh, maybe there's certain things we could have done differently. I think just because like there's a few limitations and like things with them that are sticking points that are preventing them from becoming more useful than, because I think they're awesome. But yeah, it just seems to be that there's like a sticking point with them that's stopping them from being bigger. Divine203, I'm sorry to disappoint but I am gonna be signing off in a second but you can watch the live stream if you want. I don't know when I'll do the next one but do I agree about the king? I have a video called why I'm not the king of CSS. So that's my thoughts on it. No, I don't think I'm the king but I do think I get why, I think I'm good at communicating parts of it. So I get why people say that but I'm definitely, there's a lot. Everything I'm doing on my side is things I've learned from other people. So yeah. All right, with that I am going to sign off. So thank you all for coming and hanging out. I really enjoyed it, it was a lot of fun. I hope you all enjoyed it too. The battles were fun. I'm really happy we got that last one to work. I didn't, I was worried. But yeah, it was a lot of fun. I'll probably do this style of thing every now and then but it will not be too super regular but we'll see, I don't know. I enjoy live streams so I should do more. But yeah. And Divine203, don't worry about it, it's all good. You definitely don't have to apologize. All right, thanks everyone. I'm just gonna put up, it's not a very good end screen. I don't think I, oh, I have this. Ah, I do have an end screen. Just so if anybody comes in, the chat can finish going and then I'll see you all at one time or another. Bye everyone, thank you once again.