Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris.

Chris Coyier: You're god-dang right. I'm right here hanging out. What's up?

Dave: Hanging out. Not much, man. It has been quite a fall here, so just busy cooking up features. Boom-zoom-zoom. So, you know, busy, busy.

Chris: That's right. That's fun. Now you're launched with Luro, and now you get to be like, "Let's change this. Let's add this. Let's talk to these people." Yeah. Is it a little more exciting once it's launched?

Dave: The best way I could describe it is just a relief. It's just like, "Cool. It's out. I can talk about it. I don't need to watch what I say." I'm even like Mr. Leaks over on the Twitch stream just like, "Hey, here's a feature we kind of thought about." [Laughter]

Chris: Yeah. Well, you did it. It's out. It's not theoretical anymore. You talk too much about it and then you never do it; you look like an idiot.

Dave: That's vaporware. Yeah, I don't want to do that. Anyway, yeah. It's out. It's good.

Any time you build something, you're like, "Okay, cool. I built it. Who wants to use it?" [Laughter]

Chris: Yeah.

Dave: Then you get into conversations with people. Sometimes those are great and sometimes they're like, "You don't have that one weird thing that doesn't even exist." And you're like, "Okay, well."

Chris: Right.

Dave: "Let me know more." But you know. Hey, life.

Chris: True. You've got to tamp down those because I'm sure what you want to happen is that 10,000 people sign up a day. You convert 5% of them. Everybody is happy. They're carrying you through the streets because they love your product so much, which is just, you know, obviously I'm joking.

Dave: Yeah.

Chris: You're lucky to get anybody. You know? [Laughter] It's rough. It's tough out there for software.

Dave: Yeah. I didn't want to start the show on a bummer or anything, but there is big... People... I have friends losing jobs and stuff. They're talented people, so I just don't understand how, but I think it's just the climate right now is still kind of tough. It's hard.

Chris: Yeah.

Dave: Hopefully, people can keep their heads up and persevere and find good work. But man.

Chris: Yeah, I hope so, for everybody, right? Even just individuals you're talking about, right? Like, "Where can I go that actually wants me?"

Dave: Right.

Chris: "And I can actually make money," and all this stuff. I thought tech was a sure thing, man. That's what my parents said.

Dave: Just code, and then you'll go to coding school.

Chris: "Do computer science," they said.

Dave: Yeah. It's easy. Psych! Anyway, yeah.

00:03:05

Chris: I saw this, not that I really used it, but I saw this, one of the Twitter competitors. It was hot for that for a minute. Everybody was bouncing to Mastodon and picking an instance and bouncing to Bluesky when that became a thing, and it had a different vibe. Then Threads became a thing. But there were others, too. There was Cohost that had some tech stuff going on.

Dave: Mm-hmm. Yeah. Yeah.

Chris: Pebble was one of them. I was impressed by Pebble because when I logged in, I was like, "Dang! They hired a designer."

Dave: [Laughter]

Chris: Good job. This looks good. But it was kind of the deadest of all of them. What did they get, 100,000 posts or something in the end, or 200,000, which you probably get that in one second on FaceBook. You know? [Laughter]

But they closed up shop. They're the first ones to totally drop it in this game.

Dave: Oh, man.

Chris: I think that's sad because it was the nicest designed one. But what are you going to do?

Dave: Yeah. That's too bad. They said they couldn't get funding. Right? That's what it looks like.

Chris: Yeah.

Dave: Unable to raise enough.

Chris: They just didn't have the growth. You need to have it.

Dave: Well, and who you're competing against, too. You're competing against literal Facebook, Meta, Instagram.

Chris: Yeah, right.

Dave: You're competing against Twitter.

Chris: If it was one person working on it, well, then you're fine. Who cares? You could take 0.0001% of that and maybe do okay. But that's just not enough firepower. There's not enough trust. They know you're just one person behind it - or whatever. Even if it was a team of three or something. It doesn't have enough juice to get going.

It's tricky. You pretty much would have to take some fairly big funding, have to have a big team, build it really fast. And then somehow capture the hearts and minds, which is just... How? [Laughter] It's not a feature. It's not like, "We support longer videos." That's not going to do it. It's something else. It's something in the water.

00:05:08

Dave: Well, and that's, I think, yeah, there's something else in the water. The macro system is bad. Right? But it takes time to grow a product. You have to talk about it a lot.

You blogging 20, 30 times a week on CSS-Tricks, everything has a CodePen in it. That's advertising. That's building brand awareness or whatever.

Chris: Fortunately, I liked doing that, too. It felt fun and exciting and stuff to do that. Whereas if you're like, "Eh, I have to do a post today?" Well, you're screwed. [Laughter]

Dave: Yeah. Yeah. Yeah, if the pain to maintain is too high.

Chris: Yeah.

Dave: Yeah. We said if the pain to maintain is greater than the cost to maintain, then get out. But you have to talk about it a lot. You have to share about it a lot.

Chris: I've got a good example of that, actually. I probably blogged it. I just have been blogging... squeezing every ounce of my life out.

Dave: I love it. I'm loving it.

Chris: But it was this app. God-dang it. What is it called now? Ah! Why is it not in my menu bar? Did I not tell it to auto? It's a very nice app. It's called--

The point of it is when you sign into your bank or something, and then they send you a six-digit code, a one-time password, they call it. One of the two-factor auth choices.

Dave: Yep, yep, yep.

Chris: On iOS -- and I wonder if Android has copied this at this point. It's such a good feature. Right on top of your keyboard it just says, "Oh, we got the code 123456 in a text message. Just click here, and we'll auto-fill it for you." It does it, and everybody loves it. It's a universally loved feature of iOS, like, tremendous job. Good job. Probably took you eight minutes to ship that. It was just a perfect idea. Well implemented.

It's even gotten better over time. If you auto-fill, it'll go delete that message. That's great. Good job. I don't need that sitting in my message history.

Dave: Oh, man. That's cool.

Chris: This was an app. It's called Message Decoder, I think. One for MacOS that does it on the desktop too, and it does it in a clever way. It scans. What's the message in the upper right called? I'm tempted to call it a toast, but it's on the operating system itself.

