Transcript

[Pomp and Circumstance, by Edward Elgar]

Dave Rupert: Hey there, Shop-o-maniacs. It's me, Macho Man Randy Standards, and I've traveled the world, and I've stared at the scorpions and I've eaten the snakes. And I'm here to tell you about the glories of Web development. Oh, yeah, brother!

Chris Coyier: [Laughter]

Dave: Chris, how are you doing today?

Chris: [Laughter] I'm doing fine. I'm a little scared of you, actually. I hope I'm not front row for your match. I feel like I might get spit on.

Dave: Yeah! You might find yourself in the arms of a full nelson.

Chris: [Laughter]

Dave: Your arms flip-flopping above your head because you can't move them, and I'm slowly, slowly pulling the blood out of your heart. Yeah, brother!

Chris: [Laughter] So, you're a Web development guy.

Dave: Yeah.

Chris: Are you still pretty...?

Dave: Yeah. After wrestling, I got a few concussions and I had to pivot over to building websites.

Chris: [Laughter] What's the strongest way to build a website then?

Dave: Only H1 tags, brother. Yeah!

Chris: [Laughter] Yeah? Yeah. You feel like that'll kind of appease the--?

Dave: It really gets your point across. See, brother, I've lived in the deserts, and I've rode with the eagles on the plain. And I tell you, 360-degree reviews that I have tasted the beauty of Web development, and it is no JavaScript and no style sheets. Pure HTML, brother.

Chris: [Laughter] Holy cow. Yeah, you can't argue with that. Your Lighthouse score would be--

Dave: My Lighthouse score is 2,000. People don't believe me, but I showed them the way, the truth, the reality.

Chris: [Laughter] This makes a lot of sense, really. No Web components over there in Macho Man. It's just a little too complicated.

Dave: My wild orca is here, and I'm going to have to ride it off into the sunset, brother, but it has been really good talking to you about the possibilities of Web standards. Yeah, brother!

Chris: It's my pleasure. I'm going to go buy a T-shirt.

Dave: Snap into a--

Chris: Div. No?

Dave: Div.

Chris: [Laughter] Div Jim.

Dave: Slim Div.

Chris: [Laughter]

[Pomp and Circumstance, by Edward Elgar]

00:02:48

Dave: Wow! What a visitor, Christopher. [Laughter] What? Whew!

Chris: I do worry about that lock on your door.

Dave: There are all kinds of characters coming in. That was... Yeah. Didn't even know Macho Man Randy Standard was around. He just kind of showed up.

[Laughter]

Chris: Just showed up. Indeed, he did. That's good, though. It's nice that people--

Dave: He crawled out of my bookcase. It was the weirdest thing. Yeah, anyway.

Chris: I like strong opinions, though. You know? He's not a nuanced guy. He doesn't--

Dave: No, pretty extreme opinions, and I like breaking out of the nuance. You know who else broke out of some nuance today? As we're recording this.

Chris: Yeah.

Dave: Eric Bailey says, "Display content is considered harmful."

Chris: Oh, I was just about to send him a Mastodon because, yeah, I did. I read it. I was, I'll say, blissfully unaware that browsers had gone backwards in their support of this. That's a bit rare, I'll say. It sounded like Eric's take was a little like this is to be expected in a way that even if they fix it again, can you trust that or not.

Dave: Yeah.

Chris: That is a hell of a trust to break when features are fixed or usable if we're like, "I don't believe you. I don't believe that they're going to stay that way." That's a suckier world to live in.

That might be just the picture he was trying to paint. But the reason I was going to message about it is because I posted about it just recently, and I was looking at a post of Hidae's that was kind of tracking it.

Dave: Mm-hmm. Mm-hmm.

Chris: He was like, "Oh, look. Look at these tickets that browsers claimed to have fixed this."

Now what we're talking about is let's say you have a UL, an unordered list, Dave.

Dave: Yeah.

Chris: Unordered lists have specific behavior in the accessibility tree and how assistive tech does that. You can go to them, and it'll say, "This is a list. It has six items in it," or whatever.

Dave: "List, six items." Yeah.

Chris: Right. I don't know if that's the only thing it does, but that's an important one, and it is one that it does do.

Then if you put... Its default display, is it... I think it's just display block, but the items in it are display list item. Anyway, whatever its default is, if you said "display contents" instead of display (whatever its default is) block, that it wipes away its semantics, and it's not announced anymore as a list.

They fixed that, and then it broke again. Wow, that sucks.

My post was about that's useful. It is actually useful to say "display contents" in it because what it does for a designer is it's as if that element has disappeared in the DOM.

Dave: Mm-hmm.

Chris: Its children are still there, so they get moved up a level, essentially, in the DOM tree, but the parent is just gone. It's not actually gone but it behaves as if it's gone. Very interesting.

The point being if you have... The point I was making was I had a recipe. The recipe was an article tag. Within the article, there's an H2. There's a P. There are multiple P's. And there is an OL of ingredients. I wanted all those elements, including the LIs of the list, to participate on one grid set up in CSS - one grid, so I can move stuff around wherever on that grid. I am forbade from doing that because there's an OL in the way.

It's like the OL can participate on the grid but not the LIs, and that's annoying. It's just annoying. And display contents is kind of the point of it. One of the points is to fix that.

00:06:45

Dave: Right. You could use Subgrid. That's kind of a feature we have now - sort of.

Chris: Yeah.

Dave: Chrome finally got it, I guess.

Chris: That's the thing, though. You can't really.

Dave: Yeah. But that's only grid, right? There's no Sub Flex. You know?

Chris: Now that I'm thinking about it, though, I wonder if you could position the OL at grid row zero and end at negative one.

Dave: Oh...

Chris: Position it over the entire grid and then say Subgrid.

Dave: Pretend it's the whole thing.

Chris: Then I guess that does kind of get around it.

Dave: It's blocky, but that's not technically how grid works. It should just keep, like, this is cell one, two, three, four, five, six. Just kind of mapping it all out.

Chris: Yeah.

Dave: Yeah, it doesn't work the same, but you could snap it down and put it on a different block, I guess.

Chris: Mm-hmm.

