Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another hard-stop edition of the ShopTalk Show. I'm Dave--in the shed--Rupert. With me is Chris--in the office--Coyier. Hey, Chris. How are you doing today?

Chris Coyier: Yeah. Yeah, yeah. I was just thinking; I still have the booth, you know. I should just walk over there.

Dave: Still got the booth.

Chris: I just got into a bad habit of not... Being like, "Oh, crap. We've got to do the show. I'll just do it right here at my desk."

Dave: If my podcast studio was not the place I was sitting, [laughter] this would be a dramatically different show.

Chris: Yeah.

Dave: Probably one out of five, we'd make. You know what I mean? [Laughter] If I had to move my butt cheeks more than a foot, it would be a disaster for us.

Chris: [Laughter] Yeah. I don't know. It's already set up, though. Imagine you had I and it's ten steps away. It's already got a nice mic mounted in there. I don't know.

Dave: Yeah.

Chris: I don't know. I'll get there. We'll see how necessary it is anymore, but I miss it a little bit.

Dave: It is. There's something to be said. Like clocking in, right?

Chris: Yeah.

Dave: Showing up, doing the thing, getting in the right sphere. Your physical space can impact your mental space. I think that's science.

00:01:30

Chris: Indeed. Indeed. Yeah, I downloaded a new app today.

Dave: Hmm...

Chris: I was using this one called Beeper for a minute, which is this combined service that tries to smash all your messaging stuff together. I even remember Adium back in the day.

Dave: Yeah...

Chris: It was like a little duck.

Dave: Yeah.

Chris: It was like, "I have five different services, and I just don't want to care anymore." [Laughter] So, I want to smash them all together.

I used to like that. I don't even know that I cared that it smashed the surfaces together. I just kind of liked the UI at one point.

Dave: Mm-hmm.

Chris: Now you go to that webpage and it looks old, buddy.

Dave: Really? Hating?

Chris: Yeah.

Dave: Well, that's such a weird era because it was like Apple had iChat, which was based on Jabber, which... [Laughter]

Chris: Mm-hmm.

Dave: We had, for a brief moment in 2006 or '07, a universal chat protocol, and then social media showed up and just killed it.

Chris: Yeah, right because they already have their own auth - or something - right? So, they want you to talk with other people on their system.

Dave: Mm-hmm.

Chris: Which, in a way, kind of makes sense, like if I was going to build a chat feature into CodePen - in a way. We kind of had one for a minute there. If you're in collab mode, you could open a little chat window and talk to other people that were in there with you.

Dave: Mm-hmm. Mm-hmm.

Chris: My first thought wasn't, "I'm going to use a global protocol for this!" I'm like, "Dude, no. I'm just going to have a chat window and the messages go..."

Dave: Stuffing text into a database, yeah. [Laughter]

Chris: Yeah. For sure, and it worked fine. Nobody was like, "This should be Jabber."

Dave: [Laughter]

Chris: We got zero requests for that. But when the scale gets bigger, then it becomes more, "Maybe you should have." You know?

Dave: Yeah.

Chris: Facebook Messenger now is like a totally proprietary little thing. It's a little weird because it's like what if Threads gets DMs. Then that's weird.

Instagram has its own messaging. They own WhatsApp. That's messaging. They're responsible for all sorts of messaging. You'd think they'd even be incentivized internally to be like, "Maybe we should tie this stuff up a little better with a bow."

Dave: Mm-hmm. Yeah.

00:03:44

Chris: What I was trying to say is that this Beeper is kind of a new Adium, in a way.

Dave: Mm-hmm. Mm-hmm.

Chris: Maybe there were other apps that combined them together, but it does the hard ones. It gets WhatsApp in there, which requires you to scan a QR code and authenticate a thing. Who knows how Signals works? And Facebook Messenger works in there. Your LinkedIn DMs can come in.

It feels like a modern list of places where people actually talk to each other, and then it tries to smash them all into one interface such that you don't have ten apps on your phone just for that. Or you can tuck them away in a folder.

Dave: Yeah. Yeah.

Chris: You're not missing messages because you don't log into certain ones or something. It tries to combine them.

Beeper was alright. I thought they did an admirable job at making it. It just didn't stick with me because it was one of those things where I'm not sure I actually had the problem.

Dave: Hmm...

Chris: I'm not so buried in messages that I want... To me, it was another app instead of combining apps. It was adding a new one - or something. It just didn't do what I wanted it to do.

Then a few weeks ago, I read that Automattic, in their tear of buying stuff, which I think they're just a fascinating company to follow, really--

Dave: Mm-hmm. Mm-hmm.

Chris: --had bought this one called Texts, just Texts.

Dave: Oh, yeah. I saw that.

Chris: Great name.

Dave: Yeah.

Chris: I threw it on my drafts folder, as you do.

Dave: Yep.

Chris: As us bloggers do, you know, and was like, "That's interesting."

Beeper didn't stick with me, but you know, of course, I'll try whatever. So, I just downloaded it this morning, actually, and started setting up stuff. Found a million bugs - and whatever. [Laughter]

I'm like, "Ah... I'm already a little frustrated," but I think the UI is nicer.

Dave: Mm-hmm. Mm-hmm.

Chris: So, it's going to have me convinced in that way. I might give it a shot. Does this appeal to you, this idea of smash apps into one?

00:05:42

Dave: I could see it. You kind of had me at LinkedIn.

[Laughter]