Dave: Yeah, notification. Notification.

Chris: Yeah, it's just a notification. Somehow it OCRs it.

Dave: Okay.

Chris: You know that technology that can read the text.

Dave: Yeah.

Chris: It even puts a cool little animation while it's doing it that you can turn off if you want. But I'll grab that one-time password out of that notification, put it on your clipboard, and then you can just paste it. I was like, "Oh, that's clever," and I installed it. Maybe I mentioned this the other day because it has a recurring cost to it that's a little bit like, "Oh, do I really want to pay for this?"

Dave: Mm-hmm, $10 a month to just fill in your one-timers. Yeah.

Chris: Yeah, it's less than that, and I might have had it wrong at one time. They do have a free forever version that just gets a little slower.

Dave: Okay.

Chris: But it never gets slower than manually going over to copy and paste that number.

Dave: Yeah. Yeah. Yeah.

Chris: That's slow.

Dave: Yeah.

00:08:22

Chris: Anyway, good on them. Cool feature. But what I was going to say is he emailed me about it, and we were going back and forth. I was like, "Oh, you know what? I just don't like having notifications on that much. I turn them off a lot to attempt to stay productive. Wouldn't it be cool if it could do it without that somehow?"

Then I was like, "Well, what if they come in my email? Can you get them out of there?" It was just feature, feature, feature.

At one point he's like, "I kind of don't want to code anymore." [Laughter] Like, "I built it and it works, and what I want to do is talk about it and get other people talking about it and just stay on that train for a little while. And then, after I get a lot of feedback, maybe I'll go back to the coding corner."

Dave: Nah. Yeah.

Chris: And put in some of the best ones. But just because you told me you want your things in email, I'm not going to just be like, "Oh, one guy said it! Back to my hole." That's just not how you should roll.

Dave: I think that's kind of cool. Like seasons. It's like, hey, we are in the business growth season. I'm a one-person shop. [Laughter] We're a small business.

Chris: Yeah.

Dave: We are not in the... We've done the build season for a long time - or whatever. We figured that out.

Chris: Yep.

Dave: And it works. Thumbs up. Let's move into the just let it grow.

Chris: The problem is, that's what you know. You have so much muscle memory for just like, "Eh! Time to sit down at the computer. Click that VS Code icon," or whatever it is. You just get into that mode.

Dave: Well, and I think I too, Dave Rupert. It's like I fall into a mindset. I call it the feature trap. That's a term that exists already, but it's just this idea of, if I build something else, something new, a new feature, people will show up and use it.

I was thinking for Day Trip, we only did Austin only, and we built all this stuff to go to other cities and stuff like that. We were like, "If we use it, then everybody will just start showing up. It'll be great." Then it's like, "No..." I don't know. [Laughter] Or we could just keep it Austin. We don't have to take over the world. I think you just get hooked into this mindset of, like, "If I just add one more thing, one more thing, they'll show up. If I build it, they'll come."

Chris: Yeah. All right. Well, good luck, everybody out there building products. Keep at it. Hope you love it. It's pretty fun, hopefully. As long as you're getting something out of it.

Dave: There's something to be said about working on one thing for a very long time. That is a very rewarding experience. You're like, "I'm making this one thing better," or these ten parts of this one thing better.

00:11:22

Chris: It's nice. I saw you were quoted in a post I read the other day. It was a couple of months ago, I think. A bunch of months ago. It was May - so whatever. You were looking at what... You're on Mastodon.

Dave: Mm-hmm. Mm-hmm.

Chris: You can click, you can right-click somewhere and be like, "Share this post," and it'll give you an iframe of a Mastodon post. Then you looked at the perf inside that iframe. 300 kilobytes of JavaScript, 2 megabytes uncompressed (which does matter, you know, how much does it come out), 50 kilobytes of CSS, 500 kilobytes of fonts. It's two Robotos you found in there and the entirety of Font Awesome and the entirety of React and all this stuff. Right?

I get it. They're a small team. It's free.

Dave: Mm-hmm.

Chris: It's tricky to do all that right. But just that iframe is beefy, probably bigger than a lot of people's entire websites. So, you put that one iframe on there - boom.

Then you mentioned that it's per instance, so all those resources are... You put one iframe on it from Front-end Social, the other one from mastodon.social - whatever. Those are not shared resources, so that the one megabyte from one is another megabyte from another. It's like, "Holy cow!" Pretty bad.

But I'm not trying to waggle my finger at Mastodon. They're doing great. They're busy.

Dave: I'll waggle my finger. Don't worry. I'll do it.

Chris: Yeah, we can say, "You should do better," but it's like, whatever. I get it. Hard to prioritize everything in the world. [Laughter] You probably should. Maybe one Roboto would be a quick win. You know?

Dave: Yeah. I'm going to be much harder than you. Keep going.

Chris: Okay.

Dave: [Laughter]

00:13:07

Chris: But the post then is by Stefan Bohacek.

Dave: Mm-hmm.

Chris: I'm sorry, buddy. Good job, Stefan. He makes a WordPress plugin for it that's just like, "I can do better than that. Out with the iframe. I see what you're trying to do with the embed. I'll swap it out for not an iframe." [Laughter] "And I'll hit the API, get the data, and kind of rebuild the UI but just with way, way tinier amount of code."

He does a great, great job with it. A bunch of cool features. Improves the performance. It's got to be 10x, at least, better.

Dave: Mm-hmm. Mm-hmm.

Chris: Good job. I got thinking about it. I was like, "Should I install that thing? I kind of like that."

They're so bad, performance says I wouldn't even use it at all. But then I was like, "Uh, it's all the more plugins and technical debt and stuff."

You know what I want to do when I want to quote somebody? I'm just going to put a fricken' blockquote and put what they said in it, and then, in a site attribute, I'll say, "Dave said this on this date," or something.

Dave: Mm-hmm.

Chris: I don't need all the rest of the crap.

Dave: How good does it need to be? Yeah. Right.

Chris: I don't need the avatar. I don't need anything.

Dave: And with :has, you could do blockquote :has href mastodon.social - or something. There are a thousand instances. You could even style it.