Dave: Yeah. I think there are places where we have Markup now that you kind of need around something. Another example would be picture element around an image. That would break it. Although, your picture is probably 100% anyway. But in theory--

Chris: That's a good point. But isn't that one... That's a very weird one. I don't think you can target the picture element. Or if you can, it doesn't behave like a div would.

Dave: Right. Right. That's kind of like fieldset or some weird... which is even weirder, but yeah.

Chris: Yeah. Now I have to test it. I'm sorry.

Dave: Good luck.

Chris: Picture is so weird. Yeah. [Laughter] Yeah, fieldset is a good example, too, of one that's just completely bizarre.

Dave: And fieldset would originally just be like, "Dude, never heard of a grid. I'm out of here." But you need fieldset around radio groups, right? That represents a radio group.

I can't say, "Hey," [laughter]. I don't know. Let's just say even a vertical rhythm of 1M gap in between. You would want... Grid is really helpful. But the second you add a fieldset with some radios, you popped out of the grid, so display contents there would be pretty awesome.

It doesn't exist, or you can't do that with display contents. It sounds, again, too dangerous. And I should say Adrien is citing an Adrian Roselli article.

Chris: Right.

00:09:04

Dave: Adrian Roselli, love him. He does very good writing, but I guess pedantic, maybe, would be a way. He's very thorough and very particular about how this should work and how it is announced. We need people like that. But I think it's just interesting how he puts it through the paces, and that's what we need people to do.

Chris: Right. Like nobody else. Right. Really good, and it's a bummer. I believe he blogged earlier this month that he's being sued by Audio Eye. I haven't been sued by them, but I have also been served.

Dave: Some papers? Oh, yikes.

Chris: Yeah, by accessibility people in the past. What I did was I just said, "Bring it," and then nothing ever came of it. [Laughter] I was like, "I am fully prepared." You know? I would have brought my Macho Man Savage to the party.

Dave: Well, yeah. If I lose my shirt over fighting for accessibility experiences, that's fine. That's cool. [Laughter]

Chris: Yeah. That's a good way to go. I'm out.

Dave: That's a good way to go out. Yeah, but anyway, I guess Adrian tends to have a more pessimistic view because he sees a lot at the very granular level.

Chris: Mm-hmm.

Dave: I think that's something to weigh into this opinion. But it is sort of distressing. Just one CSS property can nuke an accessibility tree. That's unfortunate.

Chris: Ah, it really is. it almost sucks that it even exists at this point because if it can only do harm, that's not great.

Dave: Right, or like, it works. Again, the nuance, right? It works, but sometimes it just explodes. I can't author with that. That's a hard one for me to be like, "Dude, use this. I should use this," or my brain to even lock into using it because I'm like, "Dude, is this just coding a problem? Did I just make a problem?" You know?

I've watched so many YouTubes where somebody was just like, "Let me just use display contents to solve this problem," and I'm like, I think that creates problems. [Laughter] You know?

Chris: Right. Well, isn't that...? So, that's the ultimate irony of it, right? It works for the purely visual. "I just use a browser as a fully..." I use no assistive tech whatsoever.

Dave: Yeah.

Chris: Then it works great. [Laughter] Yeah.

Dave: Right. Right. Yeah. For me visually, yeah, I'm getting the effect I want, so YOLO, let's go. Push it.

But what you don't see or what you don't hear (more exactly) or feel on a braille reader is you basically just nuked somebody's whole way of understanding the website.

It's worth nothing, too. If blowing semantics is an issue, if you say, "List style type none," Safari just says, "Yeah. This isn't a list anymore." I don't even know if that's true anymore, but historically that was true.

Browsers are also exploding semantics, but we're not like, "Don't use browsers. Don't use this browser." I don't know.

00:12:42

Chris: We'll have to see. It's a bummer about that. I do plan to update my post and just kind of point out that that's not a good solution at the moment.

I'm not sure. I'll have to ruminate on Eric's point overall that we just can't trust that feature maybe ever because of the backslides.

Dave: Yeah. What's your forgiveness?

Chris: I don't have a lot. I'm perhaps slightly more forgiving. But is that because I want to be or is that because it's deserved?

Maybe it's a little of both, but the deserved part is how often have we brought up backslides in our 20 years of talking about this stuff? Not very often. Just because it has now happened this one time, I don't generally think about backslides, so that's some earned trust right there, I think.

Dave: I think if I were to side with Eric, which again my anti-nuance brain is just like, "Yep, it's dead to me." [Laughter]

Chris: Yeah. It's dead.

Dave: It's dead.

Chris: Yep.

Dave: Pull it out of the spec. But accessibility fixes happen slow. Like dialog. Twenty years to fix dialog, and it's still maybe rolling out.

But that's all just to say I think there's a lot to think about just specifically around accessibility fixes and AT in browsers and how they get upgraded and the opaqueness around that and how we don't find out until everyone says, "Yay! We fixed it!" Then it's like, "Psych! You didn't."

00:14:30

Chris: Right. Right. Right. Maybe we should read just to make sure we're not totally mischaracterizing people, as we do all the time here on this show. [Laughter]

Dave: We did actually get some feedback over on the Twitter. I should pull that up. My voice is hoarse. I wonder why. [Laughter]

Somebody was saying we said that the passkeys stores your private key. The private key never comes into the equation. There's never... So, you send your public key. The browser then issues a challenge. Your browser challenges that. It never sends a private key, and then sends the answer to the challenge, and then I guess your browser says, "Yes, they answered the challenge right," or something.

Chris: Oh! God dang it! Really?!

Dave: Yeah. Yeah.

Chris: Your private key never goes across the wire?

Dave: Never goes across the wire.

Chris: Well, that's even better than I thought it was. This is really cool.

Dave: That's better. Yeah, I think we said it wrong. But your public key does--

Chris: Well, we definitely did say it wrong.

Dave: Yeah. Anyway--

Chris: Remember I was like, "Oh, you can't type in your private key"? Well, you can't type in your private key because you don't need to ever.

Dave: Right. Right.

Chris: In my mind, I was just like, "Oh, you use biometrics to unlock your private key, and they don't let you type it in because that would be stupid. But you still need to send it." That's what was happening in my brain.

Wow, Chris! I guess you should read something for once in your life.

