Transcript

[Banjo music]

MANTRA: Just Build Websites!

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

Chris Coyier: I'm doing okay.

Dave: Yeah?

Chris: Probably less tired than you are. Just fresh off a plane - I don't know - unless it's a secret. But you're going to do a Frontend Masters workshop on Web components, right?

Dave: Yep. I did it. I happened. I think it went okay. I learned a lot about doing workshops.

[laughter]

Dave: But yeah, no, so kind of a whole day thing on Web components, and it'll be up on Frontend Masters in, I think, like a month or so, so you can do that. Yeah, exciting.

Chris: Yeah. That is awesome. I hope to take it at some point. I'm kind of interested in what the sprinkling story is and stuff for all those of us who work on it. You know it's so rare these days to totally greenfield stuff.

Dave: Mm-hmm. Mm-hmm.

Chris: There are so many people that are hired to work and work on existing websites. And how excited can they be about this? I don't know. My gut is that the story is ready for them.

Dave: Right. Well, and you know they graft into existing things. What I realized -- I just posted a blog post literally one second before the show. [Laughter]

Chris: Really?!

Dave: Yeah. It's seven things I learned about Web components, basically, seven Web component tricks.

Chris: Yeah. Nice.

Dave: One thing I realized, and this is the last point, with Web components you do not need build tools until the stickin' end.

Chris: Oh, at the end.

Dave: You can use -- I can use Lit from Import Lit from Skypack and I don't need a single build tool until I'm going to production. And if you want to, one thing you can do is if you want to use Import Lit from Lit, LitElement from Lit.

Chris: Yeah. Yeah.

Dave: It's called a bare -- what is it? I have the word for it.

Chris: Bare importer.

Dave: Bare, yes. I'm going to find the actual term. Bare import specifier, that's what it's called.

Chris: Okay.

Dave: If you want a bare import specifier, you can actually try to use import maps, local, on development, and I think it works in Chrome - maybe. I'm not sure about that entirely, but import maps is kind of the future for Lit. But okay, my Lit actually points to this Lit file in my repo somewhere. You know node-modules/lit/index.whatever.

Chris: Yeah.

Dave: But if you don't want that, you're going to need something like Vite or @web/devserver or something like that that does bare import specifiers. You probably need Vite or something that does TypeScript as well because some Web components are written in TypeScript or something. Ideally, they have a distribution of some kind.

Chris: You can write Import Lit from Lit, which your bundler will handle later, but that even in development you can have this map thing pointed to some file that exists.

Dave: Yeah. Yeah.

Chris: Whoa!

Dave: You can have it pointed to Skypack and then you have a production import map and whatever you want to do.

Chris: Oh, I like that. That's cool.

Dave: But yeah, it shocked me. I watched a bunch of Frontend Master courses because I was like, okay, how do the pros do it? How does David Khourshid do it? You know, talk about XState.

Chris: Who in turn watched other people do it on Frontend Masters.

Dave: I'm sure. These are pros, but I watched a whole course on Cypress and stuff too. It's like, all right, let's open the command line and blast. Web components, no. You don't need the command line until way later, until you're literally done, so it's just a big flipping of the script. And so, I think that's what's interesting about Web components is they kind of do it different, and I don't think that was super obvious from the outside. Does that make sense?

Chris: Yeah.

Dave: I don't think they tell you that in the packaging, so it was super interesting to figure that out.

Chris: That's great. Yeah. When can the people listen? Is it going to be a minute?

Dave: I think it'll be a month or so. They've got to edit it. They have a talented editing team and all that. Hopefully, I didn't mess up too much that they have to delete the course entirely from their library.

Chris: [Laughter]

00:05:09

Dave: But anyway. The thing I'm not good at, what I realized -- this is another blog post I'm writing, my seven workshop tips. One thing I learned is if somebody asks you a question, a valid question like how do you do X, Y, Z? My brain, my personality is, "Oh, you could totally do that. Let me show you," and I go to try to live code. Then it stops working. Then a bead of sweat forms on my brow. And then I'm like, "Oh, no. But if I search Stack Overflow, I'll look like an idiot." You know?

What I need to do in those circumstances is just say -- I need to be like, "Yes, I'd like to show you that in code, but let's stick to the plan right now and I'll work on it during a break." If I would have just said that, my stress levels would have gone down a million-billion percent.

Chris: Oh, really? Okay.

Dave: Just from, like, I'm not having to pull a demo out of my butt. [Laughter] You know what I mean?

Chris: Right. Yeah, like don't let somebody pull you out of the thing and be like, "Dude, there's a wider audience here that I need to serve."

Dave: Right. Well, and then I have a lot going on in my brain. My brain, my RAM, my brain RAM, which is what everyone has, my brain RAM is filled up with, "I need to get through the whole day doing this course." [Laughter] But if you basically ask me a question, nerd snipe me, my brain RAM stops working or my brain RAM is polluted and I can't answer your question directly because I'm thinking about the rest of the day, the rest of the course. I have that loaded in memory.

Just to all of a sudden go through and be like, "We're changing the plan," that's hard for my brain to do. But maybe I can get -- that's a skill maybe you learn doing workshops or something. You can flex.

Chris: Maybe, or the placement of it. I feel like sometimes I do a talk and then, at the end, I'm like, "Any questions?" And my brain is so ready. I'm like, now you can hit me with whatever maybe because the RAM, the memory has been cleared.

Dave: Flushed. Yeah, you flushed. You garbage collected and now you can accept new questions, right?

00:07:37

