Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--Rupert, and with me is Chris--in the office--Coyier. Hey, Chris.

Chris Coyier: That's right.

Dave: How are you doing today?

Chris: Fantastic, really. Going to Atlanta in a month.

Dave: Hot-lanta.

Chris: Yeah. Render ATL.

Dave: Nice!

Chris: There's going to be thousands of people there. Unbelievable that they're able to pull this off. A real testament to what they're building there. It's only the second year of it, I think.

Dave: Really? Okay.

Chris: I think they came out... They just came out swinging.

Dave: I feel like I've heard of it for many years, but that's--

Chris: Maybe I'm wrong about that.

Dave: But maybe a second year after the old lock-downs or whatever... maybe.

Chris: Oh, right. I think you might.... Maybe... Okay. Well, ignore me on that point. The point is it's coming up May 31st through June 2nd. Yeah, I'm keynoting the CSS section of it.

Dave: Ooh... Cool.

Chris: Pretty nervewracking because that's a lot of people there, and it looks like they... It's a multi-track conference, and the tracks get smashed together at the end for the keynote. You know that kind of vibe?

Dave: Yeah. Yeah, yeah, yeah.

Chris: That'll be me. And my talk... If you've ever seen a Chris Coyier talk before, I'm not going broad in terms of, like, "Let me tell you a story," or some kind of generically relatable thing. I'm talking about CSS, kids.

Dave: [Laughter] Let's get to work. Yeah.

Chris: Yeah. Really directly that. That's what I was kind of asked to do, and a lot of the speaker kind of communication is like, "Don't go beginner. These are technical people. Get technical. Go medocre. Go advanced. Go deep. Respect people's intelligence here." And I'm down.

Dave: Cool.

Chris: So...

Dave: What's the plan? Do you got a plan? Okay.

00:02:09

Chris: I'm putting slides together. I'm calling the talk "Modern CSS in Real Life." You'll only be able to see it. I'm not going to spoil anything too much. Come to Render. Check it out.

But I'll tell you what I'm going to do.

Dave: Okay.

Chris: I called it "Modern CSS in Real Life" because I wanted to make sure that the things that I talk about, I'm using very real-world reasons why I think it matters.

Dave: Yeah. Less like, "Ah, man--"

Chris: Theoretical or whatever.

Dave: "--you can put--" I saw this. Somebody put a 3D fish on their website. That's okay, but maybe that's not real-world.

Chris: Yeah.

Dave: Maybe that's really sort of a certain kind of site or something.

Chris: Yeah. I don't even know where I'm drawing the line, but there are things that I cut that I just didn't feel that strongly about. There's even still--

I've got it down to five. I'll tell you what they are. Number one is I'm going to do a section on logical properties and layout.

Dave: Okay.

Chris: Just interesting points to be made there, I think. Two is container queries and units.

Dave: Mm-hmm.

Chris: I'm even starting it with units because I feel like container units get less love, so you'll get it from me. Cascade layers, which is the one I feel... It's not a very long section, so I think it'll be okay. But it feels like there are a couple of very real-world things I can slip in there. Hence, kind of leaving it in there. But I feel less strongly about it because I haven't used it all that much.

Dave: Yeah. We kind of talked about it a few episodes ago.

Chris: Yeah.

Dave: I like it. I just have not migrated anything to it. Then even if I did something new, it wasn't my first. I don't have the muscle memory to be like, "Ah, I'm doing something new. Wrap it." You know? Wrap it.

Chris: Right.

Dave: You know.

Chris: I think people should know about it, especially for greenfield stuff, because I think I would do it for greenfield (almost no question).

Dave: Yeah.

Chris: Because I see some of the advantages, and I lay some of that out. Four is new colors, which I'm just so freaking excited about.

Dave: Oh, my gosh.

Chris: Just the whole spectrum of new color stuff. I will say there was a JS party where our old bud Adam was on talking about all the new color stuff, and he does such a good job with it that I might have to steal some of his analogies and stuff that he uses because he's very eloquent in talking about it, and I hope to bring some of that to the party.

00:04:35

Dave: Yeah. I was surprised to learn... We had... Oh, man. I'm blanking. OKLCH, Andrey.

Chris: Yeah, Andrey. Yeah.

Dave: Had him on and talked about RGB only gets you 33% of the visible color spectrum.

Chris: Yeah. [Laughter]

Dave: I just was like, "What?!"

Chris: What?! [Laughter]

Dave: You know? Then sRGB... sorry. That's sRGB. But HDR or whatever we're calling P3 gets you up to 45% or something. And I just was like, "Wow!"

Chris: Yeah, it adds another 20% or so, I think I heard.

Dave: Yeah.

Chris: Then Rec.2020 adds another 20+%.

Dave: I think it's like 75% of the visible color spectrum - or something - is represented.

Chris: Yeah.

