Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode -- a travel edition -- of the ShopTalk Show

Chris Coyier: [Laughter]

Dave: I'm Dave -- in the guest room with the giant elk -- Rupert.

Chris: Why did you save that? That was a big surprise. Dave moved out of the way, and there was a giant deer head behind him.

Dave: Yeah, yeah. That's an elk.

Chris: Oh, an elk. Yeah. My father-in-law hunts, and so I'm coming to you live from Phoenix, Arizona.

Chris: Yeah, mic in hand.

Dave: Yeah.

Chris: That's the kind of dedication we like to see around here. Other podcasts might take a break. Not us. You know what I'm saying?

Dave: No, no. Other podcasts might take a break, and they might remember the little brass fitting that fits in their microphone.

Chris: [Laughter]

Dave: I did not.

Chris: Grrr...

Dave: That is why the stand doesn't work, and so that is why I have to hold the microphone for about an hour. Anyway, hey... What's going on, Chris? How are you doing? Sell any blogs lately?

Chris: [Laughter] Yeah, pretty good. I guess we can't avoid talking about that a little bit, not that I would want to. I'm just saying now it's public.

It reminds me of how sometimes the director of a movie -- not that I'm as fancy as the director of a movie, mind you.

Dave: Yeah. Yeah.

Chris: But let's say you made a documentary movie or something. As the director, you finish it maybe two years before it is super-done and you go on the tour. Or book writers, you know, when they go on the tour, and they're like, "I'm halfway through my next book." You know what I mean?

Dave: Yeah. Yeah. Yeah.

Chris: That's not quite the case here because actually moved pretty quickly. But some of the biggest moments of signing paperwork and all those really exciting things involved in selling CSS-Tricks (in case you're unclear of what we're talking about here), had already gone down by the time the public day comes around.

Dave: Yeah. Yeah. The public day is sort of almost towards the end of the whole process.

Chris: Yeah. Indeed. It's a done deal. Everything that could -- like the big stuff, like--

I'm not talking about financials ever publicly during this, but that part already happens, and the domain name has moved.

Dave: Transferred and everything.

Chris: All the big stuff is kind of already done. It's pretty exciting.

On the public announcement day, we're all ready to go because you line up all this stuff to be ready, like the blog post has to go first. Then this goes. Then this goes.

You'll notice changes to the website. Even the logo in the top left says "DigitalOcean powered" or "CSS-Tricks powered by DigitalOcean" now. I think it looks nice up there, but that took some planning and stuff to get all ready to go to press the button on the day.

00:03:01

Dave: Yeah. Wow! Cool, man. DigitalOcean bought CSS-Tricks.

Chris: DigitalOcean.

Dave: Yeah. I think that's -- to me -- this is Dave outsider, but that seems--

Chris: Surprising.

Dave: It's surprising, but it also seems like a good fit. Doesn't it? They have a lot of good content.

Hold on. Something is printing, I think.

Chris: [Laughter] That'll happen.

Dave: Sort of on location.

Chris: There's probably an email that your uncle needs to read.

Dave: Yeah. That's a normal thing. Nope, I think it just likes to get juiced up a bit. Okay.

Chris: Yeah, it likes to stretch its legs, old printers.

Dave: Likes to stretch its toner.

Chris: That's a big thing, though. This is not the first website acquisition like this for DigitalOcean, so I knew they were kind of in that world, and it makes a lot of sense to me when apps invest heavily in the educational space when they sell a developer product. I think it does a good job of warming developers' hearts and minds. You know? When they provide high quality content, and then you're right on their website that [laughter] sells other things that you need as a developer. I just think it's great.

It makes sense to have this kind of perfect synergy like that. That's why I was stoked about it. I just think they want it for all the right reasons, and they have all this evidence that they can take care of it. So, the decision for me was clear in that way.

Dave: Yeah because they have a lot of, like, how to set up Rails on your droplet or whatever content. This seems sort of in line with the tutorialized content, right?

00:04:50

Chris: That's what everybody tells me. I'm not much of a back-end guy, but you are. Everybody is like, "That's where you land for back-end stuff," like how to install Node 18 on an Ubuntu on a docker on a thing - kind of thing. It's like, "That's where you're going to land," and it's highly regarded for that type of content.

But more, perhaps, focused on back-end stuff than front-end stuff. Now I can help you with the front-end stuff. Nice!

Dave: Yeah. No, it's a one-stop-shop now, so that's cool. You don't want to talk about financials, obviously. But was it something like DigitalOcean was just like, "We want to get more into the content game," and so you came on their radar? I know you probably have advertised with them and stuff before. Were they just looking at their potential ad spent and were like, "Maybe we should just buy this," [laughter] or something? Do you even know?

Chris: Maybe. I don't know. I wasn't in their internal meetings deciding, of course. You know?

Dave: Right.

Chris: Because it's a game at first. Acquisitions, you don't show all your cards - or whatever.

Dave: Yeah.

Chris: But they were clear that while they have investment, they have massive -- I don't know if you call it VC at their scale, but they have money. Then part of the job is to spend that money for growth. That makes sense, in a way.

Dave: Yeah.

Chris: And have done a bunch of successful acquisitions already so that they have some of that stuff under their belt and know how it goes and know how to execute them. But they're also clearly a top of funnel, self-service style host.

Dave: Mm-hmm.

Chris: That's where the customers come from is, like, boop. Sign up a droplet booper. Sign up an app platform - or whatever.

Dave: Sure. Sure.

Chris: Rather than having this massive sales team that's going out trying to land enterprise contracts - or whatever. But because they've already picked that road -- and again, I don't speak for their corporate strategy or anything, but this is what they say and what they mean and what is clearly evident by looking at the business.

Dave: Yeah. Yeah.

Chris: That that top of funnel stuff is important. And where does the top of funnel come from? SEO and stuff.

Dave: Right. Right. Even organic traffic, people sharing links and whatever.

Chris: Yeah.