Dave: No. No. It's confusing because it's new, and I think you're not wrong. It's using the private key to solve the challenge, I believe.

Chris: Yeah, of course. It is still private key, public key cryptography.

Dave: Right. That's still happening. But I think what's cool about it is it's almost like just how we encode webpages over HPS. It's basically that, but it's a user identity webpage thing. You know? It's interesting. You're basically saying my identity here, encrypt it, go, here it is.

00:16:41

Chris: I can't fricken' wait. It's already helpful to me. I like the idea of thinking of it as, usually, when a 1Password thing comes up, I'm like, "Oh, thank God. This is going to work."

Dave: Mm-hmm.

Chris: Because when my 1Password comes up, I use biometrics to unlock it. Then it puts in the right information. Great.

Sometimes it's a little more rough than that because there's like, "Pick from these eight accounts," and you can still pick the wrong one.

Dave: Mm-hmm.

Chris: There's one of them that looks good, but one of them is actually just a password that you saved two months ago, so that's probably the right one, but it doesn't have a username on it, so you're like, "Oh, crap. Which is the right one?" There are all kinds of rough edges with using 1Password. I assume that's the same if you use LastPass or whatever. Although, isn't LastPass kind of dead? They had so many breaches that it feels like kind of unsafe to even use it.

Dave: I think LastPass has a bad time. Yeah.

[Laughter]

Dave: I think what's cool is, if we take a high-level step back, entering in a user password, you're kind of saying, "I am this email, and I'm going to prove that by typing this password, password123." Done.

Chris: Yep. Yep. Yep.

Dave: I proved it's me.

Chris: Well, you just don't do that. It's like you've unlocked your 1Password. Then, whoop, you're in. You can't possibly be wrong.

Dave: Right.

Chris: I love that.

Dave: Right. Yeah, I love how it's almost like, "Hey. Okay, you want to log in? Who are you? Send us an identity," and your phone says, "Do you want to send this website your identity?" You're like, "Yeah." Then they're like, "Cool. I'm going to believe that's you."

Chris: Yeah.

Dave: Very cool.

Chris: Yeah. I mean it's nice that it solves all these technical problems and the UX is better.

Dave: Yeah.

Chris: How often does that happen in tech? It's usually like, "There are bad tradeoffs," and here you're like, "Hmm... there's...." The only tradeoff is I have to manually add this to my website. But once you have, it's just better for everybody.

Dave: You want to be secure? Yeah, you've got to buy this thumb drive. If you ever lose this the thumb drive, you're toast. [Laughter]

Chris: Yeah.

Dave: But here's your thumb drive.

00:18:46

Chris: I haven't read a single condemnation of it. I haven't heard anybody say anything negative about passkeys.

Dave: Yeah.

Chris: I should probably look around for that, but every time it comes up, it's a little bit like, "Have you heard of this? Because it's better."

Dave: Well, it's funny. If it's bad, then the whole Web's tech is bad. [Laughter] We're in trouble.

Chris: Yeah.

Dave: I don't think it's built on the same underpinnings.

00:19:12

Chris: Okay. Before we make it back to Eric -- don't worry, buddy. We're coming back for you -- there was also a bit of a correction on the Astro thing. Remember, I called out? It was Rich Harris's video. At the end, he kind of pokes fun at Astro because they have an RFC up for a router.

Dave: Mm-hmm. Mm-hmm.

Chris: We kind of... Of course, without reading it. Why would we [explicit used] read anything on this show.

Dave: We are in a punned podcast, and people don't understand this. [Laughter] We're not news.

Chris: Yeah.

Dave: We're not.

Chris: I assumed that what it meant is that "Oh, wouldn't it be nice to build..." I love Astro. Oh, my God. The DX of it is just delicious. I freaking love it. But occasionally, it does make sense to make an SPA. Sorry, world. It's kind of nice sometimes. It has a certain feel to it. Whatever.

Wouldn't it be nice if there was at least some possibility that I could build an SPA in Astro. You really just can't right now. But I wasn't defending it. In fact, I was doing the opposite. I was being like, "Oh... It muddies the water of when I should pick Astro and such. It kind of goes against their prior branding, in a way, to have this."

Anyway, it doesn't. It doesn't break any of that. It doesn't do any of that stuff because they're not thinking about building an SPA in Astro.

Dave: Oh!

Chris: They're not. They're just saying, "Maybe we can build a cool thing that makes the transitions between pages in an MPA (multi-page app) or, as I like to call them, websites.

Dave: [Laughter]

Chris: Smoother.

Dave: Okay.

Chris: Maybe some JavaScript is involved because it'll do some kind of page dif.

Dave: Okay. Okay.

Chris: This was whiteboard master Ben Holmes correcting us here in the Discord.

Dave: Oh, good.

Chris: That maybe there's some cool diffing thing they can explore to make the transitions between pages smoother or, probably the most likely, view transitions.

Dave: See...

Chris: It's just like... Yeah. That's all it was. It's not like Astro is going SPA. Anyway, correction.

Dave: I'm putting that on Rich.

Chris: Yeah. Yeah. [Laughter]

Dave: Yeah.

Chris: Yes.

00:21:23

[Banjo music starts]

Chris: This episode of ShopTalk Show is sponsored by Notion. Thanks so much to coming back as a sponsor, Notion. Glad to have you. A huge fan of their tool. Probably one of the most important professional tools that I use.

Today I'm excited to share that they just launched Notion Projects, which includes new, powerful ways to manage projects and leverage the power of their built-in AI features, too. Notion Projects combines project management with your docs, your knowledge base, and AI, so you can stop jumping between tools so much and stop paying too much for them, too.

I can vouch for that, personally. I feel like when I really got into using Notion, it started replacing things without even really me knowing it. Especially the project management stuff has been so useful to me in Notion.

Planning a sprint of work and having tickets for that work and assigning certain people and priority levels and having conversations and comments built right into the tool for that. Then you have a meeting, and you keep those meeting notes there, too. It's just an invaluable tool for keeping everybody on the same page. Really, the home base for projects for me.

Again, thanks so much to Notion for sponsoring. Just check them out at notion.com.

[Banjo music stops]

00:22:47

