Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
2024 CSS Resolutions
1.2k Plays8 months ago
CSS is Hard. Each and every year. So what are the things that we should improve on in 2024?
Recommended
Transcript
Exploring Complex CSS Selectors
00:00:00
Speaker
just how like a lot of people look at tailwind classes and think that they are obnoxiously long and they're like, what is this? I want to do the same for a CSS selector. I want to write one that's so obnoxiously esoteric and weird and long that someone's like, what is this? And I'm like, that's right. In addition, we can now have more powerful selectors than we've ever had before with weaker specificity. And I don't know what a good metaphor is, but like it's somehow like someone who's like super buff
00:00:35
Speaker
We are back in 2024 and this time we are still bad at CSS, but we aspire to do more. We aspire to be better. We aspire to be greater. So in this episode, we're going to be dropping a very long, possibly long Adam, probably more than me list of things that we resolve to be better at in CSS in 2024. Adam, how was the new year going for you?
00:00:50
Speaker
but also like hella gentle with kittens?
CSS New Year Resolutions and Reflections
00:01:00
Speaker
It's good. Classic parenting. New year had some ups and some downs. You know, I got punched in the face and then, but I also got a gift, you know, and that's just life. Sometimes, sometimes you got a roller coaster. How about you, man? I find with children that people sometimes think you're speaking in metaphors and you're usually not. So in your case, when you're saying you got punched in the face, someone would be like metaphor and you're like, not, not a metaphor. I actually got punched in the face. Um, so.
00:01:29
Speaker
In this case is a metaphor but dude, yeah, I mean might as well have been a punch in the face You know, I'm sure someone punched me in the face my dog Yeah, she punches us in the face all the time. That's so sweet. She does it on accident I think it's cuz we pet her hair head, you know, she's like here. Let me pet your face and you're like ow Don't do that
00:01:49
Speaker
Well, in the world of CSS, Adam, there are many new things coming to CSS and there are many old things that are still new. CSS is a lot like a syndicate show just because there are old shows. There are so many of them you have not seen and many things in
00:02:09
Speaker
You see the episode for the first time, it's new to you. And that is what many CSS features are like. And so in my list of things, I actually don't have anything new new, which I imagine you have new new. I just have old new new.
Kanban for CSS Project Management
00:02:22
Speaker
Um, and, uh, that's how I do my Kanban boards. You know, you have like in progress and then you have like done, and then you have done done for when it's actually done. You know, you can say like, is it done? And you're like, is that done?
00:02:35
Speaker
You're like, oh, it's done. And they're like, what was it done done? You're going to start done done. It's like Kanban. It's like a Seinfeld would say people just like to say that word, like salsa.
00:02:48
Speaker
This podcast is brought to you by Kanban and Salsa. That'd be sweet. I mean, I have a few new things in here, but, um, some of them are old things. Some of them are just skills. I want to refine, you know, like I love, and I live by this thought process of the more you understand something, usually the more you learn, you don't know.
00:03:11
Speaker
Right. And that's kind of an ethos of the show as well as sure, uh, we dig in, we care, we, we get deep into CSS, but wow, the, the more we do that, the more we learn, we don't know. So, uh, I've got refinements, lots of things I want to get better at. Actually, that's a perfect
Modernizing CSS with OpenProps V2
00:03:28
Speaker
segue. You lead off.
00:03:30
Speaker
Okay, well, one is not very surprising, which is I want to finish OpenProps V2. I've got a dock site that's built with Astro with little Svelte islands, which is really cool that they hydrate on scroll as you scroll into them. So it's like you go to a dock page, super lightweight, static render, you scroll down a little bit, interactive widget, you know, and it just loads itself super red. I love how easy they make them.
00:03:57
Speaker
I'm just a massive Astro fan, so 100% agree. Yep, pretty sick. And then, so yeah, within that also, with the doc site, I have modernization efforts. This is like all the colors can be an OKLCH. I'll still serve the old stuff if you want to grab the old stuff, but I just
00:04:13
Speaker
Yeah, moving right into, uh, okay. LCH and just whatever else I can that feels stable, like what hit baseline in 2023. I'll stick that in the lib. I want to finish those utilities. Actually, uh, side note, you can try the utilities today. They're just on the kind of a secret. They're in the beta channel published on NPM. So you just gotta go look for them.
00:04:32
Speaker
If you're in the discord, you can get the links anyway, also forms and dialogues. So I want to have like more of these kind of like component helpers where the single import and you get something beautiful, override it with, um, custom properties. So that's, that's number one OPV two.
00:04:50
Speaker
How about you?
Innovations in CSS Grid and Layouts
00:04:51
Speaker
My first one is I want to actually start using sub grid, uh, because as Adam knows, so I was working on a fairly complex grid, uh, layout, uh, a while back for the Firebase blog. And I was constantly hitting up Adam being like, how do I do this? How do I do that? And then Adam was like, you know, what you really need is sub grid.
00:05:12
Speaker
And that would really solve your problems. And I, so I learned about sub grid in that moment and I became insufferable and I wanted it and I complained about it about not having it. And Adam taught me how to emulate sub grid, which for those of you who aren't familiar with grid, you display grid and then grid can only lay out the it's direct children. So if you got a main tag with its style or the main tag, that's set to display grid and it has a bunch of,
00:05:38
Speaker
you know, a side sections in it, it can reach those, but inside of those, no, it doesn't know anything about those. And if you have ever laid out anything in sketch or Figma, you know that if you can look at each layer in sketch and Figma, like it's an element, well, there's usually multiple nestings of elements inside of those ones and inside of the sketch diagram. And we use those rulers or those guides to try to snap everything in place with our layouts.
00:06:06
Speaker
Well, grid itself can't really give you those snap in places unless you use everything in two layers. So you have one layer and everything goes right underneath. That's what grid can do.
00:06:17
Speaker
With sub grid, it says, you know what? That's fine. I know what my parent grid is. Just say, you know, set sub grid and I'm going to, I will know what to do. I will, I will inherit the grid properties from above, which is really great, but that is something new ish. And, uh, for awhile, if you wanted to use sub grid, you would have to emulate sub grid by.
00:06:38
Speaker
setting display grid, setting grid columns, negative one, you know, you very, pretty much are just negative one, one, or just passing down all of the grid properties, which you can do through custom properties. You can do it. It's annoying. I hated doing it. I constantly messed up my grids, doing it that way and having to go back and fix it. And I was always like, I want sub grid. I want sub grid. And then sub grid came and I was like, I'm not updating my life.
00:07:01
Speaker
I'm not doing that. And I was kind of like a dog who was chasing after a car and then I caught the car and I didn't know what to do with it. So this year I'm actually going to do something with that car and I'm gonna use sub grid. So that's my one. That was a great explanation. And, uh, I have three comments while
CSS Technologies Showdown
00:07:19
Speaker
you were talking. I was like, I loved what you're saying so much. Okay. First, first comment is I could just say this and you'll probably know exactly what I mean is grid drilling. Yeah. Grid drilling.
00:07:30
Speaker
You were grid drilling, right? You're even like, or maybe that's even what sub grid is. Sub grid is grid drilling. Grid drilling as a service, but it has a property. And anyway, if you're listening and you don't know what I mean, everyone, it's like, I'm making fun of prop drilling or you have to pass your props down to the child, down to their children, down to their children. Everyone's got to hand it down like a baton. It's super annoying. It's usually code smell, but I guess grid drilling is desirable. We want this.
00:07:58
Speaker
Well, I want it with sub grid. I do not like it with, uh, you know, I don't want to get on to it. If we had like mixins, then that could be like native mixins, the CSS, then maybe, uh, grid drilling could be a little nicer for those. Ooh, you know what? I want to get into it because we get so many, but we can do a whole episode on that because mixins is, it's been a long same and functions, custom functions.
00:08:22
Speaker
Yeah. Yeah. We've talked a little bit about custom functions. Um, okay. Adam, what number two, what is your second resolution? Let's see. It says grid is also like a donut grid. So we talked about donut scope and grid is, uh, it's donut by default, donut by default. There you go. I need that on a t-shirt.
00:08:44
Speaker
Explain to us the donut by default here that we're talking about with CSS grid that it's like donut as in it's leaking from the inherited properties like in the same way it's like the the grid that you create only it goes down to direct descendants and then ends so it has a top and a bottom that are really clear and so yeah whereas this okay you get me anyway the other comment was I liked thinking that
00:09:08
Speaker
And you made a comment like a car, but like, have you ever heard the term, you know, Apple doesn't fall too far from the tree? Yeah. You know, the funnier version is the fart doesn't fall that far from the butt. OK. OK, what I'm getting at here is like.
00:09:26
Speaker
Grid children, uh, want to be like their parents in this case, like sub grid is like a kid that like wants to be like dad, you know, or wants to be like mom or whatever. And it's just kind of cute. And so, or, or, you know, maybe it's even more like the kids want their parents house. So sub grid is when the kids are like, Hey, I'm old enough. Give me the house. And you're like, I'll share it with you. Okay. So maybe it's like sharing rooms. Okay. That's it. Those are my three stupid comments about, uh, your thing.
00:09:55
Speaker
No, I agree. Subgrid is this like, I understand it. I desperately wanted it. I think it's amazing. I think it completes the vision of grid itself. Um, and then, uh, and then I didn't use it. Um, so, uh, you know, just like, uh, it's like a gym membership. You're like, you know, I, I, there's so many analogies. Let's move on. We'll move on to
Interactive CSS Animations
00:10:18
Speaker
number two, Adam. What is your second resolution?
00:10:21
Speaker
Second resolution is I haven't built something with tailwind in over a year and I would like to I'd also like to build something with style X as something of of large complexity and Panda CSS So I have three different Technologies. I'm just like one of those people I don't know it until I've used it with my hands and then I also can forget things if I haven't done it in a while so tailwind I want to get back in there and
00:10:45
Speaker
style x and panda css or two atomic css generating in lines javascript did they feel like you're writing in line javascript but they generate an atomic style sheet for you very much like um what was the one that was sprinkles we had vanilla extract so you got something like that
00:11:01
Speaker
So it's just kind of like getting that rich understanding and not just a superficial understanding and then replenishing my tailwind knowledge. I kind of want to go into a tailwind and flex a lot of new stuff. I'm like, I want to teach it new tricks just to see what that workflow is like. I've mostly just used it as it was out of the box and I want to push it to, and just see.
00:11:22
Speaker
We should do that. We should both, because I haven't used Tailwind in quite a while too. And we should, we'll do our, you know, Tailwind episode where we have our thoughts on that, which I'm sure that nothing wrong will come from that. So with styleX, styleX is for those who are unaware, it is a CSS library.
00:11:46
Speaker
which is extended through JavaScript, but it's not quite a CSS and JS library. It is a little, from what I understand, correct me if I'm wrong, cause I haven't used it. I just looked through it and I read your, uh, your, uh, thingamadoo about blog post about open props and a style X, which was seemed very interesting to me. Um,
00:12:07
Speaker
is that you write everything in JavaScript, extend all the classes and add them into your elements and everything in JavaScript. However, behind the scenes, it's really just generating a CSS style sheet, very similar to something you would get with CSS modules. But it's sort of like if CSS modules and CSS and JS
00:12:29
Speaker
like had a treaty, a compromise treaty of like what they wanted. That's kind of seemed like, like I want to write it in CSS and apply it to my elements, like very like CSS and JS style scoped and everything like that. And then, but CSS land was like, oh, but we are not just putting everything in a style attribute. That is ludicrous. It needs to be in a style sheet. And then they're like, okay, fine. This is what we'll do. Is that, that's kind of style X.
00:12:56
Speaker
Yeah, it's a really good one. And for some reason, it made me think that when developers are writing styles this way, they're spice girls because they want to just tell her what they want, what they really, really want. And they tell it what they want, what they really, really want. And then the library, uh, uh, uh, uh, uh, makes an atomic style sheet. What? I gotta give you that one. That was good.
00:13:17
Speaker
It's good on the mic.
Mastering Advanced CSS Techniques
00:13:19
Speaker
Yeah, that is what style like says. Yeah, but it's typescript. So you're you're in like typed variables. And so you have to go define your variables just like you might const const doing I have quests with my const. Sorry, this is very distracting. And yeah, it's all typed. You get lots of great type ahead.
00:13:38
Speaker
you define what you want per module, and then it does all the hard work to return you unique atomic classes that you just sort of spread onto your elements like it like you've known and loved. So yeah, it's a lot like CSS modules, except the names are even more robotic. Yeah, welcome to class name goobly garky gooble gobble 126.
00:13:56
Speaker
And it powers instagram.com, which is, uh, which is, you know, like, uh, a lot of people go to that site, you know, that's legit. That's a legit use case. Um, yeah, we'll see how that goes. So yeah, react finally has a default styling suggestion. Uh, and it was cool that open props, uh, was an optional additional include that they, they prepackaged in that library. Kind of rad. Awesome. Well, my second resolution is I want to be more deliberate.
00:14:26
Speaker
And just better about adding interactive animations with my CSS. So as you are scrolling through something, I want to, how do I sprinkle in some scroll animations, but not, but not like a, not like a person who downloads Photoshop for the first time and discovers all the features. And then just as like, if I use my tool, exactly. Yeah.
00:14:50
Speaker
I won't be like that, but I want to find the areas in which interactive animations can just be that nice additive boost. So whether that's through a nice little view transition here where it's like, Oh, that was, that was nice. As I scrolled through just like a little added effect, uh, as you know, and that is going to require, you know, hooking up some JavaScript as well in many cases, but I want to find that, uh, extra little oomph.
00:15:15
Speaker
And, uh, where it's just, it just feels nice. And I realized I don't have, especially after the episode we did on scroll animations, I realized, Oh yeah, I don't, I don't like, I understood what you said, but then I felt guilty. Cause I was like, I don't, I don't use these things. And so that's one of the things I wanted to do. I'm like, you know, and it made sense to me and it realized that.
00:15:38
Speaker
CSS has spent so much time over the last few years adding in so many amazing UI, just animation, these moments of delight features that we're so used to on native. And on native, it's just I click a thing and I get the transition through it or the popover or all the cool stuff that only takes a little bit of code to do. We have that now.
00:16:04
Speaker
Just like I was talking about with sub grid, I complained long and long about not being able to do these things or it being too difficult. It is easier than ever right now to do these things. And I need to just kind of get out of that way of, of my stubborn old way of doing things is reaching for the comfortable and just upgrading, you know, even though it might require thinking. So that that's, uh, better use modern interactive animations where it makes sense.
00:16:33
Speaker
Yep. You want to sprinkle some magic fairy dust very subtly because you don't want to be sprinkling angel dust on there. That might, that's, that's a little too extreme in
Understanding CSS Selectors and Functional Programming
00:16:43
Speaker
terms of sprinkles. Angel dust sounds quite nice.
00:16:54
Speaker
Yeah, if we have like, you know, older generations listening to the podcast, they'll laugh. I think that that's quite an old reference. I don't think nowadays, like, you know, I'm not going to get into that. Let's just let that one be. Let that one be. Everyone's going to be like, how is he so up to date on the naming convention for drug? You know what? I don't want to know.
00:17:17
Speaker
It's because I watch biker shows, you know, they're always, uh, teaching me lingo. All right. Well, my next one is, uh, I want to use Dino's, uh, storage API that they came out with the sort of like distributed key value store to add a like button on my website. I'd like to do that. Dino's very fun. I love all of my time inside of Dino. So I'm like, Oh, a little KV story. I'll try that.
00:17:41
Speaker
Did you not see what you did? You said I'm going to add a like button because I like that. I don't know if you, I was like, Oh, look at that. You can, you can like your own, like, okay. All right. This is great podcast material. Um, that's great. Um, I, I love, uh, that's also, uh, maybe you can, uh, you know, use my.
00:18:02
Speaker
resolution to add delightful sprinkled in angel dust of, sorry, magic dust of nice little animation when you click that. I think that's like one of those things when you go to a developer blog and you see that they have all like a like button or like the charging up heart or
00:18:22
Speaker
lightning bolt next to the article. You're like, this person has their life together. I bet you they're very well spent 12 hours. Josh Como on that like button. I'm very jealous that you got that much time to put into it. Josh's is definitely one of the best out there. One of the best. Yeah. Yeah. Yeah. Because it makes the noise too. Josh.
00:18:45
Speaker
Oh yeah. All the dust, all the dust, there was very dust. There's multiple kinds of dust sprinkled on that button. Yeah. All right. Well, uh, my next one and this one, I actually feel, I feel pretty proud of this one. I was, I realized
00:19:07
Speaker
I want to write more powerful selectors. This is kind of going against the grain of, I want to put everything in a class, uh, utility classes. I'm like, no, like I understand how that works. I want to go back and say, what can I fit into a selector? How powerful can I get things? Because.
00:19:27
Speaker
And again, CSS selectors were already incredibly powerful to begin with, and hence why we have the Query Selector API, because it turns out you can do quite amazing things with that. And I want to be able to figure out all of these advanced ways of doing that. How can I basically turn query selectors into like regex in my head, which is not a great analogy since
00:19:52
Speaker
I don't know regex. And now that we have like LLMs, I'm like, Oh, great. I'll never have to, I don't have to learn regex at all. I'm really glad in your mind to turn it into map filter, reduce, turn it into functional programming into, into grabbing data sets and iterating and filtering your weight and mapping your way into the things that you actually want inside of this. At least that's how I've really liked thinking about selectors.
00:20:18
Speaker
That's a really good way of thinking about it because with Regex you're taking, you know, a text document or just big stream of text or whatever. Right.
00:20:33
Speaker
And you're like, hey, and then within this blob, there is a pattern that I want you to find. And within there, there's different semantics of finding it on whatever casing or whatever, or how many instances, or all this stuff. It's amazing what you can do with Regex. But you're right. That is, scan through this thing, this blob, whereas when we're talking about CSS,
00:20:55
Speaker
We, uh, have to remember cause I commonly have to remember this is that it is mapped to the Dom, which is basically a tree, which does very well with functional programming with map filter and reducing. You're like, let me filter out these nodes. Let me reduce it down to here. Okay. Like, and that's a really good way of putting it. It's a totally different data structure in which you are.
00:21:19
Speaker
conducting your operation on. So you're right. The mental model is much better. You could easily just show a selector and then have the DOM nodes highlight or disappear or whatever in some visual node. And it would probably work out. It would make more sense than a big blob of text. So that's one of the things
CSS Advancements and Future Outlook
00:21:42
Speaker
I want to do. I want to spend more time
00:21:44
Speaker
being powerful with my CSS selector. I want to write really just how like a lot of people look at tailwind classes and think that they are obnoxiously long and they're like, what is this? I want to do the same for a CSS selector. I want to write one that's so obnoxiously esoteric and weird and long that someone's like, what is this? And I'm like, that's right.
00:22:05
Speaker
That that bad boy can can fit a lot of nodes Full of double negatives in there, you know, like it's it's not not this and you're like, well, then what is it David? You're like, well, it's not not these Like this is annoying David. Just tell me what you want what you really really want, but just kidding Yeah, no, I don't know it's in my head now
00:22:30
Speaker
I liked this thought. Okay. So you're like, I want to write more powerful selectors. And I had this immediate reaction, which was CSS is going to facilitate that. But in addition, we can now have more powerful selectors than we've ever had before with weaker specificity. And I don't know what a good metaphor is, but like, it's somehow like someone who's like super buff, but also like hella gentle with kittens. You know, I don't know. There's like a metaphor for super strength. That's actually super gentle.
00:23:00
Speaker
I'm going to take a homework item on that one. Um, I think you're right. You're, you're somewhere there and it's true. You have, I think like in the past CSS was a bit of a video game when you were writing selectors. Cause you're like points, I need more points. How do I get all the points? And then we realized that it's, you know, when you try really hard, you tend, you know, to not, you know, be.
00:23:24
Speaker
I was coming over the metaphor too. I didn't get it. Uh, but you know, when you, you gotta let something go, you know, to, to, if you really love it, let it go. So let's have selectors that have zero specificity. So like our wares and even with, uh, at scope, you know, that's a way of saying, Hey, let me scope things out with no specificity. That's a, that's a real, even though we had our whole thing about why, why would we use scope? Uh,
00:23:48
Speaker
I now realize that I can write hella complex selectors with scope because I get a benefit of scoping out from here to there or whatever. And there's no added specificity in which I'm scoping in. So that's a really good point. Yeah. There's, there's more ways to do more powerful things with less points, uh, than, than before.
00:24:11
Speaker
Yeah, that's really, really cool. So yeah, that's a great goal. I totally empathize with that one. All right. So my next one is I want to build more with the anchor API. So yeah, you were like, Adam's got some new stuff in here. The anchor API, uh, is very, very cool,
Introduction to CSS Anchor API
00:24:24
Speaker
very powerful. And it's kind of like scroll driven animations where we're still discovering, um, additional use cases beyond what it was initially made for. You know, like these are like, when we get strong primitives, they can do cool things that we hadn't thought about.
00:24:36
Speaker
And I want to dive into all the weird things and the regular things that you can do with the Anchor API this year. So I'm hoping to see that hit more browsers so that I can sort of not just be inside of Chrome only, but the Anchor API. So a question for you about the Anchor APIs.
00:24:51
Speaker
hypothetically, you know, if someone's listening and they don't know what the anchor API is, how would you explain that to them, you know, for the audience only? Yes, it's a tether. It's like your element becomes a kite and then you take the string from the kite and you choose which element it's attached to.
00:25:11
Speaker
And then instead of it being blown around by the wind, you're like, hey, I like you to float below the element. I like you to float above the element. And it just stays there with the little string tied. And then you can build some rules. And it's like, if you have enough room, be on top. If you don't have room on top, go to the bottom.
00:25:28
Speaker
Yeah, it's kind of, I don't know if I'm just anchoring on the word here. I'm very proud of myself. Is that, is this more like anchor points? Uh, like if you're using after effects or something like that and you need something to rotate around a certain point, you can, by default, you have the anchor point in the center. So it spins in the middle. Uh, or if you want it to spin on its side access or on a corner. It is like a transform origin. Yeah. The CSS term. Yeah.
00:25:57
Speaker
Yeah. And so it's a positioning origin. So yeah, you get to the origin though, as opposed to being an absolute position that's based off of the relative position of the element. The origin is some element and she get to name it. Um, and then it can orient based off of that dynamically discovered element in the Dom and then you're positioned off of it. Well, thank you for explaining that for, for the audience. That was a cool way to kind of reverse think it too. I like it as like a transform origin like,
00:26:28
Speaker
behavior. Nice. Well, we'll have to do a whole episode
Improving Form Usability with CSS
00:26:31
Speaker
of that because, um, cause the audience needs to learn more about, about that one. Yeah. Uh, so my next one is pretty basic and it's something that you have already done or actually you're currently working on and it has inspired me and it's, I want to be better at writing, uh, or it's styling form inputs. This.
00:26:53
Speaker
is such a skill in web development that I think we take for granted or that we make way more complicated all the time. Like you can architect your own forms if you want or you can use all the form controls and there's so many things that the browser gives you.
00:27:12
Speaker
And there's so many things that the browser taketh away at the same time. It is a bit of a double-edged sword there. Like, you get validation. You can do really cool things with validation. You get the form API. You get all this great stuff. And then you also get input.
00:27:27
Speaker
and those aren't as good and and then you also get input type you know file upload and then that one is not fun and yeah you got to chisel the crust off with those right you're just like no barnacles all over this let me get it back to its naked pure state I'll build it up you know
00:27:45
Speaker
And I have done things with that where I've, I've built good enough components, I believe with like drag and drop uploads and type of things and minor proxying of input controls to try to make things look nicer, but very dumb down. And I realized seeing a lot of your examples and just stuff online is thinking, you know,
00:28:07
Speaker
This is a huge skill is that anyone can build not anyone, but you know, it's, you can, the first step one, build a form step to style it, to make it look great with the, with validation and alerts and all that stuff. Step three.
00:28:23
Speaker
add in a bit more customization to the controls and all of that to make it feel more custom. And then step four, which is, I guess, going like the Galaxy brain, is doing the proxying it and doing all of the advanced stuff and the really cool dropdown lists. And a lot of that has gotten easier over time, which I guess this is a common theme in my resolutions. It's like, use the easier stuff CSS has given you. Be thankful. Be happy.
00:28:52
Speaker
Do the good thing, make it your life easier. But I want to do that with CSS, uh, form controls. Cause I realize or CSS styling on form controls, because this is something that is easier than ever. And at the same time still tricky. So it is a nice mix. I believe of saying like, I can do more now, but I still have to understand the nuance and that can be a really valuable place to be. So.
00:29:16
Speaker
Yeah, that's going to fit really well with your powerful selectors also. Cause you got, and has included with all with the pseudo states of inputs. There's so much that you can do there. So yeah, have fun with that. That's going to be cool stuff.
Reflecting on Gooey Challenges
00:29:28
Speaker
Yeah. What's your, what's your next resolution, Adam?
00:29:31
Speaker
My next one is, I am sunsetting Gooey Challenges. I'm like, oh, you know what, Gooey Challenges, I made three albums over three years. There's 12 songs in each album. Every month came out with a new song. People listened. Some people really liked the songs, but it never went past a low hum. It was self-sustaining, had a lot of good features, but just
00:29:57
Speaker
It wasn't really resonating. You know, it's a hit to, I hate to interrupt your thing, but I have a theory because you're good. Yeah. Cause I've been gooey challenger. Yeah. Well, we, we also work, uh, you know, together. So it's easier for me to follow along. Um, and you're my friend. So it's also easy to go. However, one of the things I do know, I believe that if it's kind of like when they added bookmarks to, to X or Twitter or.
00:30:25
Speaker
whatever. And that is never ever go. That's going to be a mark of being really old is you're going to be like, I can't say X. Um, but it's kind of like when they added bookmarks as this, like you could see how many people have bookmarked it and you're like, Oh wow. And you saw that some, some tweets would go viral and you would say like, Oh wow, a lot of people, uh,
00:30:48
Speaker
bookmark that tweet, like it had like 5,000 bookmarks and it's like 700 likes or something like that. And you're like, what? I feel like that is a lot of GUI challenges. I bet you you, you can't see it, but you are probably saved in so many YouTube playlists and bookmarked and so many things are hidden. So many notion sheets or Excel sheets on like roadmap to learning UI or CSS. And I bet you if you could see your bookmarks stats and then it's just people who will get into it and they're like, Oh, this is hard.
00:31:17
Speaker
This is really hard. Uh, tomorrow, tomorrow, like that's, that's how I see it. Like you and like your gooey challenges are like ab workout videos on YouTube. A lot of them, how many people are going through them? You know, like that's, that's how I see it. So you should feel.
00:31:35
Speaker
You should feel more proud of that. It had a better than a low hum, I would say. I think that I'm very proud of it. It's just like, it wasn't like the whole concept was, uh, there was two main concepts. I don't want to dwell on this too long, but like it was just thinking. I was like, I want to show you the thinking. Cause I assume you're all going to go build this in your own framework and your own tools and whatever y'all are doing. So I want to share the thinking and the outcomes that I was interested in. And that's why I was called thinking on something. Um, but it has a great long tail.
00:32:04
Speaker
So, you know, you're going to need a carousel at some point and you're going to want to know all the thoughts about a carousel. And so this show is really good. It also, I felt the show had very polished, you know, and they were interoperable components. So they worked across every screen. They were mobile and desktop ready, but they were.
00:32:21
Speaker
and they were polished but not too polished and I mean that like there's a there's youtubers or there's people on on twitter that make phenomenally amazing examples and then you're like that was that's such a cool example I'll never I'll never use a piece not a single piece of the entire thing you just did because it's so specifically dope uh that it's actually not
00:32:46
Speaker
adaptable to anything else. And I was like, gooey challenges is sort of like, it's not bland, but it's not super spicy and opinionated. It's like somewhere in the middle. Like I tried to make them easy to strip away what I put there and that you could go do your own thing. But I don't know. You know, I never saw a massive adoption there, but I have lots of new ideas. A couple of them are surfacing pretty quickly to the top and I'm excited. I think I have some cool
00:33:13
Speaker
Cool. I'm still going to be building UI and teaching, you know, how to build stuff. Um, it's just all about where you put your time. And that is a very time consuming show.
CSS Cascade Layers and Modern Web Development
00:33:23
Speaker
Uh, no more puppet, you know, no more, uh, no more puppet Adam, no more zombie Adam. I did like making the zombie Adam. I should make a bunch of silly puppets afterwards. Like all the time I have just to sit and puppet a tune. Yeah. No, I don't have that time. Well,
00:33:42
Speaker
pour one out for gooey challenges, but when out for gooey challenges, y'all go watch it, go start submitting your ideas. Cause that was the other thing. The challenge was you do it your way and share it with everyone. We can all grow and no one was doing it their way. They're all watching it going. Thank you. You did a good job. Everyone's like,
00:33:59
Speaker
Uh, it's like that scene in old school where Will Ferrell debates James Carvell and he, you know, has that blacks out and says that big tort. And then James Carvell goes, I have no further comments. There was said perfectly that that was like gooey challenges. Everyone was like, no, how would you improve it? And people were like, I think you did that. Good.
00:34:22
Speaker
Yep. And that's part of it. That's part of what I mean. The show, like it had some, I dunno, it needs to be a little refined. So I'll figure that out. Do you have more resolutions? I have one more. Okay. And this one, I realized this is a total theme. This one is actually use cascade layers. I.
00:34:41
Speaker
followed cascade layers back when it was cascade layers. It's, it's odd how much I know about cascade layers, understand a fair amount of it, uh, and have, you know, little things with it, but never really put it into practice as great browser adoption. And I need to do that. Uh, cascade layers to me is amazing because not only does it solve a lot of problems we have in terms of specificity, we're talking about how do I do, how do I write
00:35:10
Speaker
scoped or targeted CSS with less points. Well, cascade layers is a great way of doing that. And another thing about cascade layers that is really impressive is that, uh, I believe, correct me if I'm wrong here, you know, the history better than I do, but Miriam Suzanne proposed it back in a 2020 ish timeframe.
Challenges in Adopting New CSS Features
00:35:29
Speaker
And like almost immediately, everyone was like,
00:35:32
Speaker
Yeah, yeah, this is good. Let's do that. And then it just like went in. And then before we knew it, it's like 96, 98%, you know, can I use .com rate? And that is amazing. And that is a blessing given to us. And I looked at that and I was like, yeah, that is good. And then I'm like, am I going to use that? And I'm like, yeah, yeah, yeah, yeah. Oh, am I? No, no, no, I'm not. But I am. But I'm not. But I will.
00:36:02
Speaker
I, but I should, I don't know. So that's what I'm going to do this year. I'm like, no, use, use the thing, use the thing that makes it easier. Like stop eating cereal with a screwdriver, use the spoon. You know, that's not a good metaphor, but I mean, as if it's a flathead, yeah, you might get one Colonel every bite. You know, it's pretty good. Phillips had man. I was just, damn it. No, it was dangerous.
00:36:26
Speaker
But that's not milk reminds me a terminator you remember like that opening scene Someone's like just about to get a glass of milk and they get shot and then there's like bloody milk on the ground I say yeah, that's gross together. It's on the floor who's gonna clean that mess up. I hope it's not
00:36:42
Speaker
Anyway, also, I'd love your perspective on this because I feel like it's what everyone is doing right now, except weirdos like me that can deploy a site with native nesting and cascade layers on it. You know, like a lot of other people can't take those risks and have legacy stuff to deal with. And they're just not net newing.
00:36:58
Speaker
And I foresee 2024 and probably 2025 and beyond. Let's just be honest. Our years as people finally start to adopt this stuff because they're just like you. They're going, I love that feature. I love that feature. I love that. I love that. I can't use it. I can't use it. I can't use it.
00:37:17
Speaker
It's in the browser support excuse, not there. It's the experience. It is the learning gap. Just anytime you learn anything, there is that hump of, oh, frick. And as a human species, we are so resistant to that dip of suck, of learning something.
Overcoming CSS Grid and Flexbox Challenges
00:37:40
Speaker
And with CSS, I spend a lot of time learning these things and being like, I understand it.
00:37:47
Speaker
Now I'm going to use it and using it is a whole other avenue of, of that dip of suck where you, it's like, Oh, I understand it. And now I go to use it. And you're like, Oh my God. Like the first time I went to use CSS grid, I like read all this stuff on it, like really understood. I've totally understood it. And then I created a grid and I couldn't see anything on the page. And I was like,
00:38:09
Speaker
I just like, I just studied grid for like 10 hours. And I was like, why I wear all these notes. I have a notebook. And I was like, why won't, can I see the grid? Oh, either.
00:38:19
Speaker
There's nothing in the grid. Uh, so I didn't put a border on the grid. I, you know, I was just, I was just like display a grid. I didn't even set the high. I was just, I was like, Oh, cause and so I was sitting here like, I'm a failure. Oh, there's just nothing in the grid. And those are the things that you have to do. You have to stumble over those blocks. You have to have that humility. You gotta, gotta take your lumps and, uh, and, and use it and, and just get better. So.
00:38:55
Speaker
You're like funny enough The lumps I was like all the food is lumps and the mashed potatoes They served in a lump with lumps our smoothies kind of lumpy. They're blended They're just lumpy. Everything is fluffy. Anyway, that was I'm very easily distracted obviously, but what you're saying about grid is one of mine That's coming up here. I think it's one of my
00:39:12
Speaker
It's funny you said lumps. Last night I was teasing that I would make a restaurant called Lumps.
00:39:21
Speaker
Okay. Yeah. It's improved skills with layouts with grid and flex box. That's one of my CSS. Like I've written a hell of a lot of grid. I have tons of the spec memorized. I have tons of the flex box stuff. I still sit down and have to like hack one out over 10, 20, 30 minutes where I'm like, dang, this is tricky and I have to really get deep. So I'm hoping to refine that even further in 2024.
00:39:47
Speaker
Yeah, I, I, maybe this year I will remember which access is which, uh, when I am using flex box. Cause I know about the main axis and the cross axis and I can see them in my head, but then as soon as I start to change the flex direction, I'm like, Oh, and then that's fine. I can kind of, I'm like, okay, it switched. But then when I look at align items and justify content, I'm like,
00:40:14
Speaker
Dang it. And I'm like, I have to set both to remember which one goes to which. And this year, maybe an actual, one time I was having this conversation with, uh, Paul Lewis and, uh, Surma, and I was like thinking, you know, you were having the conversation thinking someone would be like, yeah, haha. And they were like, no, no, no, no, no. You know this because this means this and that means that you will never mess it up again. And I just remember being like,
00:40:43
Speaker
Yeah, that was like four years ago. So, um, so, yep, I still forget them. I do the same thing with flex direction where I know that if I set display grid, I'm going to get stacks on top of each other, like a vertical stack, right? Which I guess is Rose. Anyway. Okay. So then if I do display flex, I get columns and then I often want to change the directionality and I'm like, okay, flex direction, row, column, row.
00:41:11
Speaker
Damn it. Which one is it? I'm like, whichever one you're not now, can I, can I, is there a keyword for that? Oh my gosh. Yes. Oh my gosh. I, I relate. So, so much grid, grid auto flows the same, same thing where I'm like, okay, I got a grid. Here's the regular. I wanted to do the other one. The other is it row or, and then sometimes I'm like columns.
00:41:32
Speaker
No column column and it's just it's one column. No, it's multiple columns. Is it row or rows? Damn it, Scooby. And you're just like, yeah, I can't get it. All right. So I've got wrap up prefers reduced data. I've had that in tag review. I've got even I wrote the code in chromium. It's sitting there. It's like a seal that if it gets merged, then we will have prefers reduced data in Chrome. And I need to
00:41:57
Speaker
clear up the finals of the spec stuff. There's just been some questions that have gone unanswered. So time has passed and needs to get wrapped up.
Prototyping with Container Queries
00:42:04
Speaker
So I'm hoping to wrap that one up. I've got prototype container query debugging with VisBug. I had a very interesting idea the other day where I'm like, what if you just launch VisBug with the current and you select some elements or an element and you launch container query mode. And all I do is I clone everything out of that node into a floating pop-up or something like that and allow you to resize it.
00:42:26
Speaker
And that way you can test your container queries very much as if they were in an isolation mode or if you were like double clicking in Flash or Illustrator or whatever. But I'll simulate that with Fizzbug. So I think I can make a very compelling and meaningful container query debugging tool with Fizzbug and I'd like to prototype that.
00:42:45
Speaker
That would be very helpful. Cause that's, that's, that's a tricky part to container queries is that we're all putting resize handles on it or trying to get the browser window to be small. And you're like, that's not the same thing as the container query block. You're still thinking in context of the page, the viewport, like I'm always still thinking, I'm like, let me just squeeze the viewport to get to the containers. It's still, it's still, it, that's a tough, I thought about writing that too. Like start thinking in container queries and stop thinking. Yeah. Yeah.
00:43:12
Speaker
I have another container query one too, which is find more use cases for container queries that isn't cards. I don't know if you're going to do that one. That's the hardest one on the list.
00:43:27
Speaker
Oh no, it's funny because there are so many, but it's so true. It's, it's probably one of the reasons why learning container queries is really hard. Cause everyone's like, okay, so imagine you have a card and the card has three pieces. And then if you resize, you move the header over and people are like, but I could do that with the, you know, with a
00:43:53
Speaker
media query. You're like, yeah, but this one is different. So it's hard to understand that. So I agree. I think if there could be one of the things that helped my brain click, as I saw Stephanie Eccles did an article on container queries where she used a grid template. We're using the actual ASCII art for creating a grid.
00:44:17
Speaker
Yeah, container queries and switching that grid that ASCII art to change it. Uh, it was a card too, I think, but the way that it worked, I was like, I know, but the way that they assigned the grid template or the way she changed the grid template was really interesting. And I'd never seen anyone use grid template before, other than like, Hey, look at me use grid template. Um, and, uh,
00:44:42
Speaker
And to use it in a way that actually made sense to, I was like, that's didn't really count so much for container queries. It didn't have it, but it really did for grid template. I was like, plus one. You just found a great use for grid template.
00:44:53
Speaker
Yeah, that is nice. In fact, grid defined and firmly sized grid templates are
Enhancing Visual Styling with CSS
00:45:00
Speaker
really, really good in combination with container queries because a container query is going to lose its intrinsic sizing and it needs something to tell it what to be. It's a really good match. Excellent demo, Stephanie. That sounds really meaningful to change out the grid template areas in a container query. Very cool.
00:45:17
Speaker
I got another one here, which is add. So I made gradient.style, which I visit all the time. And I build gradients in it. It's really fun, but it can't do multi-background layer gradients yet. And I've actually tried to do it twice. So the whole thing is this Feltkit app.
00:45:33
Speaker
And the way that the data is all made right now is on a single gradient. And I have to go refactor the entire thing to work with a collection of gradients, and then a concept of a selected gradient within that array. And I've got it mostly working two times, but every time I do it, I'm like, you know what, every time I redo it and refactor it,
00:45:54
Speaker
better, stronger, faster. So I'll just try it again some other time until I can get that right series of features there. I also want to stretch goal with gradient.style and have it be able to make masks.
00:46:07
Speaker
That way you could visually create a transparent mask and then apply it to something and build it visually. Cause I know they're never going to do this in dev tools. Um, even though it would be sick and it's always a poke in the dark type of bullshit workflow. Um, and I'd like to fix that or at least make something that's handy for me, which I would assume would help someone else. But yeah, some stretch goals for gradient desktop there.
00:46:33
Speaker
that, yeah, uh, gradients are always popular. And, uh, one of the things I want to do with my resolution on interactions is I want to work on animated gradients because that sort of slow animated gradient effect is
00:46:48
Speaker
not really hard, but also kind of nuanced and to get to look right, to feel right and everything. Um, another resolution. Oh, I'll, I'll continue the, uh, nice. Yeah. I want to finally just, just stick into my theme. I want to finally understand blend modes. Uh, I, I'm like blend modes. Yeah. You got, you got light.
00:47:10
Speaker
And then then there's a blend and then the light comes out and then it was different than the light. And that's a blend mode. And that's like how I, and then you're like, and you could, you could darken the light. You could use it and that, and you, and why would you use it if use them? Because I.
00:47:31
Speaker
Needed diffusion. I need to, I understand like blend modes enough to, you know, I don't, but I would like to be able to understand blend modes enough to know like, Oh, I should diffuse. I should, Oh, I should hard do this kind of one. And so that's, that's one of the things I do that should like actually understand blend modes to the point where it's a tool in the tool belt. Nice. Yes. Not where you're just cycling through the list of options and yeah, that's what we all do still. Yeah.
00:48:00
Speaker
I've even written blog posts on how each of those work. I'm like, when it sees a pixel that's lighter than the other one, it'll invert it. And I'm like, I can't remember all this crap. That's what writing a blog post is good for though.
00:48:11
Speaker
Here's another one I got, which is get even weirder with scroll-driven animations.
Scroll-Driven Animations and DevTools Evolution
00:48:17
Speaker
I support this one. So weird. Just straight up, here's one of the cool hacks you can do. You said overflow clip or overflow auto to an element that doesn't have any overflow, and now it becomes an intersection observer container, and you can watch as just the position of any child moves inside of that.
00:48:36
Speaker
without JavaScript, even without a scroll-driven animation. What you're doing is hacking the workflow. You created a scroll port, which then became an observable window, and now you can observe shit as it goes in and out of it. It's super sick. I want to get weirder with it, and we'll see what I can do there. It's tough with scroll-driven animations, especially what we saw in the last one, or the one we did on that, is there's a lot of
00:49:01
Speaker
I don't want to say gaps, but there's certain, there still seems to be like scroll driven animations are great. You can do a lot with them, but when you want to get weird, uh, really advanced, it seems like you got to break out the old intersection observer. Uh, and that's one of those ever, I feel like every CSS API has sort of like it's JavaScript to sketch, have a catch API. And for all driven animations, it's like.
00:49:26
Speaker
You're like, don't use intersection observer. Don't use all it needs intersection observer. Okay. All right. And that's not a, it's not a hard API, but it's also not an easy one. Anytime something can fire, fire, fire, fire, fire, and has an array of entries at the same time and thresholds and things you're like, you can understand the API. You can study it. Uh, but then when you go to use it and it's given you a fire hose of things that aren't quite intersecting at the ones you want, it's, it's not fun.
00:49:55
Speaker
It is tedious. I totally agree. Um, we'll see if I got one more here. Oh, okay. The last one here mentioning all of the amazing CSS to those come out, uh, since 2010 and, and before we're at now, um, the, the longest list of app rules we've ever had. If you've tried nesting with casket cascade layers and scope and your selectors, you can find yourself four or five levels deep, really easily.
00:50:23
Speaker
and the styles pane in DevTools across all browsers right now, they're suffering. They've been cramming our entire styling world into a single column on the right or wherever it is that you put that little bar and you have to scroll that long ass list which is now packed with media queries, container queries, scopes, just the whole nine and it is struggling to represent
00:50:50
Speaker
all of this new stuff. And I want to help DevTools figure out what to do with the styles pane. The styles pane needs an iteration. It needs an evolution. We're reaching the maxima of what it can show. And I'd like to be a spearhead in that effort.
00:51:07
Speaker
That's a big one to save for the end. You're like, I want to help CSS help modern CSS be better in the dev tool that millions of developers use every day. That's just if I can get around to that.
00:51:25
Speaker
sometime this year. Yeah, it's only one of the most tapped DevTools in there. But yeah, and everyone's got workflows and they're so used to it that it's going to be a really hard thing to try to evolve. You're going to break a lot of people. I want to do that in five pull-ups a day. Eat more greens.
00:51:48
Speaker
Oh, well, there are so many, you know, there are so many things in 2024 with CSS. CSS is one of those languages that has just been on a rocket ship ever since mid to late 2010s. And that rocket ship's not stopping.
00:52:05
Speaker
There are so many amazing things being added that, like I said, it's like in syndicate. I got to catch up to these. And I feel like we'll need a podcast here soon on all the new stuff to look forward to in 2024. So in two to three years time, we can say, you know what? We should start using that.
00:52:23
Speaker
brutal. I feel like I want it. I don't ever engage the audience enough. What are your resolutions? I would love to know what other people's are because most of my resolutions just come from watching Adam do really great things and being like, Oh, shit. And then Adam.
00:52:40
Speaker
pushing the envelope and getting weird with scroll driven animations all the time. So I would love to know what are the things that you want to get good at or the things that you just, what do you aspire to with CSS in 2024? So let us know on the social medias. We'll have our handles and stuff in the place, or if you're watching on YouTube and the, in the comments below or whatever, uh, we'd love to hear from you all. So CSS in 2024, Adam, it's going to be a good one, right? Yeah, let's do it. Here we go.
00:53:32
Speaker
All right, everybody. We will see you on the next one.