Chris: You could. You could.

Dave: Based on what kind of embed it is, if it's a Twitter embed or whatever.

Chris: Certainly, yeah. CSS can get involved here, and you can do a lot. I think it's a positive characteristic that's not going to change either.

Dave: Yeah.

Chris: Whereas Mastodon, I like that they have this feature. You can edit posts whenever, which is great. But I don't want that to happen on my site. You can't change a quote on my site. That's horrible.

Dave: If I snapshotted you. Yeah, that's live, right? Yeah.

Chris: And you could change your name to some weird Halloween name. Oh, that's cute for you on the social network, but now my serious blog post has... What's a good Dave Halloween name?

Dave: Dick Buttkiss, yeah.

Chris: [Laughter]

Dave: Dick Buttkiss, and it's like, "Okay. Cool."

Chris: Yeah, great.

Dave: Yeah.

Chris: And you have a skeleton face for your avatar now, and I think, when you're reading a post, your eyeballs are so drawn to how many hearts did it get. How many reposts does it have?

Dave: How valuable is this thing?

Chris: Who cares? Get your eyeballs off of that.

Dave: Yeah.

Chris: I'm not trying to show off. I'm trying to get you to read what they said in my post. [Laughter] You know?

I was like, "You know what? I'm not going to do it anymore. No more embeds. I'm blockquoting. That's what I'm doing."

00:15:45

Dave: Blockquoting. You know that is one thing Twitter did with their embed that I think was the right choice. It was a blockquote with some Twitter doodads and a script tag. Kudos to whoever worked on that. Maybe Josh Brewer. I'm not sure, but I think that was a really good choice for Twitter embeds and stuff like that.

Then the Mastodon embed is an iframe by default, right? It's not going to get better. It's always going to load a whole webpage.

I'm going to say there was this post, design system documentation, where Trent asked a question on Mastodon. Thought it'd be cool to source people's tweets or toots on here.

I just reloaded it. It's 10.8 megabytes, 6.4 megs transferred for 4 Mastodon embeds. The only reason I know it is because I loaded it up in Luro, which has a performance auditor tool. And the performance was like 30 out of 100 on Lighthouse. I was like, "What's going on with that?

Chris: What?!

Dave: What's the deal? Well, because it's like the ten-megabyte page. I just loaded it at 3G speeds, slow 3G. It took 56 seconds to load the page for 4 quotes. It's way too much.

There's another issue where not only is a lot of crap. If people are self-hosting instances, they're maybe forgetting to turn on Gzip or Brotli, so it's just coming down as plain text across the wire. They need to fix it. It's way too much for what it does.

Now I have - whatever - four React. If it was on the same instance, the penalty would be less and there would be a service worker, and that would be cool.

Chris: Yeah.

Dave: But that's now the fetaverse works. It's distributed, so it doesn't ever hit the same instance. It's just kind of weird.

Chris: Hammer them, Dave.

Dave: Get it fixed. Well, you can pay Dave Rupert LLC [laughter] $1 million.

Chris: Yeah, to come in?

Dave: Well, I'm not going to fix it. I'm just going to tell you it's broken. [Laughter]

Chris: [Laughter] Yeah.

Dave: Yeah.

Chris: Oh, I'm sorry. I didn't mean to--

Dave: I guess you just got that for free. Whoops.

00:18:04

Chris: Yeah. God, consultancy is amazing. I've got to get in on that game where you just go in, kind of read the room, tell them what they want to hear, get lunch, get out of there.

Dave: Oh, dude. It's even... Hey, let's do a little Zoom, 15-minute Zoom before. You just tell me what you want me to say.

Chris: Yeah.

Dave: I'll just come in and say that. I'll back you up. I'm your wingman.

Chris: Yeah.

Dave: Paid wingman.

Chris: Send me a script.

Dave: Yeah.

Chris: I'll deliver that sucker with bravado.

Dave: What? We need to increase revenue dynamics? Yeah, we do. That's great.

Chris: Yeah.

Dave: I'll program a new dynamics. It's got to go upward, guys, not downward revenue dynamics.

Chris: Yeah. You've seen the chart emoji? It goes up, vaguely.

Dave: It goes up.

Chris: That's us.

Dave: There is a down one, but you don't want that one.

Chris: Yeah. [Laughter]

Dave: Even though it's blue and the up one is red, and that's confusing, but you want the up one, not the down one.

Chris: [Laughter] Chipotle?

Dave: Chipotle? Hire us.

00:18:58

[Banjo music starts]

Chris: This episode of ShopTalk Show was brought to you by Miro. Thanks for the support, Miro.

Miro is really a tool for teams. You can think of it as an online visual workspace. Really great for visual people like me. Or you could think of it as an infinite canvas tool. You make Miro boards, and they can be anything. In fact, you go to do it, and there are all kinds of templates in there for what a board could be. You're not even limited by these templates, but they really get your mind going on the possibilities of what it can be.

For example, project management is one of those things. For example, I can make a Miro board like a Kanban board kind of thing where I have tasks and the tasks are cards, and the cards can be from any source.

Dave and I were just in there today doing some episode planning, so we can have our columns for our kanban might be, for example, ideas or in process, invited, recorded, finished. We can be dragging the cards in between to keep us all on the same page.

Dave is in Austin. I'm in Bend. We're not together. But through a Miro board, we can do this in real-time. In fact, we were in a meeting, and we were doing all of this together.

We were like, "Okay, what's a great episode idea for a show?" We're dragging on the avatar of the guest. Then we're dragging on (in this beautiful Miro board) ideas for what we want to talk to them about. We're just brainstorming together in this kind of permanent way that's a permanent part of this Miro board.

But I can do it alone, and Dave can see it later. In fact, I can record a talk track to go with it and talk him through what I was thinking about. Tremendous feature of Miro.

Then we're on the same page. We've got a plan. We can rubberstamp the thing and say, "That's what Season 23 of ShopTalk Show is going to be all about. These are the guests. Thumbs up, thumbs down," all that kind of planning - so good.