Dave: Which is--

Chris: Pretty good. It's one of those things. You know what it reminds me of? Remember when Apple started dropping displays with a higher pixel density, and they had some fancy name for it? What was it?

Dave: Retina.

Chris: Retina.

Dave: Retina. Yeah.

Chris: They just pulled that out of the air, but it made you think of eyeballs, and they wanted you to think of eyeballs because they said, "This is basically about as dense of pixel density as you need."

Dave: Right.

Chris: I don't know if that'll turn out to be true, but the point was that your human eye isn't going to get... It doesn't need 4x more than this because it's already pretty indecipherable from reality.

Dave: Right.

Chris: That's what they wanted you to think, anyway. Maybe that turns out to be true. I think that's probably going to turn out to be pretty close to true with Rec.2020 is that 75% is close enough.

Dave: Right. Well, and apparently no monitor supports it. [Laughter]

Chris: Yeah, right.

00:06:26

Dave: So, it's all theory. I guess that's real-world versus theory, right?

I was in Brooklyn, and I heard this talk. It was at a conference, and I heard this talk. It was very... hmm... art school pretentious level. You know? I hate to be that guy.

Chris: I got you. No.

Dave: But it was very art school, and this guy was like, "We made a six chromatic process," because the tri-chromatic process can only get... It can't cover all of the sRGB spectrum.

Chris: Mm-hmm.

Dave: "We made this six-color process to cover the whole entire -- whatever. Six chromatic process to cover the whole entire sRGB spectrum. We're printing colors that have never been seen." Then it was like, "Books are better. Obviously, physical artifacts are better."

In the back of my head, we had just done this Andrey episode, and I was like, "Well, actually, SRBG only covers... [Laughter] It doesn't quite cover all of it."

Computers have a major advantage. Browsers today can do 20% better than your brand new color... Anyway, I just was like....

Chris: Yeah.

Dave: I didn't want to, "Well, actually--" the speaker, but it was this funny moment of, like, now that I know about color, I'm kind of cursed. You know?

Chris: Well, it's interesting. Was it that normally printing a CMYK has some limitations to how much color you can replicate in that system?

Dave: Yeah.

Chris: Yeah.

Dave: But what's weird is even sRGB always struggled with pantone. And so, I feel like maybe it's just finishes is sort of the big difference - or something - that you get in print and that you don't really get in Web. But anyway, I just was like, "It's very cool you invented that process. However, sRGB is super out of day, my guy." That was my big takeaway.

Chris: Yeah. I don't know enough to know where they're going to get with that, but it might be the process might unlock more potential than you think - or something. I don't know.

Dave: Yeah. You could just imagine more. Instead of screen printing three colors, you're screen printing six passes - or whatever.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah. Yeah. It's certainly more work. There are a lot of six-color presses, though, which makes it interesting. In my print days, they did CMYK, and then they would always have one for a pantone because it's un-replicable in CMYK reliably. Then they always saved one roller for a coating or something, like a little shine or something. That's why there were so many six-color presses.

Dave: Yeah, for metallics and stuff. But yeah, it was interesting, too. Somebody was like, "What version of Photoshop are you on?" I don't know why this came up, but he was on CS3 or something, or the old-old-old version.

Chris: Oh, cool.

Dave: I was just like--

Chris: Yeah. Like no cloud stuff.

Dave: It sent me through a mind bender just because I was like, "What are we doing?" I don't know. [Laughter] Designers update software. Surely, they do.

00:10:02

Chris: Yeah, but color stuff... This is actually an interesting thing to talk about. There are a lot of levels. I'm going to be presenting this, my talk, on a projector, right?

Dave: Right. So, that's probably HD--

Chris: There are a couple of levels there. Yeah.

Dave: Maybe 4K, but probably not HDR, right?

Chris: Almost certainly not. You know?

Dave: Yeah.

Chris: Even a pretty nice projector, probably color-wise, is probably somewhat limited.

Dave: I had to, for Frontend Masters, they made me download this whole color profiler thing to key tone or whatever the thing is to Chromakey it, the right values and stuff for their capture and their project and all this stuff. It was wild.

Chris: Yeah. Okay, so I have the projector working against me a little bit if I was trying to show you one of these colors. But even then, let's say it was capable of it. It's still being blasted across some dusty air - or whatever. Then the lighting in the room is going to affect it and stuff.

I imagine they're going to do a tremendously great job of it all. But it's not going to have the same pop as it would like a backlit OLED screen or whatever.

Dave: Right.

Chris: No way.

Dave: Right into your face. Right.

Chris: But not only that. I'm producing my talk in Keynote. I've always been a Keynote fan. I've always been a little weird about it because I was like, "Shouldn't this Web guy use Web software for it?" But I just fricken' like Keynote. Give me a break.

Dave: Right. Right.