Dave: Just like, "This was helpful and I'm sharing it."

00:07:17

Chris: They have a team. Our team was me and Jeff. High-five, Jeff, who was really instrumental in running the publication schedule and working with authors and doing really tight technical editing and helping wrangle sponsors and making sure that content train was working. Instrumental to making the site work but was part-time and one dude.

Dave: Mm-hmm.

Chris: Robin wrote the newsletter and wrote once in a while, which is important because the newsletter is part of the overall train. But it was kind of basically just the three of us at the end.

Dave: Yeah. Yeah. Just kind of whatever. Three people in a trench coach.

Chris: Yeah.

Dave: [Laughter]

Chris: What I could do is, like, "Okay. I'm going to just reinvest way more in this. Maybe I'll see if I can get Jeff full-time. Maybe I'll see if I can hire five more people."

We used to have kind of a staff writer concept. It didn't fall apart. It just ended up being, it's actually easier if we just treat all authors the same. You can be a staff writer. Just write more. [Laughter]

Dave: Right.

Chris: I'm happy to give you that.

Dave: Right. The way to be a staff writer is writing a lot.

Chris: Write a lot. Yeah.

[Laughter]

Chris: Happy to invite you to the Slack - or whatever - after five, maybe. I don't know. It just never really came to that.

That's what I didn't do. I didn't take every opportunity to reinvest in the overall business of the site. In fact, I don't know that it was maxed out, but a little bit. If you're trying to juice every dollar from a site like CSS-Tricks, there's not infinite paths to travel down. There are ads and sponsorship. Then there's maybe you can really nail a job board, although I've already failed at that once, so maybe it wasn't top of mind for me.

There's sell educational stuff, and we failed at that kind of once with the lodge thing. It wasn't a failure. It just didn't feel right at the end; ended up making it all free.

Then our second go-round at that CSS-Tricks, I called the MVP Support Program, which was just $20 a year, and I intentionally made it cheap so that I didn't feel so guilty. It wasn't this very expensive product that I felt like I needed to constantly produce new material for.

Dave: Mm-hmm.

Chris: In fact, a little bit like this show's Patreon. It's like we don't offer the moon. You just are here to support the show and be in the Patreon, pretty much, because I have overpromised in the past, and it makes me feel guilty and weird, and I don't like it.

Dave: No. It's the curse of having customers, sort of. You're like, "Okay. I'll turn this thing. Now everyone pays me $7." Then you're like, "Wait a minute. Now everyone is sending me tech support issues. Uh-oh. Wait a minute. Now I've got to keep providing value for these $7."

Chris: Yeah.

Dave: I think there's--

00:10:10

Chris: If you're like Scott Tolinski, or whatever, and that's your whole job on Earth is having customers and cranking out good stuff for them, or you already have this massive hive of stuff that is clearly valuable, and you just have no problem sleeping at night because you're selling a huge pile of product, or something, that's awesome.

I don't have that, and I don't necessarily want to go there because you know how I actually spend my day and time? Working on CodePen because it's my main big beefy project.

That was the thing. It's not that I'm scared to invest in CSS-Tricks. It's that I don't have the time.

Dave: I was going to say. Yeah, can you--? I kind of know just because I have behind-the-scenes access. [Laughter]

Chris: Yeah.

Dave: But can you give us a sense of how much time CSS-Tricks -- like how much time were you putting into CSS-Tricks, like in a week? Could you quantify it?

Chris: It was tricky because I very intentionally don't track hours because somehow it's the most abhorrent thing in the world to me to ask me to....

Dave: I'm 100% with you. Yeah.

Chris: Yeah. [Laughter]

Dave: Okay. 100% with you, but yeah.

Chris: But it was definitely less than half. I always kind of told myself that it was a third or a quarter - or something - on CST. If it ever got higher, I would just start shelling stuff off to Jeff more.

Dave: Yeah. Yeah.

Chris: I'd be like, "I can't. You deal with all this." But it would grow, and there was a little bit of roller coastering at really heavy times. Heavy times meaning mostly sponsorship heavy, meaning, okay, because I had these deals with Automattic and Netlify and Flywheel and other companies. The deal was, do X stuff per month for us.

Dave: It's like, put an ad up. Maybe a sponsored content post sort of thing.

Chris: Yep. Newsletter spot.

Dave: Newsletter spot.

Chris: Mm-hmm. It could be display ads. It could be all kinds of different stuff. There were probably ten different miniature products. Then some social media implications to all that and whatever.

For lots of different companies, so that train was a lot. The worst of it -- not the worst, but just busiest and, like, "Oh, my God!" kind of moments where it's not for the love of publishing a CSS Trick that day. I wake up, and I have, "Oh, shoot. I forgot. There's a sponsored post I have to write, and we've got to get this draft together and these four authors are waiting for edits." There's just stuff, stuff, stuff, stuff, stuff, stuff, stuff. Not all of it my favorite, especially after 15 years of that. Not that all 15 years were exactly like that, but a small ramping up of that.

Your original question was about time. There was probably some weeks where it was 50% of my time because it was so hot and heavy. A lot of stuff landed at once.

Dave: Yeah. I know through this show. An ad, you'd think we create a space, a little rectangle on the website or a little two-minute block on the podcast, and that's done. Then we just fill it with an ad, and it's done. But there's actually a big back and forth.

Chris: Oh, yeah.

Dave: Sometimes we had to send previews. There's a bit of a dance that happens every single time, and so that's not a one-email thing. It's five to ten email situation every time.

00:13:47

Chris: Right. Yeah. There are emails, and there's not just one thing going on. It's never isolated to one spot because you're always (in the early stages of some sponsor spots) finishing and publishing some and planning ahead towards other ones.

Dave: Yeah.

Chris: You feel like you're in and out of 15, 20 sponsored things per week. It's like, "My gosh!" That's hard to scale. You can't just double it to 40 because those things go in spots.