Find simplicity in your most complex projects with Miro. Your first three Miro boards are totally free -- very generous of them -- when you sign up today at miro.com/podcast. Again, that's three free boards at miro.com/podcast.

[Banjo music stops]

00:21:10

Dave: This is something I thought about recently. Why aren't food companies and beverage companies...? G Fuel, reach out to us for a Coder Fuel, Shop Talk Coder Fuel collab.

Chris: Mm-hmm.

Dave: Why don't food delivery or meal prep, Factor Fuel, all this crap I see on Instagram? Why doesn't that stuff sponsor podcasts? Chipotle, sponsor this Web development podcast. We are all sitting at home, every single one of us. Maybe we're on a commute. We eat food often.

[Laughter] We are lazy people. We will buy the food that we are told to buy. Please, why don't they sponsor podcasts? Why is there not a bigger food-to-podcast bridge? You know what I mean?

Chris: That makes a lot of sense. Your return on investment will be immediate.

Dave: Immediate. Dude. Oh, yeah. We could move $1,000 worth of burritos in an hour, for sure.

Chris: Yeah.

Dave: [Laughter]

Chris: You've got a good mobile app? That's the perfect one. Get that sucker on your phone.

Dave: Get it on your... Download the mobile app today.

Chris: Yeah, or maybe your website is good. Who has the best straight-up Web experience in good fast food?

Dave: Hmm... That'd be a good--

Chris: I don't know.

Dave: That would be a tearless competition.

Chris: That's a good blog post.

Dave: That's a bracket, for sure. That would be a good--

Chris: Right because you'd have to be fair. You'd have to rate it on performance and accessibility and all that stuff, too. But no apps. We're talking Web only.

I've heard it's gone downhill a little bit. What was it that dropped? It was something that dropped their... It's like you can't... It was Uber, I think. At one point, you could, through a Web app, order a car.

Dave: Oh, yeah. Lyft. Lyft canceled it. Yeah.

Chris: Lyft? Yeah, you can't anymore. It's app only. A little too bad. In a way, when I read that one, I'm like, "You could order it through your computer?" [Laughter] That's weird.

Dave: [Laughter] It's weird. Yeah.

Chris: [Laughter]

Dave: But you can't do that no more. Yeah, it was Nolan Lawson, I think, because he's big into privacy or whatever. He was like, "I'm not going to install your app. I just need a car to show up. I don't need all the features. I don't need to be like, 'Jeff is coming in 22 minutes. Jeff is eight feet away.'"

Chris: Yeah.

Dave: He was just like, "I just need a website. I just need--"

Chris: Yeah.

Dave: Tell me where to stand. Tell me where to go.

Chris: Mm-hmm. Yeah, fair enough. I need to know how far they are away. That's absolutely vital to my Uber experience.

Dave: [Laughter] You're going to be home in 36 seconds. All right!

Chris: If you're moving too slowly, I will cancel you.

Dave: Really?

Chris: I know it's controversial.

Dave: Yeah.

Chris: But I just did it the other day.

Dave: When I see... You're watching they're getting close. Then you see them hit a U-turn at an airport or whatever, and they're outside the airport. You're like, "What just happened?" [Laughter]

Chris: [Laughter]

Dave: What just happened?!

Chris: Oh, that's good.

Dave: How do you not know the airport better than I do?

Chris: [Laughter]

Dave: Too much.

00:24:22

Chris: I was in Toronto. It was a couple of weeks ago now, but I'm still pleased. It was very nice. It was called Web Unleashed.

Dave: Nice. Yeah.

Chris: A conference up there, yeah.

Dave: What got unleashed?

[Laughter]

Chris: The knowledge of 1,000 hours of people learning things.

Dave: Hmm... hmm...

Chris: Good talks and stuff, though. I literally sat and watched every single one of them, which that's not weird. That's what you're supposed to do at a conference. But there was probably a time where I was going to a few too many conferences and probably didn't watch every single one.

Dave: Yeah.

Chris: It felt a little too much like work or something. And when it's on the weekend, you're like, "I'm going to still need a weekend, I'm afraid."

[Laughter]

Dave: Yeah.

Chris: Can't do every one. But it's been so long that I was having a good time. Everyone did a great job. Of course, a lot of value, of course, comes from not the talks. It comes from chitchatting with people afterwards in the hallway track, as they call it, which is pretty good.

One of the things that it was Jessica Janiuk, the Angular team at Google.

Dave: Mm-hmm.

Chris: Ended up talking a bunch about Angular on stage. It's a little bit of a renaissance for Angular, so that was interesting. I don't have an occasion to reach for brand-new frameworks all that often, but not opposed to it.

But anyway, she had another thing on her mind, which she was like, "I'm going to do a CSS proposal for the first time in my career ever." If you want to do that, dear listener, it's not particularly hard to do. There's a repo on GitHub, and you just do it. You just open a new issue, and you just talk about it.

Although, the better you do it, the better it's going to go. If you just open an issue and be like, "More purple colors," I don't know if it'll get closed, but it'll be like, "That's not--"

You have to do all this stuff. Talk about who wants it, what problems it's going to solve, prior art, whatever.

Dave: Mm-hmm. Mm-hmm.

00:26:29

Chris: But the one that came up for her was exit animations.

Dave: Yeah.

Chris: It was the ability to animate something as it's leaving the DOM. If you're getting excited about this, people, what I hear, I'm just going to call it here as we're recording here in early November 2023. It doesn't sound terribly likely. [Laughter]

Dave: Oh, yeah.

Chris: That's where we're at. I'd love to be wrong because, for a long time, container queries weren't terribly likely either.

Dave: Yeah.

Chris: Redoing the entire specificity system in all of CSS, that didn't seem particularly likely either. But now we have all that, so okay. This one doesn't even seem that controversial to me.

Dave: Right because there's a new thing called Starting Style, right?

Chris: There is!

Dave: I say, "At starting style brackets dot my element" and then I can say - whatever - position relative left 50 pixels - or something. Translate X minus 50 - or something.

Chris: Yeah.

Dave: Then when I add it to the DOM, my element to the DOM, it'll kind of do a little swoopy whoop animation.

Chris: Right. Such a good feature. Wow!