Dave: It just seemed like... Because "What website am I not checking?" But that's probably an important one is LinkedIn.

My wife actually sends me memes. Her TikTok is Instagram, so she sends me--

Chris: Me too. I'm in the same boat. We meme back and forth at least once a day.

Dave: But are you on different memeing platforms with your partner? [Laughter] That's the problem we're having is I send YouTube Shorts and she sends me Instagram Reels. [Laughter] We're just all over the place.

Chris: Oh, I won't. Yeah, she wouldn't even... If I sent her a different platform, she just wouldn't... She would maybe open it out of pity or something, but we just are both on Instagram. We just do that.

Dave: Yeah, so anyway, that would be one situation. I have WhatsApp installed for exactly one person, like an investor, just one person, and that's what they use, so that's what I have to use.

I'm just like, "Oh, man." You know? I'm going to not... That would be nice to not have.

Then I'm looking at Texts like X, old Twitter, man. I don't like logging into there anymore, so maybe that would be cool. You know? I don't know.

Chris: Yeah, if you don't miss a Twitter DM, that could be kind of nice.

Dave: That can be business. That can be, "Hey, come speak at our conference." That's one I kind of don't want to let linger for a month.

Chris: Right.

00:07:15

Dave: You know honeycomb.io where they do documentaries about people? Do you know who I'm talking about? They did the React documentary.

Chris: Yes.

Dave: Or the--

Chris: Who knows. GraphQL, Vue.

Dave: GraphQL. Yeah, yeah.

Chris: Yeah.

Dave: And they did developer people, too. I'm surprised you haven't had one. But anyway--

Chris: Are you listening, people? I need a documentary about myself, please.

Dave: Do the Chris Coyier documentary, please. Everyone is asking about it. A million people come to me with tears in their eyes. They say, "Where is the Chris Coyier documentary?"

Chris: They say that.

Dave: But I think they wanted to put me on one, but I missed it, and then it was like a year later because it went into the trash dump DM folder.

Chris: Right.

Dave: The "You might not know them."

Chris: I like that there's the trash dump and then there's the trash, trash dump.

Dave: Yeah, yeah.

Chris: There's even another--

Dave: Twitter has like three levels, right?

[Laughter]

Dave: It's like people you know, people you kind of don't know, and probably not good. It's just labeled Bitcoin.

[Laughter]

Dave: Anyway, sometimes "opportunities" come through there, and I wish I would have picked up on some of them. But oh well. Maybe this is for me. Maybe this Texts is for me.

Chris: Maybe.

Dave: I like that Automattic owns it. Automattic tends to not... and maybe that's stepping into hot drama--

[Law & Order sound effect, dun-dun]

Chris: Yeah.

Dave: But they tend to not ditch stuff.

Chris: Right.

00:08:45

Dave: But that said, Tumbr has been in the... Yeah.

Chris: It was a bad week for that. Yeah. Of all the... They're so good at it until this Tumblr thing. But I don't think it was Automattic mismanagement. They gave it their all.

Dave: Mm-hmm.

Chris: They spent tons of money. They had tons of staff. They improved the site. They had a good stewardship over it. And it just didn't do what it needed to do. I mean I don't feel like that's an, "AH! I'm mad at Automattic," moment.

Dave: Not mad.

Chris: They're not mandated to burn money.

Dave: Yeah, they did. They gave everyone a free blog to put their weird, furry porn on. [Laughter] And you know, they did what they had to do.

Chris: Yeah.

Dave: And not enough people used it - or whatever.

Chris: Some people blamed them for that, but it was the previous owner that had killed the porn.

Dave: Yeah. Yeah.

Chris: It was gone by the time they owned it.

Dave: Which I think that was a big one. Yeah. I think that was a big, you know, hurt, pain for Tumblr. I think it just was such a sort of out-there, experimental culture. Cutting that off hurt artists and hurt other people.

Chris: Yeah.

Dave: I understand the business decision. You wanted to be on the app store. But I think it's sort of like--

Chris: I never quite got it. I feel not older, but is it just jokes?

Dave: Yeah...

Chris: Or can you be heartfelt on it?

Dave: I think you can heartfelt, live journaling, or just share links, memes, and add comments.

Chris: Yeah. I don't know. It's not like I'm under a rock. It's not like I'm stupid. I just didn't... Ah! If I had a Tumblr... I mostly thought of it as, like, the ultimate goal with Tumblr is a coffee table book. You know? If you had a weird idea, you'd be like, "Ooh, this is a good Tumblr." You know?

I saw this picture of a waterfall the other day that had googly eyes on it and thought it was funny. I was like, "I should be the waterfall googly-eyed Tumblr guy."

Dave: Yeah! Do it!

Chris: [Laughter]

Dave: That's it!

Chris: Not any more. It's dead. It's not dead. It's not dead. I'm sure it'll be fine.

Dave: I think that was where, like, "Stuff white people like," came out.

Chris: Right. I'm sure I have a book of really cool treehouses somewhere that was a Tumblr first. So, in my mind, it's stuck on that.

Dave: I feel like that was sort of it. There are a lot of comics on there.

Chris: Oh, yeah.

Dave: People putting serialized comics, funnies, and stuff like that. I felt like that was just it. I built some Tumblrs.

I feel like I had a Dribble-based Tumblr or something like that. I literally don't remember. Anyway, I know I had some Tumblrs, but it was just like I think you could just... It was a quick way to be like, "I'm going to put junk on the Internet," and I think that was cool. Like less serious mode. It took the serious out of blogging, I think, and that was cool.