Chris: I just have a lot of muscle memory for it. I think Magic Move is fun. Yadda-yadda.

Keynote, I don't think, is HDR. I can't pick. And not just Keynote, but I use Mac OS, right? A lot of the native software -- I'm thinking like pages, numbers, and all that stuff -- they don't build their own color pickers in like Photoshop does. They know that color is so important to them that they build their own of that stuff.

I think Photoshop of today -- I guess kind of to your point on why are you using CS3 or whatever -- has HDR stuff in it. It might be a little buried, but you can click around and find some places you can at least key in some values to show off.

We're saying HDR colors, and I think that's a nice way to think of it, though, actually. We went from--

Dave: Yeah. I don't know if it's correct, but that's how I think of it.

Chris: It is kind of, and it evokes that period in technology where we had low, you know, standard definition screens, and then we got high definition screens. That's what's happening now with color. We have standard definition screens and we're starting to get high definition colors. But a lot of technology has to hang out together in order to get that to work, including the software.

In Apple's own software, they don't build their own color pickers. They just use the one from Mac OS, which makes sense, right? They built it once. Why not use it consistently across all their products? I think that's relatively smart.

But if you open up that color picker, and I'm sure you can picture it, it's the same one that you would get on the Web if you said, "input type equals color" and you were using a Mac. You know? I just pops open the system level color picker.

That color picker, a little bit of a love-hate relationship. I get what they're trying to do with it, which is some people like picking colors in different ways.

Dave: Mm-hmm.

Chris: There is a crayon mode, Dave.

Dave: I know the crayon.

Chris: Pick which crayon you like.

Dave: Yep. Love that crayon mode.

Chris: A little cheesy, but some people like it. Fine. I have been known to use crayon mode occasionally.

Then they have kind of a traditional sRGB color wheel kind of thing with the brightness slider on the side. That stuff is going to get a shakeup, I think, in the next couple of years. And if it doesn't, I'll be disappointed because those ways that you choose colors, that's not the one true way.

Dave: Mm-hmm.

00:13:57

Chris: I think there are better ways coming. Notably, what I'm trying to say, in that color picker, there is no way - none at all - to pick an HDR color. Nothing. You can't even sample one with the color picker and go pick one that's being displayed, say in a browser. It'll just immediately down sample it to sRGB.

In my slide deck, I can't really show you the P3 colors or Rec.2020 colors. Even if I could there, then I'm still going to lose it on the projector. You know? [Laughter]

Dave: You may be able to put an image in there.

Chris: A JPEG, yeah, maybe.

Dave: We had talked to Adam, and he was like, "Yeah, we had to update JPEG, basically, to support these colors." It has this--

Chris: Yeah. I asked him about that.

Dave: Yeah.

Chris: That's a good point, right? It was based on something he said on that podcast, too. It's like, these days, if you take a picture with a camera (any camera, really)--your phone camera, regardless if it's Android or whatever. Cameras got so good on smart phones. Or certainly on a big, fancy DSLR kind of thing--and take a picture of the sunset, that's going to be HDR. They're ahead of the game because they want that photo to look amazing. You look at it on your computer, those HDR colors will remain intact if your monitor can handle it.

I think stuff like JPEG had to go first.

Dave: Mm-hmm. Yeah, I guess so.

Chris: In the chain, and then other stuff catches up to that.

Dave: Yeah, it's weird, this whole... I mean I guess it's always been true, but it's this idea that color is fully relative is very wild. It kind of melts my brain.

Do you think we're going to head to a future where, "Oh, your website is so standard def, it's terrible"? [Laughter]

Chris: I kind of do.

Dave: Really?

Chris: Yes!

Dave: Will you be like, "Oh, my gosh. That website is standard def"? [Laughter]

Chris: I had to go through an emotional journey on that because--

Dave: Oh, you got standard def stuff?

Chris: [Laughter]

Dave: ...standard def? [Laughter]

Chris: [Laughter] Well, what's interesting about it is that you--

Dave: Okay, LOB.

[Laughter]

00:16:23

Chris: Well, you've seen the models. They only go up. The new colors that were granted in P3 and Rec.2020 are more vibrant and more intense.

Dave: Mm-hmm.

Chris: We didn't get extra stuff at the bottom.

Dave: We didn't get ... purple.

Chris: The blacks are blacker.

Dave: Yeah. Yeah. Yeah.

Chris: You know what I mean? If you don't need ultra vibrant colors, which I don't think every brand in the world does, then what? Then you don't gain a hell of a lot from this.

Dave: True.

Chris: But I do think there's going to start to be a feeling that a previously pretty bright green, like if you are trying to evoke a bright green, the best sRGB can do is not going to feel very bright. It's going to start feeling dimmer than it did before.

Dave: Yeah.

Chris: You're going to be like, "Oh, that's as good as you can do? You should be able to crank it up a little bit."