Dave: Your idea was--

Chris: It's like, get your transition to play once.

Dave: Yeah.

Chris: It's not even my idea. It's Jessica's idea, and kind of in combo. I think she worked with Lea Verou to make sure that that initial proposal was pretty strong because Lea has played this game for a long time.

Dave: Mm-hmm. Yeah. Lea has the word combo unlocks.

Chris: Yeah, the pedigree, perhaps.

Dave: Yeah. She's got... The kid who knows how to play Street Fighter at the arcade. [Laughter] You know?

Chris: Yeah.

Dave: It's like, "Okay. She knows how to play Street Fighter, so I'll just ask her to play the character I want."

Chris: Mm-hmm. Just her name, people are going to listen.

Dave: For sure. For sure.

00:28:24

Chris: But to me, it seems like a good idea. Then while we were having little hallway track about it, my mind went to view transitions. I don't know if everyone's did, but it seemed to me that this... Miraculously, I don't know if everybody even knows this, you can already do this. If you give something a view transition name (and it has to be unique) and then call .remove on that element, it'll do the default thing, which is fade out.

Dave: Mm-hmm. Okay.

Chris: But it doesn't hang out in the DOM. We've talked about this on the show. In view transitions, what's actually being animated is a rendered version of it, like a JPEG or whatever.

Dave: Like a PNG. Yeah, yeah.

Chris: Yeah. [Laughter] So, it's not messing with... Who knows what the JavaScript implications are? When you call .remove, that thing needs to get gone from the DOM. You can't just be like, "Oh, first run an animation and then remove it from the DOM." That's all kinds of problematic.

But that's what we've had to do in the past is run an animation, wait for the animation to end, and then remove it from the DOM. That's unfortunate. When you call .remove or any other thing that gets something out of the DOM, it should get gone. It doesn't have to be remove. It could be replacing the inner HTML or something. I don't even know what all would qualify.

I think that's kind of part of the problem. I think Adam brought this up, like, 'Well, what if it's not leaving the DOM? It's just moving to a new place in the DOM. How do you know that? Should that fire the animation or not fire the animation or what?"

I think there are enough what-ifs about this that is stopping it, so far.

Dave: I guess, historically, if you say "remove," the DOM is like, "Cool. It's gone. Nuked." Right? It's ultra display none.

Chris: Yeah.

Dave: It's not even a display none thing.

Chris: Right, that's another caveat to this. We should say, if it hasn't been clear first, exit animations means I've removed something from the list and I want to animate it to height zero on the way out or opacity zero or translated off the page or do something that visually explains, "This thing is leaving. Bye-bye," rather than it just immediately being gone and a repaint happening.

Dave: Yeah.

Chris: Pretty interesting.

Dave: Yeah.

Chris: Yeah, and the way that, like, if there wasn't an at exit style that you could just nest within the element in CSS, it's such an awesome-looking syntax. You should go look at the post. It's a beautiful syntax. I just love it. I hope it works.

Yeah, but let's say you don't want to remove it from the DOM but you do want to set it to display none. Functionally pretty similar. It's gone out of the accessibility tree, isn't it? I think it is.

Dave: Um, yeah. If you display none and visibility hidden, I want to say.

Chris: Oh, you have to do both?

Dave: Well, no. Either/or.

Chris: Either/or. Yeah.

Dave: If you do either of those, it'll pop it out, I believe.

00:31:29

Chris: It's gone out of the accessibility tree, and you can't tab to it. Display none is pretty powerful. The only thing it's doing is that it still happens to be in the DOM, so you could still query selector for it and stuff. It's still there. It's still taking up a little bit of memory or whatever it's doing.

But for a lot of people, just display none something is almost just as good if not more desirable than removing it from the DOM. I will say that you don't need exit style to handle that situation because they shipped this fancy thing.

You were making jokes about it in Discord the other day. It's called Transition Behavior Allow Discrete.

Dave: Yeah.

Chris: Oh, my God. I can't believe I even remembered that. Ugh. And you joked that it should be Allow Display None Later. [Laughter]

Dave: Allow Display None Later, yeah. Adam Argyle was trying to explain Allow Discrete, and I was like, "I'm sorry. I went to college. I graduated from college. I don't understand what discrete means in this context." [Laughter] You know?

Chris: Yeah.

Dave: Discrete means there's a discrete property in CSS. That's sort of like a spec term, right? Discrete means display or something that is un-animatable, I guess would be the interpretation I have. It just is just Allow Display None Later, so Allow Discrete.

Chris: Exactly. And it's any other property too that has the habit of flipping immediately on an animation.

Dave: Yeah.

Chris: Display is just one of them. If you happen to change the display property as part of a keyframes animation (or transition, I guess), it will just immediately happen. You can't display none and a half. There's nothing to animate there, so it needs to make a decision. Do I do it right away, or do I do it at the end?

It's always right away. It's always been right away. There is no way to control that. Now Allow Discrete, the worst name ever -- very sorry to who came up with that -- it just means do it at the end instead of the beginning.

Now you can animate hype to zero. You can animate opacity to zero. You can do all that stuff. Then at the very end, it goes display none and it's effectively gone from the DOM.

Dave: Yeah, I think that's what it unlocks is that height animation stuff, right?

Chris: Right.

Dave: It's kind of cool we'll be able to do that.

Chris: Yeah, it's cool. It's not as good as exit style. I would almost like if exit style did both, if it knows that something is being set to display none, that that's exiting too.

Dave: Yeah.

Chris: It's effectively exiting and that would give you the opportunity.

Dave: Do you think it's going to be like a container query situation where they're saying exit style doesn't work?

Chris: No, no, no, no, no, no, no, no, yes.

Dave: Yeah, yeah.

Chris: Yeah.

Dave: Then all of a sudden, David Behrens is like, "It works." [Laughter] "I could do it."

Chris: Yeah.

Dave: Yeah.

00:34:32

Chris: Oh, it's fun. There was a funny David Behrens moment in the thread because he asked a bunch of questions that weren't - I don't know - not his most coherent, I'd say. The next morning, he was like, "I should stop replying so late at night."

Dave: [Laughter]