Chris: Okay. Anyway, now I'll circle all the way back to Eric and talking about display contents, who writes, "At this point, I don't think we as an industry can use display contents with confidence. Past actions are a good indicator of future behavior and the road to hell is paved with good intentions. I now view this declaration as predictably unpredictable. The common response of "Just test its support with assistive technology" does not apply here either. There's a nontrivial chance the desirable behavior for the declaration in a current browser version isn't guaranteed to persist for future versions of that browser."

I don't think we're mischaracterizing. He's saying it backslid once. Even if they fix it again, it could backslide again, so don't use it.

Dave: Yeah. I think when different browsers are breaking it in different ways, that sort of says there's maybe some unclearness on what's supposed to happen or a lack of clarity, but I don't know.

Chris: Yeah.

Dave: You could also take a bit more of an assume-good-intent vibe and just say people are smart but unknowledgeable. But maybe we need to pull the knowledgeable people in to work on this particular feature. [Laughter]

Chris: Yeah.

Dave: So, I don't know.

Chris: Yeah. I'm just going to say I can be a little more forgiving, even though this is--

Dave: A little softer?

Chris: Even if this is egregious, and I hate to see backslides. Isn't that what unit tests are for, and such? Which the Web platform actually has super billions and zillions of them. Make one for this and then you're good.

Dave: Right. Well, and I think that's where I'm probably not going to feel safe until a skeptic of some kind comes out and says, "Okay. Use it."

When Scott O'Hara is like, "Okay, I think we can use dialog."

Chris: "Okay, use modal now," or whatever. Yeah.

Dave: I think it's okay. I think that's great.

Chris: Yeah. It takes somebody like that to give it the okay. Yeah, fair enough.

Dave: Yeah.

00:24:50

Chris: I saw a really cool CSS one just yesterday, as we're recording. A few more days since this goes... Actually, it'll probably be maybe a week-plus, but that doesn't matter. This is still hot off the presses.

Dave: Ooh... Ooh...

Chris: It's like view transitions. You have to enable some flags. Although, Dave, I listened back to a show and you were clear about there is a flag that you should have on in your Canary, if you have it, that's just generically enable experimental Web platform features.

Dave: Mm-hmm.

Chris: They tuck a lot of stuff under just that one flag.

Dave: That one flag has a lot of wild stuff in it.

Chris: Yeah.

Dave: Stuff like GPU hacks to all kinds of stuff.

Chris: Mm-hmm. That one will get you this feature that I'm about to describe. This is according to Bramus Van Damme, who has long had a great blog.

Dave: Bramus is cool.

Chris: Yeah, a really clear, good blogging technique. I remember being like, "Man, this guy should work at a browser or something."

Dave: [Laughter]

Chris: Now he's at Chrome.

Dave: Now he's at Chrome, yeah.

Chris: Good job.

Dave: Yeah.

Chris: This was... Okay. Let me take you back in time a little bit. I believe this is... I heard... I associate this somehow with Jonathan Snuck.

Dave: Mm-hmm.

Chris: And, for some reason, Basecamp, back when they blogged more.

Dave: Yeah.

Chris: They had this technique where you'd click on something. Maybe it gets appended to the DOM, or it's a jump link where I click - I don't know - an H2 that's way down the page, and there's a table of contents linked down to it. As you arrive at it, all of a sudden, just real briefly, it flashes yellow.

Dave: Ooh, yeah. That was...

Chris: Yeah. Remember that?

Dave: That was a feature of Scriptaculous, I believe, too. That was one of Scriptaculous's, like, "Boom! We do this."

Chris: Nice.

Dave: Yeah. Yeah.

Chris: I somehow love it. I'm still... I have mad nostalgia. The yellow fade technique is what Bramus is calling it here. Although, I feel like it had a slightly different name. I can't remember, but yellow fade technique feels strong.

The way that you would pull it off has changed over the years. We used to not even have... Just think of @keyframe in CSS. Nobody thinks of that as a new feature, but it totally was at one time.

Dave: Yeah.

Chris: That's why Scriptaculous had to do it. It had to be a JavaScript animation affair.

Then we get keyframe animations, and so we'd make... You could say @keyframes, yellow fade, yellow flash. Maybe that's what it was.

Dave: Mm-hmm.

Chris: You'd call it yellow fade - or whatever. Then you'd say, "From background color yellow to background color transparent," white, or something. Another way to do it, you could do it in reverse too. Whatever.

You have this keyframe, but then when you call that animation, you'd call that animation on the element itself and then say, like... There's a keyword, right? At the end of the animation, you can kind of infer that it should run once, and it should stay in its ending state. I forget what the keyword for that is, but it doesn't matter. You can imagine it.

By default, an animation will go back to its original state. This says, "Stay at the end of the animation. Stay in that state." It's just a keyword.

Dave: Right.

00:28:14

Chris: Right. Okay. That's cool enough. But now, this is just - I don't know. Like I said, I'm just mad nostalgic for this technique. CSS has evolved yet one more time to make this even easier with something I had literally never heard of until this blog post. You can nest within an element at, so it's a new at thing - brand new.

Dave: Okay.

Chris: @starting-style.

Dave: Ooh...

Chris: @starting-style.

Dave: I love it.

Chris: Then you put the braces around it. Then you just... In this case, there's a div, and it has background color transparent. Then there's a transition, crucially. If there was no transition, this wouldn't matter.

Dave: Yeah.

Chris: There's a transition. Then it says @starting-style background color yellow. It's so little code.

Dave: I love it.

Chris: But just those three lines of code blast it from yellow to transparent real quickly. Yeah, really nice.

Dave: I'm loving it. It's like a reverse transition because you would do an animation to start it and stop. But this is just saying, "No, it has a starting style when it shows up on the page."

Chris: Right.

Dave: That's cool.

Chris: Imagine that little technique where a list item slides into the left a little bit.

Dave: Floaties in. Yeah. Yeah.

Chris: That would be so easy to code with this.

Dave: Or your little navs popping up or down. Bloop. Kind of blooping in. You know?

Chris: Yeah. Yeah. Yeah.

Dave: Oh, my gosh. And then what else am I going to do with it? That's all I'm going to do with it.

Chris: There are modals that fly in from above, so the starting style would be scale 1.2 and opacity zero. Then the default style would be scale one, opacity one.