00:11:41

Chris: Yeah, okay, so now we have this combined app, and our messages are on there. Although, there are some caveats. I heard some comments like... Apple's one is forever talked about, right, because it's blue bubbles and green bubbles and all that garbage. Right?

Dave: Mm-hmm. Mm-hmm.

Chris: It's an annoying thing that I really wish we could put behind us, so Apple, work on it.

Dave: Well, they're tight on cash, so we can give them some grace, Chris.

[Laughter]

Chris: Right.

Dave: It's a tough market.

Chris: Part of it is that they want to do fancy stuff, like messages does evolve. Right?

Dave: Mm-hmm.

Chris: You can put stickers on messages--

Dave: Fireworks.

Chris: --reply to them, and you can edit stuff. Yeah, and fireworks. There's all this special stuff in there.

Dave: There are lasers.

Chris: To me, I kind of want them to keep doing cool stuff in there.

Dave: Mm-hmm. Mm-hmm.

Chris: Isn't that what we want as tech people? It's tough to call it innovation because it's fireworks in a text area, but let's call it innovation.

Dave: Yeah.

Chris: That was my point with Texts. You're not going to put fireworks in Texts then, right? You're not going to have stickers in the same way that they do. My Instagram groups aren't going to work the exact same way, right?

Dave: Mm-hmm.

Chris: What if CodePen has texting now, too, and we actually execute the HTML, CSS, and JavaScript as part of text messages somehow? You're not going to do that, right? That's weird.

I don't know. There's probably a line where they're draw that's like, "Yeah, we're not going to do that."

Dave: Mm-hmm.

Chris: Then it makes it this smoothed-over texting experience where it's like, "If you send a photo, that's cool. A text is cool, but we're not going to implement all the proprietary crap from all these."

Dave: Well, yeah. They had all the reactions and stuff like that. It's like, "So-and-so liked your post," or whatever. It's, meh, different.

Chris: Maybe. Yeah, I could see them doing that because there are so many. That's pretty common now across the board.

Dave: Yeah.

Chris: I don't know what my point is. It's just kind of interesting. Then it's like should it be--? Instead of somebody like Texts having to come in and be like, "Well, obviously, the world isn't going to agree on a protocol here, so we're going to have to be the glue that glues it all together."

Another way you could attempt to fight this be like, "Can we get back to Jabber?" or have you seen Matrix? That's another one of these, like, "There should be one de-federated, consistent API for messaging, and you can build stuff on top of this. And everybody should get on board with that."

00:14:23

Dave: Yeah. Well, I felt like... Who had... Drew... I'm blanking on the last name... a long time ago, started making a protocol, I think, kind of like a social media kind of protocol to replace email and whatever. I don't know. It'd be interesting.

Chris: Replace email?

Dave: I think it was just like a real-time email or something. I don't know.

Chris: Cool.

Dave: Anyway. Yeah.

Chris: Yeah, that's making me think of the Google thing. What was that?

Dave: Oh, circles? Circle, square, wave. Wave.

Chris: Wave. It was Wave. Yeah, they were like, "What if we invented email today?" And everybody was like, "I am going to watch this." [Laughter] Because it seems pretty interesting. I'll never forget.

Dave: That's a lot of action. That's a lot.

Chris: Gina Trapani, at the time, really wanted it to work. I don't know why I remember that detail so much. She was the editor of Life Hacker at the time.

Dave: Really into it.

Chris: And I think wrote a book on it and stuff.

Dave: Ooh...

Chris: Yeah, but I was like that made me care. That shows that Web personalities matter sometimes. People care what Dave Rupert thinks about technology.

00:15:30

Dave: Hey. I just want to throw this out there. Web components are having a moment.

Chris: I'll say.

Dave: Who's your boy who released a Web components course last year and then a guidebook in January? I'm just saying.

Chris: Ahead of the time.

Dave: Just saying.

Chris: Was this a lead in? We have a question here from Chris Corby who says, "Can you help explain what the situation is with native Web components and JavaScript?" What happens if JavaScript fails to load or if the user has JavaScript disabled? My impression is that JavaScript is required and Web components won't work without it. But I don't have direct experience with Web components myself yet. I like the idea. I'm still waiting to jump in."

He goes on a little bit, but that's the meat of it. Chris, you sent this in months ago, and it's a wonderful week to get to the question. Sorry about the delay there. We're slow sometimes.

There is so much. This is the hottest week in talking about HTML-based Web components that ever was, I'd say.

Dave: Yeah. Yeah.

Chris: By week, I mean we're recording a week ahead, so last week was hot. [Laughter]

Dave: Yeah. [Laughter] So, last week was hot. Then we all went to Thanksgiving in America (when things slow down).

Chris: Oh, we did.

Dave: On the top level, you're exactly right. Web components require JavaScript. If you want to use that custom element like Dave's map, dave-map, you have to say, "Custom elements define dave-map," and bind that to a JavaScript class. That says that's sort of all you have to do.

Chris: Yeah.

Dave: So, is that JavaScript? Sort of it is. It's a little bit of JavaScript. But that's kind of all you have to do to get a Web component.

Then in there, you can have a single method called connected callback that does all your things like bind your click events and inject CSS and then modify text or whatever. That one method, you can kind of just do a bunch of stuff in, but it's up to you how much HTML goes into your Web component.