Dave: Right. Right. Yeah, I wonder if the little arrow in the Amazon logo, if you're going to be like, "That's so basic." [Laughter]

Chris: Yeah. It's like when a website still has a really pixelated favicon. You're like, "Ew."

Dave: Hey. No judgement to anyone.

Chris: Yeah.

[Laughter]

Dave: ...okay, everybody. [Laughter] Maybe you just haven't figured out how to make a favicon in a really long time and you just don't want to put one.

00:17:49

Chris: We used to use this... What do you call it? Do you use Tailscale? Do you know what they are?

Dave: Um... It sounds familiar.

Chris: It's... What do you call it? A VPN kind of product.

Dave: Yeah. Yeah.

Chris: Like Nord or whatever. We used to use an old one. God... What was it called? Anyway, it doesn't matter, but they often... When you're trying to use it at the OS level (so it's just like everything is going through that), they often ship themselves as menu bar apps.

Dave: Mm-hmm. Mm-hmm.

Chris: That way your computer is just on the VPN. It's not something you're doing on an individual connection basis.

It had a really, really nasty, old bitmap icon in the header. I was like, "I would change to worse software just to not have that in my menu bar all day long." [Laughter]

Dave: The bad menu bar app? Yeah, okay.

Chris: Yeah.

Dave: Yeah. That's fair.

Chris: Thank you, though. We're on Tailscale now. Great product. Very cool. Huge valuation somehow. It works great. Thanks, Tailscale.

Dave: Wonderful. Yeah. No, I think the colors thing, the shocking part to me... because we're kind of getting into that.

Luro has a concept of tokens, design tokens or styles, we call them. But they're design tokens. I think we made the decision to just render that color out in RGB, so hex or #aabbcc.

Chris: I think you're in the best possible place to do this then because you can do the old thing where you use the media query that tests for browser level support of HDR colors and then rewrite your design system tokens with HDR colors.

Dave: Yeah. Well, it's interesting. We're in a position, but we use Figma as the source, and Figma doesn't have HDR yet. They might not for a while because Canvas, that stuff isn't in Canvas, to my knowledge. You can't write an OKLCH color into Canvas.

That all is really... That world is interesting to me. Are we basically...? How do we upgrade every single piece of the Web platform?

Chris: Yeah.

Dave: That's my understanding. I could be off of that. Or if I copy-paste, drag and drop a blog, an image, and HDR image onto a Canvas and spit that out, am I actually not getting the HDR?

Chris: Yeah, right. There are a lot of moving pieces. As soon as one piece doesn't come along for the ride, it gets clipped. It's back down.

Dave: Yeah. It gets nerfed. Yeah.

Chris: Which is okay. That's a good model, I think.

Dave: That's actually... Yeah.

Chris: Yeah. Yeah.

Dave: Yeah, it's very good. It's safe to say CSS has HDR colors and JPEGs have HDR colors. And browsers now have HDR colors. They didn't always. They couldn't always render it.

Chris: Yeah, and monitors have HDR colors, and it just so happens that's the full stack for using it on the Web. [Whistle] Made it.

Dave: Yeah, we made it. Yeah, so you need all those pieces, right? All those pieces need HDR.

Chris: Think of all the color nerds who came before us. All these conversations happened at hardware manufacturers, too. They're like, "Ah, this is going to be amazing. We're going to be able to show HDR colors on our monitors." But nobody card until the technology that, like, cameras could do it, too, so that there is actual content that can use the content on monitors.

I think the Web is almost one of the last steps. Although, I say that, and I think OS is kind of the last step, actually.

Dave: Yeah. They need to make it happen too, right?

00:21:44

Chris: Yeah, because I'm wondering what the conversation at Apple is like, and at Microsoft for Windows.

Dave: Yeah.

Chris: Do they not have HDR colors in these native color pickers because they can be used wrong?

Dave: Mm-hmm.

Chris: Not every monitor in the world supports these. Not every Web technology uses it. So, if they make it really easy to copy, say, OKLAB colors and it's in that spectrum, that all of a sudden they've provided a really easy way to get your hands on a color that renders as absolutely nothing on the Web - even in their browser, Safari. That clipping doesn't happen like that on the Web.

Dave: Mm-hmm.

Chris: If you pass in some new color function that doesn't exist, you know, with numbers that don't work on a browser, you just get nothing. You get white.

Dave: Mm-hmm.

Chris: That's not good. So, I wonder if that's an intentional choice for them to not put that there. They want to be the last mover, I think.

Dave: Has this happened before where they're like MIT nerds in the '80s who were like... before an image was even possible, they were just like, "One day we're going to use more than 16 colors for an image"? You know? [Laughter]

Chris: Yeah.

Dave: "We're going to have 256 colors. It's going to be amazing." And "How are we going to do that? That's a lot of colors?"

Chris: That was my final question, and I think there is a satisfying answer for it, but I'm like, "Why do we have to keep baby stepping now?" The modern monitors... I think most of my professional life, it always said millions of colors.

Dave: Mm-hmm.

Chris: But now we have transcended that. We're up to the B's. We're up to the billions of colors. So, why continue to make color spaces that are a subset of all renderable colors? Why? Why not just go all the way to 100%?

Dave: Yeah. I don't know.

Chris: I feel like I've heard the answer a couple of times now, and I can't quite wrap my head around it. But part of it is what the color model looks like. There are spaces in models, right?

Dave: Mm-hmm.

Chris: You can have multiple models in a space. HSL, which I spent a good amount of years telling people was a really good way to do colors--

Dave: Yeah.

Chris: --is still in the sRGB space. It's just modeled differently. Famously modeled as not a cone or a sphere.

Dave: Like a cake?

Chris: Yeah, like a cake. [Laughter] What am I trying to think of? A cylinder.

Dave: Yeah. It's like a rainbow cake, almost. Yeah.

Chris: Yeah, and it just has different properties for all sorts of stuff, like how gradients happen and all that kind of interesting thing.

00:24:38

Dave: Well, and it's interesting, too. I think all this stuff started in the '20s. People kind of figured out, "Hey, we can kind of use math to describe colors." I think A) it's wild back then they were using math to describe colors.

