Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Styling better custom inputs with Dave Rupert
1.4k Plays8 months ago
Dave Rupert knows his inputs and we got a lot to learn.
Dave's great blog - https://daverupert.com/
Dave on Twitter - https://twitter.com/davatron5000
Recommended
Transcript
Introduction: Meet Dave Rupert
00:00:00
Speaker
he's very passionate about uh html and oh my god you're not gonna believe this he's like no way he's here oh yeah brother i've been going coast to coast signing autographs and golden babies and i just came here to say
00:00:32
Speaker
David, I'm bad at something. At CSS, you know it's not surprising, but today we are bad with friends. We have Dave Rupert on the show, AKA Randy standards, Bernie standards, Barack, Shadow Dom, Obama, T Swiftinator, co-host of the shop talk show, hacker extraordinaire, goofball, rad cat, figurine, painting nerd, and friend. Welcome to the show, Dave Rupert.
00:00:44
Speaker
HTML is the way. Oh yeah, brother.
00:00:53
Speaker
Hey, thank you for having me. It is good to be here. And I'm the perfect guest because I am bad at CSS. Yes. Who's good at it? That's a question. Who's willing to stand up and say, I know all of CSS and I'm extraordinary at it.
00:01:12
Speaker
Jen Simmons. Yes, I don't know if we could have Jen Simmons on the podcast because I would be very afraid to say anything around such royalty. I would be like, thank, thank, thank you.
CSS Challenges: Styling Input Ranges
00:01:27
Speaker
And she's like, sure. Thank you. She's very polite at correcting us on the shop talk show and we say something inevitably wrong. So we do that weekly. So we'll just say so. Yeah, she's very polite.
00:01:41
Speaker
It's hard to be right all the time. And that's kind of what the show is like helping us do is we get to talk about what we were wrong about, which is like honest and great. And then, you know, we'll learn something. I'll learn something from what you're bad at inevitably. Well, what did you, you have a thing in your mind that you're just like, Oh yeah, this is the first thing that I'm like, Oh yeah, I'm bad at that. Uh, I mean, should we just start like with what I did today, this morning? Um, yeah, styling input type equals range. Uh,
00:02:11
Speaker
this is
00:02:26
Speaker
I know there's properties. I know there's some WebKit soup that gets mixed into the soup. I know Firefox sometimes respects the WebKit soup. I know you need the most soup in the soup and I can never get it right. And I literally just never know what I'm just like checking properties. I'm just like, let's try this one, this one. And then it is weird, like Moz.
00:02:52
Speaker
range thumb and a WebKit slider thumb need like different properties. Like one sets a background in a border and the other one does not. It just has a drop, like a drop shadow or a box shadow. Cool guys. Nailed it. Talk that one through. Yeah. Anyway, but it's weird. So.
00:03:17
Speaker
I, uh, I feel like though, when you ever styling most form sets, but range for sure is like, that's like the deck is stacked against you kind of situation where you're like, I'm bad at the thing that is.
Browser Inconsistencies in CSS Form Validation
00:03:30
Speaker
Full of thorns and I'm not good at holding it because it hurts my hand. It's like, it's not, you're just not going to be able to do it. You know, you just, it's just, it's just a little painful as you do it. Yeah. And it's, uh, it's.
00:03:41
Speaker
a lot of CSS and maybe this is theoretical here, but a lot of it is like, how often do you do it? You know, I only need to style a range input one once every three years, you know? So it's like, not that often am I like, gosh, you know what? This needs to range. I don't know. I really like abusing the range input and using it as like a interactive control, you know, for whatever.
00:04:07
Speaker
making things go faster or slower or wider and smaller and stuff like that. But, um, uh, but yeah, it's just, uh, I wish it was just easier. I wish it was more. How did you handle the, uh, validation of your ranges? That to me, whatever people talk about forms, then I'm always like, well, how'd you do validation? Because there's like visually validating it because of that range that you can get pretty wild out there. It's not, it's not as traditional as some other validations.
00:04:35
Speaker
Yeah. Well, so range is weird, right? Um, it has the step attribute. Um, so which is cool. Cause you can go like 0.1 and it'll like zero to one. It'll like basically have 10 steps. However, there's also like an 11th step because zero is a step. And so if you're like divide by like make four segments, you're now.
00:04:59
Speaker
Zero is a segment and then you have to like steps minus one to make it four segments, equal segments. God bless this mess. This is it's saying, and then I recently learned like literally yesterday, uh, somebody in the shop talk discord was like, did you know, uh, input range accepts a data list? Like, uh,
00:05:20
Speaker
And I was like, I'm sorry, what's going on? Um,
Proxy Sliders and Accessibility
00:05:26
Speaker
but it accepts data list and it'll draw a little marks on ticks. Yeah. I was this year's old when I learned that too. Oh my God.
00:05:36
Speaker
Yeah, so you like you can have a data list that like basically is like Whatever the web version of autocomplete that is just total abandonware, but it's fun I hear it's getting better. I don't know but data list. No, it's not
00:05:52
Speaker
I think that thing is, I just suggested that the other day for, um, something, I was like, Oh, we could use data lists. Everyone's like, no, we're not going to, we're not going to do that. See, that's don't talk to web standards. People, they like to get mad. They're like, Oh no, that's a bad thing we did. Let's invent 10 new things. You know, that's, Oh, I was asking to style the data list. Actually I was like, Hey, you're opening up, you're opening up all this other junk.
00:06:19
Speaker
Open up the data list, you know, give me give me access. That would be awesome. No, because it's really ugly and some Yeah, it's it's not very desirable. It has all the functionality you want with like keyboard and all that sort of stuff a fuzzy completion But it is it can't match your brand it's either light or dark if you do color scheme and you kind of that's all you get and
00:06:42
Speaker
, and
00:07:03
Speaker
Chrome does it on the bottom, but Firefox or something does it on the top, dress the ticks on the top, which is just, it's a beautiful soup. Ah, this is super. It's the best soup. We have, we have made a good auto web soup. You know, so I have a, an active, um, internal document and a GitHub issue asking for interop on the input type range and for them to finish it.
00:07:31
Speaker
in my opinion, it's unfinished. Here's another little thorny edge. You can put vertical on a slider and it goes vertical. Cool. Now I'm making music. Pump up the jams. But the ticks, they don't come with you. They're just like, oh, no one will do vertical with the data list. Wait, where do the ticks... And you're like, no, here I am. Do they go away?
00:07:54
Speaker
Yeah, they're just gone. It's like all that work is just toast. You're like, as soon as you make it vertical, they're like, no, I'm not going to draw that anymore for you. I was kind of hoping in the sinister way that the ticks stayed kind of like positioned to where they'd be. Everything is horizontal and they want it vertical. They're like, no, we're just going to stay here. We're good. A mustache to the, you know, give a mustache to the slider. Yeah, exactly. Yeah.
00:08:17
Speaker
Oh, sliders are packed with all. So like another one, this one bit me more than once before I realized what was going on. And this is totally a CSS thing. Like those special selectors, that Ma selector, those WebKit selectors that you're talking about, range, range thumb, or whatever they are. You can't use a comma and group
00:08:34
Speaker
the styling of webkits and mozzes together. It's ridiculous. Because if a browser doesn't understand one, it just chokes on the group, the selector group. And so I think you can use has now because has is forgiving. But then I'm like, I don't want to use has that's like totally inappropriate and is and where I don't think did it either. Anyway, so yeah, you have to break them out, which means you have to duplicate your code, which means
00:08:58
Speaker
I'm going crazy because it's not like I can put a class on these pseudo elements. I have to target them individually and repeat myself. Hmm. Very frustrating. Is or has might be a good choice, but it is weird. It just bails, right? It's just like, I don't know. I'm out. Yeah.
00:09:14
Speaker
That's one of those things where you like want to die when you don't know that's what's happening. You're like, I have it all listed. I'm being a good CSS developer. They're all grouped together and then, and then it's just not working and it looks right. And then that's like when you stack overflow it after like a hundred of them. And then you finally go down to one comment that has like one vote or zero votes. It's like, by the way, and you're like,
00:09:41
Speaker
Why is this the last one? Yeah, it's at the it's always at the bottom and it's like surely that's not true. No, surely. Surely that's not true. And then you test it and you're like, oh, 100 percent true. That's they. Wow. Wow. Josh Como has an article on it because it bit him.
00:10:03
Speaker
And he was diligent enough to be like, ah, let me, uh, heal the rest of the world with my blog post, uh, telling you that you can't use a comma. Yeah. That's funny. I knew it like, or I discovered it didn't work again. Like I rediscovered that it didn't work, but I guess I never really understood why, but I guess if it's bailing the forgiving versus the non-forgiving selector list, come on, this is computer science, CSS 101. Yeah.
00:10:33
Speaker
Most computer language have forgiving and unforgiving as the, like, Oh, you can't use that variable. It's that's a forgiving variable. And this is an unforgiving situation. So, okay. Another cool thing with input time. I'm so glad you brought this one up. There's so many interesting. I just was hacking on one yesterday. Um, and what I asked about was the, you know, the attribute function in CSS, uh, that will grab the value of an attribute off of a Dom node.
00:11:01
Speaker
Super cool. And then the V3 of it, or maybe spec three, I don't know. Anyway, the one that hasn't made it anywhere is like the cool attribute one that you can typecast them as a number, or like you can type the value that's inside of it and use it to concatenate something. So right now, if you use attribute, it's just always a string and I don't think you can concatenate it or there's like a couple of weird rules. But if we get this new attribute one,
00:11:24
Speaker
with the input type range, you could, so like I have a styled input type range that uses custom properties to know how much it's full to show the like filled amount, but I have to use JavaScript because I need to do some math. I need to take the current value and divide it by the max and times by a hundred or some crap like that.
00:11:41
Speaker
And if we had the attribute function, you could do it all in your CSS, it could read the value off the
CSS Innovations: Relative Color Syntax
00:11:46
Speaker
input as a number, put it in a calc and oh, no JavaScript, custom slider fill goo with whatever goo you want to fill your track and boom, it'd be right there. And then I go look it up. I'm like, where's this at? It's got tons of stars on chromium. You know, we want that everybody wants this feature and then security.
00:12:05
Speaker
security shows up and they're like, Oh, yeah, you want that attribute function? Well, someone could make a URL that pinks their server and just takes all the attributes, puts them on the end. And now you've got data tracking from CSS, you got people sniffing your inputs.
00:12:20
Speaker
Over the wire. That's the problem with Adder as a whatever. It's a brand new attacking vector that's actually got a lot of vectors that it adds. Why is all the coolest stuff? It's like, wow, that's so awesome. It also is the most dangerous stuff. Is it like that in real life too? I don't know why JavaScript is doing this. They're like, oh, CSS. CSS will never do something insecure like that.
00:12:47
Speaker
go use JavaScript. Meanwhile, cookies. All sorts of stuff. You're like, why are you protecting? There's another weird one too. It's like prefers reduced data. It's also behind the security thing. They're like really, they're really timid about adding new vectors for tracking you. And I'm like, can you focus more on the smorgasbord?
00:13:10
Speaker
of JavaScript's attacking vectors and a little less on these innocent ones over here. They're like the niche of the entire planet we'll know how to do versus this one that's all over Hacker News. All right, whatever. Nobody's going to use the
Browser Compatibility Woes
00:13:24
Speaker
adder function for bad things because no one's going to be writing CSS. It's only going to be like a handful of CSS nerds who are like, look what I can do. And then everybody else is going to be like, I'm just going to keep hacking people in JavaScript. It's fine.
00:13:37
Speaker
Yeah. They, I mean, yeah. Let's just disable the style APIs for third party scripts. And I think we'd all be stoked. I'd feel so safe. Funny. Another thing with input type range. Um, my question to you is when you were styling it, did you do the proxy slider or did you target each of the thumbs and each of the thingies and like fully style the input type range?
00:14:05
Speaker
Um, let's see. I, I actually, I want to make it invisible. So my thing was like creating like a dial input. Like I know you've built one like that's in Chrome or whatever, right? Like dev tools, the arc, you know? Yeah. The angle tool. Yeah. I'm kind of, I want to make, I'm wanting to make a web component that like is sort of like a guitar knob, you know, like what can Brad, um, yes. And cause there's a few things I want to kind of make with that. Like I have this little.
00:14:34
Speaker
It was actually a Google project from the Magento team, the Magenta team that Monica DeQuenzo used to work on. It kind of AI, exploration-y, TensorFlow team. But it was like this kind of lo-fi generator.
00:14:55
Speaker
Oh, yeah. Yeah. I remember that. That was a sweet app. Yeah. It was very cool. But using it is not so great. Well, it's great. It is just it's like a very like locked in experience. You know, it's very like go like you're watching kind of a flash app almost, you know, it's a canvas. But, you know, and you're clicking around and adding things and a cat shows up. It's great. But I kind of want the more like
00:15:22
Speaker
a rudimentary version of it, almost like just like a guitar rack, like like seven units like this that have knobs that I can play and tweak. And so I started building that and like stripping down the magenta work. And it was it's cool, but it was just kind of like I was like, oh, I need this knob. And then somebody was talking about does anyone know of a good knob control somewhere? And I was like, yeah, his name's Chris Koyer. Yeah.
00:15:49
Speaker
Just kidding Chris Take off a Alright, so you're doing the invisible route where you're like I want I want the interactions of this thing and nothing about how it looks So that's kind of what I call that like that proxy one you've hidden it It still gets all the keyboard accessibility the arrow keys all of the niceties except you just remap all of the values to something a custom control of your own and
00:16:16
Speaker
I think that's a strong strategy, actually. It gets you out of a lot of the hairy thorny. What other fun words that are things that are undesirable? Actually, I feel like this is a good moment because you just introduced, like, I think for someone who is, you know, bad at CSS listening, the concept that I think is awesome you have to clarify is that
00:16:34
Speaker
you're basically saying in order to map accessibility or just leverage the browser, you inject this DOM into the browser, make it go away,
Accessibility in Development
00:16:46
Speaker
but then you sort of puppet it behind the scenes and you give it some inputs and then it will give you some outputs and you have to feed them back to whatever your visual control is. And then also do some ARIA based things so that stuff goes away when screen readers come to and it just deals with a regular one. Do I have that right?
00:17:03
Speaker
Yeah. Yeah. It's just like checkbox. People have been doing that with checkbox for years, right? You hide it and you take, you take over. Yeah. And for my like guitar knob, it's just an input range with zero to one, right? The min and max. And then all I'm doing is I'm doing a setting of CSS custom variable turn.
00:17:23
Speaker
And I'm turning it zero to one. And so like, it's genius. Um, so it's like, just rotate 0.3 turn or whatever. And it's pretty cool. So I think that that's, does it go to 11 11.
00:17:38
Speaker
I'll make a custom one for you that goes to 11. So, um, you can actually set steps. So I think you set 10, it goes to 11 because I aforementioned zero. Right. Yeah. Off by one. Yeah.
00:17:55
Speaker
But yeah, I think that's just such an interesting thing to point out, because I think when you first start with CSS and you see a beautifully styled dropdown list, or range selector in this case, or checkboxes even, and you're like, forms I think is one of those areas where you get really excited about it. As a CSS developer, a front end developer, you see a beautiful form with great interactions and validations. And you're like, I want to do that. Or it's like that typical UI kit where you just see in a vacuum this beautifully
00:18:23
Speaker
organized bit of UI that's really doing nothing but like sitting nicely on a shelf and you're like, I want that. I want to do that. And then you go to build it. And then if you don't know to do that proxy style, you're like, where's the selector for the, how do I change the style for that? And then you don't know that the answer is.
00:18:45
Speaker
you don't and so you just look for hours if not days or just become completely demoralized and you're like i tried to style all these form inputs but i just i couldn't figure it out and it's not even like you you imagine there's some trick that you just don't know about and this this is really it that's the trick you don't know about is that you you don't really use them you do but indirectly
00:19:07
Speaker
or directly, indirectly. So I think that's just such an interesting concept. I think all beginning CSS developers run into this where they're like, how do I make it look good? And you're like, okay, well sit down. Lower your expectations and just use accent. So accent colors,
00:19:31
Speaker
Yeah, actually 90% of the way there. So Adam has beautiful, uh, you did this demo a long time ago because you did that one. It was like, uh, IO 2021. You had that live, uh, forms like workshop you did and you covered like accent color and all that. I remember that you did a lot of, I'll need to link that you did a lot of in
00:19:53
Speaker
crazy advanced things in that workshop that you like yada-yada over. You're like, all right, so I'm going to set the flex basis to this and then do that and that and that. And that's going to get this perfectly laid out like that. But now let's focus on accent color. And I'm like, well, now that's the easy part. What did you just do right there?
00:20:11
Speaker
That was a good one. That was like adaptive forms. Yeah. Did light and dark. That was a great one. Reduce motion, lots of accessibility, really good hit areas. I was proud of that one. I thought that turned out good. It was like a settings page. You could toggle notifications and toggle a volume or something like that. Yeah. Thank you, David. It looked great. I just wish you didn't have to go the dark web.
00:20:33
Speaker
to learn how to style a form, you know, like, or like an input or something like that. One day we'll get there. It's gnarly. I have an open props, um, like side to think. So I have the normalizing open props, but I have an inputs one that I've been working on for months that basically if I want it so that you don't have to do anything, if you put an input type email, it automatically comes with the email icon. It does light and dark. If you do a search input with a data list, I draw the little Chevron, it's all pretty, it's centered, you know, and you get the whole matching everything.
00:21:03
Speaker
And it's super ambitious. And so that's why you haven't
Nostalgia Break: Slim Jims and Tang
00:21:07
Speaker
shipped it yet. It's like, there's so many little things, whether it's HTML standards that are cool, that are part of an input, then I'm like, I want to empower that. Or things that are just like cross-browser doohickeys that are really hard for me to figure out. And like I say, like input type file on WebKit. I can style the button using the colon colon WebKit file.
00:21:29
Speaker
button, file, whatever its name is. I can't remember. I think there's a standard name and they got their weird one still. Anyway, I style it. It looks like all the other buttons. Juicy. Good. And then it's covering up the text that says like, drag a file here. And I'm like, I just want to push that text over. I don't know how to do it. I still don't know how to do it. So I got this only in WebKit. It looks like my buttons over top of the file you upload and you can't read what you dropped in. It's really frustrating. Yeah.
00:21:56
Speaker
Yeah, you would need JavaScript to make that nice. You'd have to build a custom element for it, just to make it nice across all browsers. To fill that text, yeah. I'd have to hide the whole unit, so we'd have to do this proxy thing, hide the entire unit so it's still a drop zone. It still gets all the events. But when you read it, I need the file name just so I can stick the text in there. It's like, come on.
00:22:20
Speaker
Um, but I don't know. It is what it is. Same time forms is interesting too, because it's super high stakes because you're grabbing someone, someone's like doing a chore. Like, you know, it's like the, like digital equivalent of like running an errand. So it's like, you stood in line, you filled out all your stuff and then you're ready to submit. And if you screw that up, you are going to ruin someone's day. Like they aren't just going to be frustrated. They're going to go talk about you.
00:22:45
Speaker
like to a friend online and then they're going to be like, this was awful.
Closing Thoughts: Humility and Learning
00:22:50
Speaker
I had to pull my credit card and that was downstairs. So I had to get out of my chair. And then I realized I didn't have this thing on me. I had to get my license and then, you know, so like forms for the most part can be really, really frustrating for a user. Whereas like, if you screw up on layout, everyone's like, Oh, that looked kind of ugly, but like, I get it. The box was supposed to be over there.
00:23:11
Speaker
And, uh, and it's not, but okay, moving on, like, unless layout's like explicitly covering something up, then that's bad. But for the most part, like forms though, like you, the tiniest screw up literally will make someone irate with you. And I find that to be like, I don't know if there's any other like spot in CSS that's quite as infuriating as forms. It's a show stopper, you know, and like.
00:23:35
Speaker
And sometimes it's your fault. Like I coded a bad that sometimes happens. Sometimes it's like not like the safari keyboard like jumps over your text input or something. And you're like, I don't know what to do, you know, or like, uh, yeah, it's um, I think all that's trying to get better. And I know, well, isn't there a new proposal for form sizing normal or something like that for,
00:24:03
Speaker
text area. Didn't I see an intent to ship? Oh, there was a, an automatically adjusting one. I think that's what you mean. Like as you type it, it'll grow type of thing. That is one of the biggest issues. I think with forms that is incredibly difficult. Like I remember having basically a long time ago, having to do like really long form, like, uh, comments and something. And so you would want the text area to grow. Uh, so yeah.
00:24:28
Speaker
just looked a lot nicer, especially on mobile. It was incredibly important. Otherwise, you were like, everything was cramped, and users were scrolling up on it. And the only solution is probably like 2012. The only solution was basically like, yeah, you get to Stack Overflow, and someone would be like, all right, here's a jQuery plugin that does it. And we don't really know who wrote it. Or here's the raw JavaScript for it, and it looks like.
00:24:55
Speaker
You know, reading like, you know, Moby Dick, you're like, oh, my gosh, this is this is how we make it get bigger. You're like, what? Yeah, I'm yeah, I'm a basic B. I just use like the rose attribute text text area. I just go rose 50. Let's keep it simple. It's fine. Yeah. Yeah. I mean, it's a you keep doing that at least gets you somewhere rather than
00:25:25
Speaker
What I like to do is subscribe to lots of complexity and be like, you know, we could have just used the rose attribute and it got us, you know, it got us like 80% of the way there. And then we spent hours just to get to the last 20. Yeah.
00:25:38
Speaker
And we don't even like it. I had a weird bug come through. Um, it was, we're using tip tap as a wizard wig on our app. I'm working on app called Luro. Um, but we're using tip tap and there's somebody was like, ah, it's jumping. You know, like when I like delete or whatever, the, the things jumping on auto-save. And that was kind of the hypothesis. I looked into it, you know, and I.
00:26:06
Speaker
couldn't get it to replicate for weeks. And then I just was like, I'm going to literally just type exactly everything I see in this like screen cap, you know, and it was just this really long list that was higher, taller than the screen. And that's, that's what happened. So then there was you, so it was anytime that there was like a bulleted list and actually not just a bulleted list, a nested bulleted list that was taller than the screen. If
00:26:33
Speaker
you had a paragraph or something above it and you hit the backspace key or the delete key, the one that reverse deletes. If you hit the delete key, you know, it tries to move the list up, but, and then move focus to the list. Yeah. Focus to the middle of the list, which was bigger than the page and caused the jump. I filed an issue, not with tip tap, but with pros mirror.
00:26:59
Speaker
And they fixed it really quick like that night, but it's still not like filtered down through the dependency tree there, but But it was just this weird issue with components or with I guess third parties but but also just with like Wizziwigs and forms and
00:27:18
Speaker
moving focus and even then I'm like, what's right? Who's the God of this webpage? Should a text area ever go more than the height of the page? Or should it always have a sticky bottom one RAM? And I'm just like,
00:27:37
Speaker
It has this all these like there's all these things you can do and try but like I can't spend like months on like a text area. I just like. Can you? Well, it's been a good day at least but you know it's just man like I guess yeah if you're if you're WordPress you should definitely spend more than a day. You should spend a month on your editor but
00:28:02
Speaker
I don't know. It's just, it's hard. That stuff's hard. Like you said. It's hard. There's a forms thing too, where like, if you put required on a text input and then you use the invalid CSS pseudo selector, it's red and the user hasn't even done anything. Like how annoying is that when you load a, load a form and it's like, you're already wrong. You're like, I haven't done shit yet.
00:28:25
Speaker
get out of my face. And then the solution is out of control where you're like, okay, well, I'll target inputs. I'll say not focus visible colon, not placeholder shown colon invalid. And you're like, this is definitely readable. I'm definitely going to come back to this and know exactly what my intent was.
00:28:45
Speaker
But now we have user invalid. Oh, so Chrome's about to show up late to this user invalid and user valid. If you've ever used Angular, any of these form things that do like a dirty invalid or whatever, which means the users touch it, we're going to get that for free. So you can kind of get rid of a lot of that stuff. You can target it as user invalid and it won't be read until they've made it dirty. So that's fun.
00:29:07
Speaker
That is, yeah, I was saying Angular was really great with this early on. I mean, a lot of ones I used to use Knockout way back in the day, had stuff with this as well. But yeah, anytime you get any like is dirty, it's like a lifeline. But then you're kind of like how much, if you're just building a simple form, like if you're already in the Angular world or in whatever world you're in, that's awesome. But if you're like, hey, David, we need you to build this form on this page. There's no, it's just HTML or it's just built with all server side.
00:29:36
Speaker
generated stuff, you know, like, Oh, do I have to reinvent the internet to do as dirty? Yeah. Yes, you do. Yeah. No.
00:29:48
Speaker
Well, and I, so I had to work around for this a long time. I'm glad it ship. Finally wins the ship. There's a ship in one set. It's coming up soon. So I just found bugs in it yesterday. Joey, the dev was like, yeah, he's like ready to go. And I'm like, I found weird things. I don't know if it's your fault. And he goes, Oh, that's my fault. I'm gonna go fix it. Yeah.
00:30:08
Speaker
Okay. Well, hey, good to find them bugs. We're good. That's good. Um, the, the, so I like figured out a way, like, I just, I wanted to use a native HTML validation. Cause again, pain point, like, and another pain point, I'd like to style those. Dude, I'm on, I'm on it internally also. Same thing with range. I'm like, if you all are going to start opening or even creating new components, I'm like, don't make a new component unless the ones you already shipped are good.
00:30:35
Speaker
Yeah. Yeah. Anyway, let's make the ones we have good, but I just, I feel like you just eliminate a whole class of problems without like another validation library in there, you know? Um, so anyway, I was like, let's just do this and came up with like a six line JavaScript, you know, it was just like, instead of like.
00:30:55
Speaker
Uh, if I detect like an error, right. Or like, you know, there's a check validity function or whatever. Um, I was like, Oh, we'll just check validity. And then we'll like go and, you know, on submit, check validity, stop, prevent default. If it doesn't work. And then we'll add a class like, Hey, there was errors class. And then, then, Hey, there was errors colon invalid. Then we style it with the red outline. There's a weird is done.
00:31:23
Speaker
This is where HTML gets weird. If the invalid event triggers first, like, so it pre flights and does invalid, and then it'll never hit submit if there's like an invalid in there. So like it fires the invalid event and then just says, I don't fire the, the, so you have to actually listen for this weird invalid event rather than the submit event. And,
00:31:48
Speaker
I learned that the hard way. But yeah, anyway, it's just a weird like I didn't even know like you could stop to submit. I thought like forms just kind of went for it or whatever or secretly ran check validity and then quit or whatever. But I don't know. Send your complaints to Randy standards, you know. Yeah, I guess I guess we could send it that way. He seems like a nice man.
00:32:17
Speaker
He's very passionate about HTML. I know. Oh, my God. I can't believe this. He's no way he's here. No way. One second. One second. Oh, yeah, brother.
00:32:37
Speaker
I've been going coast to coast, signing autographs and golden babies. And I just came here to say, HTML is the way. Oh yeah, brother. He's got to go. I don't know.
00:32:55
Speaker
He was so kind. It was epic. It's a good sound bite right there. He loves HTML. He's big. He writes his websites and all H ones. It's really, it's good. He's a very, he's got the biggest Dom. His Dom is huge. 24 inch pythons brother. It's just like, I make a baby look like a peanut when I'm giving it a kiss. Cause my arms are just so big.
00:33:22
Speaker
Oh man, that's good stuff. Snapping to a Slim Dom. That brings back. That brings back. Oh my God. That's like childhood all over again. Uh, Slim Jims? Yeah. I mean.
00:33:37
Speaker
My kids will house a swim gym or whatever the organic whole foods equivalent is. Well, you're not being against traditional swim gyms. No, I mean, as, as an involved parent, you care about their bathrooms way too much about you. But a swim gym is just, what a product. Just a, just a.
00:34:01
Speaker
Why were, why did we want it? Why did the guy in our belly causing a ruckus with a big flat top inspire us to go eat that food? It looked more like, Hey, you eat this. It's going to put a wild man in your belly and some shit's going to go down. It's all it's gotta be a product they made to like fix cars, you know, like, like, Hey guys, we have to oil the inside of this like,
00:34:28
Speaker
Tubing and so we'll just take this greasy stick and just like that's the only way to do it guys. Hey, have you ever tried eating one of these things? No. Oh, yeah, man. It's made of rubber, but it's really good.
00:34:42
Speaker
with all that orange grease on it. Okay. Why do we have to step into it? You know, like what, what does that even mean to step into a slim gym? I'm like, how big is a slim gym? Is it like a tree into it? You had to like snap into it. Oh, it was snap into us. But those don't snap. I didn't get that either. I was like, this is a pretty, it doesn't break. Do you, even when you get it and like chewing it, you're like, you know, yeah.
00:35:07
Speaker
Even like, yeah, a vice grip could not like pry that thing apart. And, uh, Oh man, I bet they're just used to swords now for cosplay. You know, cause they have the epically big ones as well. Cause they're like, you know, sales have been pretty good on the normal ones, but what if, what if, you know, it just unrolls as you eat it, you know? Yeah, it's on one of those.
00:35:32
Speaker
Those big things they put like a cable quaxal cable on it like yeah, big like spindles Oh licorice rope, but it's a slim Jim rope I Got a bellyache just thinking about it drinking a coke through it
00:35:52
Speaker
Hey, we all survived though, right? You think about them like all the junk and stuff I ate and, and, and it's like my kids are having, they have one 10th of that. Oh yeah. And, and like, they're even disinterested sometimes. We're like, here's like a cool sweet. And they're like, that's too much sugar. I'm like, what? When I was a kid, I just, I don't know. I didn't care. I just, is it acid? I'll, I'll eat that. You know, how's it going to do in my belly? I'll be fine. Cool. I'll try it.
00:36:15
Speaker
Um, you don't have a steady diet of gushers and fruit by the foot and slim gyms with Mountain Dew to wash it all down. What is wrong with you? It's seriously eating egos in the morning. Whatever sunny D was, it was like orange juice, but with extra sugar in like pancake batter or something mixed into it. I don't know.
00:36:36
Speaker
Or Tang. What was Tang? You're like, here's mystery powder. Who's the person who was like, you know, we all love orange juice, right? We love it. But the problem with it is, is it's not sweet enough. Like, you know, like, it's like, it's almost like, actually, that's not the problem. Like, so anyways, it's not sweet enough. We need to, we need to make orange juice, but with more sugar. Like, dude, my kids would probably die if I,
00:37:03
Speaker
Fed them a glass of the Kool-Aid I made when I was a kid. Just totally. You're like one cup. Yeah, I know. I'm going to do two. She does in like a half gallon container and they're just. Yeah. Oh man. Can you believe we scooped cups of sugar and poured it in a pitcher and just like didn't even think about it. We're like, I don't know what my health is like. Yeah, but I mean, I'm thirsty now, but that's whatever that's, you know,
00:37:32
Speaker
Oh, geez. Well, we're bad at nutrition. What else we bad at? Oh man. You know what? Well, this comes up quite a lot and it was actually in the state of CSS, which just came out. Yes. Content visibility.
00:37:51
Speaker
Yeah. Never on the decline. Never on the decline. It checks out. Never been. I can't say I've had a successful experience with it. I used it on this site. I thought perfect. I've got this bookshelf on my side. Boom. It's like a thousand pages long or whatever. Ten screen scrolls or whatever. I was like, this is the perfect use case. It like made the page slower. And I was like, what?
00:38:17
Speaker
What did I do? Like, how did I break this so bad? And then why do you got to just like give it a fake value? You're like, it's high estimates. Is the browser like my grandpa or something?
00:38:34
Speaker
Yeah, grandpa, it's a thousand. Like it's like, okay, it must be a thousand. So this is a wild value though. Yup. This is a perfect time to clarify content visibility because I saw, I saw Chris tweeted about that too, about like, Hey, content visibility is something that we really don't know anything about. And my awareness of content visibility is it's kind of like display none, but it's not. And so I'm not gonna, I haven't learned it. So I'm just going to keep.
00:39:04
Speaker
not using it. So why should I be interested in content visibility? I think it's like loading lazy for your nodes. It's like you get to tell the browser, hey, estimate this chunk of shit at like 1,000 pixels.
00:39:19
Speaker
Lazy paint and do it and yeah lazy paint it and you know Like don't don't don't worry about its actual size into until it enters the viewport or gets close or whatever And so like that's kind of where it gets a little janky's if you have a lot of them Yeah, when the page initially loads the scroll bar is all tiny because it's like
00:39:34
Speaker
early a thousand pixels estimated then then it goes actuality was two thousand two hundred and twenty three and then the scroll bar jumps and as you scroll down it jumps again as it adjusts to reality so explain to me why I really want this too because like I mean I'm sure there's situations
00:39:50
Speaker
But we live in a world of performance vitals. And in performance vitals, they're like, hey, CLS, can cumulative layout shift? You do not want things jumping. By the way, check out the content visibility property. That's not going to foot gun you at all. I know there are, but I cannot concretely think of a good example for it. It's like the comments at the bottom of a page or something like that.
00:40:17
Speaker
That would be one. I think they're like quintessential use case is the HTML spec, which is a 10 megabyte document. So like below the fold sections, you just want to say, yeah, they're a thousand pixels tall guy. Yeah, you bet. Like and then as you. So then the page is only however many sections HTML is. I guess we're on HTML five, so it's only five sections.
00:40:43
Speaker
That's fast. So anyway, uh, like, so there's like 5,000 pixels tall and then you actually scroll and it's 20 billion. So it just rendering performance then, because you still send in the HTML over the wire. So that's, that's still happening. It's basically in any associated CSS also going along with it.
00:41:04
Speaker
And basically HTML just says, Oh, as it's going through the tree, it's like, Oh, we got, we got a chunk of stuff. We don't got to worry about this. We don't have to worry about this right now. And then, and then when it gets time, it's like, Oh, okay. Oh yeah. That's right. We have that with those comments. We got to render. Okay. Let's do that now. Yeah. It's kind of like inert styles sort of. Right? Like, like, yeah, you stopped the crawler. It like finds a branch that you've said is.
00:41:28
Speaker
Okay. To have content visibility auto and with an estimate and it'll just be like, Oh, well then I won't worry about the rest of the branches off of this branch. I'll just stop here and skip the work. And does it estimate a size or do you provide like a default? You provide the estimate. Yeah.
00:41:43
Speaker
Oh, okay. That's great because software engineers are very good at estimating. It's a perfect swag moment where you're like, Oh, I'll just stupid wild ass guess this, you know, just here's, here's my swag. I'll swag a thousand pixels. I do have a very good use case though to share with you. Um, it is, but it has a condition. So, uh, for example, I've made a couple of demos with, uh, I recreated a Spotify playlist and you think about there could be a thousand items or more in the playlist.
00:42:12
Speaker
The key is that the row height on each of them is fixed. So it's not an intrinsically sized element. It's a fixed height. I actually know the size precisely. And I can tell it, you know, so it's not a swag anymore. I'm like, no, it's 100 pixels tall. Every row is in the grid. You know, since this grid made them 100. So then you can be like, so now content visibility auto. And as you scroll, you do see the scroll bar jump. They've done a lot of work to mitigate it because I complained a lot. But
00:42:39
Speaker
You get a very lazy loaded virtualized list feeling as you go down the playlist and scrolling up the playlist and so it can be superb in a scenario where the list length is known and the height is known and you basically get this free cheap virtualization.
00:42:57
Speaker
But I don't think a lot of people know that. That is a phenomenal use case. Like that to me is I'm like, subscribe. That is something that I'm now like putting back in the useful mine where I'm in a meeting and someone's like, we have to render all of these rows and it's really tough and virtualization is hard. And I'm going to be like,
00:43:14
Speaker
Yeah, actually probably use content visibility for that. And they're like, what's that? And I'd be like, yeah, I totally expert, uh, mode on that. But, uh, yes, uh, it's this tip I came up with. It's the virtualization. Uh, yeah, I know that one. No, it's, it's definitely the like, Oh, I only drink Chilean Pinots.
00:43:38
Speaker
Well, I'm from Chile is fantastic. It is great. It is great. But, um, I, I made a really embarrassing mistake yesterday. So, um, we get the, I get access to the engineers on Chrome, right? So it's like, when you have a thing that you're struggling with, you go to a coworker, you go to, to
00:43:57
Speaker
Twitter or Stack Overflow or something. And, um, I can ask the engineers and I'm supposed to only use that if it's like, you know, it's really important. What day do you talk to them? Just what days do you talk to them? Oh, I mean, as often as I can, usually Monday through Wednesday. Why Monday through Wednesday and about what time? Anywhere from nine to noon. I don't know.
00:44:24
Speaker
9 a.m. to 12, and that's Pacific. PST, yep. So I'm scared. 10 30 central time is you're a 30 Pacific. I could maybe just suggest some things. Okay, that's great. It's a good time, okay.
00:44:48
Speaker
Hey, your blog posts are very good. In fact, I referenced your blog post for your wants for 2023. You had relative color syntax in there, which we just did our intent to ship this last week. And in the intent to ship, you have to say what's developer sentiment. And they were like, Hey, Adam, we don't know what the developer sentiment is for this feature. I'm like,
00:45:06
Speaker
We want it bad. And they're like, Oh, prove it. I'm like, okay, I'll be right back. And then five minutes later, I had this list of blog posts and yours was one of them. Thank you for that. So that's good to hear. I mean, I tell people all the time, like just blog your problems and like, uh, it'll get upstream. Maybe like, or maybe not, but like, you know, if you have a weird problem, might not, but like, like this is
00:45:28
Speaker
I don't know. That's cool. Like, I don't know. I just like, I know Jen Simmons has run with some blog posts, you know, upstream that through and they've been doing awesome. It's I try to get people to just like complaining on Twitter is not going to get the job done. I mean, a little bit does. I don't know about that.
00:45:48
Speaker
I just, I think like the more you can just be like lay out something in a blog post. I mean, man. No, it's true. It's more constructive. It's like when it's the difference between going to a get up repo and being like, this doesn't work when I use it versus like, hi, I write this code right here. And it came up with this error right here. And if you clone down this repository, open up this, you know, M browser code editors, deck blitz, code sandbox, what have you code pen, what have you, you can get that error reproduced when you click this button right here and you're like, thank you.
00:46:18
Speaker
that that saved me a lot of time. Yeah, the like difference between like, like I actually have a blog post about this, too, like for like a small company, if you can give us any details rather than your thing, no work, you know, you're like, oh, I don't know how you got to that place. But even like error reporting and server logs don't quite meet it. But like if somebody is like, here is the issue, like, and here's a little reproduction of it, like,
00:46:45
Speaker
Gosh, that's so valuable. And you own it, you know, some rich douche can't just pull down your complaint off the internet randomly. Yeah. So sorry, I interrupted your story about talking to browser builders about my pet features. Go ahead. It was more like I was using Vue transitions and I was animating the pop-up.
00:47:10
Speaker
Um, which is a cool thing. I was just waiting for it to be cross browser. I think there's a polyfill. Anyway, pop-ups cool. And I was trying to animate with view transitions. Um, not the declarative way, the anyway, whatever. And I was like, it's not working. You guys forgot top layer. Uh, you know, like view transitions, doesn't know what top layer is or whatever. And then, um, I get on, I hop on a call with the dev cause he can't figure it out either. He's like, yeah, it should be animating. I don't, I don't know what's going on. I'm like, dude, let's look at the, you know, look here, look there. And I go.
00:47:36
Speaker
Oh, God, I forgot the letter S on my on my time. The duration is one and it needs to be one S and I put the S there and it animated and I looked at him and I'm like.
00:47:51
Speaker
I don't know how to give you any of this time back. I stole it from you. I'm so sorry. I was just like, I'm not worthy. I'm not worthy. And he's like, I'm not going to answer your calls anymore. I'm not going to find any more S's for you, man. Adam, we're going to turn you into a coupon system. You get so many coupons to talk to us. And I want you to really be certain with these coupons because we're only giving you five a quarter.
00:48:19
Speaker
Oh, that might be a good system. I don't know. I'm not saying for you, Adam specifically, but I don't know. Hey, you can, you, you get one token to complain about something. If it's a good complaint, you get your token back.
00:48:38
Speaker
Before we run out of time, I really want to get into this relative color syntax that was brought up because I'm a big, I'm pretty sure I'm going to do my bad explanation of it because I have not, I've not used relative color syntax to the, from the spec or from the idea of it, but
00:48:54
Speaker
From what I understand is something that we all kind of have done in any design or any sort of color adjustment is that you basically want to have a programmatic way of saying, this is a red. I actually want it to be less red.
00:49:10
Speaker
And doing that more so, or like, I want it to be based off of this red, but go in a different way. Or I want it to be lighter, darker, or shift the hue or something like that. And because that's all I do when I create designs, you're literally just shifting certain lightness, brightness or whatever down. Is that, and then this is sort of like having a formalized way of doing that.
00:49:30
Speaker
Yep. And it, it ends up being a lot like destructuring in JavaScript. It's super cool. It's like you destructure perform calculations on the values you destructured and stick them back in a color all in one line of code. It's fantastic. Yeah. So you can be like color from whatever tomato and then.
00:49:50
Speaker
But are like HSL from tomato. And then now you're dealing with the HSL layers and you can lighten and darken tomato however you want based on CSS variable or whatever. And the same now that like P3 and all these lab and OK LCH and all this stuff is out there, it's even more important, I feel like, because it's this like when when we're talking about colors, we're not talking about the same thing anymore. No, it's math now.
00:50:20
Speaker
It's math, right? Geometry. What color function and color space are you talking about? And so if we can just be like, I'm referencing tomato, but I mean whatever the OK LCH Rec 2020 version of tomato is. And it's this weird sort of
00:50:43
Speaker
Colors were always sort of like based on our perception of them, right? But but we are truly like even in the numbers, it's like whatever you coded it as is is probably different than what I did. But we just want to translate that or and move it. But I think the part that and I'm curious if this got in there, Adam, was that the
00:51:03
Speaker
Part where I'm interested in is like the like color contrast stuff. Is that going to kind of be in scope or not quite yet? So the contrast function is still in Canary as it was engineered last year. Same with Safari and tech preview. You can go try out color contrast there. That function has unfortunately not made large progress. There was progress a couple of weeks ago. Nicole Sullivan was able to convince the working group something that I wasn't.
00:51:33
Speaker
which is let the browser choose the algorithm that determines the contrast. And then she also pitched a simplified version that just picked black and white and didn't do any of the complex stuff yet. So it was almost like a, let's take some baby steps instead of trying to go for the whole.
00:51:50
Speaker
meet in Scadoodle. But for now, what you can do with relative color syntax is kind of, you can simulate a very powerful strategy. It's not perfect, but it's called L star. And so if you think about the L channel on OKLCH or LCH or lab or any of these that are in the perceptual psi space, that's a consistent space for you. If you minus 60% off of L, you almost always pass 4.5.
00:52:16
Speaker
So that's a superpower. So you can basically be like, OK, well, given this color, break it down with syntax. You'd be like, OK, LCH from hex value red. Here's my L minus 60% and then C and H. And so you just found a high contrasting complementary color that's still in the same hue and still saturated, but will give you the contrast that you want. I have a couple of code pens.
00:52:42
Speaker
that kind of show how you can build a light, dark, dim theme, all with custom properties in math and OKLCH, and it's ugly. I mean, it works, but it is not cool. So that's like the whole reason. If we get this color contrast function, all of my junk goes away. Every single one of these pieces of junk goes away, and I can automate it in the browser. The browser can be like,
00:53:04
Speaker
What contrast do they want cool bump it to x you know like are they in lighter dark i'm smart enough to know to choose between black or white like this stuff it's so much more powerful and succinct as an author to say i just need a contrasting color then to right now you know go into the l thing and make a best guess that we can with the current tools we have.
00:53:25
Speaker
So contrast function is like on the fly, I'm able to give it, what is it, give it like a certain desired color and a background color or something like that. Yeah, given red and I have a target of like double A. Right. Okay. And then it will say like, given this background, it's, you know, the surface it's on, you know, this is the contrast level right here or something like that. And you can therefore use that output instead of a function to do relative color adjustment to be like, hey,
00:53:53
Speaker
This is the surface. This is the color I'm going for. This is its current one. So I need to adjust it based on that. So you're basically, so yeah, this is basically what Dave said. You're no longer being like hot pink. That's fun. Color hot pink. Let's move on. Now it's like, no, let's do actual calculations to make sure that we have, we can basically guarantee that we'll have a accessible color with a contrast function, like mathematically.
00:54:17
Speaker
The guarantee is the part the CSIS working group hates is because no algorithm right now can guarantee it. They can all like they don't deal with transparency. If you're over top of a gradient, they can't calculate that. There's all these edge cases and they're like, we don't want people to get this false hope. This thing will solve all their problems and it's some magic silver bullet. Oh, silver bullets, they always come up.
00:54:41
Speaker
Um, anyway, so it isn't that it can't be that we don't even have the math in this world yet to get that task done. And so they're like, ah, punt, we'll just punt on the task because we can't confidently ship anything of maximum usability. And Nicole showed up and she's like, well, come on, just, just giving me black or white is actually a pretty good step. Okay. Like, uh, workout. So.
00:55:05
Speaker
That's yeah, I hate. I don't know. I like am a fan of accessibility, but I hate it when it's like invoked or over invoked or or, you know, I get the do no harm, but like preventing everyone from doing everything or anything seems like backwards. I think in most use cases, it will benefit the user, you know, like 99, but it
00:55:32
Speaker
It's the one case where somebody is like, I'm going to do this, but on something semi opaque or whatever, or like, I think that's their issue. It's kind of what I want to say. You know, it's like, there's, there's a lot with like open UI and popups and what if somebody does a list box instead of a combo box? It's like, yeah, that's their fault, man. Like, I don't know. Like, I don't know the difference. I've been making one site, 20 years, barely know the difference. So like,
00:56:01
Speaker
Like what I just sometimes I know I I loved smart defaults. I do think we need accessible defaults I just like but all the You know, I guess kind of padding, you know or couching we do to like prevent like
00:56:18
Speaker
somebody doing it wrong is seems, I don't know. I think people are going to do figure out ways to do bad things like me with the input range. I'm doing terrible things with it. Uh, let me own that responsibility. Like, let me do the bad things.
00:56:35
Speaker
Yeah, it's not even an accessibility issue at that point. It's just, hey, this is hard and that's it. Or a lot of times people will be like, we can't do that because of accessibility. And I'm like, actually, you can with accessibility. What you mean to say is that it's hard when you take that into account. And yes, and that, yeah. So we have to do that. I think it just, for me, it's just I think accessibility needs to be easy. I think it needs to be
00:57:05
Speaker
Something all of us know how to do generally, you know, there should always be specialists who are super good at it and, and can dig you out of really hard problems or surface problems you hadn't considered. I think like, but my, just my heart of hearts is just like, we all need to be okay at it. You know, we all need to be kind of a comfortable driving a screen reader, frankly. I mean, like we should all be like the kind of somewhat knowledgeable of how this all works. Like.
00:57:35
Speaker
But not everybody needs to be an expert, you know, and and so I don't know. I think.
00:57:42
Speaker
Maybe I just undermined my whole argument of like, give me a thing to do bad things. But I just, if you use the right tools though, to like, suss out problems, like you're talking about driving a screen reader, even just using like default built in screen readers to multiple browsers you have it. I find that you learn so much through that process. Like actually Adam once helped me build this very complex UI that was like looking like it was like splitting content as you hovered over it, but it was really just kind of like.
00:58:10
Speaker
superimposed inverted colors on each other but if there are any links from that content I would have to dive into the bottom one and disable all that and going through and to make sure that worked I had to go through multiple screen readers to make sure I didn't
00:58:26
Speaker
pain someone's day who's just trying to read our blog, who's like, great, I have to thumb through twice of your content because you don't know how a screen reader works. And when I go through that concept, I'm like, okay, I did, I used all the Aria stuff, right? It like works. And I'm not like a CS, I'm not like an accessibility guru, but that was like, I don't know. To me, that was not hard to, to just drive a screen reader and go through it. So I don't know. I feel like that's exactly what most people probably just need to do is like, it's not that hard. You just have to try.
00:58:55
Speaker
Yeah, I, I, my hope is like every web developer worth their salt couldn't use a screen reader. Um, yeah. Any web developer worth there's salt knows like I should probably use just HTML and CSS whenever possible before I, you know, slap a bunch of Aria on this thing. Um, yeah.
00:59:19
Speaker
But I think we need just a few more tools to make everything a lot better, a lot more expressive, a lot more, not cutting edge, but just, I don't know, easier. More manageable, drier. So yeah, relative color syntax is gonna give us a stepping stone towards that. So yeah, just everyone out there, like OKLCH and doing the math on L is totally decent.
00:59:44
Speaker
And sometimes it's 61%, sometimes it's 58. So there is some wiggle room amongst hues, but it's generally very reliable. I did want to mention a couple of other color things before we bounce. One of them is that I have an open props blog post where I share the future of color palettes and open props with relative color syntax. I've been waiting for the syntax to drop for this to sort of be something to release, but you would go in there and just set your brand.
01:00:11
Speaker
And I build you an entire 15 step color palette off of your brand from light to dark for you to handle the dark theme and a light theme. So I'm not going to give you just nine. I don't find those are enough. I give you 15. So I thought that was really cool. And then the other color thing that this is just, I was so amused at this last night. My wife goes, Hey, the color of that over there is golden rod. I was like, what, what did you just say? She's like golden rod.
01:00:34
Speaker
I was like, you know that color? That color is like a laughing stock in CSS. And she's like, why? And I'm like, well, there's a couple reasons. One of them is that, for some reason, we have four different golden rods. And they're all useless. We've got light golden rod, pale golden rod. And you're just like, what are these doing here? So we went on this tangent last night. My wife's looking at crayon boxes, because she knew it from crayon boxes. And then looking at the color in CSS as a named property,
01:01:04
Speaker
And anyway, it was really funny. I was like having a conversation about golden rod and CSS with my partner last night. It's classic, classic color. I love the colors, all the colors, tomato, golden rod, sea foam. Sea foam is a classic. Yeah. I always forget about sea foam. And then every time I do, I'm like, why do we forget about that one? It's like the best one. Best one. Best one.
01:01:25
Speaker
Yeah. Bisc, cerulean wheat. Yes. I forget about wheat too, but that's probably for the best. Say what, what way?
01:01:41
Speaker
Well, David, you want to close this out? I feel like that was so much fun. That was like might be our most informative one. Yeah, I do. I like it. I always try to like, you know, just for the other people, not for my own sake. I know these topics very well, so I have to.
01:01:56
Speaker
put the questions in of what those things are. So, um, everybody, uh, knows what they are. Appreciate your service. Yeah. Yeah. I just try. I just try. Uh, so yeah, that was amazing. We covered, uh, lots of good stuff forms. Um, we did relative color syntax. We did slim gyms. Uh, that was good. I liked that. Good 15 minutes. Really going to make sure to highlight that. We had two guests today because macho man, Randy standards showed up.
01:02:25
Speaker
It's true. Wow. What an action back deficit. So Dave, thank you so much for coming on, uh, sharing all the things that you're bad at CSS with, because that that's the journey that we're on. We all have to understand that no matter how much you grow and understand and know with CSS, you got to stay humble because it's, it's growing faster than you can. So thank you. And we will see you all on the next one.