Chris: Mm-hmm. Well, check out daverupert.com's new blog post, "7 Web Component Tricks." Wait for the course on Frontend Masters. And we've got a question about Web components here for the show from Troy Vaceloti.

"My question is essentially when to and when not to make a Web component. I'm super interested in this whole world. After making a hefty one of my own, I want to embrace them even more," he says. "That said, I have a hard time deciding when it's responsible to make a reusable pattern on my site using a Web component or if that adds unnecessary complexity from me or even page weight, knowing that JavaScript is involved and such."

For context, this is on his personal website, which is 11ty with Nunjucks templates.

Dave: Mm-hmm.

Chris: "So, I know I could go the route of defining short codes or using Nunjucks macros to make reusable components with the build that doesn't send JavaScript to the browser."

So, he says he can kind of get some value from reusable componentry just by virtue of essentially 11ty includes or Nunjucks macros - or whatever.

Dave: Right. You know, yeah, so thanks, Troy, for the question. I've totally done the Nunjucks include my butt off.

Chris: Yeah?

Dave: And it's okay. It just hurts after enough time or you end up actually -- one negative side effect is you end up very pinned down to Nunjucks or, in my case, handlebars.

Chris: Yeah.

Dave: Or whatever - liquid. I have so much liquid on my blog because I've just templated my butt off.

Chris: I see. You can't pick it up and move that. That's very tied to that technology, whereas Web components is not so much, unless you use the crap out of Lit or whatever.

Dave: Right. Right.

Chris: Then you're tied to that.

00:09:35

Dave: Then you're tied to that. I think where to snap a component is probably just purely on the reusable. Do you want to reuse this? If you think you will reuse this three times, do it. Make a whole component out of it.

Chris: Yeah.

Dave: What regret would you have? Then you pick up and move that somewhere else. I think reusability is a big one. That would be my thing.

I'm trying to think of where I wouldn't. Where I wouldn't is unless you're doing the declarative Shadow DOM thing, which is not supported in every browser, you could end up with a flash of unmounted Web component. Right? And so, stuff like headers, I would probably keep in my template, my HTML templates.

Chris: Yeah?

Dave: Until there's a really good story. Although, you could just do Web component with declarative Shadow DOM and maybe that's good for you. But I would probably just go ahead and do it as an HTML and then, when I get farther into things, do Web components.

Chris: Yeah. I like the question, though, because I do think that thinking in components is the way to go. I've said that a million times. And that pretty much everything on a website is a component. But then what's the distinction between--?

Component, like a very abstract idea, like some kind of representation of a component, some kind of include. If you're working in a JavaScript framework, well then it literally is a component. But a lot of us still build sites with HTML processing tools, essentially.

Dave: Mm-hmm. Mm-hmm.

Chris: Those qualify, too. A Nunjucks macro, I would say, qualifies as a component.

Dave: Mm-hmm.

Chris: You've done the abstraction. You've thought of it in that way. But here's one. You've talked about your bookshelf before and how you used--

Dave: Yeah.

00:11:46

Chris: I think you used Vue Petite, or whatever.

Dave: Petite Vue, yeah. Yeah. Yeah.

Chris: Which you can't even really see, so that's kind of -- you're already in kind of component town there, I guess, because Petite Vue is what crafted the component. For example, you have div class=book.

Dave: Mm-hmm.

Chris: And one div class=book has a title and it has either earbuds or not, depending on if you listen to it via e-book, I guess.

Dave: Yeah, audiobook.

Chris: And then it has some description of it. It has an author. It might have a review. To me, this is like, "Heck, yeah. These better be a component." But it looks like because you're using Petite Vue, then it's not a Web component. But in some alternate future, would you have made a Web component?

Dave: Yeah, totally. This is sort of up for grabs. Right now, it's just looping through thousands or hundreds, I guess, hundreds of books to spit out a bunch of books. Maybe it would be a little more succinct to just do a Web component. There would be a few optimizations I could do. It would just probably be less code over wire - or whatever.

But you know I still have to get that data in there, so it's still going to be there, or I could power it from a JSON that could be crunched up real small. That would be another benefit of Web component or Petite Vue or whatever. I could just do a thing of JSON and that's what powers it.

Chris: Okay. Yeah.

Dave: Yeah.

Chris: Yeah. Hmm.

Dave: You know. I don't know. Right now, it's--

00:13:30

Chris: I need to explore this details concept you have where the actual details part of the details is absolutely positioned and animates in.

Dave: Yeah.

Chris: It is very satisfying. That is a sweet pattern, dude. I love it.

Dave: Well, and it kind of wraps the summary, too. That was kind of fun. It inhales the summary. Anyway, it's a little margin padding top.

Chris: Does it assume the summary is one line?

Dave: Yeah, yeah because it can only be stars. You know? The summary element, yeah. Yeah. I don't know. I just was looking for something lightweight.

Having a whole book review in a single grid FR is not the best experience from reading, but I don't know. It might be cool to do a full dialog kind of thing. You click that and you actually trigger open a dialog.

Chris: Oh, maybe. Yeah.

Dave: And the whole review comes in a dialog or something like that.

Chris: You know if you did decide to not details them because some of them don't have a review at all or something.

Dave: Mm-hmm.

Chris: So, that one is going to be really not tall, and some of them have quite a hefty paragraph.

Dave: Mm-hmm.

Chris: It begs, to me, for that masonry, you know, just grid template rows masonry because, without that, then you have these big white gaps because some are taller than others.

Dave: Mm-hmm. Mm-hmm.