Chris: But it wasn't just math. That's the beauty of it, Dave, is that it wasn't just a nerd who said, "I'm going to use the number 84 for a certain color, and 83 works and 82 works." It was way cooler than that.

Dave: Mm-hmm.

Chris: They got actual human beings to sit and look at colors as lights were being shifted and manipulated and reporting what they were seeing, lots of people, and averaged it all out. That's why some of these really cool color models are based on human perception.

Dave: Yeah.

Chris: When you change the lightness value a little bit, it's not changing it mathematically. It's changing it based on an increment that humans can perceive. That's so cool.

Dave: Yeah.

Chris: That's literally the coolest thing ever.

Dave: Isn't that weird? That's so weird. Yeah.

00:25:49

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Frontend Masters. There are so many courses on here, the highest possible quality courses, almost focused on maybe you're already a front-end developer and you need to learn a new technology or really level up. You definitely can be a beginner, too, so think of that.

I think a lot of people that listen to this show are kind of in that intermediate zone. This is the place for leveling up and learning new technology.

We've got courses on here about Next.js with Scott Moss. We've got Ben Hong on here, Brian Hull, Kent C. Dodds. Sarah Drasner is on here. There's nobody I'd trust more than Jen Kramer to teach intermedia HTML and CSS. Just amazing. The best of the best, and Dave. [Laughter]

Dave: Hey! I've got a Web components course out there. I don't know how I slipped in, but I did. Let me tell you. It's going to teach you Web components, yeah, if you're interested in that. I feel like they're a hot topic this year, so people should go sign up and watch it.

Chris: Yeah. Dave, you're early to the game, as usual. You know what's going to be big.

Dave: I used my code smeller, and I smelled out the next big one, baby.

Chris: Yeah, dude. Web components are not going anywhere, and you might as well learn them now. Check it out at frontendmasters.com.

[Banjo music stops]

00:27:17

Chris: Right, so the model is if you go to... We had the guest, Andrey, on again. If you go to oklch.com, knowing now what we've talked about on this show, and make sure that there's a little button that says, "Show 3D," click that "Show 3D" button and look at what that color model looks like for OKLCH. It's really weird.

I've been playing a lot of Breath of the Wild, Dave. My fresh run through it. It looks like some fricken' mounts in Breath of the Wild.

Dave: Yeah!

Chris: It looks like some weird mountain range of colors.

Dave: Wild. Yeah.

Chris: Very interesting. Look at how underrepresented yellow is. I think that's fascinating. The other thing I learned from Adam.

Dave: Oh ... yellows....

Chris: There's very little yellow. There's not a lot. There's not a lot you can pick from there.

Dave: We could get more greens, too.

Chris: But purples and blues are... yeah, and green is the tallest peak. That's so fascinating. This is based on research and somebody deciding that this shape actually has lots of advantages for how color is represented. This wasn't just invented out of thin air with math. This was invented very specifically for reasons on how color works. It's so cool.

Dave: There's a lion in there, too. Yeah, it's weird to think color is not three numbers. Although, that's how we do it. It's not even XYZ, but it is a point in a 3D space of some kind.

Chris: Right. Right.

Dave: I wrote a dumb blog post a while ago. We think of color as a spectrum, right? ROYGBIV, right? That's what we first learned. But the actual color is way more complex. It's like a 3D space.

Chris: At a minimum, it's 3D. Yeah.

Dave: Yeah, and R, G, and B would be 3D, right? You have red and....