We can't just decide at ShopTalk Show to run eight spots. We can, but none of y'all would listen because that would be the worst podcast ever.

Dave: Yeah.

Chris: The answer to scaling a podcast is -- I don't know -- make more of them. Publish more of them per week. All of that is doable, but it's just more time. Again, I'm trying to put the time at CodePen. I have a co-founder Alex there who doesn't do as many side projects as I do. He knows this because CSS-Tricks existed before CodePen ever even did.

Dave: Yeah. Yeah. Yeah.

Chris: ShopTalk Show started at about the same time. These two things were instrumental in the starting and growing of CodePen. But now this far in, it's more about me and the business of that than it is about growing CodePen anymore. I thought kind of the fair thing to do was to set those things down.

Dave: Some mutual-ness, like running a blog. An ad sponsored blog, a lot of it ends up being ad work, or you're taking a bunch of submissions and stuff like that. Now you're doing a bunch of editing. You're actually getting out of the writing business because it's all this editing, all this approving, all this stuff.

But you move it to something like DigitalOcean -- now that DigitalOcean owns CSS-Tricks, you could imagine ads maybe go away. I don't know. But just because they're going to sell their own thing, so it just sort of gets easier for them.

Chris: Right. That's on them to figure out, but who knows exactly what they'll do. At least it'll be toned down.

Dave: Sure. Sure.

Chris: If not totally eliminated, and I don't know. I can't speak for them on that because they literally own the site now.

Dave: Yeah.

Chris: But they have a team. This community site that they run is very good, for one thing. You know what it takes to run that? A bunch of people. They hire for it. They staff for it. They have their own program for guest writing. They have all the stuff.

Our scraggly team, which I didn't have the time to invest in more, now that's what's extra cool about it to me. I know that sounds like blowing smoke because you're like, "Oh, the new people will have more money to invest in the thing." That's what everybody says, but I've met the people. They're literally human beings behind this now in a way that I just couldn't have done before. That to me is super GOAT.

Dave: One is an AI. One is just a complete--

[Laughter]

Dave: Just an actual AI that produces content. But the rest of the people are great.

00:16:52

[Banjo music starts]

Chris: This episode of ShopTalk Show brought to you in part by Jetpack. Jetpack is a plugin for your WordPress site. It gives it all kinds of extra super cool abilities, many of which are powered by the idea that it would be nice to offload a bunch of work to a cloud server instead of your server, which you're probably on some shared hosting to make it more affordable for yourself. I am. All my sites are. That's what keeps computing more affordable these days. WordPress runs perfectly great and fine on most shared hosting.

But there's some stuff that's just particularly taxing for a Web server that's busy running PHP, MySQL, and all that stuff, stuff like site search. A default WordPress search is not even that great, really. You type in some search terms and it executes. Of course, it needs to go through PHP, and it needs to execute an SQL query against all the content on your site. It can be a particularly heavy thing to do.

Honestly, SQL isn't even that good of technology to do it on. There are better search technologist, like Elastic Search. Well, guess what. You flip a switch in Jetpack. Your content, which kind of gets synced up to the cloud, gets put into Elastic Search.

You don't even need to know this. It just doesn't even matter. What happens to you is that, all of a sudden, the search experience on your site is now great instead of kind of bad, and it doesn't tax your server at all because, all of a sudden, better search technologies are being used. It's all happening in the cloud. Way better in that way.

It's the same thing with the backups. The backups happen in the cloud. It's the same thing with your images. They're in the cloud now. They get uploaded to a CDN and handled that way.

It's the same way even with something like related posts. There's some shared hosts that say you can't even use those plugins. They're so taxing on the database of the site. Not with Jetpack. It all happens in the cloud for you.

So cool. Thanks for the support, Jetpack.

[Banjo music stops]

00:19:07

Dave: You'd mentioned this big chunk of your time, 30% or something is now gone. What are you going to do with all this time and/or money?

Chris: [Laughter]

Dave: Are you going to reinvest it? Are you going to steal it? [Laughter]

Chris: [Laughter] It's not retirement yacht money. You know?

Dave: Right.

Chris: Whatever. Like I said, I'm not going to talk about it. That's not my personality anyway is to just be like, "Well, I'm done."

My life isn't going to change at all - practically. The little chunk of time I get back, sure, I'll be a nice little breath of fresh air. It's just all going to immediately go 100% to CodePen.

It's a bigger enterprise, and I'm very excited about what we're working on there (and have been for a long time). That's just a story for another day, I guess. That's the thing that I'm working on that I think has more impact on the industry than CSS-Tricks did.

I got an outpouring of positive messages from people when that thing went public. Thank you so much, everyone, who choose to share stories and stuff like that and how important it was, them coming up.

I don't know. I still think, even now, CodePen has a bigger impact on the industry. They just don't know it's me anymore. My face isn't attached to CodePen like it is to CSS-Tricks. You have to click down to the About page (if you ever even care to do that).

But there are all these kids -- not even kids, but just metaphorical kids -- coming to the industry learning stuff where CodePen is part of the curriculum, or it's the editor they choose to do stuff in, or they land on it when they're finding examples and stuff. There are way more examples of how to do stuff on CodePen then there is on CSS-Tricks.

Dave: Yeah.

Chris: I think it has more of an impact on the industry, and I just am excited about that. I want to see that through and see that potential through.

My life, change wise, I don't know. Maybe I'll buy a camper van. I've been looking at them. [Laughter]

Dave: Oh, buddy. I've got some recommendations.

Chris: [Laughter]

Dave: Okay. I looked at campers this week. But yeah. No, that could be cool, man.

Chris: Yeah.

Dave: Go overlanding. Yeah. Sorry. Side note. My YouTube are so messed up. I'm now getting recommended videos where people buy old military vehicles and convert them into overland campers. Anyway... If you want to talk about that, I've got a hot lead on a Mercedes R-Cross in Latvia.

Chris: Nice! Yeah. I was just looking at weird conversions that have six weeks - this morning.