00:30:02

Dave: On a large pizza company, we had a hero unit that would fade in these and kind of slide in these little from opacity left 20 pixels, slide that stuff in. That would be trivial. That would be awesome. And a progressive enhancement. Oh, boy.

Chris: So cool.

Dave: So great!

Chris: You know what we really need, though? Of course, that's what getting new CSS does is it makes you ask for more.

Dave: A little shimmy on your popup dropdown menus now.

Chris: Shimmies could easily shimmy.

Dave: Ah, I'm shimmying the....

[Laughter]

Chris: I'm going to shimmy the shit out of...!

Dave: Ooh, yeah, buddy. Watch me shimmy the shit out of.... Come on down.

[Laughter]

Chris: What I really want is outgoing style. That is still unsolved and really sucks on the Web. [Laughter] If you want to fade an image out while it's shrinking or something, and then it leaves the DOM, you almost need an on-DOM-out or something. If anything gets removed from the DOM, is there a way you can just--for the love of God--apply a little CSS on its way out? That would be just amazing.

Dave: Could you...? With this thing, though, could you be like, .removed - or whatever - li.removed? Could you have a starting style where it's normal, and then the ending style is...?

Chris: No, you can't, unfortunately.

Dave: Yeah.

Chris: Because by the time you call .remove on it in JavaScript, it's just gone.

Dave: Yeah.

Chris: It's instantaneously removed from the DOM.

Dave: Yeah. I've done it where you listen for transition end on the element and then you kill it. You say, "Start removing."

Chris: Yeah, but that's exactly the kind of... No. [Laughter]

Dave: Blah... No. Hey, get back to vanilla JS land. We do this sort of crazy stuff. [Laughter]

Chris: Well, that's the kind of thing that people did. Then people were like, "Oh, but what about accessibility? I don't want to see movement."

At the top of my style sheets, I'm going to write, "Prefers reduced, motion reduced," and then animation duration zero seconds.

Now you've ruined the ability for that element to be removed from the DOM because the transition end never fires when the animation duration is zero seconds. The things... It's a foot gun, I think.

Dave: Yeah. Oh, are you in don't animate out?

Chris: No, because, fortunately--

Dave: ...nuance, baby, discretion. [Laughter]

Chris: The good news is that most snippets of code about prefers reduced motion say, "Put the animation duration to 0.0001 seconds," which is effectively zero and solves that problem.

Dave: Mm-hmm.

Chris: Thank God, I guess.

Dave: I mean what's cool about Bramus's thing is they aren't stupid, and if we have incoming style or starting style (I think is what it was).

Chris: Starting style. Yeah.

Dave: I think there's potential. People are aware, and it's already been raised. It would be cool to have the outgoing style as well.

Chris: Right. Right. Right. You know it is interesting. Remember we kind of pooped on the change in view transitions? It used to be incoming and outgoing, and then they switched it to old and new.

Dave: Yeah. Yeah. Did we get corrected about that? [Laughter]

Chris: No, we didn't. I still think I'm right about that. Although, I took part in zero discussions about it, so fair enough.

Dave: [Laughter]

00:33:56

Chris: This is similar. Starting... It's on my mind a little bit because I have a slide in my thing where I'm kind of comparing the names of things as related to what their name is now in logical properties.

Dave: Okay.

Chris: There are all these properties that make more sense now or are more aligned with each other because of logical properties. Things like overflow X.

In somebody's brain they said, "Oh, X. That means the X-axis."

Dave: Mm-hmm.

Chris: Nowhere else is that used in CSS. That is a total loner in that.

Dave: Nice. Yeah.

Chris: Now the resize property in CSS. Resize: Guess what if you want it on the X-axis? Is it X? Is it resize X? No, it's horizontal.

Dave: Horizontal. Yeah.

Chris: It's the word horizontal.

Dave: Nice.

Chris: Which it's not like that's hard to learn. It's not hard to understand. But it's the only place in all of CSS where the word horizontal is used like that.

Dave: Yeah.

Chris: Doing it in an inline direction, it just makes it a little more consistent in that way. Now look what we're doing again. Starting style. Eh, I don't hate it. It's obviously very useful. A big fan. But what should we use? Should we say starting old? [Laughter]

Dave: Old style.

Chris: Old style? [Laughter]

Dave: Old style.

Chris: Yeah.

Dave: Milwaukee's best. [Laughter]

Chris: It's just a case again where, like, was it considered across all of the language of CSS? Certainly, it was. But it probably wasn't.

00:35:18

Dave: Well, we've talked about it in OpenUI before. Should we do this show-hide or close-hide? Modals is probably the worst. It's like show modal and close. You know? Rather than just show and hide - or something like that.

I think details was invented around the same time as modals. Open and destroy, basically, remove child. There's open and not open - or whatever - is your option on a details element. Then I feel like there's one more, but I'm just blanking on it.

Anyway, even things made in the same generation have different verbiage or different verb tenses and stuff like that.

Chris: Yeah.

Dave: Anyway, it's mindboggling.

Chris: Yeah.

Dave: This new popup thing kind of went a different way. I think they have show and hide as methods.

Chris: Yeah, like jQuery. [Laughter]

Dave: Like jQuery, which again... Don't say pave the cow paths unless you're going to pave the fricken' cow paths. You know?

Chris: CSS is just cruising, dude. They need to... I got that bookmarked, that post on all that popover stuff. It was on my mind as, like, this is coming. But it looks like it's really coming now.

Dave: Yeah. I think it's in Chrome 1.14, which is out.

Chris: Holy cow.

Dave: Let me go to our friend Ferd's site. Can I use popover?

Chris: Did they animate?

00:37:03

Dave: Yeah, it's in Chrome 1.14, which is next up on deck. They can animate. It's basically modal. It creates a top-level element. That's kind of what you need to know.

Chris: Like under the body or even...?

Dave: On top of the body.

Chris: Wow.

Dave: It's always going to be Z index one billion - or whatever. It creates a top-level element.

Chris: Okay.

Dave: But it is anchored. I use that word specifically. It's like it is absolutely positioned to an element, like a button. But it doesn't have the constraints of the button.

