Getting tripped up on audio at conferences, announcing the ShopTalk Show Lifetime Plan, some Once pricing #hotdrama, remembering Molly Holzschlag, web components, Luro launch day thoughts, and a question about using a normalize or sanitize in 2023 prompts a run through of Andy Bell's Modern CSS Reset.
Time Jump Links
- 00:35 Basics of conference talking + audio
- 03:52 ShopTalk Lifetime Plan
- 04:39 #HotDrama: Pricing Edition
- 26:14 Sponsor: Frontend Masters Exploration Sale
- 28:07 Remembering Molly Holzschlag
- 33:02 Where are all the web component people hiding?
- 41:06 Luro Launch Day
- 43:01 Do you still use normalize.css or sanitize.css for modern websites?
Episode Sponsors 🧡
The exploration sale is going on until September 18th!
- Newly revamped learning paths (all 18 of them)
- Brand new site / course search features
- Epic lineup of upcoming courses through the rest of 2023 and beyond!
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I probably blew out the microphone there. I kind of turned it up just a smidge. I'm Dave--fresh back from the dentist--Rupert, and with me is Chris Coyier. Hey, Chris.
Chris Coyier: Darn right. That's what compression is supposed to do, though, isn't it? That's the whole idea in audio? We talked about audio engineering. It brings the lows up and the highs down. Kind of keeps them in the middle. Probably a really good thing for broadcasting because I have a bad habit of that, too, where I get quiet. In real life it kind of works, but it doesn't work on a podcast. Hopefully, in post, compression kicks in and brings those lows up and highs down.
Dave: Normalizes it just a bit. Yeah, it's hard. I do feel like if you're into Web stuff and going to conferences and want to speak at conferences, I will say mic control is a big thing. Know how to use a mic. Sometimes they staple glue a little lapel to your face and stuff like that. [Laughter]
Chris: Yeah. Those basics are a big deal, right? It's very possible they put it somewhere kind of dumb.
Chris: Not to throw anybody under the bus. I'm not speaking of anybody in particular. But if you have something that might rub against that mic, your whole talk is ruined. If every 30 seconds it's going to [static] with cloth, nobody can pay attention to anything but that.
Dave: Yeah. You've sort of hurt the cause, hurt your message. Outfits can impact it. Usually, not to be overly gendered, but women's clothing is less lapel mic compatible than a man's button-up, so you have to think about that stuff.
Dave: But even sometimes they'll just give you a little handheld like a rock-n-roll show like an Axl Rose mic.
Chris: That's so inappropriate. Nobody knows how to speak into those things. Somebody has got two feet away. Everybody is inconsistent with it. I wouldn't know what to do with it. I know you're supposed to be right up on it. But are you really, because--?
Dave: You've got to be ... front of your face, yeah.
Chris: Maybe all day long, they've been dealing with people who aren't up on it, so they've got it turned up too high. So, if you get up on it, then it sounds bad. Oh, my God.
Dave: Yeah. It's hard. We're joking about audio stuff, but you know I feel like, too, in our industry, it's something you're going to run into maybe.
Dave: It's a possible job hazard. [Laughter]
Chris: Oh, gosh.
Chris: Even during our audio thing, I think I joked about, like, I can't even just play one guitar chord into a microphone and then play it back and have it sound great.
Dave: Good. Good.
Chris: I'm getting a lot better at this. I've learned a couple of tricks and stuff. One of them is just that there's just so much you can do in post, essentially. I think I got a good raw thing and I just needed to pull up the gain and mess with the EQ and play with some stuff. It's like, eh, it's not that hard to get. But then it sounds like--watching enough YouTubes--a really nice way to do it is the double-microphone thing, like record it twice into two channels, which even GarageBand is not particularly difficult to do.
Chris: It ups the game a little bit because it's like, gosh, you've got to set up two mics and get them in the right positions and all that. But that really can... You pan one to the left, pan one to the right, and fiddle with it. It's like, "Oh, that's how they get amazing sounds."
Dave: That's how they do it. Isn't that weird, just doubling it?
Dave: Makes it better somehow.
Chris: Yeah. Double it.
Dave: Just keep doubling it. Yeah.
Chris: We have some new announcements as well. We're announcing the lifetime plan for our Patreon.
Dave: Mm-hmm. Yep.
Chris: I just want to be upfront with the costs. You can be a lifetime supporter with all the perks of being a ShopTalk Show supporter. It feels like basically a discount.
Dave: It feels good, yeah. I mean I think everyone agreed it was the good choice, so we're just doing it. So, yeah.
Chris: Yeah. Just email me directly and I'll handhold you through the process, [email protected].
Chris: But you've got to have the money, though. Got to have the money. $38,000 is what we want.
Dave: That's great. Yeah. Wonderful. Looking forward... Can't wait.
Chris: Can't wait.
Dave: It has been a month of rethinking pricing, I think. Are you ready for the hot drama gavel to drop, Chris?
Chris: Indeed. Let's do it.
[Law and Order SVU - sound effect]
Dave: 37Signals--no stranger to the hot drama channel--announced... This gets me a little bit. [Laughter] I'm usually pretty divorced from, like, hot drama, but this one kind of gets me. They launched this site called once.com, I think is what it is. They bought a--
Chris: That's a killer domain.
Dave: Yeah, well, they bought it.
Chris: What'd they pay for that?
Dave: We'll they're going to pay every year for it. [Laughter] But they bought a domain.
Chris: They bought a subscription to once.com?
Dave: They bought a subscription to this domain name.
Chris: [Laughter] Yeah?
Dave: And they're talking about how, like, the SaaS model... For nearly two decades, the SaaS model benefited landlords handsomely with routine prayers and players to the church of recurring revenue. Valuations shot to the moon on the backs of businesses subscribed at luxury prices for commodity services.
They're basically mad at recurring revenue pricing schemes on software. They say they're going to announce non-recurring pricing schemes for some future products - or something.
Chris: Right, so they sell you a chat app or something that you use internally to your company.
Dave: Ten bucks.
Chris: You only pay once, and you've got it forever. They are so perfect at nailing these little things. This is watercooler conversation. I think a lot of people -- and this came up in our Discord too -- are... There is too much subscription stuff. The fact that there are subscription... Like every kids' learning thing on my phone - unbelievable.
Dave: I pay a subscription for fricken' cat food. I mean, like, and you were saying... Yeah.
Chris: It is. It's a lot.
Dave: You have a kid phone app, right? You talked... Sing with Carrots - or something.
Chris: Yeah, right. Well, there's one that we've had forever called Kiddopia that's pretty good. But it's not so good that it needs to be a subscription. It really isn't.
Dave: Right. Right.
Chris: It's like $100 a year or something, so of course, whatever. Then, yeah, yeah, yeah. I really like this one called Singing Carrots. It's a nice little app. It's clearly a little Firebase kind of one, and you sing. It's a little bit like Guitar Hero. But not quite as exciting, but things, little rectangles are falling down from the top of the browser window onto a keyboard telling you what note it is you should be hitting with your voice.
Dave: Yeah. Okay.
Chris: Then you get it or you don't get it. That's just one of the features of it. But it's fun, and it's fun to do with my kid who is constantly saying she wants to be a singer when she grows up.
Chris: I'm like, yeah, okay. Well, then train.
Chris: Great, so we signed up for it, and there are a lot of features that are locked because it's a SaaS app, so subscription deal.
Chris: That was the kicker. $6.99 a week, which you've got to wonder. Was it just an experiment? Have they found that the $6.99 looks like a good deal? Not that I know what a singing app should cost necessarily, but this was very much a whim thing.
Chris: I was really turned off by the weekly idea. It just seemed a little too frequent that your card is getting nailed, you know, boom-boom-boom-boom.
Dave: Yeah. That's a dollar a day to pay for a game.
Dave: Yeah. No, it's exhausting. I always think of it in terms of Netflix. How many Netflix of fun is this?
Chris: Hmm... Sure.
Dave: In my brain, Netflix still cost $8. It does not. It costs like $17. Netflix costs two Netflix now.
Chris: Oh, gosh. Really?
Dave: Yeah. Yeah.
Chris: Netflix is two Netflix? Oh, my gosh.
Dave: But so it's like Crunchyroll. That's a Netflix. Hulu, that's a Netflix. Disney+, that's a Netflix.
Chris: Oh, yeah. Hulu can be really high, too. For whatever reason, that's the one I associate with, like, if you want to do the TV, the live thing, too.
Chris: That's a player. I know YouTube TV maybe is that, too. I don't know what. But for some reason, I think of Hulu as that's the one for that.
Chris: Because usually in the fall, about this time, I get excited, like, maybe I'm going to watch a bunch of college football or something this year. I activate that. Then it ends up being more like $100.
Dave: Yeah. Yeah. To do the full cable kind of experience, yeah.
Chris: Then they don't even have a single plan that doesn't have any ads.
Chris: Then you're like, "Well, I want to watch some dumb Alaska show where they try to get gold out of the ground in 2023," or something.
Dave: Yeah. Garbage TV, love it.
Chris: Full of ads. Full of ads.
Chris: You can't... Even paying $100, it's full of ads.
Dave: Isn't that wild? That's wild.
Chris: Suck it. You know? Then I get into the show, and I'm like, "You know what? I'd rather pay $2.99 on Apple's thing to own the show," just because I want to make it through one episode without an ad.
Chris: For the love of God. You know?
Chris: They get you everywhere you turn.
Dave: I get where they're coming from, 37Signals, right?
Chris: Okay. Yeah, we were talking about 37Signals. They're like, yeah, too many subscriptions. So, when they come out with a message that says, "We're going to sell software that you like that doesn't have a subscription," of course some people are going to be into that. But then at the same time, there's another way to feel. [Laughter]
Dave: They have made millions on the subscription model. Basecamp is literally synonymous with SaaS business. It is the poster child for starting, bootstrapping your own SaaS business.
Chris: It is. It is.
Dave: That charges monthly an exorbitant price.
Chris: To change the goalpost now is a little like, "Oh, okay."
Dave: Yeah, okay. You made millions. Bought a literally fucking racecar, and then you're like, "We're changing. We're moving the goalpost."
Sorry. I just... Give me a break. Give me a break!
Chris: My first... The startup I worked at, the first one, Wufoo, they were successful because they charged monthly. Right?
Chris: Then we go to Survey Monkey. They're successful because they charge monthly. They are a public company now because they charged monthly.
It wasn't greed-based necessarily. I work for a company now, CodePen, that has subscriptions.
Chris: It feels very fair. If you're looking at how has CodePen changed fundamentally in the last year--am I getting new stuff because of our subscriptions--well, you could argue that, no, you're not. But I'll tell you how hard we have to work to keep CodePen online and fast and bug-free and updated with the changing browser landscape and all this stuff. It is an all-day everyday job for a small team of human beings that needs to work.
Your job is kind of like a subscription, right? [Laughter]
Chris: We have to make payroll, so I don't know. Is it possible that we sold a one-off fee for this and somehow enough people buy it every single month that we could still make that payroll? Yeah, but it seems a little less solid, I'd say.
Dave: Yeah. You're uploading stuff. I'm uploading my Pens to the cloud. Right? The code is going somewhere that is being stored on a physical hard disk somewhere that has to--
Dave: That is being charged per month or per usage. It is being connected to via an Internet connection that is a cost per month. It is connected--
Chris: Yeah, I'm being charged per month.
Dave: You're being charged, or the hosting company or AWS being charged per connection or whatever.
Dave: It's also a literal, you know, some server is serving that. It's not like you TCP/IP into a hard drive and get a file. You TCP/IP into a server, which fetches a file and returns it back. Anyway, just the idea that everything is a one-time cost--
Chris: To feel called out because that's how I'm charging is like, "Come on."
Chris: I'm not... I don't know. It's not quite what they're saying, but they're kind of saying it.
Chris: "The church of recurring revenue," is that me? Am I the priest?
Chris: Am I bad because I'm doing this? It's just how it feels, even though it doesn't say that. I don't love that. I'm not a greedy person because I'm trying to do this. I'm trying to run a normal company here with normal kind of parameters using normal - whatever.
Chris: Also, if you stop paying, the software stops working. Boom, you're evicted. Sure, that works... that's the case sometimes. You don't get the features you're paying for anymore. But we've tried to be really cool about that, particularly about CodePen. We don't take away a whole lot from you when you... Your private stuff even stays private - and whatever.
Chris: Your assets are still there. We're not trying to evict you.
Dave: No, I mean even when you "buy." I bought Adobe credits for the stock photo or something, like their stock photo library. Then they started taking them away because I guess I was just... The money was hanging on their account and they didn't want that because that's a tax liability or whatever. [Laughter] They just started deleting my credits.
Even if it's stuff you buy, it doesn't exist forever. Anyway, there's bit rot there.
Dave: I'm just like, what are the options? Okay, let's say I don't want to do subscription pricing.
You have ad-based. Oh, yeah. Every developer I know loves ads and doesn't have an ad blocker installed. So, ad-based doesn't work. We've already killed that model.
Okay, now we're mad at subscriptions. Pay once. I think it works for companies like Tailwind is doing this kind of famously for Tailwind UI, like charging $300 or whatever for access to a bunch of components. I think that's great.
Chris: They're doing a once kind of thing? Yeah.
Dave: They're doing a once thing for them.
Chris: Do they say that you get updates forever kind of thing?
Dave: I think you get updates on those components. But I think you probably have to buy into the new set - or whatever - if they come out with a new set - or something. I don't know.
Dave: But then there's also template sites or something. I'm thinking of Envato Toots or Net Tuts or whatever. [Laughter] But like WordPress themes.
Chris: I just had emailed them the other day because I got a $200 charge on my credit card, and it was after I had used their service just in the last week or two to buy... I bought a WordPress plugin that for some reason I really wanted and was only on their service. I was like, "That's fair. I'll buy your thing. I like paying for software."
Then the $200 charge hit, and I'm like, "Hmm... What was that?" It turns out that, the year before, I had signed up for... I think it's some kind of unlimited plan or something.
Chris: And it just hit again, and I was very surprised, and I didn't... But whatever. I emailed them. They just took care of it immediately and with grace and it was fine.
But yeah, even there, they're like, "It behooves us to sell a subscription instead of a one-off kind of thing."
Chris: I don't really blame them, but it can be surprising. I'll tell you; we rebill automatically, of course, because we have subscriptions on CodePen. That is some of our support is, like, "I didn't realize that you were going to rebill me," or something, even though we try to make it pretty clear when you sign up.
Dave: Yeah, monthly.
Chris: That it's a monthly or annual thing. Oh, well.
Dave: Well, and then there was attention-base, like we had Coil, which shut down, right? You could just drop me pennies from your coil and that would have been a cool way to transfer money silently and no cops involved - or whatever.
Chris: Yeah. That's done zone now, right? Yeah, I think we got--
Dave: Done zone, but Interledger still exists, I think. I think there are people still working on that.
Chris: Well, the point of it all along anyway was the Web payments API, which I did feel like was super cool. Maybe I'm saying it wrong.
Dave: Yeah. Yeah.
Chris: But maybe because, of course, Web payments, the payments work on the Web already, right? There was this way that you could have this wallet and pay for things without telling the website much about you was an anonymous way to payment. But don't think crypto. That wasn't necessarily involved. It could have been, but it didn't have to be.
Dave: I think there were crypto people involved, but I don't think it's necessary. But just the idea of, like, we can just transfer money, a tip jar or a Square Cash kind of thing without getting Square involved - or whatever.
Chris: Right. Just for some reason, let's say you're on shoptalkshow.com and you wanted to... Most podcasts offer this for free, and I think that's fine. They bill you to download the MP3.
Let's say for some reason we decided to protect it or something behind some kind of paywall. If you gave us $2, then you could download all the MP3s you wanted. Well, now we'd have to do Stripe and have a login and yadda-yadda-yadda.
This API was like you could just click a button, send the owner of the website $2, have them know nothing about you other than this user has paid $2, and it would remember that even because of the wallet IDs and stuff. Then you'd be able to access that paywall content. I always thought that is actually awesome.
Dave: That is cool.
Chris: That's so cool. And I think that's still... It's not dead or anything because it was trying to be done as a Web standard.
Chris: Which is totally the way to do this, rather than just do it as one company. They were trying to open the doors for lots of companies to do this. I always thought that was kind of admirable.
Dave: Yeah. There's usage-based pricing, which we have actually thought about for Luro. But what's hard is, okay, you used 10 florps this month, or 14 florps. What's a florp cost?
Dave: What's a lot of florps? What a little florps? We don't know yet, so it's an interesting world we're straddling.
There are venture-backed with known likes, but that's how you get free products. [Laughter]
Dave: There's dollar apps or free apps that have microtransactions. Is that what we want for websites? Oh, you want to run four florps of work? That's another dollar.
Chris: Maybe. I've always been a fan of advertising except that I don't like that it's one of the two options, essentially. [Laughter] There should be more ways to make money off stuff.
Dave: There is Stockholm syndrome, yeah, a bit with it.
Chris: Yeah. So, anyway, they're good at poking at something that people are already talking about.
Chris: Credit there. I just don't like being called out for running a business in a way that they clearly benefited highly from - all that kind of thing.
Chris: Also, I think that it's constantly negative. It's never this, like, "What do we love in the world? We're going to talk about that." It's always, "You know what sucks? This." And something grates me about that.
Dave: You know who sucks? The sucky go to office people. They suck.
Chris: Yeah. TypeScript sucks, Dave.
Dave: Oh, that's their other one. [Laughter]
Chris: Yeah, they did it at the same time, which is....
Dave: They doubled down.
Chris: You know I've heard Adam Wathan tweet this, too. He's the Tailwind guy. He says any time there's a big flareup about people hating on Tailwind - or whatever - sales go up for Tailwind. He's like, bring on the drama. No wonder he's incentivized to have those kind of online fights going. Never do you hear him be like, "Hey, community. Could you simmer down? Could you respect each other more?"
Dave: Hey, everybody. Calm down because I am swimming in a pile of cash. [Laughter] No, I'm just kidding.
Chris: Yeah. He says no. Fight all you want. Sales go up when you fight.
Chris: Do you think that 37Signals gets some free press when people are fighting about it? Do you think more people have signed up for once.com because they're fighting about TypeScript? You bet as hell they do.
Dave: Yeah. I almost started using TypeScript because they didn't like it. So, anyway. [Laughter]
Chris: Ah! [Laughter] Yeah, that was the thing. I guess was Hotwire one of their... It's kind of a...
Dave: Turbo links to.
Chris: Make any website into a single-page app kind of thing.
Chris: Which I've kind of been a fan of because I think it's a neat model. Instead of rearchitecting the world, why don't when you click on an anchor link, it goes and fetches that content and then plops it onto the existing page but gives you nice APIs for doing that in case you wanted to do transitions or whatever, just to tie everything to a podcast page, just because those of you that are listening have probably visited the website of a podcast page. You could click from episode to episode and have the audio player not stop.
Chris: Which you can't do that on another kind of page. If you really care about that ability, that's a use case for needing what's called a single-page app. Kind of one of the dumbest names. I hate that, SPA.
Chris: Single page app. When you start... If you're starting Web development today, what goes through your mind when you think that, like, single page app?
Dave: I bet you need a spreadsheet of three-letter acronyms.
Dave: You're just like, SBA, MPA, CRA, LCP, TBT, FCP, LCP.
Chris: Oh, my God. Just that one in particular, it doesn't mean that it's one page and you just scroll down it and there are no links to click.
Chris: That's what it seems like it means, but no.
Dave: Yeah. No. Yeah. We call those one-pagers, not to be confused with single-page apps. [Laughter]
Chris: We get so distracted. It's my fault. But the Hotwired thing, they put... It's not even a PR because they just merged it. It was just "remove TypeScript from this entire project." The problem is, it was open-source and they had a lot of people that were excited about it. And it was in TypeScript and, all of a sudden, it's just not anymore - without any call for comments or anything.
Chris: Because the whole comment thread is like, "Dude, I have three PRs up in TypeScript with features that I think are pretty good and could use thought. So, cool. Thanks for the heads up." You know?
Dave: Yeah. No one wanted to discuss this. You're just going to sun it? Yeah.
Chris: Yeah. Because it's a library that you use, that tends to be the kind of thing that you do make TypeScript because then you get all the, like, being able to hover over stuff and know how to use the API because you get the type ahead stuff.
I'm not even the world's biggest fan of TypeScript either. But I feel like if you're making public code, it tends to be the kind of thing you actually do want to make TypeScript because of the safety and making it easier to use the APIs of your software.
Dave: Yeah. I don't know. I've started seeing TypeScript as "My favorite color is purple. I love purple. I wear purple all the time. Everything is purple. My house is purple." You know? You're like, "God, that's a lot of purple. That's not my style, but cool on you. Love you."
Dave: I love that for you. You know?
Chris: "I love that for you." That's--
Dave: I love that for you. I love TypeScript. I love that for you.
When somebody chooses to use it, I understand why they do it because that was a craving deep in their bones to just have types and just be fighting with their editor on a daily basis.
Chris: [Laughter] They needed it.
Dave: Web development is too easy, so they just wanted to make their whole life weird and purple.
Dave: Whatever. I do think it is somewhat interesting when somebody rips it out, like when Svelte is like, "We're just not going to use it. We're not doing TypeScript. We're doing JS.comments, and it's a lot easier for us." I think that's cool.
I do think it's extra weird when somebody rips it out, though, of an existing project. [Laughter] I just think that's a big choice. I'm surprised it's... Maybe it was, but I'm surprised it's not a major version number. You know what I mean? That seems like a major change you would want to discuss with your crew. I don't know. that seems like an RFC situation.
Chris: Right. Maybe that's... I think maybe that's part of the resentment, in a way, is that it's a blog post before anything else. It was designed to be a public talking point, not a technological internal discussion and change.
Chris: It seemed like designed to stir up controversy rather than just be this technical decision.
Dave: Which we're talking about it now. We've got baited into it, man. Whoops.
Chris: Yeah, we really did. I tried... You know. I have no... I'm not going to justify that. We just... That's... Whoops.
Dave: Well, it's whatever. We've got to fill an hour, so. [Laughter]
Chris: Yeah. I mean I have literal mugs printed with the #hotdrama logo on the side of it.
Dave: Yeah, and I'm high on nitrous oxide, so that's great.
Dave: Uh... funny.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you by Frontend Masters. That's frontendmasters.com. But add /sale to the end of that URL. You're going to end up at their exploration sale page.
This is a big deal. It's $100 off, so brass tacks here, people. This is a $390 annual membership to the best learning platform on the entire Web, but $100 off, so it's only $290. The best deal you're going to find at Frontend Masters.
It's just definitely the best place to learn Web technology stuff. Is your company switching to TypeScript? You better take these classes. You need a job and need to learn React? You better use these classes. You want to level up your CSS? Use Frontend Masters's classes.
What's so cool about them is that everything is so well designed. They have learning paths, for example, if you're trying to level up and to become a professional senior Web developer. Take the professional learning path. Take all the courses that they recommend for that, and it's going to get you there.
You need to learn something specific? Home in and learn something specific. They have stuff for beginners, professionals, and experts.
If you're listening to this show, you're probably a little bit up the ladder already. That's kind of my guess. There's stuff. I mean I've been in this game for a long time. There's lots of stuff on Frontend Masters that's like, "Whoa! I need to dial down the notch a little bit."
They have that expert level stuff and that intermediate level stuff that not a lot of other learning platforms have that tend to focus on just the beginner stuff. The beginner stuff is there, but there's higher level stuff as well.
It's just so good. Their video player is so good. Everything is searchable, even when you're in the video looking for specific parts. It's just so amazing.
The teachers are the best people in the entire industry that somehow they've convinced to come and give courses on this kind of stuff. Ah...! Frontend Masters is the best, and it's their big sale. It's $100 off a yearly plan right now. Go to frontendmasters.com/sale.
[Banjo music stops]
Chris: Ah... Well, just to bring things down a little bit, we'd be remiss if we didn't mention that the fairy godmother of the Web Molly Holzschlag -- Am I saying it wrong? Molly, anyway--I'm sure you've all seen the news--has died at 60. Too young, really.
Dave: Too young.
Chris: Really a bummer for her. Lots of... Bruce Lawson, Eric Meyer both had really great remembrances. I think we'll see a lot more come in. A lot of people knew her. She loomed large. It says in a lot of these (and I didn't really know this about her) writ or was coauthor of 30 books.
Chris: About the Web stuff, so she's kind of like Rachel Andrew, too. Just incredibly prolific at contributing to the Web platform. Probably, the Web wouldn't be what it is.
You know those early standards people really deserve a lot of credit for just yelling at browsers enough to be like, "You need to work together." Today, we still benefit from that. It is better today than it ever has been.
Chris: It's because Web standards won, and we need to be vigilant about that.
Dave: Yeah. There's kind of a story where she yelled at Bill Gates -- [laughter] I think to his face or something -- to fix the browsers and fix IE.
Dave: I think she has an amazing legacy for Web standards. If you weren't alive during all of that, it was hard times. You'd open Firefox and it would be super different than IE.
Then WebKit came along, and that was super different, too. You were just kind of like ping-ponging bugs around. It was kind of a weird nightmare. But it all, more or less, got solved.
Chris: Right. While making it better at the same time. It wasn't just like, "The only thing we care about is interoperability." This stuff was evolving and happening. It's a complicated time.
She was before my time, really.
Chris: I had met her a couple of times, but I'm not going to do a remembrance because I just didn't know her that well.
Chris: But while I was starting to go to a lot of conferences, which she was still doing them to some degree, I think.
Chris: I will say something that I haven't heard yet that I feel a little nervous about saying, but I'm going to say anyway, is that there was some mental illness stuff going on there. I don't know how related it was to her physical health, but probably a little bit related.
Dave: Yeah, I think it was. Yeah.
Chris: At some points of her life, I think it made her kind of hard to deal with - or something - or off-putting. Unfortunately, because I didn't know her that well, and I knew her only at the time where that illness had already started, I found her to be (perhaps in my young ignorance) kind of an off-putting person, and always kind of held her at arm's length because I was like, "Wow. You're too much," which is too bad because I got the impression, especially from reading Bruce Lawson's one, that she liked to party. You know?
Chris: She was hard living in a way that, maybe at that time, I probably would have resonated with to some degree.
Chris: I would have liked to fricken' throw down with Molly. That'd have been rad. But maybe didn't contribute positively to her life in the end.
Dave: Yeah. I think she was a firebrand. Passionate people get into do a lot, you know, burn hot.
Chris: Burns hot.
Dave: Then I think her health, that is my experience, too. I think her health really dominated her life in the later years, recent years.
Dave: That's hard. It's hard when your health or mental health is overwhelming you. As somebody who I don't know her, I can't help, like, "Hey, do you want to hang out? Let's catch up." But yeah.
It seemed like she was having a hard time the last few years, so I hope she is resting in peace, as they say.
Chris: Yeah. Very much that.
Dave: But also, I think, was it Bruce Lawson's post? I think we have an opportunity to learn about her life and carry on her legacy and really make the Web something awesome. Don't just give in to trends or corporations. Make it something good for everybody and that works for everybody.
Chris: Hell yeah. Ah... We have some questions, Dave, that people generously have written in. You can do that at any time, of course, at shoptalkshow.com.
Dave: Yep. We have a big "Ask a Question" button right there at the top here. Brian writes in, "Where are all the Web component people hiding?"
Dave: Good question. "I manage a small software team for a small organization that provides a very specific SaaS solution. It was built 18 years ago by a lone cowboy, and we've got all the challenges that that scenario probably conjures in your brain. A vanilla JS front-end that any attempt to glom on a modern framework seems impossible and not worth the effort. We have mature product desires like enforcing design consistency and UI, dry code, delivering new UI fast."
Chris: Okay. Okay.
Dave: "I want some components in my life. Enter Web components, Web component APIs, simple standard and supported. I can drop Web components in my code base and it still has dead code related to Netscape Navigator--" yikes "--lying around, and it doesn't solve all the problems but it solves our problems. It's a higher ... stack.
"I'm confident most people could pick up Web components quickly, but I'm shocked and dismayed that so few people have even heard of a really great API that's been available for half a decade. Meanwhile, lots of these folks are telling us they're using jQuery for DOM manipulation. And, well, that's the point of the interview where my brain goes, "Well, about time to hit the old dusty trail.""
That's Brian from Central Pennsyltucky.
Chris: Brian, anti-jQuery Brian. Come on, buddy.
Dave: Well, I will say I get Brian. When you show up into a repo and there's still jQuery, you're like, "Oh, old friend. Hello."
Chris: Yeah. Totally.
Dave: What are we doing in here?
It does seem like Web components could be a stepping stone kind of thing because you don't have to go all in on them.
Dave: That's a plus, right?
Chris: A big framework. You're not going to convert this thing to Next.js, dude. It's not happening.
Chris: You can baby step it, though.
Chris: Can't you do really small stuff? Find the simplest thing, like the footer or something.
Dave: Mm-hmm. Mm-hmm.
Chris: Although, that might not be the best use case because you probably benefit from something that could use encapsulated styling and/or some interactivity that you're trying to encapsulate.
Chris: I don't know if that's fair, though. Or would you make a footer a Web component?
Dave: I think a footer is a great one. At least, boom, you have it. Boom, consistency. Boom, roll it out. Pretty easy grep to roll out, too.
Dave: Find id=footer and replace it.
Chris: What would you be thinking about if you were going to do the footer? Let's say this footer is very basic. It's just the three columns of links and a logo or something. You wouldn't want to hurt rendering, right? Would you ensure that it's a server-side rendered beast, or it's so far down the page, who cares?
Dave: Yeah. I mean it's not going to be first paint. You may get some layout shift or something without declarative Shadow DOM. You could go down that route if you wanted. I probably just wouldn't.
I would probably go bake things and then enhance the components later. Does that make sense? I'd probably just mow the grass and then go through and make things better (to use a yard, lawncare analogy).
Chris: Yeah. It feels weird to me that you'd convert the thing to a Web component and get nothing but have it be slightly worse rendering.
Chris: That feels like a net loss.
Dave: Yeah, it seems like somebody didn't think that through. Huh, Google? No--
I think if you divorce the problems of page speed and architecture - or whatever - the thing you want is components. Web components are great at solving the components. Then if you want other stuff, now you need some architecture to get that other stuff, like server-side rendering and stuff like that.
Chris: It's the things that don't need to talk to each other. We're throwing around the word "weird." What's weird about it? Is it actually weird? Is it weird because there's state being kept in the DOM or something or that a click over here changes something way, way over here or something? And the way that those talk to each other is confusing or error-prone or something, is that what's weird?
Chris: That does make things a little harder.
Dave: It does.
Chris: Now you put the DOM in some Shadow DOM stuff. Now you need a way to communicate events or something. You really are changing the universe there a little bit.
Dave: But it might result in better architecture. Instead of "Click button, apply 15 classes all throughout the DOM," maybe it's "Click button, emit an event up," and then all these other things are waiting for the super click event. Then they're like, "Oh, super click happened. I'll apply the class to open," or close or whatever.
I think you might end up with some better architecture patterns overall. It's tough without knowing exactly what the piece of software is, like where you would benefit the most.
Dave: If you're just thinking there are a lot of components, I would even recommend not building your own. Shoelace is great. You could see if those ones work to replace your components as-is and just see if, "Okay, cool, great. We did that without even coding." That would be awesome.
Chris: Well, especially enforcing design consistency. Brian actually said that.
Chris: That's the one that you want. That would be a great use case of maybe pluck one off the shelf and see if that buys you the consistency. Great idea.
Dave: Yeah. Honestly, this would be... At Luro, we like making our own stuff. But to be honest, if I was ever going to greenfield something, I would probably consider something like Shoelace just because it has a lot of the components you need, a card, checkbox. That sounds sketchy, but not sketchy for them but just like I can just code a normal checkbox.
Chris: No wonder, right? Especially if you are more of a back-end person and you're building a new app.
Chris: Oh, my God. I'm almost like, "Yes, you should definitely pick something off the shelf." [Laughter] Please.
Dave: Yeah. They have a tree component for making a tree. If you've never written one of those, it's not fun. It's just not fun. [Laughter] Sorry. Writing a tree. I guess with details, you could do it pretty cool. But it's just not fun, so don't do it unless you want to.
Chris: Well, speaking of Luro, a little launch day, huh?
Dave: Well, I was also going to say, if you're overhauling your site, dip into a Luro today. I've been working on some taglines if you're interested.
Chris: It actually seems weirdly perfect for Brian.
Chris: You should make some parts of your app into components and then start tracking them with Luro and work on getting those adoption numbers for those components higher. Oh, that's pretty perfect.
Dave: Yeah. The big thing that Luro does now is we get your components. Chris, you actually had some good feedback. You're like, "It takes a long time to add components." We fixed that. It takes seconds now. We took it from 23 clicks down to 3 clicks to add a new component. That's cool. That's a manual component.
If you have a Figma design system, we can import your Figma and get all your components, like, boom, full design system kind of site thing. But then you go and crawl your pages. We crawl your pages, go find them, and then you tell us the CSS selector of your component that's on a page that we've crawled, and we'll go find it and count it.
If you have all this tech debt that you're trying to pay down, you can file that as what we're calling a legacy component. You can just be like, "Cool. We're going to go tear down all the legacy components and mow it down." It'd be probably good, so step into Luro today.
"Luro: Make it a Blockbuster night!" See, that didn't work.
Dave: Sorry. I knew when I started it, it was not going to work.
Chris: "Snap into a Luro."
Dave: Luro! Snap into a Luro!
Dave: Nah. Not quite it. No.
Chris: No, maybe not. We'll keep going.
Dave: Keep iterating.
Chris: Well, Brian. Good luck there. Brian says he's from Central Pennsyltucky.
Chris: A very special, special place over there. All right, so let's see who else. Who else here? Mr. Tim here has a good one. Tim Bowen writes in about thinking about what we used to call resets. That stopped being a good name because resets started not resetting things. [Laughter]
Dave: Yeah. Yeah.
Chris: That started with normalize, which is probably over ten years old now, I would think. Then sanitize came out. That had its own level of popularity but was a little bit more opinionated here and there because normalize had this philosophy that it would not touch anything that didn't need, that didn't have a cross-browser inconsistency. The whole point of normalize was like, "I'm just dealing with cross-browser inconsistencies," where sanitize was like, "Well, if you're going to bother to do this much, you could do a little more."
Chris: Sanitize had, for example, the box model reset in there that people used, whereas I don't think normalize did because it wasn't inconsistent across browsers. You know?
Dave: Right. Right.
Chris: Little things like that. You know I was playing with one today, a CSS feature called hanging punctuation. You know it, Dave?
Dave: Ooh... I don't, actually. No.
Chris: Well, imagine that you had a blockquote and you decided to put a quote at the front of that blockquote and a closing quote at the end.
Chris: A) I'd highly recommend you do that with CSS and pseudo-elements in the content colon open quote and content colon closed quote pseudo-elements. They're just kind of cool because they get internationalized.
Dave: Oh, nice. Yeah.
Chris: Isn't it French or something where--
Dave: They do the down quote. They do the quote on the floor.
Chris: Something, yeah. There are ones with little, tiny double brackets.
Dave: Yeah. Japanese does that.
Chris: For quotes and stuff.
Chris: Do they? Okay. That's kind of nice. Why not get that for free? But imagine then a text is ragged right and justified left. At least LTR text (English, Spanish, French, whatever). That quote then will start aligned left just where all the letters start. But if you say hanging punctuation, the punctuation will hang off into the left gutter or any space to the left and let the first letter after the quote be the thing that's aligned.
Chris: I think if you look at two examples, you're like the one that has hanging punctuation is better. It just looks better. It just looks classier typography, like you're reading a book with good type in it or something.
Dave: Yeah. Interesting.
Chris: Safari supported it since 2016. No other browser does. But it's one of those things where you just throw it in your CSS and you're like, "Well, then browsers that support it get it and the ones that don't, don't. Who cares?" [Laughter] It's not that important of a thing.
I think of this in relation to Tim Bowen's question because it's like, "If I'm going to use a reset, I like it when stuff like that is in there."
Dave: Mm-hmm. Mm-hmm. Sort of like, "I bet you didn't think of this default." Those kinds of things.
Chris: Yeah, right. So, everybody has their own little set. The problem is, if I look at yours -- even if Dave (highly respected fellow friend developer) made ... I would look through yours and be like, "No. It's a clever idea. No. No. No. Eh, maybe." I'd be so opinionated.
Dave: That's great. I love it because I saw this question, and I was like, "Normalized. Okay. Sanitize. Uh, I don't really use those anymore."
The one I do like is Andy Bell has a modern reset, modern CSS reset. I can put it here in the show notes.
Chris: Okay. Yeah, exactly. I'm just going to criticize the hell out of you, Andy. I'm going to go through.
Dave: Yeah. Well, I really want it because my immediate thing was... What I was going to say was, like, I like it. I would also just copy/paste only the parts I want. [Laughter]
We'll go through each section of Andy's one. He starts off with box-sizing rules. Okay?
Chris: I'm going to take those.
Dave: Take those?
Chris: Those are good. Yeah.
Dave: Removing default margin, body, H1, 2, 3, 4, P, figure, quote, deal....
Chris: That's a weird list. Where's the LI? I don't know. There's some weird stuff in there. That's just too narrow of a list. Where's the H5 and H6? You're going to put 4 in there but not the other two? That's weird.
But I do like margin zero because I hate the margin-top on those.
Dave: I hate margin top as a default. Yeah.
Chris: I a little bit like it.
Dave: Okay. Remove styles on UL, OL, elements with a list role. So, UL role equals list, OL role equals list, list style none.
Chris: I would do it the exact opposite. I'd be like if it doesn't have role equals list, then it should have it. But you specifically said this is a list, then it should have the list style.
Dave: Yeah. Yeah.
Chris: I kind of like... Have you ever seen the one where it says UL and then, in brackets, it just has class? Like if you've decided to style this one, then it says list style none because it's like, "Probably, you're going to rip that list style off."
Dave: I do like that. I do like that.
Chris: I think that's clever.
Dave: Okay. Let's get back to... Here we go. The next one is set core root defaults, HTML focus within, scroll behavior smooth.
Chris: What?! I don't know that HTML could not have focus. I don't understand the focus within part. It looks clever, but I don't understand it yet. It maybe has a reason, but I'll tell you I'm already nixing this one because I got so much feedback one time when I put this on CSS-Tricks -- without the focus within, so we'll see if that fixes it.
You know what? I bet it does, actually, because the thing I got criticized about, when you hit Cmd+F and you do a "find on page" for Dave - or something - it would use the smooth scrolling between when you hit next, next, next, next. It would smooth scroll down, and it felt too slow to people.
There's no mechanism to change how fast the scroll behavior is when you use this in CSS. But I wonder if when you're focused then on the Cmd+F window that the HTML has lost focus and then doesn't smooth scroll.
Dave: Hmm... Yeah.
Chris: I bet that's the solution to that. That's actually kind of clever. I might take this one.
Dave: Okay, so you're a maybe. You're a maybe.
Chris: I'm a maybe because it depends on how it feels. I don't know if smooth scrolling... It's a touchy subject, I feel like.
Dave: Yeah, well, it would be cool if we could define our scroll. That would be kind of cool, but anyway, I realize that's probably a hard problem.
Okay, set core body default. I'm gong to read all these for body because it's a big one. Right?
Dave: Min-height 100VH.
Chris: Nope. DVH.
Dave: Okay. Text rendering optimize speed.
Chris: Ugh. I need examples. That seems like a no to me.
Dave: Line height 1.5.
Chris: You would put that on the HTML element, not the body element, because that's the actual root.
Dave: Ooh... Spicy. Okay. All right. Okay. I like that. I like that.
You know what's funny is I went to a blog. The line height 1.4 or it was 140%, but I'm not going to judge them. It was line height 1.4.
Chris: Ooh... rough.
Dave: Blah, 140% was like... Oh, gosh. I felt like I was reading a fake website, dude.
Dave: It was just like this is so wrong. If you put it up to 1.6, you'd be credible. You'd be a credible news source. But anyway.
Chris: The problem is I like having it more than one.
Chris: 1.5 is a little much for me, but we'll see. But what it screws up then is it cascades to the headers, and it's always too much for a header.
Dave: For sure. For sure. For sure.
Chris: If you're going to do this, then you have to set it on the body and on the headers back down to one or so.
Dave: You need to put the headers down to 1.2 - or whatever.
Chris: Yeah, so don't do one or the other.
Dave: Yeah. Okay. All right. We have... This might be where I'm out. Let's see here.
Elements that don't have a class get default styles A) not class, which is kind of the hack you were saying.
Dave: It's text decoration skip ink auto.
Chris: Any elements that don't have a class get default styles.
Dave: Any link that has a class would get--
Chris: Text decoration skip auto. This is so strange. I don't get it. Like I get what...
Text decoration skip ink auto: I think that's what it already has, but isn't that unusual?
Dave: I don't like the skipping.
Chris: But the point is that there's an underline under the links, and then it... If there's a P or a J or something, the line doesn't go straight through it. It kind of skips the descender. I think it's a nice look, but I thought it just did that anyway.
Dave: Yeah. Yeah, that would be--
Chris: I don't get it.
Dave: Yeah, I don't like the skip ink, personally. Whatever undoes that, which maybe this does.
Make images easy to work with. Image picture, max width 100, display block. I like that one.
Chris: Uh... yeah? Although, you know, yeah. Okay. I'll take it because there's always that line-height thing with images that if you forget to display block them, there's a little space behind them when you put a border around it or something.
Chris: I hate that. It's so annoying. But images are display inline by default. ...never ever want a row of IMGs? I guess that's true. I never do. But why the picture element too? Is picture not display block?
Dave: I don't think it's display block by default.
Chris: Okay. This is a good one then. This is good. We're going to keep it.
Dave: Yeah, the image thing is interesting because I'll find myself doing paragraph, margin-top minus 0.63 REM. Then I'm like, "Oh, no. The stupid image has extra stuff on it, so I need to fix that." [Laughter]
Dave: Input button text area select font inherit, so inherit fonts for text inputs. Okay. All right. All right.
Chris: I like it. I like this one a lot, especially for... Yeah. We'll have to see if it... If it ever interfered, then I would start scoping it just a smidge. How weird is it in a select? That one seems like the weirdest one.
Chris: But I like that it's font inherit, not just font family.
Chris: Which means you probably get the size, too, and line height and other things going around with the text. That seems smart to me.
Dave: That's smart. Okay. All right.
Then remove animations when prefers reduced motion, so add media prefers reduced motion. HTML focus within, scroll behavior auto. Not smooth anymore. And then star before, star after, animation duration, 0.1 milliseconds, animation count one, transition duration 0.1, and scroll behavior auto.
Chris: Yeah. You're just nuking scroll behavior.
Dave: Nuking animations.
Chris: And animations and transitions. Um...
Dave: I like it.
Chris: Yes. Let's keep it.
Dave: Yeah, so this is a good one. I would probably....
Chris: There is just that big nuance. I think you've read it a million times before. It's like, just because you say reduced motion doesn't mean you want no motion. That's not what I'm saying. I just want it reduced.
Dave: Yeah. It's interesting, too, like opacity isn't a big deal. You know? [Laughter]
Chris: Line 65 there, he's missing one space before the scroll behavior. It makes me think this wasn't prettiered perfectly.
Dave: Ooh... Burn.
Chris: Andy, come on. What are you doing?
Chris: Andy, we love you, man. This is a good job here. In fact, I just linked up... They did it at Set Studio, which is Andy's studio thing.
Dave: Mm-hmm. Mm-hmm.
Chris: Did one of those really nice... "This is not your viewport," or something. What is it? viewports.fyi - or something like that.
Dave: Yeah. Yep. Yep.
Chris: It was just kind of proof once again that there are two billion screen sizes. They just did two days' worth of data on one site, and there was thousands or tens of thousands of screen sizes. It was just great to be reminded that it's like, "Yeah, don't pick three breakpoints anymore."
Chris: And just write all your CSS to these strict breakpoints. Not a good plan. I'll prove it to you.
Dave: Or gigabrain, use three breakpoints. What?! No, I'm just kidding.
Chris: I don't even mind the three breakpoints, but I mind that if you... You can write them really rigidly so that nothing changes. Nothing until that breakpoint hits.
Chris: Then you change everything. That's what's dumb. You can have three main breakpoints, maybe.
Chris: But you can still write other code, font sizing, and spacing and stuff that's a little more fluid than that where things are changing in between those breakpoints. It's like those concepts can coexist, let's say.
Dave: Somebody... The most convincing argument, I don't remember where it was, but it basically just listed all the viewports for current Apple devices - or whatever. It was something like 83 different viewports or something like that.
Chris: Just Apple only.
Dave: Just Apple devices, and I just was like, "See."
Chris: Oh, my God.
Dave: If one company who only has five product lines still has no consistency, clearly you can... I wish I could find it. Apple viewports... I feel like that would be a Cloud4 sort of blog post.
Chris: Well, as a direct answer for Tim Bowen here, I would say that no, I don't use those things typically anymore, and I think a lot of people would answer that they don't either. It feels less necessary. I feel like there's less cross-browser differences these days ... to normalize or sanitize for.
I also thought that, as a starting point, it always kind of seemed smart. Then as you go, the more you actually style things, the less you need those because the point of these was to style stuff that maybe you forgot to style. But as you're applying styles, that is doing the work of normalizing it.
Chris: I always kind of felt that way and didn't know how to articulate it. I don't think I nailed it there, but styling is normalizing.
Dave: Right. You didn't want to overwrite the file, but then, with normalize, it was like, "Yeah, just overwrite the file." We just set it as a baseline, but you can set it to whatever you want. But I always just kept it in its own partial. So, anyway, I could probably clean up my CSS and start somewhere.
I'm also interested in open props, just getting into that. Not like what Adam does, but just like, "Oh, hey, look. Somebody went through and made a bunch of variables. I'll just kind of start here." That's interesting to me.
Chris: They are really cool. Yeah. I don't know. I think, at first, I was like, I don't know. Maybe it was my version to the few times I tried using utility styles, primarily, that it just didn't click with me. Then I was like, "Oh, more of that. I don't need more of that." But something is different about it that maybe it was because it was so easy, right? There's no... You need to set up no-build process.
Chris: There's no NPM install. There's no anything. You just link up the open props style sheet or the parts of it that you want, and then you just start using those variables as if you defined them.
Chris: It did click with me. I haven't shipped anything major in it, but I was like, "I like this."
Dave: Yeah. My thing was just kind of like for stuff I don't want to figure out, like easings, that's pretty cool. The font stuff is... I don't know. Weight nine, weight one, I don't super need that. I can just set the weight. But you're starting with variables.
I think CSS variables is like types or tests or something. it's hard to graduate into that or it's a big refactor to graduate into it. But if you start with them, then you have them. You know?
Chris: Yeah, you've slotted things into these buckets or something. That's maybe an argument why you would perhaps use even the font weights, even though you're like, "Why? I'll just put 800 myself."
Chris: But it's almost like I'll draw a line in the sand. I'm like, "No, I'm just going to use the variables."
Chris: Because then they're slotting. There's no in-between then. I'm buying consistency through my usage of them.
Dave: Yeah, because I even tried to copy the Z index stuff where it's like layer one is Z index one. Layer two is two. Layer three is three -- four, five. There are only five layers. If you're doing more than five layers, you probably did a lot. Then layer important is the two billion one, like the max one.
But anyway, it's just kind of like, man, I wish I had that going when I started. Instead, I have Z index one, two, three -- and whatever. [Laughter]
Chris: I heard that. Maybe it even was Adam and Yuna. Their latest season of the show is about stuff that can go wrong.
Dave: Ooh... okay. Interesting. Yeah.
Chris: Like, "Why is my image squishy?" or "Why is my margin not there?" I forget all the names of the ones that they've done.
I think one of them was about stacking, and I think recommended using low stacking numbers, which I don't necessarily disagree with, but I do a little bit disagree with that you should use one, two, three because there are no in between then. I feel like that's a classic, and I think I've benefited from that.
Chris: Is to use 10, 20, 30, or 100, 200, 300. Those are still pretty low numbers, but if gives you these in-between possibilities for later without you having to refactor things.
Dave: Yeah. Yeah. Huh... Hey, it's all interesting. That's what's nice about CSS. You can go too hard in one direction, and then you have to kind of back out, or you just kind of stop thinking and now you have to refactor and come up with a better system that works for your code.
It's like, as poo-pooed as CSS gets in our industry, it's really about creating a system that works. And not everyone can do that. And maybe that's why products exist to fix that. But it's cool.
Chris: All right. Well, I think we did it, yo.
Dave: We did it. All right. Well, 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 whatever website. I have credentials. I can post now again, so that's cool. I was locked out for a bit. Thanks, Elon.
Then head over to... Join the D-d-d-d-discord where it is popping off. It's just been really great lately, so thanks to everyone who is doing that. That's over at patreon.com/shoptalkshow.
Chris, do you got anything else you'd like to say?
Chris: [Loud inhale] ShopTalkShow.com.