Chris: But with masonry, you wouldn't. I mean I'm saying do that.

Dave: Yeah. No, that's a good call.

Chris: I'm just saying that can be satisfying. I love that masonry, the world's hardest thing to pull off, is now one line in Grid.

Dave: Is that in everything now?

Chris: No, no, no, no.

Dave: Okay.

Chris: But it is in stable Firefox.

Dave: Stable Fox. Stable Fox. Yeah. Yeah. No, it's interesting.

Chris: Okay, Troy. I think you got your answer there.

Dave: Yeah. Hopefully, that helped. I think it's up to you and your situation. You kind of need to know where to snap, and so I wish I had a better answer.

00:15:36

Chris: Yeah. Well, speaking of technologies and such, Amp came up the other day just because it was like -- well, I guess we had a correction, right?

Dave: Oh, yeah. I said Paul Bakaus went to Vercel. It was not. It was Malte Ubl, and Paul went to another company called Koji, which is sort of like a LinkTree kind of thing where people get cool link pages, and they can link to that from their Instagram bio because Instagram doesn't let you do links.

Chris: Oh, right! I saw Glitch was double-down on that the other day. They were like, "You could make one of those out of your Glitch." It seemed like a strange call to me until I saw some data on that and what an extremely large industry link in bio is.

Dave: Oh, it's huge because if everyone is a personal brand, the idea you have one thing, you have one link is kind of old. You have more stuff to sell, so go link to a page that links to all your links. That's interesting, right?

Chris: I know, but the idea that that could employ more than one developer blows my mind.

[Laughter]

Chris: I'm like, it's a pretty micro idea.

Dave: Yeah. It's weird that it's a billion dollar industry - or whatever. Hey, man.

Chris: Hey, if there's money, there's money. It's interesting.

Dave: Yeah. Yeah, there's demand, and making a webpage still isn't the easiest thing. Some people like to just type stuff into a tool.

Chris: We know Paul was involved with Amp and has mixed feelings about it. Basically like, "Man, I was really trying to help." I think. [Laughter] I never quite got the beers with Paul perspective on it.

Dave: Version of it, yeah.

Chris: Yeah, but clearly he was trying to be helpful. It's just the world really did not like Amp, me included, for the record. I had my own thoughts on it that are slightly different than the rest of the world, but it ended in the same place, which is do not like. [Laughter]

00:17:40

Dave: Yeah. I was not into it. Some people made the point, like -- I don't know if I should throw him under the bus or not. I will. Lon Ingram--

Chris: Hmm.

[Laughter]

Dave: Who is a punster on Twitter, he worked for a coupon company, RetailMeNot.

Chris: Mm-hmm.

Dave: He was a big advocate for Amp within the organization purely because he was like, "We can use Googles servers, so we get the SEO benefit out of the bucket, but we save so much on hosting because we aren't the CDN. Our CDN build goes to zero if we use them and we push things that way."

Chris: Okay. And he would know, probably, what their bills were like.

Dave: Yeah. I think he was high enough he kind of had the insight into all of that stuff. On that particular architecture decision, I actually don't super disagree.

Chris: It's just you didn't sign a piece of paper that said that's the case. That doesn't stay the case. It just happened to be the case right now.

Dave: Yeah.

Chris: You could wake up one morning and that could not be the case anymore. I would not build significant technology around a zero promise situation like that.

Dave: Right. Well, and it was so much like, "Hey. You have a website. Build another one." [Laughter]

Chris: That's it, Dave! That's it! That's my thing. I hate that.

Dave: Yeah.

00:19:11

Chris: Every time I end up having to tell the story of responsive design to somebody outside of it because it ends up being kind of satisfying because everybody has heard of responsive design.

Dave: Mm-hmm.

Chris: Like everybody. You know, not to be cliche, but your mom and dad, your grandpa, your grandma, they probably have that in their vernacular somewhere - amazingly. But the story of it was like 10% tech and 90%, "Oh, my God. Now we don't have to have an MDOT team and an iOS team, and whatever team. We can smash them all together into one team." That was the bigger story behind responsive design and how organizations got smashed together.

Dave: Yeah.

Chris: Why on Earth would we ever go back to it? Now we have to have the Amp team. We have to build a second website. That's what pissed me off about every single one of these other technologies is, "Build a second one that's this different thing." I know not everybody did that, and Paul would disagree. I remember going to Paul's website and the whole thing was Amp.

Dave: Mm-hmm.

Chris: There is a world in which you only build one website and it's the Amp website. But I don't like that either.

Dave: Yeah.

Chris: [Laughter]

Dave: Yeah. Well, and you know. Whatever. Man, if you're wired.com and you live and die by Google search results, maybe you do. Maybe you do build up the--

Chris: Yeah. Great. The rich companies can do it and the poor ones can't. Cool.

Dave: Right. Cool. We sure democratized money.

[Laughter]

00:20:36

Dave: How many businesses were just killed by that? Literal. That's sad. Now I'm sad.

But where I got really turned off is, I was working for a large pizza company.

Chris: Yeah.

Dave: And Google came up. They were like, "Hey, we like you guys. We'll give you a free audit." Executives were like, "Oh, yes. Money, money, money." [Laughter]

Chris: Mm-hmm.

Dave: I was like, "Okay. Cool. Let's see how it goes." The recommendations are things I'd been saying for months, like we need to improve performance scores, and stuff like that. Then the last bullet point or page in the slide deck was like, use Amp.

Chris: Ah, nice.