Jim Neilsen actually had a really good... Excellent blogger, Jim Neilsen, had an awesome post called "HTML Web Components." That's what people are calling them right now. I think Jeremy Keith kind of put that in the zeitgeist here.

He kind of goes through, and he's just like, "Here's how you do it in React."

Chris: Yep.

Dave: You have, basically--

Chris: It encourages props, let's say. You know?

Dave: Props. Yeah.

Chris: A lot of props, and you can pass children in React components, and I do plenty of that. That's why, when I was reading it, I was like, "Well, actually, Jim, I pass children all the time in my components." But then I was like, "But do I, really?" It's not as... Yeah, I get it. It's mostly attributes or props.

Dave: Yeah, mostly props and spreading and drilling and all that stuff, which isn't necessarily bad. I saw some stuff people are saying, like, "Why is prop showing always bad?" You know? [Laughter] I think it's just maybe - I don't know - weird.

But anyway, this is fine. But then you need some sort of server-side thing to render it. Right? But what you can do with a Web component is you can do the same thing where it's all just JSX. It's just going to render on the client. Or you could say user-avatar comes with an image. It has a child element. Then all your thing does... Or is named slots. That's another thing you can do.

Chris: Uh... Kind of. Yeah. [Laughter]

Dave: Then you can kind of add this whole fancy tooltip. You could just use a basic image with an alt attribute as your normal and then add a fancy tooltip on top of that. Anyway, it's just an example. There are a few things you can do in Web components. You can have no HTML, a little HTML, or a lot of HTML with all these named slots that plug into different places.

Maybe I'll write a book... I said book. No one wants a book from me.

[Laughter]

Dave: Maybe I'll write a blog post on it that'll be the length of a book, and then somebody will want it.

Chris: Yeah. Yeah. Sell it for money. You know what I saw? What's the Icelandic fellow's name that we all like? Bulger?

00:19:45

Dave: Baldur Vilhjalmsson?

Chris: Baldur, yeah, has a course coming out that's just written, I think. It's just like a blog post for sale, which I think is kind of cool, in a way.

Dave: Ooh...

Chris: A text-oriented course using only video when necessary. I love that because it seems up my alley. I like video. I have a whole tirade about video I want to do with you.

Dave: Ooh... Give it to me! Yes.

Chris: Yeah, but it seems like a stretch for me. I'm not as good at it as I am at writing, I think. But he's got a new course coming out called "Uncluttered," and it covers a lot of ground. But here's the one-sentence intro. "Free yourself from Node with import maps and test-driven Web development."

Dave: Ooh...

Chris: To me, I didn't go, "Ooh!" I was like, "Eh, that sounds boring." [Laughter]

Dave: [Laughter]

Chris: A little bit. But then I read... He's got a very good landing page for it, and I was like, "Wow! Actually." He's talking about lots of stuff here. It's not just about import maps or whatever. It's about all kinds of Web development, like, give yourself a better life of Web development, essentially.

But it's so fascinating. Elevated import maps to the highest echelon of this pitch for this course. I'm like, "I know what import maps are. I think they're kind of cool. I'm glad that we have them on the Web. But it doesn't seem like this thing that saves us from anything."

Dave: Mm-hmm.

Chris: It's just a nicety, really. I don't know. It's a way to... I get it. It's a step away from build processes - a little bit. But yeah, I'm going to take this course because I'm like, "You're making a strong case here for some--"

Dave: Ooh... This is just the perfect nerd snipe, isn't it? A lot of it is about testing, right? It's what I'm reading on the site here.

Chris: Yeah, and I do not know how that adds into it. But again, I know what test-driven development is. But why is that so vital to this way of development? I don't understand.

Dave: Well, yeah. Now I'm like, "Wait, how does import matches fix texting?" [Laughter] I'm just like, "Wait a minute. How is this--?"

Chris: Yeah, how are those two things even related at all?

Dave: How does this work? Now I've got to know. It's $60 to find out, $59. I can do it.

Chris: Yeah.

Dave: I don't know. I'm curious. Yeah. We have a lot of tests in Luro, and they're all Jest tests, and I'm not a fan of Jest. So, if Jest tells me one more time it doesn't know what an ESM module is, I'm going to just freak out. [Laughter]

Chris: Oh, my God.

Dave: Brother, it's 2023.

Chris: You don't want to be Jest these days. You know? It seems easy, right? It's just expectations.

Dave: Yeah.

Chris: Then you're like, "Oh, but we have to recreate the universe in order to run them." Yikes!

Dave: Yeah, we kind of fake a whole browser every time you write an expect foo to equal bar.

Chris: Mm-hmm.

Dave: We have to run the whole browser.

00:22:53

Chris: Well, we keep... We're like ten tirades deep into this thing.

Dave: Texts, huh?

[Laughter]

Dave: Web components. Where were we?

Chris: We were with Chris and Web components. Yeah, and I love how you put all that. But it turns out that if you had an avatar prop in a React component, maybe just instead of an avatar prop, just put an IMG tag inside the HTML and that's your prop is for your avatar.

Dave: Right.

Chris: You can pluck that out and use it if you plan on messing with the HTML in there, which you probably do. That's kind of the point of Web components. You can grab that thing and move it around if you want to or, like you said, use a slot.

I love the idea of slots. But in this hot week that we're talking about, everybody is so hot on Light DOM, which means, don't use Shadow DOM, which means you don't have to worry about all the styling problems and potentially reaching in with JavaScript problems and stuff. There's just been a little bit of love for the idea of not using the Shadow DOM.