Chris: I was like, "What did you throw back a few beers and get on GitHub, David? Nice."

Dave: Wine tweets, yeah.

Chris: Yeah. [Laughter]

Dave: That's good. [Laughter] Yeah, it's great.

Chris: Good thing that's locked in time forever.

Dave: That's good. Yeah.

Chris: That's good. Lea seems to think... She was like, "This is low-hanging fruit."

Dave: Yeah.

Chris: In her mind, this is easy.

Dave: Good. Yeah.

Chris: Good. I'll believe her all day. She knows 50 times more about the Internet than I do.

00:35:12

Dave: Yeah, it's interesting how we're getting a lot of at somethings, @media, @container, @startingstyle.

Chris: Yeah, @s are hot right now, aren't they?

Dave: Ats are hot, so @nested, @scope. Right? I guess @nested never happened, right?

Chris: No, we didn't need that one in the end.

Dave: We didn't need @nested.

Chris: Thank God.

Dave: That would have been weird. Well, and then they changed. They wrote--

I just read this in the Chrome 120 beta Canary release notes. You used to need the ampersand in CSS nesting because it was like, "Dude, we've got to have the ampersand."

Chris: Mm-hmm.

Dave: "That's how we know."

Chris: They still do it in Chrome at this exact moment.

Dave: At this exact moment, but the V2 of it is like, "Oh, we don't need it. We don't need the double ampersand," or "We don't need the ampersand officially now."

Chris: Now it's gone. It's gone in Firefox and Chrome.

Dave: Yeah. Isn't that wild?

Chris: Yeah.

Dave: What a twist. [Laughter]

Chris: Yeah.

Dave: It's funny how they build it, ship it, and then they're like, "Oh, yeah. We don't need it. We can just re-update the spec to not need it."

Chris: That's so good now. It's basically... I don't even know what the difference is between Sass anymore. There's one little mini difference. Can you not use the ampersand in the middle of a selector or something?

Dave: Yeah. You can't do the sort of like BEM style like and--foo. Yeah.

Chris: Oh, that's the only one. Yeah. That's the only one is you can't combine two names of a selector.

Dave: Which is good because I thought that was--

Chris: .card can't become .card__whatever. Yeah, and I think they consider that a mistake anyway.

Dave: Yeah. I think that was a little aggressive.

Chris: Oh, my God. Yeah, it was.

Dave: But from a stream replacement perspective, it makes total sense. If that's all that was under the hood in Sass, that makes sense.

Chris: Yeah.

Dave: But I think, for a language, it doesn't quite work.

Chris: It did make for this case where you could, for example, be in dev tools, find a class name -- card__header -- and be like, "Where is this in my codebase?"

Dave: Mm-hmm.

Chris: I'm going to grep my entire codebase for this class name. Oh, it's not there. Well, that's weird because that selector does exist in my compiled CSS. That sucks. [Laughter]

That's the worst. Don't do that. It's like dynamic imports or whatever. Don't do it.

00:37:44

Dave: I feel like that was, yeah, probably a mess-up. But anyway, hey, it happened. People got paid for it, so that's okay.

I was going to say I found a weird CSS thing I had on my site. I went kind of wild. Changed up my link colors. I was looking at accessibility stuff in Luro. Again, I love Luro, but I was using Luro on my own website, and it was like, "You have contrast issues," so I started changing the contrast. Right?

Then I was going through, and I was like, "Hey... Oh, man. I don't like my focus states on my bookshelf, like the book covers don't work." And so, I was like, "Dude, what's up?"

I figured out, okay, it's just the focus state is being eaten up by the book cover or it's being obscured or something. It wasn't clear to me. But I just said, "Let me make this better," and so I went through, and I fixed all the focus states on my site. I make the book covers zoom in, kind of, and squeeze down.

Chris: Yeah?

Dave: But on my article list, I was not... I had a block link, like anchor H3 post title.

Chris: Yeah?

Dave: The focus state was not showing up on that because I hadn't set anchor to display block. But if I do H3A, it shows up just fine. But if AH3, you have to set the anchor to display block to get a focused state. Weird.

Chris: Hmm...

Dave: Yeah, I didn't think that's how it worked, but to get focus visible specifically. Anyway, I had to recode my website to get the focus states in. It's cool, but I don't know. I just love focus visible because it's so good. It's just beautiful.

Chris: Are we ready to just use it now? Remember it had this kind of awkward phase where it's like you use it, but then you also have to use this special not selector for browsers that don't support it yet.

Dave: Yeah, I mean that's going to be... This is an accessibility Achilles' heel. They err on the side of people don't update their browsers.

Chris: Yeah. If you want to support IE11, you're going to do that forever.

Dave: Yeah, you have to use ampersand in CSS nesting because somebody might be using Chrome 118 for the rest of your life. It's not safe.

But the focus visible, this is not professional advice. This is not legal advice either. But I feel like focus visible should be the default and then you use focus if you have to get really obvious on a click focus or something or a text focus or something like that. Focus visible, I feel like, should be the default and :focus should be like you actually need a focus state on this thing. If somebody clicks on it, it needs to maintain that focus. If you opened a window or something like that or something that opened a modal or something like that.

Then focus returns to it, and you say document.focus. It would go back to focusing on that element. That's what I would say. That's me.

00:41:17

Chris: Did it come up when you were building your sci-fi homepage?

Dave: Well, I hacked up my sci-fi homepage to use cool focus states, too.

Chris: Nice.

Dave: I'm actually reworking that a little bit this morning because I had to do a story or story has a focus visible and then shrink the story or do some animation or do the outline on the big story.

Chris: Has focus visible, nice.

Dave: Yeah. Yeah, story has focus visible and then I kind of mess with the parent, which is super cool, too. Right? It's kind of like focus within. Focus within would have worked as well. Right?

Chris: Oh, it is kind of saying the same thing, isn't it?

Dave: Yeah.

Chris: Yeah. But it doesn't have the same heuristics as focus visible does.

Dave: Yeah.

Chris: Because focus--

Dave: Within would be ... focus as well.

