1 million subs!

Oh, wait. There we go. Hello, my front end friends. Uh, impromptu stream. I've been planning this one for a little bit, and I was actually hoping to go live before we hit a million subs, but we just did it. Um, I was getting all ready to to go live uh when when uh I I was watching it since this morning and I was like 10 away, 7 away and then all of a sudden it just went up to like one away and I was like what happened? Uh but yeah, here we are. We we've did the long journey and I just want to say a really big thank you uh for everyone for helping me get to a million. It's been it's been a journey to get here. Uh, one of those things that I didn't think I would care at all about. Um, but now [clears throat] that we're here, it's pretty cool, [laughter] I have to say. Uh, so I just want to say a big thank you to everyone uh, for helping me get to here. So, we're going to do probably not the longest stream. Uh, it's Saturday, so we have family obligations and things to do, but I do want to celebrate a little bit with with all of you. And I did jump on right away. I didn't do like any there was no announcement of this coming. I actually thought it would happen in a few days from now, but let's go get the official counter. One second. I don't know how to this one probably. Ah. Oh, I had the counter on screen, too, because we were going to wait for it to go above. There we go. Um, but yeah, we did it. So, uh, see everyone in the chat, thank you everybody, uh, who's in there for the the congratulations and again for for getting me here. It's, you know, a CSS channel that managed to get to a million subs, I think is pretty cool. Oh, Henry, thank you for dropping in. Send me some tin bits. I would me my kids would appreciate that. So would I. Thank you. [gasps and laughter] Um, yeah, it's I think No, that's not the chat. I want this chat over here. There we go. I think I'm on Twitch as well. So, anyone who's on Twitch, [laughter] this is obviously a bit of a YouTube celebration. Uh, but you're more than welcome to to hang out in Twitch for this one. Uh, I hadn't streamed in so long either. I was like trying to like figure things out to make sure it was going to work. Um, I was debating doing it last night, but decided to wait till this morning, which another like 15 minutes earlier, and we would have been able to see the the the thing roll over uh to where it is now. But that's okay. [laughter] I got a picture of it or screenshot of it right as it hit a million. Um, I think we get Let me refresh. I think we get fireworks. Let's see if it still does that. There we go. Oh, and we we've lost one since going live. [laughter] Uh but yeah. Uh so let's go back to uh I don't have hotkeys set up on my stream deck for when I have the chat on screen. Um for anyone who's watching, I see somebody on Twitch saying, "Is the stream broken?" If it is, I would suggest coming to YouTube where I think it's working. [sighs and gasps] Um, what do I plan on doing on this celebration? That is a good question. [laughter] It's a little bit impromptu cuz uh this has been like 2 years coming where I've been within probably 100,000. Uh, so I have been thinking about it a bit and I never came up with a good idea and because it is um, yeah, we're just going to have some fun with CSS basically uh, and do some things. I can answer questions uh, and other stuff like that. Oh, we're back down to a million. Are we gonna There we go. A bunch of people unsubscribing. So now we can get the roll over. Wait, wait, let me switch uh back to this one. No, bought this one. Oh, yeah. There we go. Maybe I was on this the whole time. I don't know. Uh for anyone who is unsubscribing, um we were there shortlived. I guess it's time to retire now since we've we've dropped back down below. [laughter] My son is coming to to congratulate. [laughter] We're back. We're below a million again. Sean, they're all unsubscribing. This is funny cuz I was debating going live last night. Um, but I didn't cuz I was like 30 away and last time I did a live stream I lost I think 20 subs. Well, we're going to have to I guess we'll put the counter back up on screen then. Except it's gonna be a weird stretch. This thing that I'm using to get We're going. We're just dropping. So, you go live. You go live and people just start leaving. Uh I see once I'm just going to send a message on Twitch. Um I'm going to second 100K. Is working on YouTube if it's not working on second 100K. Oh, this [laughter] so this is what he was at when like like when No. So I was like like in like five minutes he was at n he was like at 991. I was like, "Dad, you're at this." And then I eat breakfast. I come back and he's only he's like three away. Yo. Yeah. I was like seven or eight away and then my son started calling me, "You're almost there. You have to start your stream. [laughter] [gasps] Yeah, let's get back up to a million and then we'll start having some fun with CSS. That will be our like our goal, I guess. [laughter] Um, yeah. But yeah, if anybody has any Well, we wait to get there. If anybody has any questions or stuff, um, more than more than happy to answer them. It looks like we're we're back. There we go. I I I I feel disappointed that I didn't set up like confetti or anything to go off, but we did [laughter] it. Thank you everybody uh for getting me there. That was great. The son is my the best support. Yes. He's going to be happy because he can brag to his friends now that his dad has a gold play button, right, John? Yeah. Yeah. [laughter] Oh, there we go. Now, now we're we're we're flying up now. Thank you everybody. [laughter] Cool. So, we've done it and we are there. So, uh two things I was thinking about doing and I'm going to have to set them up off screen because as I said, I really wasn't ready, uh I was thinking about playing I got a terminal, which is a terminal. I got one of these guys and I haven't actually done much with it yet. And I was thinking we we can write CSS to like get things on the screen. Uh so I was thinking about setting that up on stream or I could just answer CSS questions. Uh or we could dive Look at this. Now we're flying up. We're doing great. Uh yeah, thank thank you everybody. I I keep going to want to hit my stream deck, but this is like when cars hit a 500,000 or a million kilometers. [laughter] Yeah, thank you everybody for the congratulations. Um, Raphael, you've always struggled with CSS. My latest fund CSS fundamentals on front-end masters course helped a lot. I'm glad to hear that. That's awesome. Uh, I really like that course. Can't wait for the launch of CSSified V2. Yeah, I was hoping it would already be out. Um, but we'll it's it's just around the corner. Just just just around the corner. so let's just see if I missed anything else other than all the congratulations again. Thank you everybody. Uh, most goated snack. So goed. If you haven't had one, then I should do a video about completed. Are are you a permanent mainstay on this stream, Sean? Um, do a video about typed division. That sounds like it's not my cup of tea. I don't know if you saw the one I did on on uh the video I did looking at. Sorry, I'm getting distracted. Uh the the one I did looking at the graph theory where I just had no idea what was going on. Uh, Raphael, yes, there will be a new version of CSS Demystified coming out as I said about two weeks. How many years between sub one and sub 1 million? Uh, it has been eight years, I think. Um, I I always forget what year I started, but I'm pretty sure it's been eight years. Yeah. All right. again. [laughter] The 2019 Muldovven constitutional crisis. That sounds more like something I would I would do. Unforgiven. Is it worth learning Bootstrap? Uh I don't know if I don't know if Bootstrap is the way to go today. Uh though that said, like it's still widely used so potentially. But um I it wouldn't be the first thing I would go towards in 2026, I guess. Uh let's set things up here so I can start writing some. No, I don't want the other half. Thank you. Um so I wish I that's the one I want. There we go. Oh, and see we have that weird thing at the top. We can the counter that is stretched and broken and my chat clearly is not set up properly either, but that's okay. Um, oh yeah, I put a link in the description of this. Uh, at least I I just realized the Twitch stream has the wrong name. I didn't set up Twitch at all and there won't be any links there, but on YouTube there is a link to um I'll be in April. In April, I will be in Amsterdam for Smashing Comp. So, I'm doing a talk and an Inerson workshop. So, if you're interested in that, the link down below gets you a nice little discount on the tickets. Uh, if you do want to check that out. Uh, Daniel, you've been following since 2015 2016. That's amazing. So, you've followed basically from the start. I'm trying to think when I started. Probably a little bit later than that. When did I start this channel? I can't even look in my analytics because I it was like my personal account that I just started uploading things to. Um, but yeah, it it you've basically been following from the start then, which is amazing. Thank you very much. Um, how do I make the background lighting? I just have a blue light on that side and a red light on that side facing my back wall. Uh, there. Let's just do a that. Well, you can't really see it, but there's a light there. And I have a blue one on the other side. There we go. Nine years now. Yeah, it's been a long time I've had this channel. Uh, I need it's The problem is it's set to stretch in the streaming software I have and the chat is really meed up, too. I don't know why it's not taking up. I have it set up to be really tall and for some reason it's not. I don't know. Um, what coding skills would I recommend a UI designer to learn? I'd say some CSS just to know what's possible. Uh, is probably the most important. Um, because then if you if you're decent with CSS, you can know some of the things that you can do. Let's jump on. No, close that. How do I edit this? I know this is off screen right now. I'm trying to get something ready for on screen. There we go. Okay, we'll probably play around with this. Let me zoom in. I'm trying to find where I change the CSS because it's not here. Uh, do I work full-time or like a freelancer? I educate CSS full-time now. Uh the 1 million subscribers is not enough to make a living on YouTube doing coding stuff. So, [laughter] uh most of my income is through course sales. you just unsubed and resub to see your name on the screen. That's fine. Uh, can someone help what to use instead of Adobe Photoshop and Illustrator? There's a few different options these days. Depends what you need to be doing, though. What do I think about Adam losing Mad CSS because of the wrong background color? Uh, I don't know if he would have lost anyway. I'm very curious what his score would have been uh if he'd got it. Uh, I think that it's how the game works. I I've I I've been in those panic modes and you don't notice that. It's one of those things with the pressure of the time limit on things. You just you don't even notice that it's that it's not there or you know it's it's so slightly off. Um, that's where me, Kyle, the guys from syntax, probably Julia as well have advantages of doing a lot of CSS battle stuff because you get when he put the diff mode on at one point, it was highlighting it like in pure red and he just didn't realize. Um, whereas people who are used to using the diff mode would be like, "Oh man, my background is off." So, uh, yeah, it's one of those things though of what we need of just what it is. Yeah, it is what it is. Cool. I think I'm set up with what I want to do now. Uh when am I going to be launching CSS demystified version two? I'm hoping I will say stick around for next week's uh well stick around. Next week's one should be interesting. Um do I plan on making a video with Bruno Simo to learn WebGL and 3JS? I've never planned it. No, but I should reach out to him to see if he'd be up for something. in your opinion, how far can you go with AI doing the CSS for you? Uh, the problem is I like writing CSS, [laughter] so I don't really experiment too much with it. Uh, I have my main issue is still today the things I have tried just to see cuz I I do like to be up to date with what it's what it can do. Uh, I have noticed it's a much much better, but it still likes def there's a few like default things it goes to that are like, oh, it shouldn't really be doing that. Um, that you can tell it obviously like, oh, you refactor this to like do this instead and it will. Um, but for people who don't know, like it it throws position relative around a little willy-nilly for my liking for no reason. It still repeats things that don't need repeating. it doesn't fully understand the concept of inheritance well enough. So, like it's one of those things that like if you ask it to do something, it'll probably do a decent job, but long-term building of something, uh, it's where it starts to fall apart. Some there is sound, the video is not in sync with the audio. Some people saying sound is completely gone. Sound seems to be back. Is everybody I'm just seeing let me check YouTube's live streaming thing here. I have an excellent connection and my stream health is very good apparently. So must be something a few people saying reload the page if you're having issues. Hopefully everything is fine. Restarting video fixes it. Okay, cool. So, I'm going to jump on over here, but we're just we're doing a chill stream. Uh, so ask questions, whatever it is. We're just here to have some fun. Uh, and if you want me to like jump in and do stuff, I can do that. But for now, let me bottom. We want this one. So, yeah, I got one of these guys, which is a terminal. Um, I think I put the link to it in the description. Uh, it's a little e- in thing that you can connect to APIs and stuff and get it to display stuff. Uh, and I figured for me, I was originally going to actually use this to countdown to like be able to see my and do a live stream where I was setting it up to countdown, but YouTube for my million, but YouTube's API for subs only updates every thousand subscribers, so it's completely useless. Uh, so instead, I set up an API on my website or an endpoint um that's getting the CSS working group stuff. So I can see when issues have been updated so I can keep People are always asking you how do you keep track of things. Uh this is one way to do that. So right now this is what it looks like and I want to make it like on my screen it looks like this and I don't want it to look like that. Uh so you can see I have the issue title when it was updated and comments actually. Oh no I had I think I have more. Yeah I have a most active recently updated but this is the recently updated. Uh, I'm not using the most active one right now, but you can see cuz they have the URL here. Um, or this is what we're getting from that. Okay. So, yeah, I wanted to keep track of things that are recently being updated and most active conversations that are going on. Uh, so we're going to do that and see if we can actually get this to look better than what we see here. Uh, the only thing because I they have their own styles and stuff you can do in here, which would probably be fun to do. Uh, I might I'm trying to think if I should open this in two different windows or not. Uh, just cuz I know I can or I can zoom out, but I want the code to be readable for you. Uh, so let's just Yeah, we're just going to do another tab with the same thing in it so I can see what I'm looking at. Uh, I think this isn't going to work, is it? Okay, let's just try a few things and see what happens. I didn't realize the f Oh, wait. I can do a pop out preview. That might be better. And can I zoom out on the pop out preview with Oh, no. It zooms out everything as you'd expect. Um, that's okay. We will figure it out. Uh, we'll figure it out. [sighs] The Twitch stream is completely broken. I'm sorry about that. I don't know what's wrong with Twitch. Um, you're hitting a dead end where static web development doesn't seem to give more upside with four years of experience in vanilla. I can't break into React or full stack with zero experience in them. That um yeah, static web doesn't give experience in it. I can't break into React with zero. I mean, if you start building with them and you get some experience with it, uh, just on your own stuff, like a lot of the skills you have will translate over. Cran the Kyle, you started with HTML and CSS three years ago and now you're a mer dev. Awesome. I'm glad to hear that. Uh, let's do I have this set up? I do have I can do this. Hopefully nothing important. not to some code pens in the background. Uh, and then let's try doing it like this. And let's just see if we can get something done here. So, I think I can just come in here. I haven't for each recently one. Let's just do this as a div and see where we get. I apologize for the small font sizes. We'll zoom in a bit. Uh, zoom out a little bit. There we go. So, a div around each one will help. Close div. Then let's try giving this one an H2 and refresh H2. Is that the whole title? Okay, let's do this as a paragraph. Let's just try and set this up to see if we can get some formatting on here. And this one would be a paragraph as well. Angular versus view. I don't use either one, so I'm not going to comment. I have used like I've toyed with them, but I've never done any serious work with them. So, I really can't comment on that. Oh, there we go. Oh, this this is annoying. I do know this. This is part of the title where they put that in there. I wish that would be easy to select and format differently. Um, this is my recently updated. So, like the title is literally including that, which I guess we could use like reax or something to figure out, but whatever. Um, now Whoops. Whoops. That's my variables. I think I can just come in with a style tag at the bottom here. And again, they they provide a whole bunch of things like you do not need to freelance this. There's layouts. They have like a their own framework, I think. But let's just do body font family system UI and see what that gives us. There we go. [gasps] So, I think let's save changes. I just want to see like right now this is what it looks like here which isn't you can't see it's small I know but I think I can push this live somehow the previews open in a separate window. I'm not going to worry too much but I'm pretty sure I can push them to there. But this is a this is basically what it would look like. So I'm not going to worry too much yet. I'm trying to think. This is how many comments it has. I don't know how I want to style this. Basically, I just want this to be sitting above my screen so I can just have something I can glance at every now and then uh and see what's going on while I'm working. Um, what are my top five pet peeves when it comes to accessibility in web apps? Oh, that's a good question. In web apps specifically, uh I just That's a really good question. I don't know. Uh mostly because I don't muck around too much to like break them apart. Um there's still focus issues that can come up a lot of the time. Um, I think bad UX might be my biggest complaint. Just it's, you know, bad user experience is an access accessibility uh problem as far as I'm concerned. This is actually I will I'm zoom what am I zoomed in at? I'm zoomed in quite a bit, but I would like to be able to get this window smaller or bigger if you know what I mean. Just so I don't get overflow. Uh, so things like that can be an issue. Mund Mundo Dev, you remember the first time you saw my video on setting up browser sync with Gulp? Yeah, that was a while ago. [gasps] Those were good times. Things have changed a lot since then. Is anybody else having problems with the stream? Just curious uh where we're at with things. I see some people I'm asking because I see I figure if I don't get any replies, then I know there will be issues with it. But if people start saying that everything is fine, then I'm I won't stress too much about it. Font size 1.5 rem not work here. Oh, it does. Okay. I want it to be a bit smaller. Okay. Let's just I'm Let's take you. We're going to do the same thing for my most active. I think it's going to be the same. I forget how I set it up. Most active. I did this like two weeks ago. Um, but I think my most active will Yeah, there we go. We have the most active there. So, I think these are going to get changed to H3s. Then I don't really need proper semantics in here. Technically, let's just give this a main. I might have something that I can hook into, but I'm not completely sure. But again, I'm not doing this how most people would probably use this. Stream is fine. Thank you, everybody. Chris Tee, you did it. Yes, you're not surprised. Thank you. I appreciate that. Sorry if these font sizes are a little bit small. I guess we can zoom in a bit and just sort of go off the side a bit. Uh yeah, we'll just jump around for there. Um oh, Google's having some issues these days. Yeah, it could potentially be that for sure. Uh so if we do that, my main Let's just come here and say the main is going to be a display grid grid template. We got some entertainment happening. We should do this more often probably. It's better than just watching someone write CSS, right? these will also do this. I want this to be a div. Whoops. Class equals Oh, we'll do it. No, we're just going to do a section actually. Section close section and then section blows section. The formatting here is not fantastic, but that's okay. The joy of writing your own stuff. I was wondering if I saved it if it would format for me. [laughter] Okay, let's fix our formatting. Uh, there we go. Then at the top of each section, let's do uh most recent. Most recent. And then this one will be an H2 of most active. Let's go for the next million. That might take a while. Uh, so let's do section is going to get a border. This is where with because it's an e- in I don't know. Can like one pixel you pick. You can probably do one pixel, but let's just do that. Um, now the issue is I'm not going to be able to see because I have five of each. Um, so let's font size here. This would actually be my H3s that I want to be smaller. We're going to need some padding on the sections. Padding of one rim, which the one rim might be too big on these. That's not too bad. And then maybe I do these as a display flex. If it was a touch device that I could swipe around on, I'd probably do it a little bit differently. I want to make sure like the screen's not huge either. So, I want to make sure that I can actually see this when it's at a distance. I should participate in the Hot Ones talk show to celebrate. That would be fun. I'm pretty good with spicy food, but they get ridiculously spicy. Um, and again, if anybody has any CSS questions or anything else, uh, just ask away. If you Sorry for anybody who's on Twitch who's having issues. Yeah, Lead Heat Code TV. I have seen Lead Heat. I got not invited to lead Heat. I did get invited by Jason for one of the shows, but sadly I was traveling during the time that recording would have been because I really wanted to go. Um, let's try doing this. Uh, no, I can't do that as a display flex. This can't be. So here let's do a div class is equal to issues and that uh wait no yeah I want uh yeah I do need a parent here. Okay. Yeah. Dives issues which will close here. And then my issues do issues can get a display flex gap of one rim. Uh we're going to drop these font sizes down.8 75. Maybe I should just do something. You know what we're going to do? Let's go on the HTML element. HTML font size is going to be 80%. Which normally you would not want to do this, but for what I'm doing uh with this little guy, you can sort of do what you need to. Uh that might work. And then I think there's like I should really open the docs here. Oh, there was a fix indentation button I wasn't using this whole time. Uh that would have been good to know. Do I have their docs easily accessible? Yes. Visit docs. Oh, the design system. This is what I wanted. I want to know what colors um upgrade guide, enhancement guide, troubleshooting. Let's just go to the overview. I'm not using. So, we have a scale scale scale interface to affect content density and readability. I probably should have looked at stuff in here. right. Oh, that's kind of cool if I could set up something like this actually. So, we have some class of rounded extra small small. Okay, I probably should. I was like, I'm just going to freelance this whole thing, but it is handy. Oh, they have they have all of this. I didn't have to like flex flex row. How do I get this cool background effect? Um, do you think it just comes with that? Probably not, right? Text strokes. I don't want background. That's what I want. Cool. Yeah. So, it's just BG gray 20. Let's try a BG gray 20 on some of these. Uh, so that would be on this class is equal to Oh, wait. Maybe not. Let's try gray 20. No, I don't want it on those. That's not where I want it. I want this to have the BG gray 20, which maybe even we'll start with 20 and we'll tweak it from there. And I want the other ones to be white. So, it's just a BG white. Uh, and then the gray 20 I think might become like a gray 80. No. Do we not have a gray 80? I was just guessing. 75 is the lightest. Okay. We're going to do a 70 then. Okay. Then so I can see they're separated this way, but I sort of want that as padding. That's issues. Issues padding one rim to match the gap. Okay. Then each issue can I use nesting and star padding one rim. Nice. That's pretty cool. I don't know if I need to know how many comments something has. We might just do it. Oh, that's the active section, which we're not focused on right now. This one, I don't know. I think something like that is fine. Uh I'm even going to Let's see if we have some font stuff. I can just grab from this text. Oh, we can do stuff like that, too, which is cool. Um, that's the colors styling. I'm just curious if there's font families. Like, do I want to go with That's kind of cool, but I'm not going to have the space to do that. Sorry, I haven't been looking at the chat. I will look back at it in a second. the bit depth alignment alignment classes support bit depth prefixes to apply different alignments on different display color capabilities. I'm not worried about that cuz I only have a single one and I'm not making this for other people. some of these things I don't need to worry about. Okay. Um, actually don't mind that terribly right now. Let's just do a What is responsive color? I think it's because um it's e- in that we're designing for. So e- in it needs to respond. I could don't remember where I was for that. Um, but I think it's about responding to the different devices and the capabilities they have for color. I think is the idea with that. Oh, what did um Mad Mac, you're not allowed to write code or design anything. Only AI prompts. That seems like a weird thing to enforce. Uh I see I just the the uh Lefix saying I should use uli. This is really not I'm not worried about semantics. You're probably right. I probably should be, but it just makes a bit more styling. And this is not public facing in any way, so I'm being kind of lazy with it. Have I ever played with GTK themes? I don't think so. Uh, just going back up through the chat quickly. Could you set one block to display none and then use CSS animation to toggle back and forth every now and then? Uh, probably. This I can also just have it change screens. Like I could set this up like a template for the most recent and use the same thing for the most active and just have it switch every like 20 minutes. Um, if I wanted to, you can build as many as you want and choose the order they go in. They come with like a whole bunch of pre-done plugins, too. Um, like you can get like your weather and some other stuff, and you can set it up. I could even split like set it up as two separate ones, but make sure they're both on the screen at the same time. That's Rob human on having one make a viewer. Thank you so much, Rob. Mark is here as well. Any experience with creative videos with code? I am planning to make shorts with F1 results data I fetch. I already create images from it. I know there is Remotion, but is there any better ones? I don't have any experience with that. Uh, that sounds really cool, and I'm looking forward to seeing what you create because you're always very creative uh with this stuff. But actually, since we're here, uh, do I have it? Um, since Mark is in the chat and talking about F1. Oh, a few people on blue sky are congratulating me. Thank you, everybody. I didn't even post on Blue Sky that I was going live. So, thank you for uh helping the world know. Uh where is my profile? I don't know why I'm doing this off screen. It doesn't really matter. This is what I'm looking for, though. Oh, no. This isn't I'm mixing up my my Wait, who was it that was saying before I say the wrong thing? Uh oh, that was Mark Boots. I was mixing up Mark with Chris. Both of you guys do cool stuff with CSS, so I'll still show it. Uh, this is Chris and he was talking about F1, so it made me think of this. Uh, this is CSS only select, custom selects, which you can now do crazy things with. So cool, right? Like this is all just CSS in a select. Um, yeah, pretty awesome. I'll put a link to that in the chat. All Uh, if you want to check it out. Cool. H3. We'll just throw it here, I guess. H3 font size. Uh, font weight. I mean, font weight. Can I do 500 issues display flex gap one uh grid and the paragraphs will get a font size of 75mm. I don't need the seven hours very big. I want to give those the round borders because I sort of like that. I have to find that again. And again, I could just write the CSS for it, but medium rounded medium. We can throw that on. This rounded medium. Here we go. Thank you everybody who is uh congratulating me still. I appreciate it for jumping in. I am currently working on uh setting up a I put a link to it in the description. It's called a terminal. It's a little e- in display uh that you can put whatever you want on it. Uh it comes with plugins, but you can also make your own. So I have uh set up an endpoint on my website to get the CSS working group uh latest stuff and this way I can keep track of what's happening and see if like something comes up. Auto wrap mixin body in result if omitted. Uh let's just see. I haven't even looked at what was here. support negative indexing in environment viewport segment XY sort of know what that's going to be but uh proposed control shouldn't look weird design principle that's I'm [laughter] curious controls shouldn't look weird is a fun a fun um issue to post add light dark image or generalize light dark for images too uh I have a feeling they're going to shoot that down and say to use if instead because if will probably allow us to do something like that. A var based model for mixin parameters. So like some of these things are things that I'd be interested in knowing about. What's most active? Proposal to extend CSS font optical sizing. 102 days ago though. That can't be the last one. My most active might be broken or it's I wonder how many comments they have. We might have to update this to actually work properly on the on the most active ones. Dave Perman, you have an e in for RSS feeds and calendar and weather and stuff. Yeah. So let's see just to go really fun or not fun just let's jump back to the dashboard. Um so you can edit playlist so I could have other things displaying and again you can split them. Oh can I let's save my changes. Save changes I think now. I always forget how to force it. Uh because it's only set to update every I forget how to force an update on it. There is a way to force an update instead of it being when Oh man. Um but anyway, this is sort of what I wanted to look at. They do have other plugins as well. So like all sorts of different stuff. So you can get your weather and like a pretty cool display and other things. Um, of course you could just make your own as well, which is the fun fun thing with these. You asked for questions. My main CSS question is why why don't people understand the cascade? BM and Tailwind are antiatterns for people who don't understand how CSS is intended to work. Um, so the way I always relate things like those is they are It's akin to like putting training wheels on to a certain extent like you want to take away the cascade because especially if you're learning when you're learning something you are overwhelmed by everything. Uh then when you have and so like well first of all you're told like just use single classes for everything cuz then you're not going to run into issues with specificity. Uh which is sort of what the idea of BEM is as well. But part of the eventually you get better at it and maybe you understand more about it but then you start getting into large teams and a lot of people on the teams are not necessarily fantastic at CSS. So if you're using if you're just letting people freelance the CSS it becomes a disaster. So you need to have conventions to follow. if you have multiple people writing CSS and especially if some of those people aren't super comfortable in CSS and they could do things that are really cause issues um and when you have multiple people writing it as well there there's so much more potential for issues that can come up so that's where these things that strip away important parts of it do come in and it's why we're starting to get nesting and more maybe scope um I think also solves a lot of these problems natively Uh, how was your experience in Marchm CSS? Uh, it was fantastic and stressful and [laughter] it was uh, yeah, a very stressful uh, endeavor. The first episode I'm in maybe my last. We'll see what happens. Is this upcoming Friday, I believe. Uh, let me just check. I think we could check actually if anyone didn't if you haven't seen the first episode, you should definitely watch it. Uh, oh, five days. March March 6 was the first one. That's Oh, I was thinking March 20th. Five days. What are we in five days? One, two, three, four, five. Either Thursday or Friday next week. the 20th. I think it's every Friday, right? 20 27th and then the 3rd. Yeah. So, it's every Friday. So, it'll be um up against Amy uh on I guess on Friday. Still seeing lots of congratulations coming in. Thank you everybody. Vanishel at 15. I wish I had the resources we have today to learn [gasps] at 15. Uh Donnie, oh Donnie, welcome. You love scope. It unlocks some things. Yeah, definitely. It's pretty awesome. I want scope on replaced elements like input. Dang it. That would be interesting. I wonder with with the coming of more styling becoming available for it. I don't like our select menu. I'm wondering if there'll be things opening up on that front. Um you top traveler saying they've seen some major issues with team members not comfortable in modern CSS at all. Yeah, I've heard of some horror stories of like um whatchamacall uh oh what are they called? pull requests being denied because they use some modern CSS and you're just like, "Oh man, what do I think about the debate around atomic CSS versus vanilla CSS?" Um, so I guess we mean like Tailwind. People know what I think of Tailwind. It's it it solves the problem that we were just talking about for a lot of people. It's not for me. That's generally how I think of it. Uh, okay. Let's grab this. I just want to see if this is all going to fit and replace that. What? Oh, and then I need Okay, we'll just do the whole thing and then just update. That was most active. most active which I need to update how that works but that's okay. Oh, display flex being flexy. Uh should I just do okay we'll do just for learning purposes I would normally pro well maybe not display grid and then grid autoflow column and then a grid auto columns R1 fr this is like the most annoying thing in the world where this is singular and then this is plural but uh it gives you even columns so that works Uh oh, I see a question about if I'm still using zed. I am. So far so good. Donnie, good luck with uh embarking on supporting email with design tokens. That sounds fun. Lef Phoenix, um I think we didn't get your Oh, do you think that controlled inputs are terrible? Oh, sorry. We're getting Hi. Hi. I don't even know if they saw you or not. Um, yeah, I don't have enough experience with controlled inputs to be able to say for sure. Uh, just because it's a little bit out of what I do, right? Um, I unless I'm thinking of it in the wrong way, that would be with React and I just don't use it enough. Right, Chan? Exactly. [snorts] What the heck was that? Do you mean me? Probably. I will say on on the thing of atomic CSS that the one of the things with it that I think people push back like people either love it or hate it in general when you're talking about just I mean it's not really atomic CSS so much with well I guess utility classes are um but uh I forgot what I was saying now. Oh, just I think like they're very like utility classes are great and super useful. I just don't like going all in with them, but I like having a lot that I can use within a project. Um, a lot of people saying, "Hi, mini Kevin." [gasps] Kevin, uh, Rodney, do I have expectations how I'm going to do in the CSS? Uh, I already know because it's all been recorded already, so I know how I did, but I cannot say. So, no no hints or anything, but yeah, they I'm trying to think when the recording was now. It was I mean, if you watched the first episode of it, I I didn't put the link, did I? Uh, Mad Madcss.com, but I'll put that in the chat just if anyone did miss it. The first round is available. uh production quality was insanely high. So I don't know 51 minutes uh said around like 30 to 25 minutes. It's been an hour. It has been a little while now. Um I'm not playing Spongebob. Spongebob stream Spongebob. Oh, we're not we're not doing any Spongebob. Yep. I didn't even hear what you said. So, I don't I don't know what that means. No. Why? I don't know what that's No, I've done it before. I just brings you to Amazon. Okay. Why do you want me Why do you want me to go to Amazon? I'm goofy goo. Some people saying they support Spongebob, but I'm not playing Roblox games right now. Uh, I I'll get back to the chat in a second. I'm a little bit distracted at the moment. Okay. The shrubble wobble. I'm full of swimmer glimmer kind. I am the yeast of thoughts and mind. Shubble wobble double glab. Double double double double glut splendid. Simply delicious. Oh, I am the glo therubble wobble gum. I am the stuff that's in myble dabble. That's like all the lyrics. Is that the the actual lyrics? The last noise is that's from a movie. I watched it. There's also Oh, create creating the play button would have been a fun one. Scottish uh guy. Look, Spongebob. Yes. Spongebob. Spongebob. Spongebob. Dude, I'm not doing Spongebob. What if you want to see Spongebob? Someone has a lot of energy. Yes. Um, I saw someone mentioning the CSS art person that I did a stream with. That' be Julia, who was the one who beat Adam at the Mad CSS yesterday uh in round one. This is why I generally don't work on weekends because this is literally what it is like. It's me. some meme culture. Yeah, I I the only memes I know are through them and I don't get it. But [laughter] [sighs] Nicholas en have fun at the trampoline park. Um there are I'm sorry I'm just trying to scroll through the chat because I know I missed a few things along the way. I'm just trying to uh, I could have made a play button. That would have been fun to do as well. But I have a weird question. How much CSS do we need in a project? Where is the break point? I know CSS can do a lot of things nowadays, but JS also does some useful stuff. Yeah, that is very true. Um, better make a full video. I mean, the more I can do with CSS, the better. Uh, I actually have a talk that I'm working on now about how I think JavaScript's role, not necessarily today, but in the next couple of years, JavaScript's going to be doing a lot less than it's currently doing. Um, mostly thanks to the ATR function, uh, and all the other things we can do in CSS now with like the math and the calculations that can be done directly in the CSS. So JavaScript's role is going to be more responsible for getting information and just passing it to the CSS and allowing CSS to style things based on the information it has. Uh and then all of the styling logic is actually in one place. Um and I did do a video on my second channel a while ago talking a bit about that idea too. um where it was about how I'm trying to think it I was saying a little bit of the same idea of it will that it's good if all the styling logic lives there and some people were you know cuz some people were complaining on a video I did that CSS is doing too much now um but my argument was that if we're doing the logic in JS to then let JavaScript pick a class to apply to something you're sort of letting JavaScript do the styling whereas If JavaScript's getting the information, giving the information to CSS, and you're conditionally styling it, all the like those conditions make sense to actually exist in CSS and not in JavaScript. Um, just that was never possible in the past. as the front-end market is changing, would it be wiser to get into cyber security? I don't know if cyber I I think every market is changing. So I don't know if cyber security is changing less than other ones. Um oh, Alex is here. Alex, thank you for dropping in. Uh and everyone else once again, uh thank you for the the the congratulations on everything. I just saw a question about a dog. We have my my pups is here. I need to brush her hair. She's a little a little ratty at the moment, but You might be able to hear her licking my arm at times. [laughter] Sorry about that. Uh, you have contrasted text on a pure on MBG in pure CSS. I'm going to copy that code snippet. I love that infinity is in CSS now. Um, Donnie is considering getting into locksmithing. Yeah. One second. I saw a question about this. It opened. Uh, yeah, border shape is crazy. it's basically you can actually make the shapes in any shape you want. Uh, it's pretty wild. I haven't played with it yet. I've had this opened in this window for a while now and haven't closed it cuz I want to play with it. Um, but yeah, this is all just based on crazy things we can do to make shapes on elements that aren't clip paths. It's actually the shape of the element. It's pretty cool, Alex. Okay, a little update. We're probably going to shift off from doing this. I was hoping it would update, but it's a little e- in display. Um, that once it updates, I've I've been Can I How do I force the update? Identity settings. I don't know. There is a way to push the update and I just haven't been able to find it. But it's Yeah, it will once it updates will look like what's on the screen now instead of like this. Um, but I am making it for CSS working group things so I can keep up to date on what people the issues people are posting and have it offcreen somewhere and I want to say thank you to them they did they sent me one they were like would you be interested in this I'm like I could play with that and so decided to do that today um all right yeah I wanted to check out that code snippet and at the same time it will be a good excuse to explore code pen 2 since it's out now. Um, so that was HSL from VABG. Okay, Lef Phoenix, you said this would work on an image. How would this work on an image? Let's just Okay, let's set the body. Well, I don't know if the body will work. We'll try. That doesn't make uh color. Let's just see what happens. And then BG is black for now. Uh I was worried about that. Uh the fun thing with Code Pen now is you can have multiple CSS files. And I actually Does that just mean I linked them in the wrong order? Yeah. [laughter] Whoops. I need to update my template. Oh, whoops. Background would also be var be that would help. And if I change this to green, let's just see what happens. Uh it seems that to white. Sorry for the flashbang, everybody. Oh yeah. So the the text color I have an actual color set on this, but the text color is black. And then if I set this to black, then it goes to white. So this is essentially right now I see this the same as contrast color, right? Which I don't even know. Is this in Chrome yet? I'm not sure. Uh Marco is saying, yeah. Uh, Twitch is having issues. Come on over to YouTube. You saw the force update, Kate? Oh, uh, when I was scrolling around the pages. Yeah, that's exactly what I was looking for. I just missed it. Anna Tutor has an approach for images. She samples the image at one pixel squares. so okay, let's figure out what this is doing. It is getting the background color. Then it's doing a calc where it is taking the light 49.44 minus the lightness value and then multiplying it by infinity. I guess my question is why does I guess there's like a small little range here. So the idea is it's either hitting one or negative one correct. Color transitions don't work. Yeah, but Oh, thank you so much, Alex. That's very nice of you. I appreciate that. Um, and I guess the Okay, what's better supported? I guess infinity is better supported, right? Can I use infinity in CSS? Oh, wow. I did not realize that it's baseline widely support available. Look at that. So yeah, this this would be a nice use case for a function, but then functions aren't great. We're just I guess we're just ensuring What if I took off the infinity? Would it still work? Am I missing a open close open close? Whoops. I still need that one. Uh, no it does not work. Oh, it does work. So, it is working actually, but it's not going the lightness isn't adapting enough. Let's just see what what's the computed value on there. Yeah, the computed value becomes like a gray in this case. Oh, right. Cuz we're we're getting we're doing like 49 minus the lightness. But if the lightness is zero, 49 minus 0, we're setting it to so it's just for if it's if it's a dark color, we're multiplying it by infinity to make sure that it's at 100%. That makes sense. So I mean the the times infinity could be times anything, right? Just a big number. Uh but obviously infinity works that well there. Um the contrast color is getting ignored, so it's I'm pretty sure I don't even know if contrast color is supported. If we go to styles on the body. Yeah, it's it is getting ignored. Um, let's just try red. Does that work? I think I might have to get going soon. I forget how this works. I also don't know if it's okay. First of all, is it even supported? Contrast color. I think it just got added to Safari. Ah, it's not in Chrome yet. There we go. Um, contrast color is basically what this is doing where it's always going to either pick white or black, which is we there is a proposal. I don't know if it's dead, but there was color contrast was the original proposal, which is a better name. But here you could put like the color you like say my background is red or whatever you do like red and then you could have I don't remember the syntax but you could have a string of other variables and it would pick the one with the highest contrast whereas contrast color which is the one that's actually getting shipped is you give it a color and it will always either return white or black something like that. Um but yeah, it is now. Okay, let me just see. But that's a fun little one to ensure uh high contrast text. I like it, Donnie. That looks a little bit color from color round up. Oh, my update just went through. Oh, I need to make the font sizes bigger. I wasn't too sure, but there we go. Is that going to focus? Yeah, so it worked. Oh, I should probably go full screen. and we're going to be we're going to be signing off anyway. Full big face. Full face. That's the one I want with a broken chat. Let's get that again to work. There we go. Pretty cool that it's working. Um, it looks pretty good there actually. The font sizes are a bit small. So, I will have to play with that a bit just because the way e- in works mostly. I wasn't sure and it was really big on my screen so it looked fine there. So, I'm going to update that a little bit uh off off stream. Um, but yeah, thanks. Thank you everybody who who's come and to celebrate. Uh, I do appreciate it very much. I just want to check. Yeah. Awesome. So, uh, by the way, does your contrast color solution work with transition animations? I don't know. I have no idea. I'd have to play with it and I haven't touched it yet, so I'm not 100% sure on that. Um, but something something to look into. It might just because it's like figuring out the computed value, but I'm not 100% sure on how that would work. But, uh, yeah, thank you everyone. Oh, Mike is here as well. Thank you, Mike, uh, for for dropping in. Uh, and everyone else who is here. Uh, yeah, I just want to say a a huge thank you for everyone to getting me to a million. Uh, it's pretty incredible that a random channel that I started as a hobby project has reached this point. Uh, and that there's at least a million people out there who do like CSS, which is which is good to know. Uh, so yeah, thank you all for for the support over all this time helping me get to this. And uh I really really appreciate it. So thanks and yeah, let's let's keep having some fun with CSS. Uh with everything that's going on, we can still muck around with it and do good things and enjoy ourselves with it sometimes instead of, you know, worrying about the world burning down or whatever it is. So I am going to look for my end screen. Uh my end screen will probably have the wrong thing on it, but who knows? Oh, we have a CSS is awesome. That's perfect. Okay, thank you uh everybody for everything and of course until next time, don't forget to make your corner of the internet just a little bit more awesome.