Dave: Mm-hmm. Mm-hmm. And I think I'm for it. I'm like, "Let's explore that world." I think, eventually, we'll come around, like the final answer will be, "Uh, slots are kind of cool," and so any of the extra Chrome you add should probably be Shadow. But I think just showing people that you can do most of the stuff in Light DOM and never deal with Shadow DOM is very attractive to people.

Chris: Yeah.

Dave: I mean people like Eric Meyer, Miriam Suzanne, people who are very good at Internet, very good at websites, very good at CSS, are now considering Web components as a more viable technology for the kind of JavaScript they write.

Chris: Right.

Dave: That says something.

Chris: It does. Also, your muscle memory can start to kick in here. I wrote two Web components yesterday, Dave. You know how I wrote them?

Dave: Whoa!

Chris: They're not interesting. They're a little interesting. They kind of connect to the video thing - if we get to that.

You know how you had muscle memory for jQuery and would be like, "All right. I'm going to write some jQuery. Let's see. What do I do? I type a dollar sign"?

Dave: Dollar.

Chris: Then I put parentheses. Then I'll write a function. I'll write the little DOM ready listener thing, and then I'm going to write a dollar sign to select what I want. There's just a little muscle memory that you're just ready to write it when it came time to write it.

Dave: Mm-hmm. Mm-hmm.

Chris: I feel like you can get there with Web components, too. You really just write, "Okay, well, class Chris component extends HTML element," and then do I need a constructor here? Sometimes a constructor is nice. But if I don't even plan to use this in there, internal methods, which I may not, I don't even need it. So, screw that.

I'll just write connected callback, which is the real magic of Web components, as you've pointed out to me. I really like the idea that it's self-instantiating, like, "Whenever the HTML finds one of those suckers, it runs the connected callback when it's ready to run.

Dave: Yeah.

Chris: Which is very useful. That connected callback, you can put all your code for it in, pretty much.

Dave: Mm-hmm. Mm-hmm.

Chris: If it's just a pretty simple component that just attaches a couple of click handlers - or whatever - or needs to shuffle the DOM around a little bit and get it all ready to look at. You can do all that in the connected callback. It could be the one and only function in there.

I'm just saying you can get to the point where your muscle memory is like it just slaps together a little Web component around the thing you're trying to add interactivity to.

Dave: Yeah.

Chris: Pretty cool.

Dave: I think that's a great place to start. I have a few places in my code where I was like, "Ooh, I'd like to--" like a little filter thing on my bookshelf. Then I was making a new projects page. I was like, "Ooh, maybe I need the filter thing to filter active and inactive projects."

Anyway, it was like, "Ooh, that would be a great place for a Web component." I think it's all using Vite. Yeah, it's using Vite.

00:27:03

Chris: So, here's the thing. I hate that there's nuance to this because I want to eliminate as much of that as I can. But remember a few episodes back -- probably like ten or something -- I was like, "What a footer be a cool idea?" Let's say you have a couple of different subsites, and you just want to share the footer between the two sites. This is still, I think, an interesting idea. But that's where this nuance comes in.

If I want a good HTML fallback, like this question from Chris Corby that we got here, I don't want to have to put all the HTML of the entire footer in my footer Web component. That's not useful then. The idea of sharing this HTML abstraction between multiple sites.

Dave: Mm-hmm.

Chris: I'd rather put that HTML into the connected callback - or whatever - and some big template literal of JavaScript because then when I have different people consuming the Web component, I can say, "Just use the footer. Just slap her on there." Then when we change the footer, we change where you're consuming the component from, and everybody gets the footer updates.

But if you tell everybody, "Oh, use the site footer component but you have to put all the HTML in yourself," you're not getting that much value. It's a great fallback. It's progressive enhancement. Yay, yay, yay. But you're not getting that HTML abstraction then. You know?

Dave: Yeah. That's sort of the weird part. If I have, again, that scale of, okay, here's what you can do. You can do no, just the element. You can do the element with a little bit of Light DOM, an element with the name slots. There's another one where you do the element with declarative Shadow DOM templates, which is basically like you pre-render the template inside the element and then, when the Shadow DOM takes over and injects actual stuff, it'll show up.

Browsers can render with JavaScript off that Shadow DOM template. That's the SSR story. But you kind of need tooling in place to inject that precompiled template.

Chris: Yes! So, I'm only talking about a no-build process. But as soon as there's a build process, then you can solve this.

Dave: You can solve this. Yeah. Where Web components are good is if they have to go to different sites or products, and those teams are delineated inside your company, like team A and team B are working on two different things two different ways. But the footer needs to be the same. Awesome. Let's create a component that does that. A Web component would be a really great choice for that situation, but you're not going to get any of the pre-rendering. It still gets SEO, but you just don't get any of the pre-rendering.

Chris: Yes.

Dave: But if you need more, you could do the declarative Shadow DOM stuff or build tooling for that. But I don't know if you need that exactly. Or maybe you have some dummy content that gets filled in. Maybe it's like you call it the four-column footer, and you have four columns. People can put whatever they want in there. But one of the columns is going to be the Mailchimp form, and we inject that because that requires JavaScript anyway - or something like that.

There are a few. Obviously, it depends on what your situation is.

Chris: Yeah.

Dave: But there are levels of fidelity.