Chris: Yeah, and sRGB sucks because it's a cube, right? It's too mathematical, which was the problem with it, which is why we didn't get stuff like universally consistent brightness because it was forced onto a cube.

Dave: Yeah.

Chris: Rather than forced onto a model that matches human perception.

Dave: Almost all of the color pickers like brown, black, is all just very mud. It's just not the vibrant like you hope for from a brown or a yellow. It's just not... yeah.

00:29:42

Chris: Fascinating. There are so many interesting things, and I'm sure I've said some wrong things here, too, so don't take me as an expert here. But it's fun to learn about.

Part of my journey kicked off with learning (a few years ago) when there was a little bit of a tech cycle around what Eric Kennedy called the gray dead zone of gradients.

Dave: Mm-hmm.

Chris: It was because, in the RGB space that hex codes use and stuff, if you went from, say, yellow to blue, you went right through shitty gray land, and you got this bogus gradient. There are so many different, interesting ways to solve that, but OKLCH is one of them, even though, specifically from blue to yellow, I don't think is that great.

You can even see, if you still have the mountain range open, that to go from blue to yellow in OKLCH, you can't avoid green town. There's a big mountain of green in between those two spots in that 3D space.

Dave: Mm-hmm.

Chris: You're going to get some green in there. That might be okay. You might like it. But it just so happens that the model for, for example, OKLAB doesn't go through that green space and, in my opinion, produces a more pleasing and reliable blue to yellow gradient.

It's one of those things where I wanted... My brain so much wants to just say, "OKLCH is the winner. Everybody should use that," and I think that's largely true. But then I was playing with gradients more. I'm like, "Argh! There's just not going to be a winner."

Dave: Gosh. That hurts my heart, but that's okay.

Chris: I now. Doesn't it? Let me mouth blog something for you, though, really quick.

Dave: Okay.

Chris: You say background colon (in CSS) linear gradient.

Dave: Mm-hmm. Perfect. Got it.

Chris: Then you say to bottom comma - whatever - yellow-blue. So, it makes a gradient from yellow to blue. It's going to do that in sRGB because those are named colors.

Dave: Yep.

Chris: Whatever already. But you can tell that gradient now. This is one of the new syntax things. You can say in HSL. You can say--

Dave: Oh, so like to bottom in HSL?

Chris: Yeah.

Dave: Or LCH?

Chris: Yes.

Dave: Yeah. Okay. Wow.

Chris: And it will then interpolate those two colors in a different color model.

Dave: Whoa!

Chris: Still RGB in this case because HSL is RGB, but it will use the HSL, that cylindrical shape. There's a cool Adam blog post where he discovered that you can also tell it to go the short way or the long way on a color model.

Dave: Yeah! I saw that, too. I didn't know that keyword existed.

Chris: No, but you can go to longer - or something - too. There's another way. So, you could say, "Make a gradient from red to red in HSL and go the long way," and you get a full ass rainbow of colors because it went the long way. [Laughter] That is really weird.

Dave: No. Well, I think it's cool. I think it's good to have options. I think it defaults to short, right? The shortest path or whatever.

Chris: The shortest path, right. You can tell it to go another way.

Dave: Yeah.

00:32:48

Chris: But here, let me keep going for just a second. You can say in HSL. That's okay.

Dave: Mm-hmm.

Chris: But I don't think HSL is that good... that color space is that good for interpolating gradients. You'll find it's pretty gnarly.

So, the trick then is I think that's so little code that people will actually do it, just saying "in" and then what space you want it to be in, because it's really easy and quick to experiment with, and the syntax is pretty straightforward. So, if you have the gradient that goes from blue to yellow, type in "in sRGB." Well, it won't change because that's what it already is.

But then type "in LAB" and just see what it does. Do you like it, what it looks like in LAB?

You can type "in OKLCH," and it will model it in OKLCH. You can pretty quickly go through the generally good ones.

Dave: Yeah.

Chris: In that particular gradient. If you type "in OKLAB," I think most people would agree with me that, from blue to yellow specifically in OKLAB, that's a nice looking gradient.

Dave: Okay.

Chris: Almost every other color space flubs it to some degree. And some of them are like, "What is pink doing in there? That's awful."

Dave: [Laughter]

Chris: That's why I mean you can't... OKLCH, I think, is generally talked about as it does pretty much the best job on gradients but not always. In the case of blue to yellow, it's not. I think the heavy green land that it goes through is not good.

Dave: Do you think specify in LCH and then coerce your gradients, is that kind of the... maybe the--?

Chris: Yes.

Dave: Or OKLCH?

Chris: I do think that because a big reason to use OKLCH is because you get access to that P3 color space and Rec.2020. You won't have to change it. I would definitely say spec in OKLCH.

Dave: Spec in OKLCH.

Chris: Yeah. Right.