Chris: Right. Yes. Blah! That's confusing. It's almost impossible to explain what focus visible does exactly. I think they kind of left it to the browsers anyway, didn't they? I don't think there's an exact specified thing. It just means if click then no. [Laughter]

Dave: Yeah. Yeah.

Chris: That's kind of what it means.

Dave: It's kind of like--

Chris: It's keyboard only, but not just keyboard only because I'm sure if the browser took some kind of vocal input or something, or you were using... I don't know. You used your Stream Deck to tab through things.

Dave: Yeah.

Chris: [Laughter] So, that's a weird input. I guess it's a keyboard in the end. Yeah.

Dave: Yeah.

Chris: [Laughter]

Dave: Yeah, what is the...? If Dragon Naturally Speaking experience, I don't know.

Chris: Right. It should be anything but a click is focus visible, I think.

Dave: Yeah.

Chris: But I don't think that's fair. I probably oversimplified it there.

Dave: Yeah.

Chris: Anyway, cool trick. I like it. I like your hover states. They shrink. They shrink the cover. Classy.

Dave: Yeah, well, and that's what I like about focus visible is you can go fricken' wild. You can be better with your focus states than you can be with--

Chris: Just focus? Yeah.

Dave: If you just click and my links shrinked every time you did focus, that would suck. But if you're tabbing through or twisting through. That's what the new kids are calling it. You're twisting through the website. [Laughter]

Chris: Yeah, they say that.

Dave: Yeah, they're saying that; "Twisting through the website with your Stream Deck."

Chris: [Laughter]

Dave: [Laughter] This is... You get a really obvious focus state. You know what you're on. I just think that's so cool. I think that's a superpower, a very cool advantage of focus visible, and I will write a blog post and talk about it.

Chris: You should. That's a good blog post title, like, "You can go hog wild," "Focus Gone Wild."

Dave: Yeah, you can just have big, beefy, beautiful focus state boys, and they are just big, beefy boys, and they can be super-obvious and not impact. Your manager, unless they use a keyboard and they're very particular, they're not going to be like, "Can we remove that blue outline from the button when you click it?" Man, that's the worst.

Chris: It is. I like everything that you're saying.

Dave: You can be like, "Oh, you can make hot pink outlines, big dashes."

Chris: Yeah, you can scale crap. You can do whatever.

Dave: Scale, twist, turn, flip - whatever.

Chris: Yeah.

Dave: Well, maybe don't go too wild, but you could do a little juke where it jukes up.

00:44:58

Chris: Yeah, yeah, yeah, but it should probably maybe... What's the absolute default? It depends on what browser, I guess. But it's the dotted thing, right? It probably doesn't hurt to keep it dotted.

Dave: Yeah. It probably doesn't hurt to keep it dotted. It's kind of like... I think you can do... A lot of browsers have a black outline maybe now. Firefox had dashed or dotted for a while.

Chris: Remember Chrome went to it's a blue line and a white line around stuff?

Dave: Yeah.

Chris: Which I don't know... Don't hate it.

Dave: Yeah.

Chris: Because it works on light and dark backgrounds. You kind of get both.

Dave: Yeah. Safari has a weird behavior where they did the original blue outline, or I guess MacOS did that, the blue outline. But browsers have taken that over. But Safari, you actually have to click an option to enable tabbing focus, tab focus, or something like that. I think that's an interesting choice by them, but I guess I understand it.

Chris: Oh, like if you just load up a page and hit tab key, you won't tab to the first thing? You have to click something first?

Dave: Well, you'll tab to it, but you won't visually see it. You have to go into--

Chris: What?!

Dave: --settings, advanced, accessibility, press tab to highlight each item on webpage.

Chris: Huh.

Dave: You have to enable it. That's a really interesting choice by them.

Chris: Yeah. I haven't heard massive complaints about it or anything.

Dave: Well, and I mean I think it is sort of this - if you need it, you figure out how to get it. Yeah.

00:46:56

Chris: Ah... so much stuff. So much stuff. I meant to make my slides available, even though I've given this talk before. When you put a bunch of work into an updated version of the talk, you like to get something out of it. You know?

Dave: Yeah.

Chris: But it was just talking about new CSS stuff. At the very end, I was like, "You know what? I just picked a couple of them. But the full list is wild with the :has and the Subgrid and the scope and the anchor proposal. That's pretty cool."

I was reading Eric Meyer's blog post about it. He was talking about using anchor positioning for footnotes.

Dave: Mm-hmm.

Chris: A footnote is at the bottom of the page, right? But he wanted them so that, I think, with a media query, the page is wide enough, you've got a sidebar now. Why don't we kick that footnote up into the sidebar instead? But where in the sidebar?

Let's say you're writing, "Dave eat a burrito," and you put a little 1 at the end of the burrito because it's a footnote at the bottom of the page that says the burrito was from Tort Cheese - or something. Do they even do burritos? Probably not. It's got pretty tacos.

Dave: They do. That's actually pretty good.

Chris: They're pretty good?

Dave: It's taco-centric, but they have a good chicken burrito. Yes.

Chris: Okay. Good to know. You're going to say that it was from Tort Cheese, or whatever. But where that sentence is in a paragraph could be, I don't know, two sentences down. It could be halfway down in a paragraph. Wouldn't it be kind of cool if--

Dave: It could change on resize, too.

Chris: Easily could. That's a good point. If you're going to put it in the sidebar, wouldn't it be cool if you could say, "Put it at the same height as wherever that 1 is in the paragraph."

Dave: Mm-hmm.

Chris: Not even at the top of the paragraph. Not at the top of the sidebar. But horizontally right where the 1 level is, and it has to be pushed over to the left so that it is in the sidebar.

Dave: Yeah. Yeah.

Chris: The way he did it was with anchor positioning. This is a great API. Good job, people that worked on this.

All of the sides of where you're positioning the thing can use different anchors. He says, "Push it down from the top as far as that 1 is in the footnote and push it to the left as far as the right side of the main content container is." It uses two different anchors to decide where it's going to go. That's excellent. That's really cool.

Dave: Yeah.