Chris: There are answers for all this.

Dave: Yeah.

Chris: It's pretty cool.

00:30:30

Dave: That's maybe what's most interesting to me about Web components right this minute is there are different ways to do it. Whereas in React or in Vue or in Svelte, there's kind of just the one way to do it.

You're embracing this framework's component model. Your code fits into that framework. Web components gives you just a little bit of flexibility to do it whatever way you need to do it. That's going to give people, yay, good feelings, and that's going to give people bad, bad feelings.

Yeah. Hopefully, you have [laughter] a way to discern those feelings.

Chris: Indeed. Well said. Okay, so okay. We finished the Web component stuff. We have to do that every week. We're under martial law to do that.

Dave: Yeah. Yeah. Yeah, Frontend Masters makes me. It's part of my contract. [Laughter] They make me say that.

Chris: But I am into it. Like I said, I think I got the muscle memory now, and I'm just like, "I'll just slap that together." It'll make reuse a heck of a lot easier.

I almost wish there was... I don't want to have to put it on NPM.

Dave: Hmm...

Chris: That seems like a stretch for me. I wish there was a simpler way to boot it up there. I guess CodePen kind of is because we have those URL extensions, so the JavaScript of a Pen is just the Pen's URL .js. You know?

Dave: Pens are a pretty good NPM vehicle.

Chris: Yeah, so you could just import directly from it. You could use ESM from a Pen URL. That'd be alright.

Dave: Mm-hmm. Yeah.

Chris: Does that actually work, though? Yeah, it should. If you export some JavaScript in a JavaScript file, it can still run on the same page, right? You don't have to import it to then use it, do you? No. Export is just like a bonus keyword.

Dave: Yeah. Yeah.

Chris: You can still call that function on the same page that it's on, right? It just is also exported. Ick! I should know that.

Dave: I think it would be... No versioning, I guess, on CodePen. But most of these are just so small and simple, you don't really need that, though. You know?

Chris: Yeah, like you're going to get the new one. [Laughter]

Dave: Yeah. You're getting the upgraded, new one.

00:32:44

Chris: Not forever. I'll say the new version of CodePen we're working on has versions.

Dave: Ooh!

Chris: It may not even launch when we launch it. To beta, it almost certainly won't. But I will say that even though it's not launched, behind the scenes here, they are in there. You can't just slap versions on later to a product like that - I've learned from my genius co-founder Alex.

Dave: Yeah.

Chris: He's like, "We can't design a system and then later be like, 'Let's add deep versioning to everything.'"

Dave: [Laughter]

Chris: It's like, "No." We had to design... Really, from day one, we've been working on this thing. It's been versioned the whole time.

Dave: Wow.

Chris: It opens up some interesting possibilities. But yeah, even if the UI isn't showing you versions, we'll kind of have them, and they will because it's almost an obvious feature. In a way, this is us jumping ahead and doing some really cool stuff unseen before. And some of this stuff is like, "Yeah, you should be able to invite your friend to a Pen."

Dave: Ooh...

Chris: Like you have been able to do for a Google Doc for ten years. You know? [Laughter]

Dave: Yeah.

Chris: It's a cool feature to me.

Dave: How many Pens are collapsed, right? Yeah.

Chris: Yeah. Yeah, a lot.

Dave: No, that'll be cool. I'll use the heck out of it because I do a lot of prototypes, right? One thing about prototypes that's cool is, a lot of times, prototypes tell a story over time, so you're like, "Here's where we started, and here's where we got to. Which one do you like better?"

Chris: Yeah.

Dave: Yeah, I think that'd be cool to kind of roll back in time and see old things.

Chris: Pretty cool. All right. Well, speaking of blogging, you had an interesting idea here.

00:34:23

Dave: Well, yeah. I guess we could wrap up the Automattic conversation. No takers on the $38,000 blog for life or whatever, 100-year blog.

Chris: Yeah! Did you see that? Fascinating.

Dave: Which no one took us up on the $38,000 sponsor for life. What did we offer?

[Laughter]

Dave: You could be an ad for life?

Chris: Yeah, you're a Patreon member for life. Yeah, you can be in the Discord.

Dave: Patreon member for life? Yeah.

Chris: I'd consider it free, actually. Once you've paid us $38,000, we will never kick you out of the Discord. [Laughter]

Dave: Yeah. I think that's pretty good. That seems like a pretty good one.

Chris: I'd say you're saving money.

Dave: Yeah. No takers on that either. That's surprising.

Anyway, just about blogs. Who was it? anniegreens.lol Anne Sturdivant is the person's name. Just had a good blog post called "Types of Blog Posts," and I thought it was really good. You and I both blog, so I thought we could run through this and see if we do these types of blog posts. Okay? Does this sound good?

Chris: I've already learned a lot. I've never read Annie. I'm so sorry, but I'm going to subscribe to you right away. And I've never seen the software that you build your blog with, so I'm learning lots of stuff. But let's go. Types of blog posts, do we do them or not?

Dave: Yeah. Yeah, because I got through... She references people I do read like Olu and Matthias, and so people I do read.

Chris: Yeah.

Dave: Anyway, the first one is personal anecdote, like you saw something and you want to do a take. Right?

Chris: A take.

Dave: Yeah.

Chris: Yeah, the little... So, it could be news. Like, I read a book? Does that count?

Dave: That could work. Yeah. Yeah, like a personal sort of take, like, "I read a book."

Chris: Mm-hmm.