Dave: Yeah, the six-wheel. Yeah.

Chris: My plan on going offroad is very not happening.

Dave: Right. Right. Well, that's cool, man. Well, congratulations. I know it's been a big--

00:22:05

Chris: Yeah, thanks. It doesn't have to be the last time we talk about it. There's probably more. If you have any more questions or anything, or if other people out there do too.

What I wanted to avoid was glossing it over with that, kind of like, this is the -- I don't know. I just didn't want to say cliche boring stuff, and now I feel like, now that I have, I'm feeling like that's what I'm saying.

Dave: Did you put successful exits on your Twitter bio?

Chris: [laughter]

Dave: You know how all those dudes do that? Did you do that? No? Not yet?

Chris: No, but I did change stuff right away. In fact, I even pushed out a really basic redesign of my personal website this morning.

Dave: Oh, really?

Chris: Just like, boop, I'm going to blop that out, just because I wanted to change some of the language, and then I can't help but just do the whole thing.

Dave: Oh, hey. Ultra-yellow, man. This is good. I like it. I like this vibe. It's fun. Yeah, look at you.

Chris: [Laughter] I'm still going to work on it, but I just wanted to change some of the stuff there.

Dave: ...button over here. Just hitting the publish button.

Chris: I had to spin up the dev environment for the first time in a while. It's still on CodeKit.

Dave: Whoa!

Chris: I was like, you know what? Super don't regret it.

Dave: [Laughter] It works? Yeah, I guess it works.

Chris: Yeah, getting it done without being like, "Oh, no. What did I even do? It is Grunt or something? I can't even remember."

Dave: [Laughter]

Chris: No, I was really pleased to discover it was still on CodeKit because it took zero seconds to get back going.

Dave: That's beautiful. That's beautiful. Yeah, the only other question I'd have, selling a company. Let's say somebody knocks on the door to buy Dave Rupert LLC or daverupert.com.

Dave: Yeah.

00:23:47

Dave: Is it -- which is obviously an industry-leading blog, so whoever wants to buy that is super welcome - Netlify.

What do you need to know, I guess, to do that? Is it just--? I know you had to show profit and loss. Then there's some formula. It's that number times five, or something, right?

Chris: They have to -- there is a dance of offers and such that happens. How that goes, I think, is different for every acquisition, probably.

Dave: Yeah.

Chris: I just have to be careful about what I say and don't. I don't really know where the line is, so I'm just going to be extra careful, I guess, on that.

I gave them pretty much anything they wanted to see because I'm that kind of dude. I'm not very conservative with that. If you want to see my analytics, here you go. You can look at whatever you want. I'm not going to be like, "Here's this little subset PDF that I'm okaying that you look at."

Dave: Right.

Chris: I would share that stuff with anybody. I publish blog posts about our analytics, the situation, and stuff. So, that matters.

But how some other company decides to value your company is kind of like both of your business. It's important to them. It's very important to them because they're about to spend money on your company, and it better be worth it. They better have some internal calculation.

But I don't think they were valuing the exact same way that I would. The way I value it is very straightforward. How much money does it make? Got it. That's the value of it to me then.

Dave: [Laughter] That's a pretty good value. Yeah.

Chris: They know that's how I think of it, so that whatever number they throw out has to be aligned with that. You know?

Dave: Right. Right.

Chris: It can't be six months of revenue because I'll be like, "Why don't I keep it for seven months then, and now I'm ahead?"

Dave: Yeah. I could let it coast for seven months.

Chris: Yeah. [Laughter]

Dave: [Laughter] I could just do nothing on it for seven months.

Chris: Yeah, really. You kind of could.

Dave: More or less, right?

Chris: Yeah. You could stop doing anything that takes work. Just run display ads only. Not that I was ever going to do that.

Dave: No, no.

Chris: You could coast it for cash. In a way, I have to have numbers in my head of how I value it. They have their own numbers in their heads about how they value it. Hopefully, those things are aligned. They were, but you do that early. It's not like you do six months of work and then you start talking about if you're in the same ballpark. Those ballpark discussions happened right up front.

Dave: Yeah. I think that's just my mentality. Over the years, people have attempted to hire me - or whatever. You know? I'm very committed to Paravel, but it's just like if you ain't talking money, you ain't talking sense because I just need you to tell me the number because that's what's going to be the ultimate deciding factor - before I would ever approach any kind of other sort of negotiation.

Chris: Yeah.

Dave: I can't spend a month talking to you and then getting into the numbers. That would be counterproductive.

Chris: Yeah. It's a waste of time. That's why, if I was on Tinder, I'd put my height and weight on there because I don't want you to show up to the corner bar and turn around before you walk in the door.

Dave: [Laughter] Yeah.

Chris: A little disappointed at what you saw there, you know.

Dave: You get the obvious metrics out first. [Laughter]

Chris: Yeah.

Dave: Yeah. Yeah.

Chris: Not tall.

Dave: [Laughter]

00:27:28

Chris: Anyway... [Laughter] That was cool. I worked with -- everybody I worked with was such a straight shooter. You know? It's nice that it just wasn't any - I don't know. It just was so smooth. They needed something. They just used their language and asked for it. [Laughter] I was like, "Okay."

Dave: It wasn't roundabout. It wasn't kind of couched or whatever. It was just pretty matter of fact.

Chris: Yeah, right. Exactly. Extra high-five to Nas and Sidney, the two people I worked with. There was a whole team of people I worked with, but the emails really flew with those two, kind of the leads on everything that went down. I just have tremendous respect for them and everybody there of how smooth it went. Really, it was pretty sweet.

Dave: Well, cool. Again, congratulations, man. Big changes. Big changes here in 2022.

Chris: Yeah, big changes, indeed. Yeah, that was a big question is, like, are you still running it then? It's like, no, I'm a contractor, actually, officially, at DigitalOcean for a while and can help with absolutely anything they need because it's in everybody's best interest that this is super smooth and the site just continues to be awesome. I'm going to do everything I can to make sure that that's the case.