Dave: It spurred this whole question, like org thing, like, "Oh, man. We just were told by Google we need to use Amp." Blah-blah-blah.

It's like, "No, no, I think they're just recommending that, but they're recommending that because they want it."

I think the organization decided to not do it. That could have changed because I think I left around this time, but that felt sleezy to me, too. It was like, "Hey, we'll give you an audit. Oh, by the way, you've got to use this."

It's like you're the doctor and the pill manufacturer. Does that make sense? Is that it?

Chris: Oh, man! It reminds me of my mom. Right? She sells printing. She did her whole life.

Dave: Yeah.

Chris: Literally, physical printing. This is her job because she's in sales, so this reminds me of sales.

Dave: Mm-hmm.

Chris: You go talk to a nonprofit or something and be like, "Hey, let's just take a look at your business. Let's see if I can make any recommendations. Oh! As fate would have it, you know what you need? A bunch of printed stuff." [Laughter]

Dave: Yeah. [Laughter]

Chris: "I think you need brochures. I feel like that'll cure what ails you," but that's kind of your job, right? When it came to my mom selling printing, it didn't feel so slimy because I feel like when you invite the print rep to come talk to you about your business, you're pretty sure what they're going to tell you is to buy some printed stuff. That is already there.

You go to the car lot; they're not going to tell you to buy a bicycle.

Dave: Yeah.

Chris: That's the idea. It's the same thing here. You invited Google to tell you about your website. They're going to tell you to use Google crap.

Dave: Mm-hmm. Yeah. Yeah. And so, it's just -- yeah, like when the doctor and the pill salesman are the same person. You've got to raise the suspicion level.

Chris: There you go.

00:23:02

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Memberful. That's memberful.com and, as always, the link is in the show notes.

You're a developer, right? Let's say your job is to add paid memberships to a website. What's the best way in the world to do that? It's Memberful, of course. They take care of all the hard stuff so you can focus on what you do best, earning revenue quickly. They do all the transactional emails. They're handle it.

Let's say you have a paid Discord community. Integrations with that. You want to send an email newsletter. They have integrations with Mailchimp for that.

Let's say it's a WordPress website and you want to restrict the content of this page and that page and show alternate stuff for non-members. Yeah, of course, they have a best in class WordPress plugin to do all that.

Let's say your stack is anything else. No problem. Memberful is about integrating with your existing stack, not rewriting your stack. They have a full featured GraphQL API with webhooks and OAuth sign-in and all that stuff to make it integrate seamlessly with any stack.

Stripe for your payments, like I said, the transactional emails. "You've signed up. Your credit card is about to expire. Your password has changed." All that stuff, it's a lot of work. Memberful helps you. It handles all that stuff for you.

But you're on total full control. World-class support team behind it all if you need help. You can get started for free, no credit card required, at memberful.com. Thanks so much for the support.

[Banjo music stops]

00:24:32

Dave: We have a question from Swix about Amp.

Chris: Well, he wanted to know about Amp, and then he wanted to know about Core Web Vitals. He didn't even put a paragraph break between those two questions. It feels like they're maybe related in some way, and he's talking about Core Web Vitals, which are kind of a technology in that they measure Web performance. He just wants to know, "Hey, are we still going to be using these things in three years, or is everybody going to move on to some other way of measuring performance that they care about?"

That's kind of up to Google because everybody cares what Google decides to do with SEO.

Dave: Mm-hmm.

Chris: When they tell you that, "Hey, Core Web Vitals has to do with SEO," every blog post about performance mentioned it. Every single one for years now has said Core Web Vitals, because Google cares. And maybe you agree. Maybe you don't. But they kind of make sense as metrics.

Dave: Yeah.

Chris: There is some logic to them. But there's worry about the governance of them, and it does have that same kind of feel as the doctor selling you the pills.

Dave: Mm-hmm.

Chris: They're telling you about performance and whatever they say goes because they're also selling SERPs.

Dave: Right. Yeah. I think Core Web Vitals are here to stay (in some capacity). Even within Google, they have kind of changed. The metrics they think are vital are kind of changing from Lighthouse to Lighthouse to Lighthouse versions. I think we're on version 9 of Lighthouse right now.

Chris: Yeah, and that's a good sign, right, that they evolve and change. Yeah.

00:26:10

Dave: Yeah. If they weren't evolving, we would be messed up. But what's interesting is the weighting changes, too, inside of it. It's like, oh, cumulative layout shift or something is 25% of the weighty. Does an image load in late and, boom, pop your layout? That's 25% of the thing. To me, that's too high. But I do think the vertical--

Chris: Oh, really?

Dave: I do think vertical jank is a problem, but I think if you've intentionally loaded something a little bit later to get the rest of the stuff-- I don't know. It's maybe fine to me, but there are ways around it now.

Chris: Wow. Bold. I hate that one. I would put it higher even.

Dave: Really? Okay. There are just situations I have on my website, Dave Rupert LLC, a billion dollar enterprise. Right?

Chris: Yeah. Yeah.

Dave: I have a random generated job or profile description. I just select two things from a list.

Chris: Yeah.

Dave: My CLS is trashed because--

Chris: Oh, because if it's a really short one, then it'll jank it.

Dave: Well, it pops up after load. It injects the tags after JavaScript runs. So, the first paint has Dave Rupert is a developer... and then I inject the jobs. You know what I mean? I can't do that at prebuild time. You know what I mean? I guess I could run a script in the head, but I'd get flagged for that or something.

Chris: Have you heard of Cloudflare Workers, Dave?