Dave: Yeah.

Chris: I'm going to say it's my favorite, even though we're only one into this list.

Dave: We're one in.

Chris: [Laughter]

Dave: All right. Okay. Popular bandwagon/trend: Top ten jQuery plugins, React is cool.

Chris: Oh... I was confused at first. That's what it means? Use a thing that's already going around?

Dave: Yeah. Yeah, blog on something that's already going on.

Chris: Twice a year or three times a year, I like that, the "What's your day like? What software do you use?" That tends to go around.

Dave: Ooh, yeah, yeah. I like that.

Chris: What's your desk like?

Dave: I will never... [Laughter] When somebody posts an "Apple software I use," I will never not read it. You know what I mean? I will always read that post if somebody posts it.

Chris: Oh, 100%, 100%. I read one today and liked it, one of these, like, "This is the screenshot tool I use, the color picker I use, the email service I use," which that was the one that was interesting to me. It was like, "Ooh, I haven't heard of that one."

Dave: Yeah. I will.

Chris: It's funny. I literally blog every week a little something about email. It's still on my mind. I still think it's a cool thing.

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

Chris: But sometimes I'm like, "I am so dumb about email." I don't know any of the deep techy stuff around it, really. I also don't know what the whole spectrum of software is that people use. I've got to start interviewing people more.

But yeah, I saw one. Even like Fastmail, which I'm sure the people that listen to this podcast probably know all about. I don't really get it. [Laughter]

Dave: [Laughter] Why do I want Fastmail?

Chris: I've got to look into that.

Dave: Yeah.

Chris: Yeah.

Dave: It's Gmail, but not Gmail.

00:37:50

Chris: We made it two deep, so one more... or there are lots more.

Dave: There are lots more. We've got the takedown, right? So, you're doing a callout. You're doing a sub-Tweet. You're taking somebody down a peg: a company, a corporation, a person. These are probably my least favorite, but they happen from time to time.

Chris: Yeah where you've got to call something out.

Dave: Yeah.

Chris: I feel like, in the meter, I've been a little negative lately. It's not-not me. I'm negative sometimes. But I'm not trying to turn my blog into this yell-y thing. Mostly, happy stuff that I like.

Dave: How many posts [laughter] have the word "enshittification" in your blog title?

[Laughter]

Dave: Cory Doctorow level. Yeah.

Chris: Man.

Dave: I do like those posts, actually, now that I say that. But anyway--

Chris: He was on JS Party the other day.

Dave: Whoa!

Chris: Not JS Party. Changelog, maybe.

Dave: Changelog, yeah.

Chris: Yeah, from that crew. They had Cory Doctorow on. I was like, "Man, he's so good at talking, it's unbelievable." The guy is just a super genius. He knows all kinds of stuff. I love listening to him talk. But it's absolutely not an interview.

Dave: Yeah?

Chris: Have him come on the show and he just says words for 60 minutes and then it's over. You're not influencing the direction of that, those words.

Dave: It's like when you're trying to wait to drop in on a halfpipe. You're like, "Okay. Now... now... nope. Am I going?"

Chris: Eh, em, eh...

Dave: Eh... okay.

Chris: [Laughter]

Dave: It's great.

Chris: Just let him go. It's good.

Dave: Just let him go. Just say, "Wow," every 30 minutes.

Chris: Yeah. Wow...

00:39:29

Dave: The educational how-to is another one. I feel like you do this. You kind of built a business on this. CSS-Tricks is called out.

Chris: Oh, did we skip the "I love you" one? We should--

Dave: Oh, yeah. Back up.

Chris: I love this and so should you. That's the best.

Dave: That's a good one. I feel like you've been doing that quite a bit. I've been trying to do more of those.

Chris: That's all I ever want to do.

Dave: I like this thing.

Chris: Right. And then it allows you to be a little critical, too, I think, if you want to, which wrecks it a little bit, but I like that.

The educational how-to, I didn't mean to cut you off there. That's another type here on Annie's list.

Dave: I would say those are my most traction posts, actually.

Chris: Right.

Dave: If I do a little techy explainer, those tend to hit pretty hard.

Chris: Yeah. People... It can be self-help, like, "I'm going to read this because then I'll know how to do it, and that makes me a little bit better."

Dave: Mm-hmm.

Chris: Whereas if it's just like, "Oh, this is some comic I read," or some video game review, I'm like, "I know I'm never going to have to time for that. Skip.

As far as triggering the click, I can see educational stuff working. I mean, ooh, look. She calls out CodePen and CSS-Tricks in that every paragraph. Oh, my gosh. Thanks, Annie.

Dave: See. See.

Chris: Look at the call-outs here. You should link those up. You know? [Laughter]

Dave: Yeah.

Chris: Put a little anchor tag on there.

Dave: Just a little SEO, right? Yeah. Just a little bit of juice would be good.

[Laughter]

Dave: The experiential reflection is just like you took drugs in the desert. What is this one? [Laughter]

Chris: It could be technological, though. I think Julia Evans does this a lot.

Dave: Oh, yeah.

Chris: The, like, "I've just learned this thing, and I'm going to write about it from the experience of, 'I'm learning it.'" Even though it's the most brilliant technical thing ever that I wish I could write, her approach is still very, like, "And then I did a stack trace of DNS through the Arctic." You're like, "I don't even know what you're talking about, but it's amazing."

Dave: Yeah. Even Lara Schenck. I took that FizzBuzz interview, and that was stupid. That kind of post was a pretty good one.