Right now, if you absolutely position a div and say width 100%, the width 100% is the width of the button. It's not like the width of the content or whatever.

Chris: Okay.

Dave: It'll position the content but without... almost absolutely but without the constraints of the parent. Does that make sense? It's on the top layer.

Chris: It actually does. Right.

Dave: Okay.

Chris: There's a weird thing where if you just say, "Position absolute," without any other things, it is kind of still right next to the element that it started on. You know?

Dave: Yeah.

Chris: Yeah.

Dave: Yeah, it's near the thing it was next to.

Chris: Yeah. Yeah.

Dave: Anyway, you don't have to put positioning on the element (to my knowledge), like relative or something like that - the trigger.

Chris: Right.

Dave: But you have a trigger that hits a popup target, and that popup target will then just pop up like you expect. So, pretty cool.

Chris: That's awesome. I assume the main point, perhaps, is edge detection. It must be, right?

Dave: Yeah. I don't know if anchoring is coming in this. Actually, I should...

Chris: Oh, maybe not.

Dave: The verbiage was confusing on Web.dev. This is from Gina on May 23rd, which is pretty recent for us. But it's really cool.

Then coming soon, there's enter and exit animations. Then anchor positioning in CSS. That's going to give you kind of like these radiographs and stuff like that. But if you open that stuff up, and if you open that positioning stuff up in Canary right now--

Chris: Yeah, yeah?

Dave: --it does work, so all that, all the CodePens work in Canary. So, I assume a piece of it is there. It's really hard for me, when I read this, to be like, "Oh, all that stuff is coming," but I think it's all related. Anyway--

Chris: Yeah. A little harder to progressively enhance that particular API. You know?

Dave: Yeah.

Chris: We'll have to see what's up with that.

Dave: Yeah.

00:39:46

Chris: Remember the thing that we should continue to credit Andrew for because it was a nice thought. Yes, no, or yes with progressive enhancement? This one is going to be in the no category, I'm afraid.

Dave: Give me... Well, there is--

Chris: Or is that not true?

Dave: Hello.

Chris: Or is it polyfillable?

Dave: There's an OddBird, I think, has a polyfill on their GitHub repo.

Chris: Hmm...

Dave: Popover polyfill, that's Miriam's company. They have a popover polyfill. Your mileage may vary there. I don't know if this was fully baked or not. I think it's been a while since this has had some action. Oh, no, last week it got some work, so it must be there.

Anyway, yeah, there's a popover OddBird popover polyfill.

Chris: Yeah. I guess it does feel pretty polyfillable.

Dave: Yeah.

Chris: Just use position absolute. It should do the trick there.

Dave: Yeah. If I were to guess, the anchoring is not. Does that make sense?

Chris: Yeah. Anchoring was always a separate proposal, wasn't it? It doesn't... You can use anchoring that's not necessarily... that doesn't matter. [Laughter]

Dave: Mm-hmm.

Chris: For something that's not a popover, you can anchor whatever you want. You can anchor a menu or whatever.

Dave: Yeah. Well, and I'm looking forward to that. Anchor details.

Chris: I saw a great blog post about anchoring. Just the other week, wasn't it? Who was that? I'll have to link it up if I can, but that appears to be coming, too.

Dave: CSS is hot right now. Pay attention, everybody. Buckle up.

00:41:32

Chris: Gees. Gees, indeed. Yeah, it was hard to pick a few things. You can't.

As I would know, if you're about to speak at a conference about CSS, and you're like, "What are the hottest things to talk about?" you have trouble getting it under ten.

Dave: Oh, it's not. Yeah, I mean you can't. I mean I think they broke up at Google I/O, all the CSS stuff, into four different talks. Adam Argyle did a while thing on colors. I forget what he did, actually.

Chris: It was about user... It was like customizing user interfaces, or something.

Dave: Oh, user-driven... Yeah.

Chris: Yeah.

Dave: How you basically have all these media queries and has attributes and all this stuff, has queries and stuff like that. You can really customize something to a user's state. It's just incredible.

Chris: Yes, indeed. Wow.

Dave: Incredible.

Chris: We've made it out of the intro of this podcast.

Dave: Anyway... Welcome to the news section. Do you want to get in here some questions and answers on a question-and-answer podcast?

00:42:41

Chris: Oh, I did. I totally put out a few in here, didn't I? Let's see. What do we got here? I'll read one from Greg, I think. Greg Wolanski wrote in, "What tools have you been using for five years or longer?" which is a fun question. It's kind of like a medium length of time.

Some people could put TypeScript in that bucket, easily, and some people cannot. You couldn't put Astro in that bucket because it's not five years old yet. WordPress would be very easy to put in that bucket.

Five years or longer, what do you got?

Dave: Man. Vue is on the cusp but actually not Vue, but Jekyll.

Chris: Yeah. I was going to say, for Dave, it's Jekyll, for sure.

Dave: 11ty. That's about it. WordPress, I guess, we use technically for the ShopTalk site, so I do use that, still, and I have for five years. Very rarely, though, for me.

I think this question is hard because there are a lot of tools I used and then just haven't had the occasion to pick back up.

Chris: Right, but that says something (a little bit). But maybe it's just occasionally. It's not like you work on every possible website all the time. You know?

Dave: Yeah.

Chris: It doesn't mean the tool is dead, necessarily. But in some cases, it kind of does. Like I wonder--

This is a good question. "Is the amount of new Jekyll sites outpace the amount of new 11ty sites?"

Dave: Ooh...

Chris: Do you think it still does because Jekyll is just so established as this thing?

Dave: I wonder.

Chris: Not to mention has kind of some GitHub integration that is kind of a big deal.

Dave: Yeah. Well, I feel like part of Jekyll's -- What would you call it? -- superpower was, you cut a branch in your project and spit up a website. I'm actually pretty happy on Jekyll. I started a whole 11ty migration. I would love to be on 11ty. I'm an investor of $60 million. [Laughter]

I would love to use 11ty, but it's just like, "You know what? Jekyll is working for me. Until it physically breaks on me, I don't really see a need to move." You know? I'm kind of happy there. A workflow change would be pretty drastic.

Then... anyway, that's... But 11ty, I have used on multiple projects. Our website on Luro is in 11ty. PostgreSQL would be something I've used for over five years.