I can push code to it. I can publish stuff. I've got all that stuff going on. I'm going to make sure it's as good as it possibly can be.

Dave: Well, and there's got to be a time, right? There's a transition, probably, from your process to their process. You know?

Chris: Yeah.

Dave: They actually have a good process, I think you were saying, and just already established way of contributing and stuff like that.

Chris: Yeah, and it's a little more grown up, frankly, which I don't mind. We were kind of shooting at the hip for a long time. For example, you sign an author contract. That's pretty straightforward when you write for DigitalOcean. That just establishes the proper legal boundaries of content.

Dave: Mm-hmm.

Chris: That's smart and good, and you should sign that. Everybody should feel good about signing that document.

Dave: Yeah.

Chris: That's not a big deal, but I never did that. It's fine because it's not the end of the world, but that's an example. They pay more money than we ever did, for writers. That's kind of good. They have a staff and a process that's perhaps just as or more refined than ours ever was, so that's pretty cool.

They always think of themselves as -- talked about as this big company, and they do have some degree of minor red tape on things, but it's all really reasonable and smart because security matters, because process matters, and because people need to be looped in.

Dave: Yeah.

Chris: None of it seemed over the top to me.

Dave: Yeah.

Chris: It all just seemed like, oh, you're not that big of a company.

Dave: Yeah. Yeah. Yeah.

Chris: All this stuff is perfectly fine.

Dave: Well, no. Yeah, that's cool. Yeah, like you were saying, you were kind of flying by the seat of your pants. But now it just has an established process. But as it translates process, I think your system of publishing content, editing, and stuff might not align to them, but y'all can inform each other's process. You can maybe get people or get the content wheel going for them.

00:30:56

Chris: Yeah. The more I grow up, the more I appreciate I have a grown up process. You know? [Laughter] More like, "Yeah, that's how an adult would do it. It looks good to me." [Laughter] You know?

Dave: Yeah. Yeah. Sometimes it's too grown up, but yeah, I agree.

Chris: [Laughter] I was thinking of some things, just to wrap coding and stuff into it a little bit because I have to share a lot of knowledge about how the site works and our processes and all that stuff. They can change whatever they want, but they need to know how it works right away. So, I'm working on stuff like a systems architecture diagram and stuff like that. Not that the site is that complicated. It's a WordPress website, pretty straight out of the box. But still, a lot of engrained knowledge that lives in my head that needs to be really clearly documented and stuff.

Then publication flow is different too. Just because it's a WordPress website, well, we're in the block editor days, so there are blocks to know about. There's the fact that our posts have featured images on them and can have metadata in special ways and need to have a break for where the excerpt goes and just stuff to know about that.

Speaking of the featured images thing, I had written this down because I was thinking this was interesting. You'd think, on a publication, that if there's a featured image, that you'd have established long ago, like, okay, they are 1600x800, or something.

Dave: Oh, yeah.

Chris: That's the size. Right? Wouldn't that be the proper way to do it?

Dave: That would be a dream world. Yep. Yep.

Chris: But we didn't, and I almost didn't on purpose, instead, because there are five, at least, places that the featured image is used.

Dave: Mm-hmm.

Chris: If you go to CSS-Tricks, and it's the latest article published, there's a special treatment for that image. It fades into the text kind of text kind of thing.

Dave: Fade, yeah.

Chris: Then lower, you can see images. They're all kind of the same size. It's like a rectangle on top of a card.

Dave: Yeah, like playing card, kind of.

Chris: Yeah.

Dave: Half and half.

Chris: Then it gets smurfed into the social media image as well. It's used in a few other areas.

All of those were coded and designed such that it literally doesn't matter (the size of the image that you give it).

Dave: Okay. Okay.

00:33:18

Chris: It had me thinking about design, programming, and such in a way that I think it was kind of cool - in a way. I know another one is, as you click onto the article, it's used behind the header.

Dave: Right. Right. I've seen that. Yeah.

Chris: Every one of those was designed such that it uses minimum sizes and maximum sizes. It has gradients that lay over it that make sure that they touch the edges such that you'll never see the edge of the image - and all that stuff. I think it's kind of cool. The end result of that is, finally, I get to explain to somebody. They're like, "Oh, what size should that image be?" I'm like, "Ah... whatever. Just put whatever." You know? [Laughter]

Dave: Yeah. Just whatever. That probably -- I don't know. I imagine that that goes like a lead balloon, right?

Chris: Yeah. [Laughter] What do you mean whatever?! I probably won't even say that. I'll probably be like, "I don't know. Use 1600x800," because that'll work fine. It literally is designed to be really flexible, and that's where design meets programming, in a way.

Dave: Yeah. Yeah.

Chris: You can write code that's that way too. Isn't there some old principle, "Be liberal in what you accept and strict in what you output"?

Dave: Conservative in what you do. Yeah. Yeah, I know that one. Is that Tesler's Law?

Chris: Hmm.

Dave: Let me go. I have a list of those on my site. Eponymous laws of tech.

Chris: Yeah, I was going to throw that one at you and be like, have you ever thought of that or intentionally coded something to be extra liberal in what it accepts?

00:34:57

Dave: You know, yeah, sort of. We're kind of dealing with that in Open UI.

Chris: Hmm.

Dave: Your spicy sections kind of have to accept quite a bit of junk.

Chris: Whatever. Yeah.

Dave: or how liberal are you in what you accept? We kind of had to go one direction and then kind of back it up. But HTML, in general, is pretty liberal in what it accepts. Then in CSS, too, it's just like you can type anything. If I don't understand it, I just don't do it, which is pretty cool. That's actually the coolest feature of CSS. Unfortunately, CSS will also just bomb out if you forget a semicolon, but whatever. [Laughter] It just stops processing. It's just like, "Cool. You must have been done." And HTML will just put everything in the same image tag if you forget to close an image tag. Whatever.

