Transcript

Dave Rupert: [Humming] Bug Hunters!

Chris Coyier: [Laughter]

Dave: [Humming] Bug Hunters! [Humming] Hey, Chris! What's happening?

Chris: Nothing, dude. We did find a bug, though, didn't we? That was cool.

Dave: We found a bug. You... mostly me... kind of. But no, mostly you.

Chris: Well, I guess. I don't even know all the details yet, but I can mouth blog it, I guess, for us, is that... Well, part of my mind is I thought all this new color stuff was landing pretty much all across all browsers. But when I say new color stuff, what do I mean?

Oh, man, there are so many different things. There's all the color functions, and there's relative color syntax, and there's color mix, and there's color contrast. Man!

So, not to drag us too far into color town again -- we've done it a bunch of times -- but I do find it all fascinating. One of my ideas was let's say you got a brand color, and you needed to apply some opacity to it. Okay. Well, how did you pick that brand color? How does it exist right now?

I will tell you. If your brand color is bright orange, and you picked the brightest orange you could in SRGB.

Dave: Mm-hmm. Mm-hmm.

Chris: You might want to reevaluate that. You know?

Dave: [Laughter]

Chris: Because your bright orange isn't probably going to be as bright as it could be (picking a new color space).

Dave: Yeah. Yeah.

Chris: And color model. So, okay. Great. Let's say you've changed it in a way to work in the future.

We talked about last week, like, will your website start to look a little drab if you don't do this? My conclusion is maybe, probably. Anyway, let's say you do that. Now you've defined the color in LAB or OKCLH or something.

Dave: Mm-hmm.

Chris: One way you could do it is to have one CSS custom property that is the L, C, and H values. You can just use that. Then one of them, you define them separately. So, if you want to use those individually and then apply alpha to it, you can.

I'm just trying to think. How do you define a color that's really easy to use and have it be ready to have alpha transparency applied to it if you need there to be? That seems like a pretty normal thing to need.

00:02:16

Dave: It's a normal thing to need, and we've done weird stuff in the past. Like you're saying, there's var--L, var--C, var--H.

Chris: Yes.

Dave: Then if you want to mess with it, you do the alpha.

Chris: Yes. That's what we do on CodePen, actually.

Dave: Okay.

Chris: It's just a little heavy on the amount of custom properties you need to have.

Dave: It hurts, right?

Chris: It ends up being five per color because you have the H and the S. Let's say you're old school and you're doing HSL. You have the H, the S, and the L. Then you have all three of them combined for the actual color. Then you have one that's the alpha-ready one.

Dave: Yeah.

Chris: That you're going to use the H, S, and the L, but you're only... I don't know. I'm screwing up mouth blogging.

Dave: Alpha one, or whatever. Yeah.

Then we did that thing where I made a canvas thing and it only worked in one browser.

Chris: Oh, yeah!

Dave: Then we did the thing where... Then it was like, "Oh, there's new color stuff coming up."

Chris: Yeah.

Dave: That's kind of where we're at. We're here now, I guess.

Chris: Yeah! Yeah.

Dave: Right?

Chris: Before we get too complicated with it, let's just say that you're still a hex code. Your brand color is still a hex code.

Dave: Red, tomato red.

Chris: But you want 50% opacity of it. I think there is... Isn't there an 8-digit hex code thing?

Dave: Mm-hmm.

Chris: I think you can plunk on an opacity on the end of it.

Dave: Oh, yeah. FFOOOOOOAA - or whatever. Yeah.

Chris: Right. The problem is that's very hard to remember what the last two digits represent as a percentage between 1 and 100, so I just don't see it happening (people doing that). What they want to do is just be like, "I want this hex code, but I want it at 82% opacity. That's all I want in the world."

Dave: Mm-hmm.

Chris: Why is this so freaking hard?

Dave: Yeah.

00:03:59

Chris: Well, fortunately, there are some new answers in the color syntax. One of them is the from relative color syntax, which I just think is awesome. You could just say OKLCH() and then say from that hex code. Then write LCH/ and then just put 50% at the end like the new syntax. You're just saying I'm going to kind of de-structure this color.

Dave: Mm-hmm.

Chris: But in my case, I don't even want to alter it. I just want to apply some opacity at the end. That's great. Unfortunately, that's not very widely supported. I thought it was, and it just isn't. That one has not dropped. They call it the relative color syntax, and that is just not available really yet.

Dave: Yeah. That part and the color contrast, I think, are the only two not fully out yet, right?

Chris: Yeah. Bummer because I really liked that one.

There is some good news, though, in that there's one called color mix, which I feel like I'm just not that excited about, generally. I don't feel like there's a need to mix colors all that much.

Dave: Yeah. When I do that, my designers get mad. I don't know why. I mixed our two brand colors (green and red) and it came out kind of a soupy brown.

Chris: Green or whatever.

Dave: Yeah, so why are you mad?

Chris: Silly brown. Yeah, I don't know. It could just be me. I'm not trying to yuck anybody's yum on a color feature. Maybe it's great, but it does have one obviously great feature that we can use right now, which is, you can mix the color with transparency and then it becomes transparent. You don't need the relative syntax to do just exactly the thing I'm describing. You've got some brand color. It's even an old-school hex - or whatever. You can mix that with transparency of whatever percentage and it comes out that level of transparency. That's super-useful.

Dave: Yeah.

00:05:51

Chris: We were playing with it yesterday in Discord, right? One of the things that you can do in color mix is say which color model to do the color mixing in. Now that's been a big deal. You can tell... If you're doing a gradient, you can tell it what color model to use. If you're doing all kinds of stuff, like saying the model is part of the story.

As we were playing with it, you'd think, though, that despite the model, just making a color more transparent that the model doesn't matter. At least in my mind, why would it?

Dave: Yeah, because it's a color, right? I don't know. Yeah. If I... [Laughter]

Chris: It's like you're in Photoshop and there's the little--

Dave: Slider... right? Yeah.

Chris: Or any other app, there's an opacity slider, and you just pull it down.

Dave: That's how I think it should work, but--

Chris: That's how I think it should work, and we're in this pending spot where -- spoiler alert -- that's totally not how it works.