Dave: Oh, my gosh. Are you working for Cloudflare?

[Laughter]

Chris: I just think edge functions are a transformative technology, Dave.

Dave: Hey, look. I'm not a salesman. I mean you could use this affiliate link.

Chris: Yeah.

Dave: No.

[Laughter]

Dave: No, that's a good point. But you know, yeah, I guess that would be my only way around it. It's like add a whole piece of architecture just to appease Google. Not today, Google.

Chris: You know there are other ways. There's min-heigh. You could just make it way taller than it needs to be and whatever.

Dave: Well, the text wraps, and then some words, jobs I have in there, are like 100 characters. Some are five characters. There's really no--

Chris: Yeah. Yeah.

Dave: It's totally random right now - random out of ten. The only thing I can do, and what I will probably do, even though I like this idea of, like, "Here is who I am," I think in my redesign, I'm just going to obliterate it. Boom. Nuke it. It's gone. I have to do something else just to come up with a CLS....

Chris: Maybe.

Dave: That's the problem with metrics is they drive your design decisions, which isn't bad, but you know that's an issue.

00:29:07

Chris: Yeah. Also, for the record, they said, "Hey, it relates to SEO," but they didn't say how much. And the chances of it being pretty high are low. What actually matters is your content and your link backs and whatever kind of secret sauce they use to evaluate content.

Dave: Yeah. Yeah.

Chris: I have a feeling your SLC is not a huge part of that.

Dave: Right. Right.

Chris: Sure, it's factored in. But probably only if it's extremely bad would it even be noticeable at all.

Dave: Yeah. I don't know, man. I post monthly vibe checks. I feel like everyone should be there. But hits are down.

Chris: [Laughter]

Dave: It's fine.

Chris: Okay, yeah, so here to stay. I kind of agree with that mostly because I think there are actually kind of good metrics despite the complication of who they come from and all that. I think they're actually -- I don't know. The metrics, the right thing has arrived, like who cares when window.load fires. That's not an interesting metric, really. It doesn't have anything to do with the perceived performance of the site. It has no direct correlation to how usable the website is or anything like that. That's not useful.

Dave: Mm-hmm.

Chris: So, let's stop caring about that.

Dave: Like kilobytes. Yeah. Just kind of big, vague metrics.

Chris: Yeah. Even kilobytes is not a direct relation, so why don't you measure the thing that actually matters? What they should do is turn your Web cam on and see if you're smiling or not.

Dave: [Laughter] I think Google should do that. They would receive no pushback.

[Laughter]

Dave: Spy seeing on the camera for a quick recording, that would be good. They should do that 100%. Put us in charge.

[Laughter]

Chris: That's right.

Dave: No, but that's right. Web vitals are quantitative, right? But we're missing a big qualitative piece of the Web experience. Did I enjoy that? Was that fun? Did it load in a fast and orderly way, and am I happy that I'm using it?

Long session stuff, I saw some drama about that this week. But are you happy through a longer session even with a slower first page load? Who knows? How are we measuring that quantitative sort of happy or not user feelings vibe?

Chris: Mm-hmm.

Dave: Sorry, qualitative. I got qualitative and quantitative mixed up. They should never have made those words the same.

00:32:01

Chris: Well, we have one from Gaston.

Dave: Gaston?

Chris: Who is Gaston? Was he from Les Mis or something?

Dave: No.

Chris: Oh, no. He's from that--

Dave: Beauty and the Beast.

Chris: He's from somewhere.

Dave: Beauty and the Beast.

Chris: Yes. There you go.

Dave: Yeah.

Chris: God dang it.

Dave: Oh, Gaston.

Chris: It feels like the same time period. [Laughter]

Dave: It is, I think.

Chris: He's making a new blogging platform and wants to know if there's any features that they'd like to see that they don't find in their current blogging platform. First of all, of course, that scares the heck out of me. Not something you throw around, like, "I'm just going to build new software for blogging."

You've got a heck of a path in front of you, Mr. Gaston, but good luck. That's where the existing blogging platforms came from. Somebody decided to build one.

Dave: Mm-hmm. Mm-hmm.

Chris: [Laughter] You never know. You could do it.

I would say nothing jumps to mind. I'm not going to tell you one feature that's going to make you win the blogging platform wars because I don't think it's that easy. I think it's different than that. I think it can't be missing any really major feature because then why would anybody use it. Right? You have to get all the basics right first.

Then maybe you don't even need a killer feature. Maybe your feature is actually more nuanced than that, like you got the performance really right and your software is so fast that I want to use it just because it's fast, or it's so beautiful looking, or you got the UX just right, so it's perfect.

Dave: Mm-hmm.

Chris: I think that stuff is more important than, like, "Oh, man. I wish I had tags that were nested," or something.

Dave: Mm-hmm.

Chris: I guess that's kind of neat, but that's not why I'm going to pick your software.

Dave: Yeah. I wonder what your opinion is, Chris, but you need plugins, like, I want to put Dribbble on my blog. You need some plugin architecture.

You need a theme architecture because not everyone wants to make their own theme. You need SEO. You're going to need some SEO in there. people love that.

Chris: Yeah, which is kind of a real thing. Now I'm blogging, and I stopped caring about any kind of -- like I just have chriscoyier.net, and I'm trying to blog on it a little bit more.

Dave: I've noticed.

Chris: I very don't care about SEO.

Dave: Mm-hmm. Yeah. Yeah.

Chris: I just want to stop thinking about that stuff for a while and have an actual break from this. For a long time, I just always, on every single WordPress site, I just put Yoast.