00:35:58

Chris: I remember. Remember we did the video on the select menu too, and that thing will miraculously take whatever.

Dave: Yeah. Yeah.

Chris: Yeah.

Dave: I mean it'll take whatever. Patrick Brosset, is that right?

Chris: Mm-hmm. Yeah.

Dave: He has the mother of all demos on that.

Chris: [Laughter] Yeah. You mean the emoji one?

Dave: The emoji one, you open it and there's 1,000 emojis.

Chris: First of all, the menu itself is a circle - somehow. [Laughter]

Dave: Yeah. How? Exactly. I didn't know we could do circles in HTML, but he figured it out.

I was just on Ben Myer's semantics life stream talking about some of this stuff. They've solved a lot of Microsoft problems, GitHub problems, and stuff. Just very common UI components there. That one, you can actually add more divs via slots and stuff like that, but they've really kind of come up with this way. You can chuck stuff in here, and we'll accept it. We'll try to render it the best we can.

Now, there's (I think) a conversation of, like, we should probably not allow everything, so what is on the unallowed list? I think they're trying to figure that out.

Chris: Yeah. It's early days. But, yeah, I could see how that is very strongly an HTML-like concept. Maybe not so much CSS or JavaScript.

00:37:28

Dave: Oh, here. Postel's Law, is what it is. "Be conservative in what you do and be liberal in what you accept from others." That's like what TCP/IP and everything was based on.

Chris: Yeah.

Dave: You could post as much data as you want. You accept all this stuff but you only do a certain amount of things.

Chris: It's funny how you could stretch that to user experience. You could stretch it to your own life.

Dave: Yeah. It's very close to the Unix philosophy of write programs that do one thing and do it well.

Chris: Hmm.

Dave: I don't know if you've ever looked at the Unix philosophy, but it's pretty cool. It's like ten principles, or something.

Chris: What do they call that, programming a function that is immutable or something, that can't possibly output something different depending on the input? There's a special name for that, isn't there?

Dave: Oh, is it--? I can't think of it offhand, but sure.

Chris: [Laughter] Yeah. I just think, inside the function, that it doesn't call some external API or something that who knows what it will return.

Dave: Yeah.

Chris: So, you can't really test it because, on any given day, the output might be different. I don't think it's immutable, but it's something like that.

Dave: Yeah, but I think it's just this idea, too.

Chris: Is it functional? Is it functional?

Dave: Functional? Yeah, just the idea of, like, your program should just do one thing really well. If you're adding all these flags and all these other things to it, maybe it's a whole other program.

That could kind of go into software philosophy or business philosophy. Is your business trying to do too many things? Or Chris Coyier.

Chris: Trying to do too many things.

Dave: Is Chris Coyier trying to run CodePen, run CSS-Tricks, and do an award winning podcast? Yes, he is.

Chris: [Laughter]

Dave: So, maybe he needs to--

Chris: Have we won an award? I bet we have.

Dave: We won one award, I think.

Chris: We won one award? Oh, that's awesome.

Dave: Yeah, .NET 2009, or something.

[Laughter]

Dave: .NET Magazine.

Chris: Yeah.

Dave: Rest in peace.

Chris: Best podcast.

Dave: But yeah, I think that stuff is, like, maybe if you add too much, if you're doing too much, your application, but I'm also extending it to your life. Maybe that's a whole other thing. That's a whole other job, whole other business, whole other person - or something. Yeah.

00:40:02

Chris: I saw Mr. Eric Portis. He always has his finger on the pulse of some weird stuff.

Dave: Yeah. He must have a different Internet than I do because he finds the coolest stuff.

Chris: [Laughter] Yeah, truly. Right?

Dave: You know?

Chris: What did you subscribe to, to get that link? But it was the WCAG had an explainer document drop the other day. I guess it wasn't the other day. It looks like a couple of months ago, based on the date stamp.

I really hadn't seen this, but it was an attribute. You know the hidden attribute in HTML?

Dave: Yeah. Yeah.

Chris: I don't think people use it a lot, a lot because there's a great Monica Dinculescu article on her website that's called "Hidden is a Lie." [Laughter]

Dave: Yeah.

Chris: Which it's only like three paragraphs long, but it explains why it's kind of not a good idea to use because the user agent style sheet that makes hidden work is basically just like, "Attribute hidden? Yes? Display none."

Dave: Yeah. Yeah.

Chris: That can be overridden by anything. [Laughter]

Dave: Display block. Yeah, totally.

Chris: Yeah.

Dave: Yeah. A very ... selector.

Chris: Not a super good idea to use hidden as an attribute for whether it really is hidden or not. She suggests a fix, which is to actually put the attribute selector in your style sheet and put display none important, so it actually is trustable.

Dave: That's what I do. That's what I do.

Chris: Trustable. Oh, yeah. Yeah. That's cool.

Dave: Also, the random browser that doesn't have it. You're going to have to....

Chris: Yeah. it'll be problematic for other reasons, perhaps. Okay. Hidden attribute. Probably don't use it a lot, but maybe.

Dave: You add hidden. It display none it and disappears it from the page.

Chris: Yeah. There is some really DOM clarity of that, right? At least you didn't have to make a class. I don't know. I don't know how I feel about it. That's not where we're going with this.

Rather than being a bullion attribute, like it's either there or it's not, there's going to be an alternative value for it called until found, so hidden=until-found, which seems like a super joke to me. [Laughter]

Dave: [Laughter]

Chris: Like, "What?!" The point of it is even weirder. I don't even know what the exact point of it is, but here's how it works. Let's say you do a find on page.

Dave: Mm-hmm.

Chris: For some text like abracadabra. If the browser discovers some text in the DOM that says abracadabra, but it has this hidden until found attribute on it, it just disappears the hidden attribute then. Meaning that it just becomes visible then.

Dave: Yeah.

Chris: I don't know what the use case is. Is there some accessibility thing or some use case that they unlock with this ability? But for the most part, I look at it and be like, is this just for tricks? [Laughter]