Dave: Coerce in whatever makes sense. That's, again, color is fully relative. It's mind-bendy to think about that. It's just that, like, "Hey, guess what. Gradients, you have to figure out what color space. You need to be an expert of color spaces now." [Laughter] Surprise! New job description. It's going to be different the way you do it.

Then how are you going to do that in Tailwind? I don't know. Gradient G-LCH-red-blue. I don't know. It's going to be on us to know that stuff or have opinions, so you really have to experiment.

Chris: Yeah, you do.

Dave: It's a lot to think about.

Chris: It's early days, too. I'm not trying to scare anybody.

Dave: No. Scare people.

Chris: You can make a product that makes your startup money with hex codes, still, I'm quite sure.

Dave: I hope so. I'm depending on it.

Chris: [Laughter] Anyway, that was a lot of color talk. Didn't mean to totally hijack all that.

Dave: That was a lot of color. I think we have not unlocked new color yet. It's very new. It's like February new, right? I think this whole idea that you can have very cool colors is very--

00:35:54

Chris: New tech. But it's enticing, Dave. I put a slide in here, not to ruin all my talk, but this was way back a couple of years ago. The company everybody knows and loves, they make that playdate game thing.

Dave: Yeah.

Chris: They made Transmit and Coda. Panic from Portland, Oregon.

Dave: Yes. Okay.

Chris: They jumped on these high dynamic range colors early on and consider it... They publicly said, "This is going to be our little secret weapon for making enticing design." They said that in 2019 back when Safari was just sneaking out a little esoteric way to use P3 colors. And they were able to do it really cleanly.

They just said, "Use the color if you can. Otherwise, just do all the normal fallbacks," and the screenshots of their website for the Playdate was beautifully, boldly yellow. Really like, "Wow!" When it calls for it, it can be quite beautiful.

Dave: Yeah. Wasn't Hockenberry, didn't he write A book Apart book? Yeah, Making Sense of Color Management in A Book Apart, one of the little shorties. I forget what they're called. Digest or something. He wrote that in December 2016. Incredible. I can put a link in the ol' show notes if you're interested in his take.

Even back then, it was kind of like, "Stop trying to put math on me." [Laughter]

Chris: [Laughter]

Dave: It's like, "Hey, I didn't come here for math. I came here for pretty websites."

Well, cool. Anything else on your talk there?

00:37:39

Chris: Well, yeah. I feel like we've done shows on this stuff recently. We end up talking about this quite a bit. But again, logical properties in layout, I think, is pretty interesting stuff. I'm going to kind of make a point about if you use these things as they're kind of intended to be used that it's true in my mind that you get the translation stuff kind of for free.

I feel like I'm beating a dead horse on this a little bit. It's not that it's your business requirements that the webpages that you make are translated.

Dave: Mm-hmm.

Chris: You're probably not translating Luro into ten languages just yet.

Dave: Not yet. Not yet.

Chris: But you don't really know, as you start getting more customers, if your customers are just translating it of you because there's lots of technologies to do that, and there's all the proof in the world that the amount of traffic and usage that those tools get is super high.

Dave: Mm-hmm.

Chris: You just don't know. Even though you don't offer an Arabic version of Luro, there might be somebody that just automatically translates because that technology is so good and that, if you use logical properties, their experience is just going to be way better. That's relatively small but significant, I think. And the word logical is prudent with them because it does make CSS more logical in some ways.

I just blogged yesterday, I think, about how there are almost some mistakes in CSS, like overflow X. All of a sudden, we have one property in CSS that makes you think in the X-Y planes of math.

Dave: Mm-hmm.

Chris: It's the only thing that's like that, X and Y.

Dave: [Laughter] Yeah. Yeah, yeah.

Chris: Pretty weird, right? The resize property in CSS uses the word horizontal and vertical instead. They don't say "resize X and Y."

Dave: Yeah. Total chaos mode. Yes, let's go.

Chris: Full chaos mode, right?

Dave: Yeah.

Chris: One of the things that logical property does is rein that in a little bit. You can now say "resize inline." You can now say "overflow inline" and stuff.

Dave: Mm-hmm.

Chris: And I think that brings a little bit of nice logic to the party. But I'm not only talking about that. I just want to make that point and then move on, kind of, because I end up talking about Grid Layout and Subgrid and little things.

But we don't sit around and be like, "Let's talk about the intricacies of Subgrid." I just point out something real world that's like, "Look. This is better now. This real world thing in this relatable situation benefits from this new CSS."

00:40:15

Dave: Yeah. I just went through the thing. We still have things like pad top small - or whatever.

Chris: Yeah.

Dave: I went through, and I made it logical properties. The class is still pad top small. I didn't want to take down the whole website. But what it's doing is logical properties. I kind of have this weird old-world, new-world situation.

Chris: Okay.