Chris: Yeah. Yeah.

Dave: That would be maybe bring it....

Chris: Ooh... That was one of the hottest drama weeks on CSS-Tricks history, I'd say.

Dave: Really? Yeah, I mean it hit with me. I was like, "This seems ridiculous." [Laughter]

The sob story, stories of loss, tragedy, painful stories. Those are sad. Those are hard.

Chris: Mm-hmm.

Dave: I bitch about my health a lot, but I don't--

Chris: Yeah. It feels like, "I had trouble traveling," is in this category, too. I read those posts because I feel like they just need to get it out.

Dave: Yeah. Yeah.

Chris: You know? "I have to tell you about how awful this was."

Dave: Yeah. No, I think that's like the sad version of the experiential.

Chris: Mm-hmm.

00:42:28

Dave: But then the wrap-up would be like things of the week, week notes.

Chris: Yeah. You do those.

Dave: I do vibe checks. Yeah, I think that's--

Chris: I like it because it's like, I don't want to think of the title of this post or something. I just want to say what happened.

Dave: Yeah.

Chris: It's like a way out of having to have a big point.

Dave: Yeah. I like my vibe checks and my week notes, but sometimes I feel like I lost some content. I think I maybe need fences around what I post in there so I don't write a whole blog post inside there that I want to reference later and can't find.

Chris: Ah... Good point. Yeah. Make them smaller.

Dave: Yeah, set some guardrails on what you week note about - or whatever.

The research/essay is another one. Erin Kissane's Meta in Myanmar would be a great example. Robin Rendel's essays and stuff like that, those are awesome. I would think that's cool.

Chris: Absolutely. Go big.

Dave: Link list, I guess this is more like top ten jQuery, but you know, newsletter posts, stuff like that. Stephanie Walter's curated weekly UX design tech, that's good.

Chris: Yeah. The roundup is in there. Yeah.

Dave: Yeah.

Chris: I'll tend to scroll to it. I get this one. Oh, my God. Whatever. I'll think of it. It's pretty formulaic. There are a couple of paragraphs of writing at the top. Then this piece of code that you're supposed to debug or something. It has something to do with one of their sponsors. Then a list of ten things towards the bottom of the email.

A lot of times, I'll just scroll right to that because I'm kind of attracted to the, like, "Hit me quick. Give me ten." You know?

Dave: Yeah. There are some. Clive Thompson has a really good link roundup, newsletter thing. Oh, Eric Bailey has a really good one, section... SE1.4.1 - or whatever.

Chris: Mm-hmm.

Dave: Hard to Google but follow Eric and then go to it. It's really good. It's like tech tangential. It's really good.

Then there are only two more here, but crowd-source/people's choice kind of things like, "Hey, what do you guys think of blah-blah-blah?" That sort of post. That's kind of a common one. I think that's pretty popular (if you get responses). I like that idea of, like, there are two hot dramas going on, or explaining hot drama on the Internet could fit into here, like, "This person is saying this, and this person is saying that. Here's the deal."

I read a good one that did that for news. Oh, shoot. I don't remember their name. Oh, it's driving me nuts. Anyway, they basically were like, "Here are five articles," like New York Times and The Hill or something like that, and they basically were like, "Here's a summary of what that's saying. Here's their argument. Here's this person's argument. Here's this person's." Cool. Let's do the rest of the article. I thought that was cool.

Chris: It's like real journalism.

Dave: Then probably this podcast, the pretending to know more than I do/fraud post.

[Laughter]

Dave: This is a good one. I mean we've all seen it.

Chris: Oh, that's funny. That puts this list into weird territory then. If we're thinking of bad ideas for posts, we could probably double the list size - or whatever.

Dave: Yeah. The hustle culture certainly shows up pretty hard.

Chris: Yeah. Here's a new blog post idea. Take Annie's blog post and add more types to it.

Dave: Ooh...

Chris: That's for everybody.

Dave: Extending, the extend-o-rama.

Chris: Yeah. [Laughter]

Dave: That's a new type, right?

Chris: Yeah!

Dave: Got one.

Chris: Yes, and.

Dave: You take somebody's post, and you riff on it. You're riffing on it.

Chris: The positive is, "Yes, and." The negative is the, "Well, actually."

Dave: Ooh... That's good. Oh, there are two variants of it. Ooh, that's really good, Chris. I think we'll have to--

Chris: Mm-hmm.

Dave: Ooh... I'm looking at Annie's history. I'm seeing some Part 4 and Part 5. That gives me the idea of, like, the blog post that turned into way too many blog posts. [Laughter] That's a good one. Then photoblog would be my other one.

Chris: Yeah.

Dave: Just a bunch of photos, please. Those are good.

Chris: Oh, that's a good one. Yeah.

Dave: I'm never going to not like one of those.

Chris: Right.

Dave: There you go.

Chris: There's also, like, "Remember that blog posts can be," as Dave has proven, "one sentence."

Dave: Yeah.

Chris: Probably a little rare, but I like it as an alteration. They can be short, medium, long, anything.

Dave: Yeah.

Chris: All right, everybody. Be good. I know Dave has got a meeting. Hard stop.

Dave: We've got a hard stop. Hard stop, so, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Mastodon because that's the cool one. And then join us in the D-d-d-d-discord, patreon.com/shoptalkshow.

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

Chris: Hmm... ShopTalkShow.com.