00:42:58

Dave: Well, it actually kind of factors in the spicy sectors.

Chris: It does?! What?!

Dave: Because if you're searching for content that's on the tab three, and tab three is hidden, wouldn't it be cool to just reveal tab three and pop it open?

Chris: Yeah.

Dave: Or whatever, accordion 12.

Chris: I didn't think of that. That's pretty cool.

Dave: If you wanted to find that content on the page because it exists, or maybe you were looking at it and then, all of a sudden, it disappeared. Like, "Oh, where was abracadabra?"

Chris: Wow!

Dave: I think there are use cases for it.

Chris: Okay. Okay. You could still control the hidden attribute through JavaScript anyway. You're still toggling that class if somebody clicks to open it. You can also unhide it.

Dave: Yeah.

Chris: But you're just saying it'll also unhide it with a fine in browser. Oh, that's actually super clever. [Laughter] Dang, but I love it now.

Dave: Yeah. Well, and it just could turn into these sort of super powered UIs. But again, this may be one thing you actually -- hopefully, spicy sections lands before you need to use this.

Chris: Oh, I see. Which one would you want to land first? Wouldn't you want this to land first?

Dave: Well, yeah. I think this has to land. I don't think you want to author this stuff. I don't think you want to be like, "Okay. When I'm authoring, let me think about whether or not somebody has to search this text in here." I feel like you shouldn't have to worry about that. It should just be part of a control.

Chris: Yeah. Does details work like that? Does it auto-open? Probably not.

Dave: Probably not. I think, in that situation, details could be switched to until found.

00:44:33

Chris: You know what else they should do just to complicate this even more?

Dave: Do it.

Chris: I have this on a blog post where there's a details in a details.

Dave: Yeah.

Chris: You can link. I can make the details have an ID, and I can link down to the details. It doesn't just automatically open it, but wouldn't that be nice?

Dave: Yeah.

Chris: If you targeted it, and then it opened up that details, that'd be cool. But let's say that doesn't exist. Let's say I give the details within the details an ID. The jump link to it doesn't work anymore because it's hidden when it's closed, which is unfortunate. So, you'd have to know to open the parent to open the thing.

I kind of want, if I link to it or do one of these hidden until found situations, that it doesn't just open itself, but it opens any parents that it needs to open too.

Dave: Yeah.

Chris: That would be super neato.

Dave: I think that's kind of being talked about. We talk about it Open UI quite a bit because, with pop-ups. If you had a pop-up within a pop-up, like a drill down menu or something like that.

Chris: Yeah. It's got to open the parent too. Otherwise, it ain't going to be visible.

Dave: Yeah. Hopefully, you're not putting linkable content way down in there. [Laughter] But whatever. You have to plan for when somebody inevitably does.

Chris: Yeah. Right.

Dave: But where it maybe matters most is focus. If you have to return focus ten levels deep, what do you do?

Chris: Yeah.

Dave: How does that work?

00:46:00

Chris: Well, now that we're on this, now I need to ask you more questions, right?

Dave: Dun-dun.

Chris: First of all, there was a Zach Leatherman Web component, which I gave just the biggest clap ever. The details utils, or whatever.

Dave: Yeah.

Chris: It adds five abilities to details, and all of them are like, "Yep. That sounds great. Yep, that sounds great."

One of them is, like, force it open or closed at a media query. Genius.

Dave: Mm-hmm.

Chris: Like a spicy section can do, right?

Dave: Mm-hmm. Mm-hmm. Yep.

Chris: But there were others. One of them is change the class on the HTML element, essentially, when it's open or closed. Meaning, if you were using it for page navigation, you could darken the whole background or something because you have styling control at a higher level than just the details element.

Dave: Mm-hmm.

Chris: There are a bunch of other ones, but they're all cool. But then, in his post explaining it, he was like, "I just use the crap out of details." Like everything.

Dave: Yeah.

Chris: Like the nav for Netlify is a fricken' details element. Just details it up.

Dave: Yeah, because Adrian Roselli had that--

Chris: Like, don't do that.

Dave: ...is not a details, or whatever.

Chris: You have a post that's the same.

Dave: Yeah. Well, mine was like why details is not an accordion.

Chris: Yeah. Both of mine -- I felt focused on the summary element because it wipes out the semantics of the interactive element. But if the interactive element says user menu on it, isn't that--? And it's a button--

Dave: Yeah.

Chris: Is that not so bad?

Dave: I think it works. I think Adrian's point in that post specifically about navigations was escape on close didn't exist. Isn't part of details.

Chris: Ah! That's one of the things Zach's things adds.

Dave: Exactly. I'm just like, "Well, that's pretty sweet."

Chris: It kind of fixes it. But then I think that has entered the developer consciousness a little bit, probably thanks to Adrian and you. Not in a bad way. In a kind of like, be careful what you use details for. It's not a replacement for other types of things. Just because it happens to open/close, be careful.

To the point of, I think some people being like, "I'm just not going to use it for anything other than an actual discloser widget."

Dave: Right. I hope I didn't -- I maybe soured the pot a bit.

Chris: Nah.

Dave: But my thing was just like, details very much feels like an accordion. Why is it not? Why is it not? I was just going into that.

But for me, I think the other day somebody was like, "What do you do for that old JavaScript pattern where you make the row of links? Then you have a UL, but the link open the UL if JavaScript."

Chris: Yeah. Yeah.

Dave: You know the progressive enhancement drop down menu thing.

Chris: Mm-hmm.

Dave: Hopefully, I've described that well enough for audio because I was using my fingers here. [Laughter]

Chris: The fingers did help me, I'm afraid. Imagine Dave doing fingers.

00:49:09

Dave: Row of links, and there's a giant elk in the background. There he is.

Chris: [Laughter]

Dave: [Laughter] Okay, so you've got a row of links, and then hidden ULs underneath. Those links actually go to pages. But when the JavaScript binds or mounts, then those links open the UL instead, right?