Chris: You can use multiple anchors to do that kind of thing. I'm sure people are going to do wild stuff with that where the three points of a triangle are all using different points and get hog wild with trigonometry and stuff. For a footnote, it's perfect.

Dave: I think it's great. I think it's like... I don't know. Not to get too theoretical here but, man, we are entering a place where citing your sources is going to become super important. [Laughter] The ability to tie and reference information next to each other is going to be huge.

Chris: [Laughter] Yeah, how do you know a piece of writing isn't done by AI?

Dave: Yeah.

Chris: It has footnotes. [Laughter]

Dave: Footnotes. You've added footnotes.

Chris: It credits things. [Laughter]

Dave: Yeah. It cites its sources. It doesn't just make stuff up.

Chris: How do you know it's not AI? It cites its sources.

Dave: It cites its sources.

Chris: Ugh... [Laughter]

00:50:17

Dave: I was listening to somebody in the D-d-d-d-discord. I'm going to blame them for ruining the things I enjoy. Pointed me to a podcast called... What is it? It's by the Maintenance Phase people, Michael Brooks. Is that right? It's Michael Hobbs. Sorry, Michael Hobbs' book podcast.

Michael Hobbs' book podcast. But they basically listen to pop-sci books like Malcolm Gladwell. "If Books Could Kill," is what it's called.

Like Malcolm Gladwell's and stuff like that, right? They go through it, and they basically ruin the book. [Laughter] I'm mad because it runs a whole genre.

But one thing it made me... They basically take a book, and they're like, "Cool. They said this. I went and researched it. They said - whatever - in Outliers, 10,000 hours is what makes you an outlier, makes you good at a craft. Well, I researched it. That's not true."

Chris: Yeah.

Dave: There's something to be said about 10,000 hours is a lot of practice on a subject. But it's just not a fact. But culturally now it's a thing people say.

But they do this over and over and over, right? And it just made me think. I wonder if that's the future. I wish I knew how to do it more. I wish I knew I was saying something like - I don't know - Vue is popular in China. Right? That's something I've heard. I wish my brain said, "Is that true? If that's true, cite it. Put a footnote. Reference something that says that's true," or something like that.

Real-time in a podcast would be helpful, too, but we're not here to fact-check ourselves real-time. But I wish I was better at that when I was writing, like if I make an assertion.

Who was it? Maggie had a post about this sort of thing where you make an assertion and use AI to be like, "Is that true?" which is probably the worst way to fact-check yourself.

[Laughter]

Dave: But it would be cool to look at my writing or whatever and just be like, "I said this. Is that even true anymore, or is there new science?" I don't know.

What would a Malcolm Gladwell book look like if you fact-checked it? If you were like, I'm going to do Outliers but update all the information. It would be interesting.

Chris: Yeah. You should More people should issue updates of their prior writing anyway. You know?

Dave: Yeah, and just say you're wrong.

Chris: I feel like that could be a part of content strategy, too, that you don't see very often is, "I updated this. I'm not just going to leave it in my archives." You should get credit for it. You redid it. Push it to the front of your feed.

Dave: Mainstage? Yeah.

Chris: Yeah.

Dave: Yeah. No, I mean wouldn’t that be cool? You have a publish date, an updated date, but you could have a corrected date - or something.

Chris: Yeah.

Dave: Sort by corrected. [Laughter]

Chris: Yeah, corrected is nice. I even like it when, like, This American Life, I'll play an old show, and at the end, they'll be like, "Where are they now?" They'll just do a little bit more research on the story and be like, "Ooh, it turns out they got out of jail," or whatever. [Laughter]

00:53:55

Dave: That is something I think about. There's so much pressure to have original thoughts. Do you feel that pressure in your writing? You're like, "Man, I've got to come up with a wiz-bang here. Something no one has never thought of."

Chris: I think I lost it over time because I never was good at that, coming up with something that has never been said that I settled for linking to interesting things that other people say. [Laughter]

Dave: Right.

Chris: I'm just going to be the megaphone and not the genius.

Dave: I like that, too. I think there's also a lot of value in saying the same thing over and over and over. Be a broken record is okay on your blog. Like, "Oh, here goes Dave. He's talking about prototypes again. Ah, crap."

The chance that you wordsmith something right the first time really well is really low. What if you went through and re-hone that message in a little bit different format? I think it's worth doing. I wish I did it more.

Chris: All right, Dave. That might be it for us this week. Write in with your questions, though. Go to ShopTalk Show. We'll have to do a question show next time. We've gotten a couple recently that were pretty good.

Of course, everybody out there whose boss is just an incredible AI personality and you've made an app and you really want to come on this show to talk about, you could not email in if that's okay. That would be great. [Laughter]

Dave: Yeah, we don't need any more of those. We're just fresh. We're chockfull of people--

Chris: Just a lot.

Dave: --AI companies messaging us.

Chris: I think there were three this week. They were all the same. They were all just AI blah. [Laughter]

Dave: I liked your show with - insert name here.

Chris: Did ya?

Dave: You should have my boss--

Chris: Yeah.

Dave: --who does AI wizardry. He's in Forbes. [Laughter] Meanwhile, I've got Forbes emailing me, and they're like, "For $300, you can be in Forbes." [Laughter]

Chris: Yeah, that's a new one, isn't it, lately?

Dave: Oh, man. Really, that's all it takes?

Chris: Get out of here.

Dave: Cool.

Chris: Good journalism you've got there. Pay to play. Pay to play journalism. Really fun.

Dave: I think there's a lot of pay to play out there.

Chris: [Laughter]

Dave: Yikes! Anyway, you can pay to play and be on ShopTalk. [Laughter]

Chris: [Laughter] Yeah. How much, though?

Dave: How much? I don't know. I don't know. Pop-pop needs a new boat, you know? So, maybe it's... [Laughter] No, I don't need a boat. I need a camper, maybe. Anyway--

All right. We'll wrap it up. 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 Mastodon. That's the good one. And then head over to patreon.com/shoptalkshow to join the D-d-d-d-discord because that's where the fun is happening week-to-week. Appreciate everyone who is in there. You're really supporting the show.

Chris: Indeed.

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

Chris: [Loud inhale] ShopTalkShow.com.