Chris: Yeah.

Dave: I used that for a long time. Like it. Kind of keep coming back to it.

Hmm... I don't know, Chris. I'm kind of stumped.

Chris: Yeah. Then what does it mean, too? I hate to make the question all meta because we don't really know what Greg's intention was here. Is it a one-off question?

Does it mean if it's been that long, there's some kind of implication of quality there - or something?

Dave: What about you? React, I guess, would be.

Chris: Macs, my Macs. I use Macs a bunch. [Laughter]

Dave: Max? Oh, Macintosh?

Chris: Yeah, just my computers. Yeah.

Dave: That's good. Yeah. Yeah. I can't say I've been on a Mac for five years.

Chris: Yeah, you had that detour.

Dave: Yeah.

00:46:11

Chris: Where is your best Windows machine right now? Could you be playing a AAA video game in five minutes?

Dave: I can touch my computer, and I could be playing a AAA video game in five minutes. Yep.

Chris: Oh, that's awesome.

Dave: Yeah, so I bought a very big, wide desk, [laughter] the widest one they make, so I could set up two computers at the same time. I don't regret it. It's a little hard to get them to use the same keyboard and monitor, but that's fine.

Chris: That would be like you play stuff that you bought on Stream, essentially?

Dave: Steam, yeah.

Chris: Steam.

Dave: Still playing Overwatch, a little Call of Duty, and stuff like that. But to be honest, the new Zelda came out, and so I've been doing that.

Chris: Hell, yeah. Me too.

Dave: Also, my bandwidth for video games has shrunk to zero. I'm not--

Chris: You're just out of it right now? Well, you had it in the summer. That's probably the worst time for it. But doesn't everything go?

Dave: Summer is kind of Pog champ for me [laughter] for video games because I can stay up until 4:00 in the morning, and my kids just get up and feed themselves. I can sleep in, so it's actually the opposite of what you usually think.

Chris: Oh...

Dave: Except the kids don't go to bed until 11:00.

Chris: What about the portability of the Nintendo device, too? If you're traveling, will you pluck that thing out of its thing and throw it in your bag, or no?

Dave: I would, yeah, for a conference or something.

Chris: Yeah?

Dave: I did... For some reason, my copy of Breath of the Wild or Tears of the Kingdom wants to phone home a lot because I think I have the digital copy. So, it actually doesn't work that well on the wi-fi-less situation.

Chris: What?! You literally can't play it? If you open it up on a plane and you decide not to buy the wi-fi, it'll just be like, "No, you can't play this game right now"?

Dave: Yeah. I tried to play it in the car while kids were at sports, and it was like, "Sorry. I need to log in."

Chris: That's so unacceptable to me. Oh, my God.

Dave: It's almost enough to make me go buy a cartridge. [Laughter]

Chris: Yeah. How much money do they make from that? I went cartridge. I don't know why. Because I already regret it because I lost a game already.

Dave: Oh, yeah.

Chris: Now I decided to buy the digital version of it because I was so annoyed at not having the game. But it made me regret buying cartridges. I'm like, "What am I, 100 years old?" I don't buy DVDs anymore.

Dave: Yeah. No, my kids... My kid has lost a couple of cartridges, and it's just like, "Man!"

Chris: Sixty dollar mistake.

Dave: Yeah. He wants me drive all over Texas to go find it. It's like, "No, sir. You just lost a $60 game. That's on you."

Chris: Yeah. Uh... How far did you get?

Dave: Oh, I'm enjoying... My brain--

Chris: Going slowly?

Dave: I'm going so slow, I'm such a completionist that it's like there might be something under this rock. I should pick it up. Oh, this whole game is covered in rocks. Oh, this--

Chris: I hate the rocks.

Dave: Oh, man.

Chris: That's my least... Why do you pick up--? Once in a blue moon, there's a cricket under one of them, and you pick it up.

Dave: Yeah.

Chris: Because you can put it in a recipe or something.

Dave: Yeah.

Chris: But what else is ever under a rock? Why do rocks exist in the game?

Dave: Why? Yeah. You can fuse rocks to stuff, and that's cool.

Chris: Now you can, yeah.

Dave: Yeah.

Chris: In Breath of the Wild, I guess, it was a little more ridiculous. You can't really throw them as a weapon.

Dave: Yeah.

Chris: They seem... I don't know. It seems like a very strange thing in the game.

Dave: Yeah.

Chris: They're everywhere.

00:49:34

Dave: They're everywhere. But I will say what's cool about this game is they improved some stuff. One thing I was thinking about; occasionally, in Zelda, these bats will fly at you. They're called Keese.

Chris: Yeah. You get their eyeballs.

Dave: They get eyeballs and wings.

Chris: Yep.

Dave: In Breath of the Wild, that was just junk. There's one spot you can trade that, and it's only open at night.

Chris: Yeah. If you try to cook it, it ruins the meal.

Dave: Yeah, it's gross. But in this one, they buff your arrows and stuff like that, and there's a lot of arrows. And so, you're Zelda, and you can actually use the arrows now. You don't just run out of arrows. It's so good.

Chris: You just cock your bow because you're ready to shoot it, and then you think about fusing.

Dave: Yeah.

Chris: All you've got to do is press down and attach the fire bloom or whatever.

Dave: Yeah.

Chris: Oh, yeah. I like the UX of bowing is better.

Dave: Yeah. I haven't... I'm starting to get this thought of, what I like about this game is they basically are just like, "We're just going to make the same game but better," let you do wild stuff.

Chris: Yeah.

Dave: They saw people doing wild stuff in the first one, and they were just like, "Let's just go ham on that." You can build a car and just drive it around. [Laughter] I think that's very cool.

They built a system that lets people do whatever the hell they want. If it's bad, it's bad. Whoops. You made a whole Gundam that has laser arms? Cool. That broke the game for us but guess what. I hope you're happy. That's great. I'm proud of you.

Chris: I love that people are crucifying Corax.

[Laughter]

Dave: Yeah. They're building just really macabre crucifix scenes with these poor, fat Corax.

Chris: Because there's a little mechanic where they're like, "I lost my friend. Take me to the other Corax SEED," and you have to use the hand tool thing to move them onto things. Little did you know, I can move you straight across this kingdom, little Corax.