Chris: Yeah, and that was tricky because it was like, "Do you display none, the UL, or do you kick it off the page with negative left 999 pixels or something?"

The danger was that if they're display none, then they just won't be in the accessible DOMs--

Dave: The accessibility tree. Right.

Chris: Yeah.

Dave: Yeah, and so now there are some other problems.

Chris: Yeah, the problem is if your details is closed, they're also not there. That was Melanie's point in the Discord is that if you are using your screen reader machine to jump you around links and your main nav are links, they're not there.

Dave: Right.

Chris: Until you wrap and define that user menu toggle, toggle it open, and then it scooshes you onto the first link. It could be a little bit surprising. I would think that it's a learning experience. You get it once, then you're like, "Oh, that's how that works. Cool."

Dave: Yeah, well, that's what I like about details is it's a Node JavaScript solution, so if JavaScript fails, well, it's part of the browser so it's not going to fail, I guess.

Chris: Yeah.

Dave: It's more tolerant, but maybe this hidden until found stuff sort of starts factoring into that. Maybe it becomes indexable.

Chris: Oh...

Dave: Or searchable.

Chris: Oh, yeah!

00:50:46

Dave: Inert just landed in Safari. Let's talk about that, Safari 15.4.

Chris: Oosh! Huge, right?

Dave: That's a huge thing, so maybe now these things can be inert.

Chris: Is it reversible too? You chuck Inert on the body when a modal is open and then un-inert a modal, and then you've got focus trap for free?

Dave: Well, you would need a div, like a div right under body.

Chris: A div.

Dave: You need a content div and a modal div - or whatever - or a page div.

Chris: Oh, and you'd kind of side-by-side them?

Dave: Then the page div would be inert. Then your modal div would be--

Chris: Oh, there you go.

Dave: Yeah. Yeah.

Chris: It can't work with children, unfortunately. It has to--

Dave: Yeah. Well... My brain is--

Chris: That's okay. It's all new to both of us and it's in one browser now, right? But didn't Chrome drop it, too?

Dave: I think Chrome has got it, too, now, so I think we're waiting on -- or at least Chrome 101 - or something - or something like that.

Chris: Nice. That's huge. Right?

Dave: That's a big accessibility feature. I think, when you get into keyboard traps and all that junk, it's weird to me they were a requirement when it was so difficult to create.

I think, now, we finally have a tool to do that. Also, we have a tool like display none. It's basically display none, but it's still displayed, sort of, is kind of a good way to look at it. It pops it off the accessibility tree but it still renders, which is kind of like an important distinction. So, like your hamburger menu will still render, or your off-panel, off-screen canvas panel menu - or whatever - will still be rendered so that you can animate it in.

Chris: Yeah.

Dave: There are just so many.

Chris: Oh... whoof! Yeah because animation doesn't like the display.

Dave: Hidden.

Chris: Yeah.

Dave: If you try to animate with display none, it'll just show it. [Laughter]

Chris: Yeah.

Dave: It just kind of does--

00:52:58

Chris: I was always like, "Why does...?" but it does work with visibility. Remember how visibility is somehow extra tolerant towards those behaviors (for some reason)?

Dave: I would read a blog post on when to use visibility because I literally have deleted it from my brain. [Laughter] Because when do you want it?

Chris: I think the biggest one is that if you're not -- I don't know. I think it's animation focused.

Dave: Okay.

Chris: Because it's still trapped. You still can't tab to it if it's visibility invisible. But if you're, for example, going to animate the opacity of it, you never use display because you just can't. You just visibility hidden it instead. But then it doesn't remove it from the flow... or does it?

Dave: Yeah. Yeah, so it'll be like a block in the middle of your page if it's visibility hidden - or whatever.

Chris: Right, but that also gives you the opportunity to then animate it's height or something.

Dave: It has a height.

Chris: Yeah.

Dave: Yeah. Yeah, I would read a blog post on when visibility hidden actually is okay.

Chris: I'm sure I've written it. I just forgot. You know? [Laughter]

Dave: Yeah. That's fair. That's fair.

Chris: [Laughter] Um... Okay. That's a lot. That's a lot of hot drops.

Dave: That was. Yeah. No, anyway, Zach Leatherman's details-utils is pretty cool.

Chris: It is cool.

Dave: It does some of the stuff that spicy sections does, but--

Chris: I would put it in your talk because I think it's one of the coolest Web component ideas I've seen.

Dave: All right. I'm reworking the talk now, so I'll do it.

Chris: [Laughter] I just think what a genius idea to extend. It'd almost be cool to not -- actually. I'm going to stop on my opinions.

Dave: Yeah, well, I think it's -- you know. Just the escape on close, for example. Right? You just don't want to write the JavaScript. No one wants to write the JavaScript. Let's just import this little extension.

Chris: No. What I mean is, is it better to replace an element and slot crap in, or is it better to wrap an existing element and leave the Light DOM in place - or whatever?

Dave: Yeah. I think there's some progressive enhancement you get if you just - whatever. If the details is still there, it still works like a details. It's a little bit of progressive enhancement.

Chris: All right, man.

Dave: All right. We'll power it down. 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 Twitter, @ShopTalkShow, for 16 tweets a month.

Hey, the vanity URL came through, babies. So, youtube.com/shoptalkshow.

Chris: That's it!

Dave: That's it. That's it, babies. Just go there.

Chris: Thanks for nobody squatting on it. Appreciate it. Yeah.

Dave: Yeah. That could have gone real bad, so like and subscribe to that, and don't sign up for the weird marketing conference that is also called ShopTalk.

[Laughter]

Dave: Then, yeah, join us over in the D-d-d-d-discord, patreon.com/shoptalkshow. If you want to buy my blog, it's like $3 billion, but just stop by and send an email.

Chris, you got anything else you want to say...?

Chris: [Loud inhale] ShopTalkShow.com.