Dave: [Laughter]

Chris: I made a bunch of color swatches in different color models, and they're all different how they come out.

Dave: You had CodePen orange, right? Not CodePen. CSS-Tricks orange, kind of.

Chris: I used fogdog, which is my favorite go-to hex color.

Dave: Oh, fogdog.

Chris: F06D06, yeah, is the orange.

Dave: Okay.

Chris: Then just made it 50% transparent but did it with color mix and did it in sRGB and OKLCH and HSL. Some of them go red.

Dave: Can I mouth blog it here?

Chris: Yeah, do it.

Dave: Background color mix parentheses in sRGB comma F06D06 comma transparent 50%. Then the next one is the same color mix in OKLCH, F06D06 transparent 50%.

Chris: Yep.

Dave: Color mix in HSL F06D06 transparent 50%. And you would expect those to all be the same.

Chris: I would, the same.

Dave: Because we're just sliding the opacity down, right?

Chris: Right, and it had me... Right, so in sRGB, it does what you would think it does. It looks like the same orange just transparent. But in OKLCH, it goes to like pink town.

Dave: Mm-hmm.

Chris: In HSL, it goes to like red town.

Dave: Yeah.

Chris: You're like, "What the heck?!" So, part of it that makes me feel forgiving about this is that... Do you remember when we used to mess with gradients? If you just said, "Do a gradient from red to transparent," it would be weird sometimes.

Dave: Mm-hmm.

00:08:20

Chris: The trick to fixing it was go from red to red transparent zero. Be specific about what kind of transparent zero you were going to. Otherwise, it would assume black transparent zero or white transparent zero - or something - and the results could get weird. Somehow, I was forgiving about that. I think that's what's going on here, too, is that transparent 50% isn't equal in the spaces.

Dave: Mm-hmm.

Chris: This is either not a bug, although, then the discussion on Discord already this morning was, "Uh... I think it is actually a bug." [Laughter]

Dave: This is a bug! Look at us finding bugs in Chrome.

Chris: It took a lot of minutes of this podcast to get to, but color mix may or may not have a bug in it when it comes to mixing transparent colors, which I personally think is the most important thing it can do.

Dave: Yeah. Well... yeah. It's weird because [laughter] it gets me into an existential mood, like, "Hey, can you mix that color with transparent?" I'm like, "Oh, my God! I don't know!" [Laughter] Can I mix a color with the absence of color? Whoa, man! [Laughter]

Chris: Yeah.

Dave: It's some Cheech and Chong stuff. [Laughter]

Chris: And I'm feeling a little existentially weird, too, about how much I liked OKLCH for a while. It's not that I dislike it now. It's not like I'm that meme where it's like, "Nah. We're breaking up. Not best friends anymore."

Dave: Meme... Nope. No longer best friends. Yeah.

Chris: [Laughter] I had to do that with Chili's recently, man.

Dave: Oh, really?!

Chris: It's really gone downhill. Me and Outback are now best friends.

Dave: Oh, good. Good.

00:00

00:10:08

Chris: It's weird in ways that LCH (lightness, chroma, hue), that such a big deal was made out of lightness and how it's perceptually uniform, which to me does seem like a big advantage.

Dave: Yeah.

Chris: If you then change the hue, but you have the same lightness, you're kind of guaranteed that it will feel like the same lightness. The problem is -- this is especially apparent when you look at the visualization of the model -- most colors have a very limited lightness they can be.

Dave: Mm-hmm.

Chris: It's very, very easy to construct a color with an L value that's wrong, that will render as white nothing because the lightness doesn't exist in that chroma and hue.

Dave: Yeah.

Chris: Despite it being presented as a percentage, you cannot go down to zero and up to 100. The chances of you hitting a miss there is very high.

Dave: Yeah. The dream is a design system where I have my 22 purples or my 10 purples, my 10 pinks, my 10 blues, my 10 greens.

Chris: Yeah.

Dave: And I'm just iterating across hue and lightness. But when you look at that OKLCH site we talk about a lot--

Chris: Yeah.

Dave: --it's a wave. You know? And so, it's different.

Chris: Right.

Dave: You're going to end up with a lot of whites or a lot of blacks because it's not a uniform space.

Chris: No, and that can be good, I think, if that's what helps make the gradients better. Although, doesn't that mess with your brain, too? We're taught and it's explained that, to make a gradient, it's a bee-line. It just goes straight from one point to another point.

Dave: Mm-hmm.

Chris: Well, it can't in this model because you could go through a valley of nothing, and it clearly won't just show nothing in the middle of the gradient. So, that line is curved. How it does it, it's such a mind-screw.

But that's why HSL was so nice is that the lightness really does go from zero to 100. I guess here's me saying I wish there was an OKLCH that somehow preserved all of its uniform brightness stuff. But that the lightness really was from zero to 100.

00:12:31

Dave: How about this?

Chris: Yeah.

Dave: OKHSL and it has--

Chris: Ha! OKHSL, that's what we need.

Dave: And instead of 360 as the hue, it goes to 9,000. It's just like, "Yeah! So good!"

Chris: Ooh... 9,000.

Dave: No.

Chris: Yeah, that makes sense.