Dave: But the nice thing about it is you can think in your Western brain of how this is going to work, and then it's going to auto-translate what it actually is, like right sidebar is grid 1FR 300 pixels. But when I translate it or it goes to Arabic, Grid is smart enough to flip those, the grid calls.

Chris: Well, that's something to think about because you don't even have to tell Grid what to do. Grid is just going to do it.

Dave: Grid, Flex....

Chris: Yeah, you don't have to use logical properties in Flexbox. Yeah, that's another consideration is that you don't have to ask. They are going to flip the direction that they are being rendered in.

Dave: They're going to do it.

Chris: Yeah.

Dave: Pretty cool, you know. That's like my layout machine is kind of automatically adjusting the layout based on who is reading it.

Chris: Right.

Dave: I don't have to code that. I have coded that before. We did that for Microsoft. We had this thing. We asked Sass variable for direction and right equals right unless if LTR, right equals right, else right equals left. You know?

It was just this full... It was very clever, and I think Tyson Matanich did a lot of that work, but it's fully clever, but it also just brought you mental anguish because you're like, "What is actually going to spit out of this machine at the end of it?" We had to spit out two Sass files, two files for right and left.

Mastodon has this problem in their CSS right now, actually, if you inspect Mastodon, which I did because I'm a dork.

Chris: [Laughter]

Dave: They have a bunch of... They would be saving themselves a lot of pain -- RTL, LTR pain -- if they just did logical properties.

Chris: Totally. But you do have to think, though, because sometimes... It's not always 100%. I'm thinking of your padding top thing. You have to do a little mental math. Do I really mean the direction of the flow of the document or do I really mean the top of the top?

Dave: Yeah. Yeah.

Chris: Sometimes you really mean the top. You know?

Dave: Right. Right. Sometimes you do mean the top, but I don't know, man. There's really not a lot, unless you're in ancient Japanese. But there's not a lot of vertical languages. It'd be interesting to see how that works.

Chris: Oh, yeah. I really don't dwell on that in the thing. I don't know why. It's lack of experience and somebody to talk to about it mostly. Yeah, that right to left... I don't know.

When you actually switch the writing mode, I'm still scared of that, honestly. [Laughter]

Dave: Well, for me, I think we kind of need regions and stuff at that point to really make that work. Like text overflow and stuff like that, how do you make vertical text flow down, paginate, basically? Or are we just doing only horizontal scrolling? Hey, that's a lot to think about.

Chris: Yeah. Yeah, yeah. I also tend to think, like, if it's content and layout, it should probably be logical. If it's decorative, which we already think in those terms in CSS because we have to make the call, like, "Is this an IMG tag in HTML or a background image in CSS?" One of them is content and one of them is decorative.

When you're making that same kind of call, I don't think it's one-to-one, but it's the same type of mental logic whether I'm going to use logical properties or not.

Dave: Mm-hmm.

Chris: If I'm using a line at the top of the page, that's so decorative that I'm putting it there with the property top not the property inset block start because I really do want it at the top regardless of direction and stuff.

Dave: Yeah.

Chris: Anyway, that's not perfectly articulated. My slides, though, are perfect.

Dave: The slides are perfect. The talk is going to be perfect.

Chris: [laughter]

Dave: Well, that's good. Maybe that's a good place to stop with your perfect talk. We can wrap it up.

Chris: Yeah. Yeah, that's pretty fine. Yeah. Just a big preview for my talk. I hope to see some of you at Render ATL. It looks like a big one, and I'd love to see you there.

Dave: I really wanted to go, but our end of school is just full chaos from here to... I am barely hanging on.

Chris: Ah...

Dave: I'm like on an office chair going down a hill in San Francisco.

Chris: That's too bad. [Laughter]

Dave: [Laughter] It just sucks. Anyway, but we're good. We're doing it.

Chris: Our school is funny because our five-year-old goes to pre-K, and they've turned in their final project. Now there are just a couple of weeks left, and it's just like, "Uh... movie day?"

Dave: Movie day?

Chris: How about a field trip to the dump? You know?

[Laughter]

Dave: You guys like...? Let's walk to the nursing home. I saw some kids doing that the other day, [laughter] which is very sweet.

All right, well, cool. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter or Mastodon. I'm sure that's linked up on the website somewhere.

Chris: Yeah. We'll have to get a Blue Sky one of these days.

Dave: Oh! Heading over to Blue Sky, Mr. Blue Skies.

Chris: Invites are hard to come by.

Dave: I know. I'm not on it. I'm not even that cool yet. Maybe one day.

Chris: I have zero invites.

Dave: Then if you have a standard def site, go fix it. It's ugly.

[Laughter]

Dave: And then, Chris... Oh, join us in the D-d-d-d-discord. Popping off right now. Big, big, very good.

All right, Chris. You got anything else you'd like to say?

Chris: [Laughter] ShopTalkShow.com;