[Laughter]

Dave: Yeah. I can just carry you across. I can just... Yeah. It's fun. It's like they... Anyway. There's probably a lesson in there.

Chris: Yeah, let people do what they want.

Dave: Let people build systems that let people go--

Chris: Yeah.

Dave: Obviously, you need some safety when the white supremacist content shows up on whatever. They'll probably shut it down.

Chris: Yeah. Fortunately, you can't type anything. Although, I suppose you could build a fricken' swastika out of trees or something.

Dave: Yeah.

Chris: But nobody needs to see that.

Dave: Well, what's nice is they don't really have a, "Share your public... Share your cool inventions." They don't have a website that does that because that would be awful. That would go very wrong.

Chris: Yeah, it sure would.

Dave: But I don't know. You think about a design system. It's like, "Hey, I made the materials, and I figured out how... I gave you a tool to ultra-hand them together, so good luck. Have fun with the design system." [Laughter] That's cool.

Chris: Yeah.

Dave: Ultra-hand for websites. Think about it. I'm trademarking that. I'm putting in the patent.

00:53:01

Chris: Have you found yourself really attracted to building this stuff? I just got... I'm really slow. You're a completionist and I'm just bad at video games, so we're probably at the same place.

Dave: Yeah. We're at the same checkpoint.

[Laughter]

Chris: I just dove off to the bottom.

Dave: Okay, yeah.

Chris: Just exploring the ground layer now, and there are just piles of building materials everywhere.

Dave: Yeah.

Chris: They really want you to build stuff.

Dave: Yeah.

Chris: Like, "Here are four wheels and a door. Wink-wink. Wink-wink-wink-wink-wink." You know?

Dave: Yeah.

Chris: I'm like, "I can't be bothered. I shall walk."

Dave: Oh...

Chris: [Laughter]

Dave: I saw that and said, "I will build the village later," because I know there's a little... I should do a little adventure before I start Sim City High Roll. I will eventually pick up on Sim City High Roll, but right now I'm going to build a village or go do some adventuring.

But man, yeah, it just keeps going. That's what's incredible about the game. It just keeps going.

Chris: Yeah. I'm finding it a little easier. I'm so bad at it. Even though the game is so well designed that I found myself in just amazing positions sometimes where I'm like, "You didn't factor in just how stupid I am." You know? [Laughter] I'd save the game with half a heart with no cold resistance in a cold area. You know?

Dave: Yeah. Yeah. Yeah.

Chris: That's just broken. That's a broken save right there.

Dave: Yeah. I can't get back from that. Yeah.

Chris: Yeah. [Laughter]

Dave: Yeah.

Chris: Little stuff like that. To the moments where I'm like, I really don't... I really prefer surprising myself to not have to YouTube how to get out of stuff.

Dave: Mm-hmm.

Chris: But I found that already two, three times, I've had to be like, "Okay. I can't figure it out."

Dave: Yeah, yeah, yeah.

Chris: Guide me, Polygon.com.

Dave: Yeah. No, I've... Yeah, it's fun because I've made mistakes I don't know how to get out of. Like I sent all the railcars off the edge - or whatever.

Chris: Yeah. You can just drop your stuff. Then you're like, "Okay, does that mean the storyline is over?" I found that if you walk far enough away, and then walk back--

Dave: It'll come back?

Chris: They're just sitting there again. I'm like, "Oh, that's nice."

Dave: I might have to try that. Yeah, there are a few places where I was just like, "Oops! That's gone." [Laughter]

Chris: Yeah, or you design... One time I designed the perfect thing and got all the hooks on just right.

Dave: Yeah.

Chris: Then sent it. Then I was like, "Oh, you're supposed to get on it." [Laughter]

Dave: So, the machine went all the way? Yeah, I know exactly. Yeah.

Chris: Which had big, like, Monte Python vibes.

Dave: Yeah.

Chris: Steven and I jump out of the rabbit. j

[Laughter]

Chris: You're like, "What? You jump out of...?" You're like, "Yes, we jump out of the rabbit." You're like, "But you're standing here." [Laughter] Anyway...

Dave: That's great. [Laughter]

[Laughter]

Dave: I'm... yeah. I wonder if this summer is the summer I show my kids Monte Python - or my son. I wonder.

Chris: Yeah.

Dave: I wonder if I get there.

Chris: Not to dwell on Tears of the Kingdom too long, but doesn't it seem like, man, if you really want to embrace this game, that's practically all you can do?

Dave: Oh...

Chris: If I have two hours a week to play, which for me is a stretch almost. In the beginning, I was into it and spent some nights. I'm obviously more than eight hours into the game at this point, but probably not much more. You need hundreds, a thousand to really embrace the game as it's supposed to be, I feel like.

Dave: Yeah. Yeah. To its credit, they invented a world where you just kind of walk around. But it's not an endless world like Wow or something like that. It's not this endless treadmill. It's just a big thing. That's what's cool about it.

Chris: I do like how some people... You should embrace that idea. I was listening to some... As this was coming out, it was a bit of a news item, like, "This is going to be the most popular video game of all time," kind of thing.

Dave: Yeah.

Chris: It made media, and they had some interesting interviews. There's a woman who was just like, "I just walked around and found nice places to watch the sunset and stuff."

Dave: Yeah.

Chris: I love that. You don't have to be like, "I'm going to enjoy this game as I think it was intended to be enjoyed." You can extract your own enjoyment out of it.

Dave: I have some friends that play Final Fantasy, the online one, 14, I think. Is that what it is? 13? Whatever the big online one is.

They just sit on a bridge and listen to somebody play music on a three-note harp. It's weird, but that's what they do. That's the game to them, and that's cool. I think that's cool.

Chris: Yeah.

Dave: Well, hey, I do have a hard stop, so I'm going to have to shut her down.

Chris: Okay.

Dave: I apologize. But I think this was fun. We got to one question. I feel like that's a big accomplishment for the ol'--

Chris: Oh, yeah. I'm going to drag this one back onto the--

Dave: It was a big accomplishment for this podcast (in our late stage). [Laughter]

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.

Join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: ShopTalkShow.com! Oh, yeah, brother!