Dave: Mm-hmm.

Chris: I'm like, it just does SEO stuff. But I was thinking about turning it off because I'm like, "Well, I actually don't care. I kind of want to run this thing as clean as I possibly can," kind of thing.

Dave: Mm-hmm.

Chris: But I left it in because it does some pretty basic stuff like make sure the tags in place are correct, just like the basic stuff that I fee like I'm not focusing on SEO. I just think the page should have a good title and have a good meta description. If you turn it off, then you've got to go in there and code that stuff. I'm like, "You know what? Screw it. I'll just leave it on."

Dave: Mm-hmm. Mm-hmm.

00:35:24

Chris: But, yeah, some SEO stuff probably built into the platform would be a little smarter than leaving it to a plugin, I would say.

Dave: Yeah. If I were to critique WordPress, the fact that to have SEO, which is a necessary feature, or controlled SEO, you have to install Yoast. As good as Yoast is -- love Yoast -- it is very noisy in the UI. It is ubiquitous.

Chris: It's noisy in every way it can be noisy.

Dave: Yeah, and it's trying to get you to upgrade all the time. That's whatever. People have got to make money, and ain't shaming. But maybe that's another way, something you have to think about for your platform is how can plugin authors make money easily - or something like that.

It'd be nice to have SEO built in, but here's what I would wonder. Blocks or no blocks? Does it have to be blocks or block editor?

Chris: Uh... Well, man, you backed me into a corner there.

Dave: I got you.

Chris: Yes, it does have to be blocks. [Laughter]

Dave: It does. I think so, too. I think even simple stuff like you know how Notion does the link embeds. You paste a link and it's like, "Do you want put a little preview in there, dude, buddy?" You're like, yeah, I want a preview.

Chris: Oh, classy. Uh-huh.

Dave: Or if you paste a YouTube URL, it embeds the YouTube. That's kind of cool stuff.

Chris: That's classy.

Dave: That's pretty classy.

Chris: It is.

Dave: You should maybe do that.

Chris: I would say one or the other. Just Markdown all the way home.

Dave: Okay.

Chris: And don't do any of that stuff.

Dave: Yeah. Yeah.

Chris: Or block it up.

Dave: Markdown or blocks, yeah.

Chris: Don't try to do both.

Dave: Yeah. Facebook had a new editor. Did you see that?

Chris: No!

Dave: What's it called? It's called something.

Chris: Like they're releasing for the world or it's just internal to using Facebook?

Dave: Meta... What is the--?

Chris: Of course it is.

Dave: Leverage or something. I forget what the word is, but I'll have to find it. They have drafts.js, but I think this is the next iteration of that, and it's pretty mature, so that might be something to look at it.

Chris: Mm-hmm.

00:37:37

Dave: It has kind of that Markdown text hybrid. I'm using TipTap. I really like it. It's kind of Markdown text hybrid. Almost like GitHub-like shortcuts, like hyphen space, you know, type stuff that produces a bulleted list. Google docs just added that feature, too.

Chris: That's why I use Shortwave, the Gmail client, because as you're authoring emails, it has that kind of--

Dave: The Markdown-y like syntax. Yeah, I think that would be critical.

One feature I would like - - I don't know - here's me dreaming, right?

Chris: Yeah.

Dave: You know your tags and your categories. You know how you use those?

Chris: Yes.

Dave: And then after about five posts, you have 7,000 tags and 32 categories.

Chris: Yeah.

Dave: They're all redundant. They don't make sense. You have WORDPRESS capitalized, wordpress lower case, WordPress camel case.

Chris: Yeah.

Dave: Then you have blog, WordPress blog, software blog.

Chris: Yes.

Dave: If there was an AI that could surf through that and just normalize my taxonomy.

Chris: Suggest.

Dave: Yeah.

Chris: That's a great idea.

Dave: Or as I'm writing the post, just start being like, "Okay, you talked about blogs here. You talked about cats here." God, that would be sweet.

Chris: Yeah.

Dave: Just because I do bad at it, and then I have shame, and then I don't tag, and then I'm missing out on free SEO.

Chris: Kind of. Yeah, I wonder. I sometimes question the value of tags overall.

Dave: Potentially, yeah.

Chris: I don't often land on my own tagged pages, and I'm speaking about my past CSS-Tricks experience.

Dave: Mm-hmm.

Chris: They didn't do super well traffic-wise.

Dave: Okay.

Chris: They didn't -- I didn't find myself linking to them. I question how much people got utility out of them. I don't hate them, but I don't think that it was such an important part of content strategy that it mattered all that much.

Dave: That it made the difference.

Chris: It almost mattered more from an internal perspective, like, "Oh, what have we already published about variable fonts?"

Dave: Yeah.

Chris: I just kind of want to go see and get a feel of the landscape of it. Sometimes, it pointed to problems, like, "Man, we have written about variable fonts like 22 times."

Dave: Mm-hmm.

Chris: "And have no place to link the word 'variable fonts' to."

Dave: Mm-hmm.

Chris: [Laughter] You know? You could have that kind of trouble because they are all just some little news release or something, but nothing that starts with the sentence, "Variable fonts are--" [Laughter]

Dave: Right. Right. Yeah. No, you want almost like a categories, but be able to give them prominence or something, or tags, but you know tagged pages with context or something.

Chris: Yeah. Tagged pages with context. Yeah! It's something we think about at CodePen too. Can a tagged page be more like a landing page?

Dave: Mm-hmm.