Dave: Or a chroma. I like the chroma. I punched up the colors on my website (inspired by last week's episode).

Chris: Oh, nice.

Dave: I said I want to punch up my colors, so I had a little red accent color. You know?

Chris: Mm-hmm.

Dave: I was like, "Nope. I want it pinker." I want it poppy pink, right?

Chris: Yep. Accent, I see you've got OKLCH you used. Good job.

Dave: Yeah, accent. So, I put it in OKLCH. But one weird thing that Dave Rupert ran into is, when I went to dark mode, that pink looked kind of red. It started looking kind of brown.

Chris: Ooh... Because of the colors around it or because of light mode?

Dave: Because of the colors around it.

Chris: Okay. Yeah.

Dave: Yeah, it was like an optical thing, so I had to actually punch in a different dark mode color for accent just because it was a little--

Chris: Oh, interesting.

Dave: It wasn't giving me the hot pink effect I was looking for, and so I had to punch in a different color.

Chris: Huh. Huh.

00:13:46

Dave: Yeah. Then I'm going to give you another pro tip.

Chris: Yeah?

Dave: Arc and Raycast are cool because you can just go command-T in Arc and say dark mode and get a dark mode on that page, or you can go--

Chris: What?! Can you, seriously?

Dave: Yep. Yep. Or in Raycast, you can do toggle system preferences and do toggle system appearance - or whatever. You get that if you just start typing dark mode. Anyway, those are my two tips, two hot tips, sick picks.

Chris: Oh, that's funny. Then if you do command-T again to get out of it, you don't type dark mode in. You have to type light mode.

Dave: Yeah. Yeah. That messed me up for a bit.

Chris: That tripped me up. Yeah.

Dave: I got stuck for about half an hour, but it's fine. [Laughter]

Chris: I see you didn't use... This is interesting. It's actually... I prefer your technique (if it works here).

You did a fallback for your OKLCH value, but you didn't do it as a media query... a supports query.

Dave: I had the supports query in there, but then I was like, "Bye!" You know? Fallbacks are basically support queries, right?

Chris: I know, but the way you did the fallback is you did the variable twice.

Dave: Yeah.

Chris: One before and one after. But it messes with my brain why that works because you'd think, no matter what... The OKLCH value doesn't fail when it's a custom property. It's just a string, right?

Dave: Yeah. Maybe I need to pull this up in a ten-year-old Firefox or something or regular Firefox to make sure this couldn't break-break.

Chris: Yeah, maybe. It could work. I'm just like, "How does that work?"

Dave: Let me try it.

Chris: Anyway--

Dave: I break Firefox regularly. I apologize, Firefox users.

Chris: [Laughter]

Dave: It's not that I don't care. It's just that I don't care. [Laughter] I'm trying to care.

No, it works. It works fine... I think.

Chris: Good. Yeah, that's a better way to do it. There's something explicit about the media query, but it's funny.

Remember being so excited about supports queries in CSS only to be like, you usually don't need one?

Dave: You need supports not, which didn't exist in IE, which was the only place you needed it. [Laughter]

Chris: Yeah.

Dave: That was the big one. I still have some support somewhere, like object-fit was one I used supports a bit. Supports grid was kind of a big one.

Chris: Mm-hmm.

Dave: Just because you have so many other pile-on properties that go with it.

Chris: Yeah. Yeah, it's just kind of dependent on what your plan was for a fallback. If your plan was to do nothing, then, well, obviously you didn't you didn't need it.

00:16:17

Dave: Can't you do @media and test a property? You can test properties, right? I can be like, @media.

Chris: You mean values?

Dave: Yeah. Can you say if color is OKLCH and that passes?

Chris: Yes.

Dave: I forget what the syntax is.

Chris: You might not even have to do that much. I think you can wrap it in a value function or something. Ooh, don't quote me on that. But yeah, it has gotten better over time [laughter] is the point.

Dave: Yeah.

Chris: You can test more stuff than you were able to before. Selector is a function. You can type selector, and then that's a function, and put the selector in that, which you definitely did not use to be able to do before.

Dave: Yeah.

Chris: Selector testing is pretty freakin' cool, actually.

Dave: Yeah. That's my thing. I have another cool one that I want; I think we should make a video on.

Chris: Hmm...

00:17:15

Dave: Edge dropped some new features.

Chris: Yeah?

Dave: In their dev tools.

Chris: They did?

Dave: This is all on the world of colors, right?

Chris: Okay.

Dave: If you open up - whatever - daverupert.com or shoptalkshow.com, and then you open up Web inspector, then you go to the... You click the little iPad to get the emulator, like the device emulator.

Chris: Right.

Dave: Your device emulator. So, up in the top, there is now your dimensions, like what device mode you want to do, sizing, zoom sizing, which is kind of cool to test that out or just make it big. But then they have throttling in there, which is cool. But then they have an eyedropper, and you can do force colors active.

This is basically high contrast mode for Windows. You can do prefers color scheme dark or prefers color scheme light, and you can sort of start testing high contrast mode without firing up high contrast mode, which is a beast. And you can test your dark mode right here with a little dropdown in the browser.

Chris: Yeah, that's nice.

Dave: So, that's pretty cool.

Chris: Because high contrast mode was, for one thing, for Windows only, right? You can do this in Edge on your Mac?

Dave: Yeah, in Edge on your Mac.

Chris: Or is high contrast--? Oh, yeah. That's cool.

Dave: Yeah, so you can do it in Edge on your Mac, so you can kind of do force colors active, and then basically the backgrounds all disappear.

Chris: Oh...

Dave: My buttons no longer look like buttons because I didn't put a transparent border around them, and so that's a little trick you can do. But your backgrounds disappear, and your background colors all disappear. It's basically like hard mode for your website. Did you do stuff [laughter]? Does it actually still look like a website now or does it look like a bunch of floating text? That's sort of a trick.

Then they have another eyeball menu. This is for emulating vision deficiency.

Chris: Uh-huh.

Dave: You can do protanopia or deuteranopia or tritanopia or achromatopsia, which is you don't see any color. It's like you have black-and-white vision.

Chris: Mm-hmm.

Dave: Protanopia, I think, is like the most common red-green color blind that's in like 10% of men. Blurred vision is interesting, too.

I actually knew a girl who had double vision, so everything was kind of blurred. Anyway, that's something to think about. Does your AI make sense with blurred vision. It's kind of like the old blur test.

Chris: Yeah.

Dave: But protanopia, deuteranopia. Tritanopia is my favorite because it's just all these pinks and blues that are already on my site, so I love it.

Chris: That's kind of a nice thought that you make a site that's more delightful for someone that has a particular... what would you call it? Defect, deficiency?

Dave: Yeah. Different -whatever - rods and cones in your... [Laughter] You know? Like different shaped rods and cones. That's basically it. In the eyeball, they perceive color differently.

Chris: Yeah. It's always talked about as, like, let's make it so it's an acceptable experience for people that have some kind of condition or whatever. But it's never like, the site is actually better for them.

Dave: Yeah. Yeah.

Chris: That's pretty rad.

Dave: Well, you know I was thinking, too. Man, we are just diving down. We're the color podcast, apparently now.

Chris: Ah, yes.

[Laughter]

Chris: I do have other things written down.

Dave: Welcome to the color talk show.

This is just cool because you can kind of see where you're dropping the ball. But one thing that is very interesting to me is you have red, green, and maybe that's part of your brand colors if you work at an Italian pizza restaurant or something like that and everything looks the same.

I think what's cool is stuff like Arc with Arc Boosts and stuff like that. People can hack in there and be like, "Cool. On this website, I don't want to see green, anything that's green," and if you applied CSS variables in your website, even better. Right? Because now Dave Rupert, color blind Dave Rupert, can go in and say, "No, green is always yellow," or whatever - some color I can see. We don't talk about that stuff enough in how CSS can benefit people.

Chris: Hmm...

Dave: If you have good variables and your site is using these variables and you've come up with these reds and greens that all look the same, like a political map that goes from red to green - or something like that - that probably means nothing to somebody.

They have now the power. They could probably put it in through an Arc Boost to put it in to make a website that works for them. Anyway, you should probably be doing stuff beforehand. You should be testing this stuff and making sure you're not picking obvious fails. But I like the idea that somebody could do it themselves.

Chris: Yeah, me too. I'm attracted to that concept, generally.

Dave: Well, and your website supplies the right hooks for that. I think that's a very interesting use case. In the spirit of Global Accessibility Awareness Day, which is on May 18th (after this show comes out).

Chris: The 18th? Exactly. Yeah.

Dave: It's this week.

Chris: Yeah. Indeed. Fantastic.

Dave: You can celebrate Global Accessibility Awareness Day by going to the website accessibility.day (I believe it is) and fixing your fucking websites. [Laughter]

Chris: Like A11Y.day, right?

Dave: Yeah. Yeah.

Chris: Fantastic.

00:23:37

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Frontend Masters. That's frontendmasters.com.

Their learning paths are super good. Ain't they, Dave?

Dave: Ah, man. They have everything. Whether you're starting from a certain level like beginner to professional to expert, or you want to hit the computer science track or the full-stack track or design-to-code track, lots of different tracks from what skill you're trying to hit. But then, boom, they've got technology-specific tracks like JavaScript, CSS, like if you need a skill buff in one area.

Chris: That's what I would do. I'd be like, "Dude, I need to learn TypeScript now. I'm way behind on this." Take the TypeScript class.

"Oh, I need to get a job." Dude, take the React class. [Laughter]

Dave: Take the React class. No, I mean or I'm doing Vue. I have a good understanding of Vue, but piecing it together over a bunch of blog posts isn't the best. You know?

Chris: No.

Dave: Watching Sarah Drasner's Vue course is super rad.

Chris: Yeah.

Dave: Or Node. Just seeing somebody build something, like an API or whatever, helps my brain internalize that way more than just - whatever - piecing it together myself.

Chris: Right. Right. I kept calling them courses and classes and stuff, but they're really learning paths, and you might hop between different videos and stuff. There's elective coursework and stuff.

These learning paths are really put together to bring you the best of whatever that topic is. That really appeals to me. I think is really quite cool.

Dave: I think it can work for you as an individual or for your whole company, like if you're trying to do a big skill buff in React.

Chris: Yeah.

Dave: Your company noticed, "Hey, we're not super-great," so, boom. Get a whole skill buff for your whole entire team.

Chris: Yeah or, in my case, we're switching over everything to TypeScript. Now, guess who should level up in it. Everybody. Not just you.

Dave: Yeah. Yeah. Well, and if you want to do it, are you doing it in the one-month or the one-year plan? You know what I mean?

Chris: Yeah.

Dave: It helps to level up first, right?

Chris: Bring your company to frontendmasters.com.

[Banjo music stops]

00:25:48

Chris: We also have been playing a little bit with... Well, there's the page transitions API - worth mentioning always because it's really, really cool. The first iteration of it dropped. It's just Chrome only. I guess, while I say something like Chrome only, I should mention that there was some news this week that this thing called Baseline got dropped across Google properties, like Web.dev as well as MDN.

Dave: Mm-hmm.

Chris: If you visit a page, like look at the CSS Grid page in MDN, for example, way at the top there's a green bar that is a very chill browser support chart. Now, it doesn't replace the browser support chart on the bottom of MDN that has all kinds of stuff. It depends on the feature, but it usually has a pretty deep browser compatibility chart. Baseline just says, "Does it basically work in the evergreen version of that browser?" which I know is a little controversial. What is evergreen and what isn't is not as clear-cut always.

Dave: Right. Right.

Chris: But I take the point. Generally, browsers do auto-update. Then it's just a bunch of checkmarks so that you know. I think it's pretty clever. Certainly, I have no problem with it existing.

I like that it's at the top. I think you mentioned that in the Discord, and I was like, "Yeah, Dave is right. The top is the place for this stuff sometimes."

Dave: I am smart enough, and maybe this is the issue. I am smart enough to know it may have green checkmarks, but that doesn't always mean all my customers have green checkmarks.

Chris: Yep.

Dave: But if I'm like... Let's do color mix, which we were just talking about. Oh, it doesn't have it. Oh, well, not everything... You can't have everything in this world. [Laughter]

Chris: No. Yeah, I think it's pretty new. This is going to roll out to more stuff.

Dave: But relative color syntax. Oh, that's not there.

Chris: Nah, that won't be it either.

Dave: Little number format. No. Anyway, I guess it's on less stuff that I want. [Laughter]

Chris: Yeah. It's not on a ton of stuff yet. I was doing the same thing you were, looking around at pages to try to find examples of its usage.

Dave: I want to find one that does not have a cross-compatibility.... Yeah.

Chris: It says that there are big X's on it. Yeah. Do they make the background of it a special color?

The reason I brought it up is really for the view transitions API is not cross-browser compatible.

Dave: Oh, yeah. Yeah. Good.

Chris: Right? It's Chrome only. For a long time, it was just a flag in Chrome, but it has now shipped to stable Chrome. Basic view transitions will even work in Arc, and Arc, at most, updates once a week.

Dave: Mm-hmm.

Chris: So, it's not definitely one-to-one to Chrome. And it also depends on them updating their thing, too, right? It's not like they do it every single week.

Dave: Yeah.

Chris: I don't think so, anyway.

Dave: Yeah. I don't actually know where I even find it.

00:28:50

Chris: Anyway, basic view transition stuff will work in Chrome browsers right now, but only them. Nobody else has picked it up.

The thing that dropped was document.startviewtransition. Excellent API. Very cool. It's so chill to use. It can be as simple as a one-liner. Fallbacks for it are pretty easy. The CSS required for it is pretty chill.

I have thoughts about it, but it's very cool that it has dropped. Much cooler. Everybody has been saying this from the beginning. I think there's universal agreement. What will be much cooler is when these view transitions work in multipage situations. You don't even need to call any API, Dave.

Dave: On my 11ty site, my Astro site.

Chris: Yes. Your Jekyll site.

Dave: I just want smooth, buttery... bloop-bloop.

Chris: Yeah. Yes, and this has started to drop. Now, this is still behind a flag. But if you read about theoretically the baseline will be showing what's supporting what. Great idea.

But it has started to drop, so I have Canary open here, and I've been playing with it a bunch. And the point is it's even chiller. You don't need a JavaScript API for it.

You do two things. One of them, you have to use a metatag. Don't totally understand why, but you have to have a metatag in the head that says, "View transition," with the content of same origin on it. I don't know. I don't know why.

Dave: Does anything else go in it? It's just meta name, view transition, content.

Chris: And then content equals same origin.

Dave: Same origin. Okay.

Chris: You have to have that exactly.

Dave: Sure.

Chris: It will start them working. Then the thing... Then you have to do the CSS part, which is anything that you want to have a view transition on it needs to have a CSS property attached to it called view transition name. Then you give it a unique name. This is very important. It has to have that, and it cannot share that view transition name with any other element on the entire page.

Don't love it. A little rough edge for me, I think. There's got to be a better way to do that because it makes the dynamic anything that needs to generate dynamic names, and I hate that.

Dave: Mm-hmm. Mm-hmm.

Chris: Anyway, as long as it has one, and then the thing on the page that it's going to has that same view transition name, it will transition from one to the other with animation. You can control that animation in CSS.

Dave: Oh, my gosh.

Chris: But if you don't, it will just cross-fade from one to the other.

Dave: Which is fine.

Chris: Yeah. [Laughter]

Dave: Right?

Chris: Cross-fading is okay. But if all you do... It's smart enough to know that if all you did was change, for example, the width, the height, the inline size, the margin, or the padding - or something - it is smart enough to tween those properties.

Dave: If I have the metatag, I get cross-fade. Now my site is a PowerPoint. Boom. Check. Done. Next.

Chris: Metatag, cross-fade, done, which you're right. Right there is kind of nice.

Dave: But if I add a transition name like fly up - or something - I can fly up my blog post a little bit on click, right?

Chris: Yeah.

Dave: Or fade in and fly up.

Chris: We should do it on your site.

Dave: I'm going to do it on my site today.

Chris: I think you have the perfect site.

Dave: It's relatively uniform. Yeah.

Chris: I was like, "Why isn't it auto-filling?" Oh, it's because I'm in Canary. I haven't visited daverupert.com in Canary yet.

Dave: Oh...

Chris: You have mini cards on your homepage that have a title and stuff. That title, I'd probably make that whole cool black outline thing have the view transition name on it and then share that with whatever the wrapper is on the single page. That way the little header... And if the header itself, like the H2 or H1 - or whatever - shares the same view transition name, it should tween up.

Dave: Oh, my gawd!

Chris: Yeah.

Dave: Okay.

Chris: That would be so cool. I wonder what the limitations are. I feel like I'm talking about it like an expert and I'm really not. But the fact that, for example, it's bolder on that page, will it tween the boldness of the text? I don't think it can do that.

Dave: Oh, well, Chris. Let's not... Chrome can do anything. Okay?

Chris: Yeah.

[Laughter]

Chris: Fair enough.

Dave: No, this is great. I love this. I don't know. I'm going to do this today. So, when this audio comes out, we'll see how it did if you fire up Chrome and pull up my site.

Chris: Yeah.

Dave: I'm going to see.

Chris: Canary and with the flag turned on, so you have to go to about:: or about://flags, and then just type in view transitions.

Dave: It's view transition on navigation.

Chris: There'll be two flags. Yeah, there'll be a multipage one you've got to flip on.

Dave: Yeah, there's a view transition API, just generally, for JavaScript, I guess, the JavaScript API, which I don't think I need.

Chris: No, you don't need it.

Dave: But also, you're in Chrome. Turn on experimental Web platform features. Yeah. You might as well, in your Canary, right?

Chris: Yeah. Also, I wanted to do it on CodePen, but CodePen, only our projects feature--which this will be combined at some point, I promise you. We're working on it--has the sidebar files.

Dave: Yeah, yeah, yeah.

Chris: So, if you really want to experience moving from one page to the next, you've got to use projects. But... and this is not our fault. It's Chrome. This stuff is so new, it just doesn't work in iframes.

Dave: Yeah. Yeah. Wow.

Chris: I don't know why. But then you have to build it and then open up debug mode and it works there.

Dave: Dude, I'm super interested in this. This is cool.

Chris: Yep.

Dave: I know Nuxt--

Chris: We've been saying if somebody wants to make a million dollars, just learn everything there is to know about these APIs, stay on top of it, and build themes.

Dave: Build themes, buddy.

Chris: WordPress themes, Nuxt themes, Next themes, Jekyll themes, 11ty themes, Astro themes.

00:35:08

Dave: On that, [laughter] Nuxt, speaking of Nuxt, well, I use Nuxt, right?

Chris: Mm-hmm.

Dave: Actually, Nuxt 3 has the view transition JavaScript API built-in, or you can use that as your transition. View has a whole transition element kind of wrapper thing.

Chris: Okay.

Dave: Sarah Drasner did a demo on CSS-Tricks a long time ago. But now that is a part of... They now have a fork that uses native view transitions.

Chris: Yeah.

Dave: But I was just going to say, because we talked about Nuxt, Nuxt came out with this thing called Nuxt Studio beta.

Chris: Oh, it's from the Nuxt team?

Dave: From the Nuxt Labs team, yep.

Chris: Oh... Cool.

Dave: And look at it. They call it an MDC editor, but it is basically a Markdown writer, a Markdown machine with a little MDX kind of thing. But it has a file system for content files in one index and features, changelog, about. It kind of starts getting into this idea of a visual content management system, which we've been talking about on the show for a long time. But that's my--

Chris: Neat.

Dave: Anyway, very interesting.

Chris: That's good news. The landing page for it is freakin' beautiful, too. Go click that link, people.

Dave: Yeah, and then they have themes, kind of like Astro-style themes.

Chris: I, of course, am immediately very jealous of it, too. It looks like somebody... It's Monico, right? Which is VS Code, essentially. I like the idea that somebody just grabbed that and made almost like a DSL for CMS or something.

Dave: Yeah. Yeah, it's like a blog machine, like a local host blog machine. Yeah, I don't know. It has get branches and stuff, too, so that's going to be obviously some overhead. But I think we're headed to a future where regular employees will have to understand branching and forking and saving versions and stuff.

Chris: Yeah. Yeah.

Dave: But yeah, anyway, that's interesting. Yeah. I just wanted to call that out. But Astro, think of this world with Astro themes.

Chris: Hmm... Really nice.

Dave: Astro is getting very hot for me on the list, I think, because Fred called me out on the show. But it's getting--

Chris: [Laughter]

Dave: If you can do view transitions and it has page-based routing and I can run a little bit of fetchy script in the front matter, does it do what I want? The answer is almost yes. [Laughter]

00:37:50

Chris: Right. Right, right, right. It got called out by... Remember we were talking about the Svelte guy, Rich Harris's latest video.

Dave: Rich Harris's.

Chris: It was poking at them because they have... I think they have a... What do they call it? RFC (request for comments), isn't that what that means?

Dave: Yeah.

Chris: It's kind of the responsible thing to do when you run a tech project is, like, "We're thinking about doing this. What do you think about it?"

Dave: Yeah.

Chris: They have one out for a router, Astro router. He poked at it like a joke, like every framework lives long enough to build their own router, essentially.

It definitely undermines what they always said that they were - in a way.

Dave: Right.

Chris: It's like, "This is for content sites, and you don't need that, and page-based routing is the way," kind of. It definitely slots Astro into a certain place in my brain and makes me love them for what they are. If all of a sudden they're really gunning to be a Next replacement too, that's weird but understandable.

Dave: Yeah. Next is on a fricken' steamroll. They added a database tool. They added S3 storage.

Chris: Yeah. Well, Vercel did, but it's easy to conflate the two, kind of, because it really means it's for Next. [Laughter]

Dave: Yeah. Yeah.

Chris: Yeah.

Dave: Yeah. I guess, technically, I do use Vercel products without using Next.

Chris: Yeah. I hosted a PHP site on there once, which is amazing because they just happened to have a weird adapter that would manage to run PHP as cloud functions. I was like, "Oh, this is great." It was just an old site for an old friend of my dad's, and I was like, "I don't want to keep paying for a Bluehost or a Media Temple or something just for this. Can I put it on something modern, please?

Dave: Sure enough.

Chris: They showed up and make it work. Thanks, Vercel.

Dave: That's funny. That's very unexpected for me, actually, but that's cool.

You know it's funny. We were joking in the D-d-d-d-discord. It's like people have just discovered PHP in the JavaScript community. [Laughter] Laravel is hot right now.

Chris: Yeah. Yeah. Wait until they find Rails. It's great.

Dave: Yeah. Yeah. Then AdonisJS, we've kind of talked about, I think, on the show before a little bit. But maybe it's worth diving in.

Chris: Yeah.

Dave: Let's talk about Laravel. [Laughter]

Chris: It turns out if you have an actual server, it's awesome.

Dave: Server... my love for servers is pretty high right now.

Chris: [Laughter] Pretty high. Yeah, pretty cool.

Dave: So much that I'm filling up my logs and that's crashing my app. Perfect! I love websites.

[Laughter]

00:40:35

Chris: Well, this is almost like a news show. We've managed to talk about Accessibility Day, multipage transitions, Baseline. Pretty, pretty good. It feels early to talk about, for me, but this isn't news, really, but I'm finding it interesting.

I got a thing. I got nerd-sniped myself, essentially, about how many people really block ads. It feels like--

Dave: Yeah.

Chris: I care a little bit about the industry-wide numbers, but I care mostly about, yeah, but what about my sites?

Dave: Yeah. Yeah. Yeah. Yeah.

Chris: Is it like 85% or something? In my brain I'm like, it seems like it probably is.

Dave: Probably.

Chris: Who in their right mind would browse this Internet without an ad blocker? Are you crazy?

Dave: Yeah.

Chris: [Laughter]

Dave: Yeah.

Chris: But you know it turns out there's a relatively easy way to do it. If you have a script element, Dave, a script in curly braces or whatever, and you just need a reference to it in JavaScript, so you either need to query selector for it in some JavaScript that's definitely going to run before it sees that script element, or more likely you just craft the script element in. You just do a document.create-element of that script tag. It's got a URL of something that you think may be blocked on your website, like a link to Google's ad servers or something like that.

Dave: Anything with the word analytics, I've learned. [Laughter]

Chris: Well, think about... You know how image--? You know if you have a reference to an IMG element.

Dave: Yeah.

Chris: The error will throw on it. You can say image.on-error.

Dave: Yeah. Yeah.

Chris: Then replace it or something. You could do that with scripts, too.

Dave: Ooh...

Chris: The only reason a script will fail is because it's blocked.

Dave: Right.

Chris: Or you drove under a bridge and lost Internet or something. But those are pretty edge case compared to it was blocked by a fricken' extension.

Dave: Yeah.

Chris: So, the vast majority of script.on-error is ad blockers. So, if you want to know how many scripts are blocked on your website, make a script element, point it at the URL of something you think is blocked, and then if script.on-error report it somewhere that won't be blocked, so hit your own Redis....

Dave: Cloudflare key value.

Chris: Yeah. Do a key-value store or something.

00:42:54

Dave: Hmm... Did you do it? Are you counting?

Chris: I have, and the data is a little... I need to make... We didn't... I just spun up a little Redis.

Dave: Yeah.

Chris: I haven't built the charts yet, but it's looking something like 50%.

Dave: A solid 50? Yeah.

Chris: Yeah.

Dave: Well, it's interesting that they are shipping by default in a lot of browsers. That's, I think, changing it, too.

Chris: Yeah. Like Brave and whatever. It just has one in there.

Now, what's interesting to me is I made a mistake in that we used this product called Appcues for a bunch of different things, one of them being analytics stuff. You can just send an event to it and it'll track it. It gives you pretty basic event-style analytics.

Dave: Mm-hmm.

Chris: I used it. I was like, "Oh, when it's blocked, I'll just report it to Appcues," and then realized that a lot of ad blockers block them, too, even though Appcues is not an ad platform.

Dave: Isn't it interesting?

Chris: But it is third-party JavaScript.

Dave: Yeah. Yeah.

Chris: So, what I learned, and it was about 10%, maybe, got through.

Dave: Hmm...

Chris: And I was like, "Oh, only 10% of our users block ads?" only to realize that that methodology was wrong because that only captured people that did block something like Google and not block Appcues, which was a smaller percentage.

Dave: Interesting.

Chris: So, you want to make sure that however you're reporting that data is definitely not blocked, which means you're hitting your own website to track.

Dave: Yeah.

00:44:25

Chris: Pretty interesting. What else is on my mind? Your Hurdy-Gurdy post was pretty interesting.

Dave: What do you think?

Chris: I really liked the reason that this... I don't know. It's somebody that just overengineered the absolute bejesus out of an instrument because of....

Dave: Oh, the violin. Yeah.

Chris: They're like, "I don't want to learn how to use a bow, so I'm going to make ... crank."

Dave: A little wheel on a crank that goes [grinding].

Chris: [Laughter]

Dave: Then the guy... And he's like--

Chris: Yeah, I can't put my fingers in the right places, so I will invent the world's most complicated thing that automatically presses the keys for me.

Dave: A little piano key thing. Yeah. Yeah, and then it's just going to be five times the size of a regular violin.

Chris: Yeah. [Laughter] Yeah.

Dave: That's what's going to be successful.

Chris: Yeah. It's kind of like UX be damned. I'm going to make these UX improvements and then just scuttle them entirely because of how ridiculous it is.

Dave: Yeah. But it's going to be so easy. The fastest, blazing fast. [Laughter]

Chris: Yeah.

Dave: It's a blazing fast violin platform.

Chris: It just really takes the emotion out of the sound it can make, too.

Dave: Yeah.

Chris: Really, it made me go from being ambivalent... or if I had any thought at all about hurdy-gurdy, just think, "Oh, that's nerdy and weird," to now just like I hate it. [Laughter]

Dave: I actually researched the hurdy-gurdy quite a bit doing this post.

[Laughter]

Dave: There are some really good videos on YouTube where if somebody plays death metal on a hurdy-gurdy.

Chris: Yeah. Yeah, okay.

Dave: Lincoln Park or something like that. That's not death metal, but just like... It's pretty fun.

[riffs on a hurdy-gurdy]

Chris: There's always the exception, right?

Dave: There's an exception, yeah.

Chris: I feel like the ukelele is classic, too. It's designed to be easy. It's designed to just make some very island-fun vibes. But of course, some people absolutely fricken' slay at it. But that's the exception not the rule.

Dave: Yeah. They're going to play math rock and....

Chris: Yeah.

Dave: Anyway, yeah.

Chris: And make sure to slot in some very awkward hurdy-gurdy music if you can find some.

[riffs on a hurdy-gurdy]

Dave: Yeah, so anyway, hurdy-gurdy. Yeah, it's interesting. I see how somebody was like, "I'm going to fix violin playing, and I'm going to add a wheel that plucks the strings or strums the strings. I'm going to add piano keys, and I'm going to fix it."

Then the outcome is something just so opposite of what a violin or a fiddle or whatever they had in ancient times, the ancient times. It's just the opposite instrument.

I can't really think of anything that's quite like that. It ended up so far from what it is.

00:47:20

Chris: I'm sure there are so many analogies. It's like taking a little too much user feedback, too. I listened to the latest... I'm a big kind of Paul Ford fan.

Dave: Yeah.

Chris: And his business and partner in crime. Ziade is his name, I think. They have a new Ford+Ziade podcast. It's worth a subscribe, I think. They're just fun guys to listen to just because of their depth of experience in all this world.

They're releasing some new product. I think it's called Aboard. I wonder if that's Googleable yet. Yeah, aboard.io, I think is the thing. Let me make sure I have that right.

They were talking about launching this week on it, and it was almost a strong opinion that whatever feedback you get in the first month or something after releasing a product, you should just crumple it up and throw it away, in a way, because it's too much people that are too close to you and to it that they're not your real people yet.

Dave: No. Yeah. Yeah.

Chris: I feel like that's what the hurdy-gurdy didn't do. They just took feedback and be like, "Bowing is hard." They're like, "Yep. Got it. We'll fix it." You know?

Dave: We'll fix it.

Chris: They just got the earliest, worst feedback, and just make the whole product based on that.

Dave: No, that's actually... Yeah, it's basically that. It was in my brain. I don't actually hate the hurdy-gurdy, but I put it out there as this--

Chris: [Laughter]

Dave: This idea that I do think we build these monstrosities by accident. We ended up with all these buttons and all these little advancements.

Chris: Yeah.

Dave: But they are just pure overengineering. [Laughter] Anyway, it's silly but dumb.

00:49:12

Chris: Yeah. Yeah. Yeah. I had on my mind that Subgrid is starting to drop, I think, in Grid. I think even Chrome was the real holdout on it.

Dave: Mm-hmm. Mm-hmm.

Chris: I think it's in Canary now, which is pretty cool. But it had me thinking about how there are these two different circumstances where you have child elements on a parent grid.

Dave: Mm-hmm.

Chris: One need is, like, "Man, I wish the children of that grid could use the same gridlines as the parent." But that doesn't mean there's one way to do that.

Subgrid does it one way, which says, "Oh, I see this element is placed on the grid already. So, whatever gridlines intersect with it, I'll use those." You can tell it to inherit those parent gridlines. That, I think, is very cool and useful, and I've had plenty of real-world situations where I wanted to use that.

But another one is like, despite what's happening in the DOM below the grid, I want arbitrary children to be able to participate in the parent grid. Not inherit the gridlines, but literally just go anywhere on that grid I want it to go.

Dave: Mm-hmm.

Chris: And I blogged about that today because that's a different thing to do. The trick there is to then use display contents in order to wipe out some parents.

Dave: Okay.

Chris: So that, for example, let's say you had a UL that is being placed upon a parent grid. Well, that kind of sucks because all the list children then don't get to participate on that parent grid. They're too deep in the DOM. You've lost the ability to place them on the grid.

Dave: Yeah.

Chris: Display Subgrid isn't really going to help with that. What you need to do is target the list parent and say, "Display contents," and then it's wiped away and all the list items can participate on the grid.

For a long time, that was like, "Yeah, wouldn't that be nice?" But display content wipes out the accessibility of the list. It's no longer a list. It's just gone. I think that it's been fixed in all browsers now. It very closely got knocked down.

Dave: So, display content doesn't explode it? Okay. Good.

Chris: Yeah. I don't know if it's perfect, so don't be like, "Chris said it's totally fine and you can totally do it no matter what."

Dave: Chris says it's fine.

Chris: It depends.

Dave: Yeah.

Chris: I think it even depends what kind of list it is.

00:51:33

Dave: You know I have a similar... not similar, but a problem where I'm wondering if CSS wipes out accessibility. We have tables in Luro, and I want to control the columns or let the user drag, slide things. But I want to control the widths of the columns.

Chris: Mm-hmm.

Dave: I've seen people online do it in Flex. They set Flex, and they do it. And they use Basis, I guess, to size it or something like that. But could I set a grid at the T-row, or I set a grid at the table and say, "This is the grid for this table"?

Chris: Uh-huh.

Dave: Grid template columns 1FR, 200, 200, 200 - or something like that - because I know how many columns there are going to be and stuff like that. Yeah, I don't know. I've been... but what I don't know... Then, ideally, I'd Subgrid that to the table row, and so the table row would fling its children in the right place.

What I don't know is does that wipe out the semantics of a table if I display a row as grid - or something like that.

Chris: Yeah. Yes, I think.

Dave: It does, right?

Chris: Yeah.

Dave: But with Flex, the same thing or no? Because when I do the accessibility tree it Chrome, it all looks kind of right. I don't know what I'm actually looking for.

Chris: I was just reading about this today. I think the spec says it's not supposed to. I think the display property is not supposed to change the semantics of the thing. But too bad, it does. Yeah.

Dave: Because that's what I want. I want the column headers to be read. I put those in there for a reason.

Chris: Yeah.

Dave: I want people to not feel lost.

Chris: Mm-hmm.

Dave: But I will tell you; I am... I don't know. We need new table styling then. If that blows semantics, we need table label fixed is not enough. We just need a whole new table in HTML.

Chris: A whole new table.

Dave: Sortable everything.

Chris: Sortable tables. Hell yeah. That would be amazing.

Dave: Resizable, sortable, responsive.

Chris: Yeah. Animatable.

Dave: Sorry. That's what we need. If display grid blows up a table, we need a whole new table. I wish I had any, so why does Dave Rupert making websites for 30 fucking years not have an answer to this question?

[Laughter]

Dave: It's too fucking hard for everybody.

Chris: Right.

Dave: Happy Global Accessibility Awareness Day. [Laughter]

Chris: So, what actually happens is that your brain kind of avoids it, right? You're like, "Hmm... Maybe we won't put a table there."

Dave: Half a million other... I'm a fast-food chef. I've got 20 other things going on, Chris. I'm a waffle house chef. I've got people fighting in the lobby. I can't spend 7 days to figure out and test across 200 ATs.

Chris: Right.

Dave: Does Grid explode my table? I don't have the capacity to figure that out.

Chris: Yeah.

Dave: There have to be better answers. That's my--

Chris: I know. It makes me feel like it's just such a bummer that there are these... It almost feels like two different worlds. I can make this website and kind of make it look and seem and behave like it seems rational and I want it to be, and then somehow, secretly, have destroyed the accessibility of it and have that not just be totally unobvious. It feels like, ah, that just sucks that that's where we're at.

Dave: Yeah.

Chris: It feels like you have to be an expert in it to know what's wrong, and there are lots of reasons for that. I can't explain exactly why, but it's just a bummer.

Dave: Yeah. It's kind of like, "Oh, I want to build a wall," right? "I want it to be here." You have prevented the door to your house opening. That's the mistake we're making, right?

Like, "Oh, I didn't think if I built a wall here I'd stop the door from opening." But ideally, we know that stuff or there's some intuition to it. I don't know. I've been really punting on an issue for weeks and months because I just was like, "I just don't know if it ruins the accessibility, so I don't even want to apply a fix, a style fix, because I think it might be worse for a screen reader."

If I do the style fix and then we find out it's broken, now we have a thousand problems. So, then I'm tempted to just use Grid, in general, outside of a table. Now I'm even less happy. [Laughter] Or I have to figure out sorting, labeling, and all this other stuff a different way.

Chris: Yeah. Indeed. Uh... I think we did it, Dave.

Dave: We hit our mark. We did it. That was enough news for the day here.

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, @shoptalkshow, or Mastodon. And I think Chris and I are on Bluesky now. I don't know what's going on.

And then join us in the D-d-d-d-discord. That's where you can definitely find us. Patreon.com/shoptalkshow.

Chris, do you got anything else you'd like to say?

Chris: Oh... ShopTalkShow.com.