Chris: Then perhaps you can think of them as kind of like blessed or unblessed, where some of them are just like, "Yeah, that's the tag." We didn't do anything special there.

Dave: Mm-hmm.

Chris: Some of them are like, "This is clearly popular tag that we're going to doll up. Take it to the nines. Do something awesome on." But the core technology is similar. It's just a tag.

00:41:14

Dave: Yeah. Let me go through my tags on my blog that I do manually.

Chris: Mm-hmm.

Dave: I have #DaveGoesWindows, #HotDrama, #OldCode, CSS, CSSTrick (which has one article in it) -- I'm getting sued.

Chris: Rude! [Laughter]

Dave: [Laughter] I thought I would have more. You know I was optimistic when I invented this tag. It didn't pan out. WordPress (camel case), A11Y, accessibility, blogging, blogging with a comma. [Laughter]

Chris: [Laughter] Whoops!

Dave: Browsers, community, game dev, Jekyll, podcast, productivity, prototypes, prototyping, Rails, review, Ruby, RWD, RWD bloat, sci-fi, sound catching, talks, and Web perf.

I could do better. [Laughter]

Chris: It could be worse. It could be worse.

Dave: It could be worse.

Chris: Yeah, but you did--

Dave: This is me not doing it. There are probably 12--

Chris: You should shore up some of that. Accessibility needs to get combined there, for sure, and the prototyping needs to get combined there, for sure.

Dave: Right. What am I doing? Anyway, I think tags are going to be -- I'm going to elevate tags, I think, and that'll encourage me to do it in my redesign (just a little bit).

Chris: Yeah, there you go.

Dave: Just a bit.

00:42:30

Chris: I almost think of hotkey has two billion tags, right?

Dave: Mm-hmm.

Chris: Surely. I don't know. But they're always really fine-grained, I feel like. Then he uses it. It becomes content. He's like, "Oh, but remember the last time we showed a video of--"

Dave: A guy petting a turtle. Yeah. [Laughter]

Chris: Guy singing a song by blowing through... yeah. [Laughter] Here are nine other turtle petting videos because he's just got so much content.

Then you're like, "Oh, my God. That is a thing! What is up with turtle petting?"

00:43:02

Dave: Yeah. It's just so many videos. Yeah, don't get me started. I'm in a YouTube vein. Sorry, we've got questions.

Chris: Mm-hmm.

Dave: I'm in a YouTube vein about tall grass. It's extreme mowing, lawnmowing. It's so ASMR. It's just these guys who do good. One day a week, they take off, and they go mow somebody's yard who is too big and has a city violation. They just help them out. He's just like this guy, Al Blades, over on YouTube.

Chris: Oh, that's great. Like At Dawn We Ride kind of vibe?

Dave: Yeah. We just go knock on a door and say, "Can I mow your lawn? I'm making a YouTube." And the economy there is sweet because he gets a YouTube that gets a million views.

Chris: Yeah.

Dave: And that person gets their yard mowed. Frickin' great. You know?

Chris: That's great. You always got all the best YouTubes. I remember when you got me on the one of watching the guy fix traffic problems, and the website.

Dave: Oh... Ooh, buddy. Yeah.

Chris: [Laughter] Those were good.

Dave: That one, I watched so many I maybe had to give up. There's another one in that same vein called A Real Engineer, and he is an actual engineer. He's British, so it's funny.

Chris: Yeah. [Laughter]

Dave: He plays all these games, all these city simulator games, and he just builds the dumbest stuff. He made a giant poop filtration plant. [Laughter]

Chris: [Laughter]

Dave: It's like the size of a volcano. The poop just falls down the mountain. Anyway, he's just like, "I think that's great. I think I solved it." Anyway, there are so many.

00:44:38

Chris: I got a great YouTube idea for us. We've got to do this. It came up in a meeting yesterday.

Dave: Where you and I go and mow people's lawns? Because I'm in. [Laughter]

Chris: [Laughter] I do like that concept, but--

Dave: Okay. We could go fix people's websites.

Chris: Do you have Copilot installed or not? Are you on the Copilot train?

Dave: I do have Copilot.

Chris: Yeah.

Dave: Yeah, well, I have it installed, but I turned it off immediately because it was very noisy.

Chris: Noisy is....

Dave: Yeah. It was like, "Hey, you mean this, right?" I was like, no, and I don't know how to make you stop saying that. Escape, I guess. I don't know.

Chris: I frickin' love it. So, I'm on this other journey, too. I'm trying to learn Go because we use it a lot at CodePen, and I don't really actually know it that well. And by not well, I mean pretty much not at all.

Dave: And how is it... going?

Chris: Good. I'll have to keep reporting in, but I'm doing Go by Example. I'm doing the tour of Go.

Dave: Mm-hmm. Mm-hmm.

Chris: I'm trying to order a book and just hit it from lots of angles, but also try to do ride-alongs and so some professional Go stuff, too, so I see not just like, "Here's how you do-- There are arrays, but in Go, you'll find you'll use slices more."

Dave: Oh, wow. Okay.

Chris: Like this theoretical stuff.

Dave: Yeah.

Chris: Anyway, it's interesting with Copilot in there because it's more than happy to help you with your Go exercises and stuff, but it's a little pushy, and I really wish there was a setting to turn it off for comments. Please let me know if there is a setting for that because when I type // or # or whatever language I'm on, and I'm about to type a comment, I do not want your help ever, never, not once.

Dave: Mm-hmm. Mm-hmm.

Chris: Please don't suggest what I'm about to do because this is very English languages. Comments are in my own voice. It's not a code thing. I'd love it if it would stop with that.

But I was talking with Rach at CodePen the other day, and she compared Copilot to a friend who is really trying to engage with you but they're actually super obnoxious.

Dave: Yeah. Yeah, yeah.

Chris: Finishing your sentence all the time. She suggested we try it, and I think we could pull it off where, like, I'm Copilot and you're just kind of trying to talk through your code, and I'm just interrupting you every second to suggest stuff.

Dave: Yeah. Dude, you have that friend in your life, don't you, where you're like, "Oh, yeah. I went to the..." "Store, right? You went to the store?" [Laughter]

Chris: Yeah. [Laughter] Yeah.

Dave: No, I was going say--

Chris: Fish....

Dave: I don't remember what I was going to say. The mall? I went to--

Chris: Oh, I don't remember stuff either. [Laughter]

Dave: No, hold on. I-- [Laughter] Yeah, that's good. And just code that way in real life.

Chris: We have to practice it to get it right. Yeah.

Dave: Just an aggressive Copilot. That's great. Yeah. I love it.

00:47:21

Chris: And I'm trying to do the thing where I type all the characters myself, so I should just turn off Copilot, but whatever. I can't be troubled to click buttons. But so many people have done the exercises from the website, Go by Example, that you can just start typing.

Dave: You have the whole Go by Example. Yeah.

Chris: The first few characters, yeah. It just goes, "Ew!"

Dave: It's in the training data?

Chris: Yeah, because so many people--

Dave: Yeah, beautiful.

Chris: Yeah, for sure.

Dave: Oh, good.

Chris: For sure. And you know part of it is fine and part of it is now fine. So, this gets in my mind about how the syntax is less -- I don't want to say bothersome, but it's typed, and I don't even use TypeScript, so I have not experienced much typed languages. And it's really typed. You know? I mean I don't know if there are degrees of typed. I'm sure there is, but for example, you type func. That's a function. Then you give it parameters of the function, and the parameters are typed.

Dave: Mm-hmm.

Chris: Of course they are. That's what type languages do.

Dave: Great. Yeah.

Chris: But then after the parentheses, the first set of parentheses, there's another set of parentheses where you type what the function is going to return.

Dave: Sure. Okay. Yeah. Yeah.

Chris: Which I think that's just part of the nature of it too. And it gets so weird that if you describe what it's going to return really well, at the end of the function, you can just type the word "return" and it's just implied that what's going to be returned is whatever you've typed at the top of the function.

Dave: Yeah.

Chris: It's called a naked return or ghost return or something. I can't remember. I'm like, "Whoa! That's super weird."

I mean it also warns you, like, "That's not a particularly good style," but still--

Dave: Yeah.

Chris: --you can do it. You know?

Dave: Yeah. Yeah.

Chris: But a lot of that stuff, GitHub Copilot is really helpful with. So is Prettier. Prettier is great at formatting your Go code just fine. And so is the Go extension for VS Code is super helpful.

Dave: Mm-hmm.

Chris: It squiggles the crap out of stuff when it needs to, and it tells you exactly what's wrong. Between all those things working for you, the language is fine. It feels good and wouldn't say normal. I have a long way to go to get it to understand all the syntax stuff that's happening and how I write good code and yadda-yadda. But the fact that I'm doing it in VS Code influences highly how I feel about it.

Dave: Okay. It's compounding your education for good. It's a multiplier, right?

Chris: It's mostly good and a little bit like, "Am I actually learning anything?" because this is so helpful. [Laughter]

Dave: Am I just hitting the tab key or am I learning something? Yeah. Yeah. No, that's cool. I'm curious about how Go is going. Rust is on my radar, but I'm not going to--

Post workshop Dave is trying not to pick up new hobbies. If I do, it'll be code a video game or write shitty science fiction. Those are my two vacuum fillers that I'm allowing. I don't want to learn another back-end language.

Chris: No. I mean I'm doing it because I think I will be helpful to the company that I run, and I have a little more free time than I used to before, so just kind of a choice like that.

Dave: Yeah. No, that's--

Chris: I do think, the more I use Copilot, though, and jump around languages, I do feel like, "Holy crap!" I know there's Tap 9 as well.

Dave: Mm-hmm. Mm-hmm.

00:50:49

Chris: But I think we're at a moment in time when these are changing the world of coding. It is going to have an actual impact on the world. It's not just a fun little game.

Dave: Well, and I respond so well. I think I've realized I'm very visual, and so if somebody showed me an example, I could be like, "Okay, that's it. That's the one. That looks like it's doing the right thing."

Whereas if you're just like, "Invent the code that does this," I'm like, "Oh, okay, hold on. All right. Here we go. I'll get there." You know?

But I think I might do really well in a Copilot environment rather than Googling syntax every time I forget a function. It just kind of suggests stuff. That would be kind of helpful. Interesting.

Chris: Interesting. Interesting, indeed.

Maybe we should wrap it up there, huh?

Dave: Yeah, we can wrap it up.

Chris: Cool.

Dave: We've got lots to talk about here going forward. We've got some more guests coming on in the future, I see, so that should be good.

But 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 for 16 tweets a month and join us over in the D-d-d-d-discord, patreon.com/shoptalkshow.

Oh, and we have YouTube. They should be kicking up again. We haven't talked about it much. But anyway, that's YouTube.com/ShopTalkShow. We got the vanity URL right there.

And... Chris, do you go anything else you'd like to say?

Chris: ShopTalkShow.com.