Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode 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: Absolutely fantastic. Same-day edition of ShopTalk Show. We're recording this on Monday, July 31st, 2023.

Dave: What news can only happen today? [Laughter]

Chris: Oh, my gosh. I don't know. I'm more slow. I'm in more of a slow state of mind, you know, having just fresh back from a trip. I was just in Alaska. A wonderful time. But yeah, I managed to turn off pretty okay.

Dave: Yeah.

Chris: For me, anyway.

Dave: I didn't see you online much, which that's pretty good.

Chris: Yeah, pretty good.

Dave: I think once or twice I saw you.

Chris: Yeah. I like to, sometimes just to relax, I find just looking at our Discord and scrolling through the memes and stuff is fun and not like I'm forsaking my vacation to do that. You know? Like, whatever. I think fun things. [Laughter]

But if you start looking at social media and, all of a sudden, you're mad about a celebrity or something, then you kind of are somehow screwing up your vacation. You know? [Laughter]

Dave: Yeah. I mean I guess, today, Paul Reubens passed away, so that's--

Chris: I saw, 70 years old, yeah.

Dave: Which is too sad. But you know it's just kind of... I have this theory, Chris. This is my wild brain here.

Chris: Mm-hmm.

Dave: We are... I don't know. We grew up. We had all these idols. We've seen all these movies. All these famous people are in our sphere: rock stars, actors, and stuff.

Then we all get on the same website. Then it's like, "Oh, we're interacting with this popular person. Then they pass away. That's too sad.

I'm like, that should not occupy a minute of my heart. You know what I mean? Most famous deaths shouldn't even concern me in the least. Shouldn't earn a tweet.

Chris: Right.

Dave: But for some reason--

Chris: Sometimes it blows my mind just how ready these publications are for this type of news. You know? I immediately clicked on some... whatever Paul Reubens article. I couldn't even tell you what the publication was now, but it was nicely laid out. It had nice typography, and it was really well written.

This isn't even commentary about AI, although I don't doubt that it helped to some degree.

Dave: Yeah.

Chris: Because of just how quickly it came together.

Dave: It spin up an obituary, a bio.

Chris: Maybe I'm the right age for it, but I immediately was browsing for the, like, "Are you going to mention all the weird stuff that happened in his life?" I think I'm the perfect age that remembers that there was a good couple of years there of just all Pee-Wee Herman jokes.

Dave: Yeah. Yeah.

Chris: Because apparently, you know, he took his bird out in a theater, or whatever. That was... I don't know if it would even make the news these days. You know how crazy the world has gotten.

Dave: No!

Chris: He was super-canceled there for a minute.

Dave: He got shut down.

Chris: Yeah.

Dave: Didn't have his kid's show.

Chris: But then he hosted the MTV Music Awards or something.

Dave: Mm-hmm.

Chris: Not terribly long after that, and he walks up there and goes, "Y'all hear any good jokes lately?"

[Laughter]

Chris: Which is just a tremendous way to get ahead of that one.

Dave: Excellent self-deprecation.

Chris: Right.

Dave: Yeah. Anyway, yeah, it's just funny.

Chris: He's not Michael Jackson. You know? It's not that complicated. Anyway--

Dave: Yeah. Yeah.

Chris: Sad. Great show. Great movies. RIP, buddy.

Dave: Yep. Anyhow, that's proof that this is happening today. [Laughter]

Anyway, but no. When you go away, you're like... It's weird, right, because you're relaxing. But you... What do you do when you relax? Oh, you whip out your phone and you look at TikToks or Twitter or YouTube or whatever. But then that's what I do when I'm not relaxing, so what am I doing wrong?

[Laughter]

Dave: How do I stop that?

00:04:31

Chris: Yeah. You have to let your mind. I think that's how Europe has it so right, don't you? That first week of vacation is just getting your brain ready to relax.

Dave: Yeah.

Chris: Then you spend another week or two actually relaxing.

Dave: Yeah.

Chris: Then you can go back. But our little one-week crap in the U.S. is not doing it.

Dave: No, I don't think it's sufficient. I think it's broken. I do think that's the way to do it because even with my kids this summer. It's like they've been playing a lot of devices, a lot of Roblox and stuff like that. But I'm also just like I want them to hit the end of it. I want them to play so many video games that they're bored. They're just like, "Gah! I can't stare at that iPad anymore because I just can't." You know?

My daughter kind of hit that limit. She comes out, and she's just like, "Ugh. Man. What a weird day." And I'm like, "Yeah, because you just haven't moved. You're sitting in a dark room on your iPad."

Chris: Yeah.

Dave: I just want people to get to the end of their weird binge. Feel the pains of boredom.

Chris: Wasn't it just our dear editor, Chris Enns, who had a good point about child rearing and the TikToks and stuff? I think somebody said, like, "Oh, I'm just catching up on TikTok or something."

Dave: Mm-hmm.

Chris: You can't say that anymore in a world of infinite scroll. There is no end. You can't catch up.

Dave: Yeah. True.

00:06:09

Chris: Very interesting. All right, well, what else is happening in the world of technology? We do have some questions we can get to. We love it when you send those in. You can go to ShopTalkShow.com, and there's a thing.

It's not even just questions. I do like a good question. Those are fun. I think that we get less of them these days. I think people have faster ways of getting answers to their questions than waiting X weeks.

Dave: You mean like six weeks?

Chris: Yeah.

Dave: Six-week delay on a podcast isn't the best way to get an answer?

Chris: Right. No. It maybe used to be, though. Not that they were sitting around holding their breath until they got the answer, but it didn't feel so weird to possibly send that in.

Dave: Mm-hmm.

Chris: Now it's just not happening. We don't get a lot of honest to God just questions. It's much more, "I'm thinking about this," or "I hope you will talk about that." It's more of a topic request kind of thing, so maybe we should even update the website. What does it even say anymore?

Dave: Ask a question.

Chris: It doesn't say anything. Does it? Yeah, please send in questions or topics.

Dave: Topics, okay.

Chris: Topics are better almost.

Dave: That works.

Chris: Remember we used to ask for MP3s, too. We said, "Go record it and do that."

Dave: I would still take an MP3 because it's better audio. Better audio if somebody's voice is on there.

Chris: Yeah. People used to actually do it, too.

Dave: Yeah. Yeah.

Chris: Times have changed.

Dave: Very cool.

Chris: Even though it's even easier now than ever. I'm sure there are ten websites where you can just hit a button and get a URL to your audio recording. Oh, well. Oh, well. Not to dwell. Too much meta. Too much meta. Let's do one of these questions. Why not, while my brain is getting limber and thinking about other things to think about.

Ariel Sare writes in just a really quick one about WordPress. "Is create-guten-block the future for us WP developers?"

Create-guten-block, if you haven't seen it, I believe this is the one that whoever -- would you say Automattic? I don't even know anymore if they are the producers of this or just some contributors to the WordPress Open-source Project -- created this thing so that you can basically NPM install, like create-react-app. I'm sure a lot of you are familiar with that one.

It was a way to get started and not have to worry about configuration and what dependencies to pull in and such. This scaffolds out for you. They block for your WordPress websites. And I've used it. It's pretty well done, I think.

00:08:38

Dave: Yeah. That project, create-guten-block, was closed down, and it's now @wordpress/create-block.

Chris: Okay. That's probably what Ariel meant, though. There's some official. Oh, yeah. I see. Create-guten-block was the one by, yeah, Ahmad, who is awesome and did a great job with create-guten-block, and was probably, frankly, relieved to have WordPress Project take over on that.

Dave: Yeah.

Chris: It's called @wordpress/create-block, but the same kind of thing. It scaffolds out a block for you.

Now I put this question in here because I think it's worth noting that if you're building a WordPress website, even from scratch, the chances that you need to custom build blocks for it, I think, is super low.

Dave: Okay. Yeah.

Chris: Like 99.95% of all (even custom-designed) websites for WordPress don't need a custom block.

Dave: All right. Okay.

Chris: You just don't. There's a million blocks that are built in. There are lots of plugins that add blocks to it. Jetpack adds a ton of blocks to it. The chances that you need a custom block are really low.

Dave: When do I need it? When I create some special content thing?

Chris: Yeah, I guess.

00:09:55

Dave: When would I need it?

Chris: You're trying to give people that build content for WordPress sites a special experience for building that content. Let's say you're building a real estate, you know, Rupert Real Estate website, and you're going to give some people the ability to create--

Dave: Favorite their properties - or something.

Chris: Yeah.

Dave: Yeah.

Chris: Sure. You just create a grouping of properties or something.

Dave: Yeah.

Chris: It's really unique, so you're in the middle of writing a post. Uh, this is a beautiful, two-bedroom, down on the lower east side that has some grass - or whatever. Then all of a sudden, right below that, you want to add five more houses that are relevant - or something like that. But it's really specific, so you want to build a search form that allows people to append other properties to it.

You're like, hmm... There's really no good block for a search form that finds other custom properties on this very website and allows me to build a grid of them or something. That's just really a specific authoring concern.

Dave: Yeah. Yeah.

Chris: You'll be like, "I'll build a custom block for that." Okay. That kind of makes sense.

I had one. I wanted to build one for CodePen embeds.

Dave: Mm-hmm.

Chris: I was like, "I want you to paste a URL to a CodePen embed and then have some options and stuff, like - I don't know - how tall is it? Do you want to show the code or not show the code?" and stuff like that.

I'm building that to give to you. It's a really specific authoring concern. And I had one for CSS-Tricks because we showed blocks of code in a really specific way.

Dave: Mm-hmm.

Chris: I wasn't happy enough with the built-in code block.

Dave: Mm-hmm.

Chris: I wanted to see the syntax highlighting right in the back end. I wanted to see that it came out right. I wanted to pick which language it is. I wanted to highlight specific lines of code. When I hand-built it, I could build those options into the block.

Dave: Yeah.

Chris: There's a little sidebar of options that you get to control. That was perfect, so it's about building specific authoring abilities.

00:12:13

Dave: Yeah. I feel like if I'm projecting correctly -- it's been a while since I had done a WordPress site -- any place you would maybe have used a short code or something like that--

Chris: Oh, here you go.

Dave: --maybe that's a good... that's a chance where you'd need to create a block, right? Or that you might want to so that it shows up rich in the editor interface. That's where my brain goes to, like if you're going to use a short code before.

Chris: Sure. That's a great way. Yeah.

Dave: But looking back, I've maybe written five short codes ever.

Chris: Right.

Dave: It's not something as when I was--

Chris: Most short codes, you didn't write.

Dave: Right. It was a gallery.

Chris: Given to you.

Dave: Recommended.

Chris: Yeah.

Dave: Or CodePen.... Yeah.

Chris: Crucially, a short code had attributes just like a React component has props or whatever Vue calls them. They're probably still props.

Dave: Props, yep.

Chris: You sent in information. You said, "Oh, the ID is 372, and the style is card." You send all this stuff through. That's how short codes worked.

Rather than that janky experience of having to essentially write attributes, they become little inputs, selects, radio buttons, and stuff in a sidebar. It's just a little nicer.

Dave: A little nicer, yeah. Hmm...

Chris: That's it. Is it the future for creating blocks? I'd say yes, that's the endorsed thing. If you need to absolutely create a custom block just for a website, you might as well use that. You don't have to but it's nice.

Dave: Yeah. Yeah.

Chris: Weirdly enough, they are React components.

00:13:53

Dave: See, that's the part I don't understand is how that code shimmies in and gets transpiled or DJSX'd. Are they just doing JSX on the client, or what are they doing?

Chris: Yeah. Well, on the client I don't know. It gets built into not React.

Dave: Oh... Okay.

Chris: Just Babel - whatever.

Dave: Okay, so there is a build step in there. Okay.

Chris: There is a build step and that's what you get. You get an NPM run dev - or whatever - so that it's constantly watching as you're working on your component. That's the nice part. It's like a modern dev experience for WordPress. I kind of dig that. Cool. Well done.

Dave: Yeah. Yeah.

Chris: What I was shocked about is since Ariel is asking about the future, I was always so stunned that the experience... It almost should have been the other way around. What am I thinking of? The famous plugin that adds custom fields, Advanced Custom Fields.

Dave: Advanced Custom Fields.

Chris: Somehow, they came out with a way to make custom blocks with Advanced Custom Fields in which that the authoring experience of creating one is in PHP.

Dave: Mm-hmm.

Chris: It's just really simple PHP code, and you use their backend to enable it and all this. That should have been how WordPress did it, clearly. To add this, you have to write React thing is crazy to me.

It should have been the other way around. If you want to write it in React, you can. That's a third-party thing because there are lots of React devs out there. People like the React authoring experience, by and large. That should have been the third-party thing, but the PHP way should have been the default WordPress way. It's just totally flipped around backwards to me.

Dave: Yeah. Weird.

Chris: Weird.

Dave: Hey, Web components should have been... Anyway, um...

Chris: Ah-ha-ah! Yeah, right?! We have the president of Web components here. Why wasn't that the--?j

Dave: Oh, look. I'm Barack--

[Laughter]

Dave: --Shadowdomobama.

[Laughter]

Dave: Look. We could have. We could have had Web components but we didn't. [Laughter]

Anyway, I'm going to work on my Barack Shadowdomobama a little more, so I need to re-listen to his biography.

[Laughter]

Dave: Because, really quickly, he turns into Bernie Standards, and so that's really hard.

Chris: At the pause, you had it good there, I think.

Dave: Well, every statement starts, "Look. Uh... so, I talked--" Yeah. I'll work on it. I'll work on it.

Chris: Good. Can't wait.

Dave: Barack. Shadowdomobama, the president of Web components. [Laughter] Oooh... That's fun. Yeah.

00:16:48

Chris: Good stuff. You had a blog post about that. Did you want to mention that really quick? There's kind of the... You itemized why they didn't do so well. You probably said it on this show many times, but it's nice to have a URL now that's like these are the exact reasons why they didn't do so well.

Dave: I should do that more because it was very successful from a content production standpoint. I gave a talk on Web components at Austin JavaScript last month, which is pretty cool. Meetups are back, and that's phenomenal to me.

Chris: Right.

Dave: I came back from my vacation and went straight into giving a talk. It was really cool. It's weird to be back doing meetups and stuff like that, and a lot of people had good questions. Just like, "Why would I use them?" or "What's the deal? Why did it take so long? Why did it take ten years for them to come out?"

Remy Sharp, @rem--

Chris: Yeah.

Dave: --kind of asked that, too, on Twitter and Mastodon, just kind of like, "Does anyone have a hot take why Web components has taken a decade to get traction?" I just kind of was like, "I have this in my talk but I haven't posted it out."

I have so many opinions that I joined the Web components community group, which is a group that tries to fix all these problems. My five theses -- and let me know what you think about this, okay?

Chris: Mm-hmm.

Dave: Here are my five reasons, top five reasons -- this is David Letterman -- top five reasons Web components are not popular. Ready?

Chris: Yep.

Dave: Few low-level designed for framework authors. Agree, disagree?

Chris: Agreed. I was told so much because the few times I did it early on, I was like, "Man, that's a lot of weird stuff and boilerplate and stuff." They're like, "Oh, you weren't meant to actually write that. These were designed for somebody." You know? I was like, "Really?!"

Dave: I make websites every day. Not designed for me? That's weird. Right?

Chris: Well, what else in the Web platform is like that? Nothing.

Dave: Yeah. Anchor elements. Nope, we don't use those. That's not for everybody. [Laughter]

Chris: I was like, "Oh, it's cool to not need a tool." That seemed like a neat thing to me (for somebody who is always kind of interested in what's the no-tool version).

Dave: Mm-hmm.

Chris: It's like, "Nothing, I guess."

Dave: Yeah, well, and that's what's weird. So, it's built for framework authors, and then it comes out, and then framework authors are like, "No thanks," because I have something that works and adding this would make it not work. It would be a breaking change to upgrade this to use Shadow DOM in Vue or convert all Vue components to Shadow DOM.

Chris: Yeah. to this day, there's no super popular framework that does it, really.

Dave: That does it by default, yeah.

Chris: It's like, if you make a component in this... yeah. Okay, so agree on that one. What do you got?

00:19:49

Dave: And so, the second one was heavy-handed advocacy, which created a marketing problem kind of from Google. Early on, even to this day, there's confusion about Polymer and Web components. Web components was a spec by Polymer was the UI framework from Google. Then Polymer was weird because it was like a competitor to React and all this stuff. Then it also competed with Angular.

Then it had the paper iron gold metaphor. I don't know if you remember that. That was a weird place for it.

Then it required a Polyfill, which people are always nervous about that.

Chris: Yeah. I thought it was the Polyfill, but not really?

Dave: No, no. Exactly. [Laughter] And you're plugged in. It was very confusing. Then Mozilla just nuked HTML imports, and so that put it weird. It was just like... So, you're like, "Oh, I'm using this Polyfill forever."

Then some Google advocates were like, "React sucks. It's slow. Why are you using it? Use Web components," and that didn't work.

Then Google Amp came along and was like, "The Web is slow. We fixed it." And that wasn't good.

Thankfully, I think all of that is resolved and better now. But I think that set it back quite a bit.

Chris: Yeah. I agree. Yeah. If you're in dev rel now, dev rel is really seeing a healthy moment, I think. People are thinking about it nicely. I mean not just for Web components, but just the entire industry is like people are hired for that job. The value that they deliver is more clear. It's almost a prized job, too. People want the job.

Anyway... And to know that... but you can do harm. It's not like hire a dev rel and then success happens. You can hire a dev rel and have them dork it up.

Dave: Yeah. If your brand is sassy, punchy, that's a risky territory for advocating for a product.

Chris: Mm-hmm.

Dave: It might turn a lot of people off. To some degree, the community - or whatever - people choose based on community, too.

Chris: Yep. I've seen moments where I've seen a dev rel punch back. Oh, my God. If I was your boss, you'd just be immediately fired.

Dave: [Laughter] Yeah. I mean maybe. Yeah, right. It's just like, "Hey, we don't talk like that." Right?

Chris: Yeah.

Dave: Sorry. We're a business.

Chris: Sorry we didn't have a meeting to be clear about that, but you were literally hired, like, "I open my pocketbook and write you a check in which to make people feel good about our product."

Dave: Yeah.

Chris: Not to fight them online. Oh, you're so fired. Yeah.

Dave: Yeah. Yeah, so I think that was a big problem for Web components for a while. I think it was hard to invest in something unknown. Like if you have an app in React and Vue or whatever, switching to Web components wasn't a good story.

There still kind of is a lack of good stories about it. Adobe is using it to great success. Salesforce is using it. Microsoft is using it. Alaskan Airlines is using it. ING Bank is using it. A lot of big companies are using it now, but we still don't quite have the stories and the case studies of, like, "We switched to Web components and now it's better." You don't hear that story that often.

Chris: No, but when you do hear about it, it's almost like they went too big. Be like, "Oh, Photoshop is on the Web now and it uses them." You're like, "Holy crap. Really?!" That's a good story, but it's almost like is this only for Walmart?

Dave: How did we get there? Yeah.

Chris: Can my shoe store use it too?

00:23:50

Dave: Right. Right. Does it work on a small scale, too? Then the last two: It wasn't supported until very recently, like until Edge switched to Chrome in 2020.

If you were using it before that, wow, you were really cutting edge at that time. You were probably suffering some pretty big scars through support and stuff like that.

Chris: I see, so we're only three years into use it without thinking about it territory.

Dave: Yeah. Yeah, I mean use it as much as you want territory. Now we're starting to see meta frameworks like Rocket and Hance and 11ty with WebC, which isn't technically Web components but it's Web components...

Chris: Yeah. Boy, that one got me really confused for a minute. It really just has nothing to do with Web components.

Dave: No. It's spiritually descended, I would say. [Laughter]

Chris: Yeah.

Dave: Not a bloodline. No bloodline there.

Chris: Yeah. A weird name then, let's say.

Dave: Yeah.

Chris: Yeah.

Dave: I think it's basically just a competitor to Astro's Astro file format, but it's more Web component-y, a smidge Web component-y.

Chris: Yeah. Yeah. It is very cool.

00:25:06

Dave: Then the last is components are slow. People like to be tied to the hot new thing. They don't like the thing where it's like, "Oh, man. We have a problem. We'll fix it in a couple of years when it comes out to every browser." That's weird. I think people struggle with that. They want to be solving problems in user-land ASAP.

Chris: Yeah, I see.

Dave: And having to wait on a standard to roll through can be painful.

Chris: Is that tempered if you use Lit or something? Do you get those things faster?

Dave: Yeah. Lit would, but the thing about Lit is it's a bigger community in the Web component community space. They're going to have user-land solutions to things faster, or they'll have experimental specs.

Declarative Shadow DOM just came out. You basically send a template to your document and it can render the Web component without even running the JavaScript, which is kind of cool. It's basically like, "Hey, use this...."

Chris: Does it automatically work? Because if the stuff is in the template element, doesn't it not render?

Dave: If you have shadow mode open, I think.

Chris: Oh, like as an HTML attribute?

Dave: As an attribute, so template shadow mode open inside a Web component, like inside a dashed element, custom element.

Chris: Mm-hmm.

Dave: I think it tries to run it or it'll render it, but the trick there is that's not supported in every browser. But Lit was one of the first ones to offer, like, "Hey, we'll just compile out your declarative Shadow DOM from your actual templates. We know how to do that." It was almost like a pre-SSR, Lit SSR, basically, I think is what it's called. But it would basically be a compile-time thing you could run out.

Chris: I see. I see. I didn't mean to keep mentioning them specifically. I noticed they don't even get a link in your thing.

Somehow, in my head, I have it in that, like, if you're really going to do this for real now that that's kind of the winner. That you'd probably just use Lit.

Dave: I would start there or start with something that uses Lit - if that makes sense.

Chris: Okay.

Dave: There are a lot of weirdos out there, Chris. I'm going to call them weirdos.

[Laughter]

Dave: Who are like, "I can't use Lit. It's not standard. And this is for standards, so I can't use Web components." Again, I agree. But Web components were designed low-level, so you need a framework on top of them. Just because you're not writing vanilla Web components doesn't mean you broke the law of Tim Berners-Lee - or whatever. It's basically just like they were designed to have another layer, an abstraction on top of them, and Lit is a pretty good abstraction.

Cory LaViska has, I think -- I talked about it before -- a really good post on why he converted Shoelace over to Lit.

Chris: Hmm...

Dave: Because he was like, "I wrote my own Lit, but bad. I wrote my own helper functions and everything, but it was probably bigger and not as good of an abstraction as Lit." And so, that's something to think about.

You can, of course, roll your own abstraction. But why would you want it?

00:28:42

Chris: Interesting. Yeah. It looks pretty good to me. I kind of like the CSS approach. That's kind of good. Which is otherwise something I don't like. I don't know. I can't talk about it super intelligently, but I also have in my brain somewhere that it's a little overhead but it's really small, five kilobytes, to the tune of, let's say you did that. You're the sommelier, the Web component sommelier.

Dave: Ooh-la-la. Yeah.

Chris: You've led me to a beautiful image slider component. You've led me to a beautiful grid component or something. And I use them both. But the authors of both of them, one of them used Lit and one of them used something else.

Dave: Stencil or something, yeah.

Chris: In my brain, we used to make fun of that. You don't use jQuery and MoodTools. That's ridiculous. It's so bad and dumb.

But somehow with Web components, it's like, "Meh. Five kilobytes here and another five for a different framework is really not that big of a deal."

Dave: Yeah. Lit and MoodTools was 30 and 30, 30KB and 30KB gzipped.

Chris: Right. And computers were maybe just a little slower back then - just a tad.

Dave: Computers were slower back then. It would take five... No, it would take like 20 Lit or 20 Web component libraries to equal one React DOM. You have to put it in perspective of what all the megabytes we're sending down.

Chris: Yeah.

Dave: The chance that you enter into a multi-framework situation is probably pretty low. Although, again, Web components were designed to do that. They were designed to be like, "Oh, just pluck it off the shelf," like interop, right? But the pain, I guess, for these, for having multiple is very low.

I think it would be cool if there was a list of components that just say what dependency tree it comes from. Then people would be like, "Oh, that's great. Now I know."

Chris: Yeah.

Dave: Is that so dang hard? Dang it.

Chris: Gosh.

Dave: One day.

Chris: Gosh. Gosh.

Dave: One day when I'm the president of Web components. Oh, I am!

[Laughter]

Chris: Gosh, it looks like you get a lot. I hate to admit but you get a lot from TypeScript in Lit, too. They make it real tight.

Dave: They go--

Chris: Real tight. Real tight.

00:31:17

Dave: Yeah. They go pretty hard with TypeScript in the docs, and it's not my favorite. But yeah, you don't have to write TypeScript, but you can.

But they use a lot of -- What are these things called? -- decorators.

Chris: Yeah. It's decorator-heavy.

Dave: Instead of doing custom-element.define my thing and then the class, just before the class you'd say @custom-element simple greeting, export class, simple greeting ... element.

It's just like, "Hey, if I put this decorator before the class, I'm implying that what comes next informs this decorator." The you can do your properties in there, too. You say @props - or something like that.

Chris: Yeah.

Dave: Then you can just basically... Or @propertyname.

Chris: You don't even need a constructor then. Ooh...

Dave: Yeah, no constructor. We broke out of it. Now it's cool. [Laughter]

Chris: Oh, no. Our constructor crap came all around. See.

Dave: Yeah.

Dave: See, everybody. You don't need a constructor.

Dave: You just type @property.

Chris: Wow!

Dave: So, anyway--

Chris: Don't need it. Sorry, I really am liking... As much as, in general, I'm just on the south side of TypeScript, I'm not quite in the middle, I mostly find it obnoxious or see the value but I'm like, "Eh." But now I don't know.

Dave: I don't know...

Chris: Decorators are sweet. [Laughter]

Dave: Decorators aren't necessarily a TypeScript thing. You can use them in normal JS.

Chris: Why do they...? Is it past Polyfill time for decorators? I'll have to look.

Dave: No. No, it's still stage three of four - or something like that. Maybe in 2023 or '24, whichever one.

Chris: Oh, yeah. Oh, yeah. There's literally zero support for it. In this case, they're using TypeScript as a future JavaScript machine.

Dave: Yeah. Right.

Chris: Okay.

Dave: In a fancy world, you might be writing like this. Not my favorite that they use it, but it's cool.

Chris: It's cool. It's fine. Everybody uses it. [Laughter] Yeah, I wouldn't add any more to your list. I think the top five feels strong. It's unfortunate because many of them cannot be changed.

00:33:52

Dave: Yeah. No, you can't go back and un-fuck something.

[Laughter]

Dave: Bleep that out, Chris. Thank you.

Yeah, you can't really do that. But I did have a thing at the end that was like, "If I could go back and do this over again, where's what I would do." But it's just kind of like I think, right now, you have to replace what you know about Web components. It was kind of a Google thing, but now it's an everybody thing. It's different now, so I don't know what to say other than--

Chris: Wouldn't it be interesting if Vue 4 was like, "Oh, we've written a scoped CSS thing." The way they do it is they append data attributes to classes or whatever. They have some way that scopes the CSS, even though you don't have to hand-scope the CSS.

That surely is a bunch of code that they have to maintain, and they were just like, "Oh, you know what? Actually, if you use scoped CSS, we're just going to make a Shadow DOM for you quick and apply that CSS into the Shadow DOM."

That's what I mean by no framework has leaned into this. Nobody is doing that.

Dave: Yeah.

Chris: Who knows what else you're buying with the Shadow DOM. There's all kinds of weirdness. It's like how forms behave and how accessibility tabs through your site. There are all kinds of implications.

Dave: Query selector all and all kinds of stuff.

Chris: Yeah.

Dave: Yeah. No, I mean I think there's a ways to go before a framework adopts it. But I do think if you're a framework author and you've built out this whole big lifecycle for a component, like all these checkpoints--

Chris: Yeah.

Dave: --and the browser has that, basically, why are you maintaining your thing? It doesn't make sense to maintain your whole component lifecycle in addition to one the browser already has. I feel like you get free stuff from the DOM. I'm oversimplifying, but you have free stuff now in the browser that runs in C, not in JavaScript. Wouldn't you rather use that?

Chris: Yes. Yeah, that's the tricky part here is that I just want--

Dave: Scoping the encapsulation, like you're saying, instead of adding a little robo-barf to every element, what if it's just scoped? It's just in Shadow DOM, and then it's locked down.

But I don't blame any of these frameworks. Switching just seems like a prohibitively huge educational and bug-reporting switch. So, I just don't think they should.

Chris: Yeah. That would be breaking change forever. But maybe the next one. We'll see.

Dave: Yeah. Yep. You've just got to get somebody, the right person, hyped on them and then they'll prosper.

Chris: Yeah.

Dave: But I do think, again, it's early days. 2023, they finally came out. So, now what?

Chris: It's always been a long game thing anyway.

Dave: Yep.

Chris: The Web... Now that they're in the Web, the Web never deletes anything. That's the spirit of the Web. That's why we like it, in a way. It's just incredible how backwards compatible it all is.

Dave: Yeah.

00:37:14

Chris: Yeah. Here's just a quickie from an old friend of the show, Russell Heimlich.

Dave: Hey!

Chris: Who just wanted to point out... At one point, we talked about your bookshelf, responsive images, and stuff.

Dave: Mm-hmm. Mm-hmm.

Chris: And so, if you really want the perfect sizes attribute, which is really, I think, just extraordinarily difficult piece of information to gather, if you have any media queries or, God forbid, container queries, how do you describe (in the sizes attribute) of an IMG tag what size that image is going to render at? Wow! Just really truly a difficult thing to do.

Even if you think you've got it, there's a good chance it's wrong. Like, what was the JS Lint's early tag line, or something? It was like JavaScript Linter that's going to hurt your feelings.

This is that version of that. The responsive image linter. We'll put a link to it. It's a really cool tool. But it will hurt your feelings.

Hopefully, you have a browser, or hopefully, you still remember how bookmarklets work. Kids out there, you drag that to your bookmarks bar. [Laughter] Do bookmark bars even exist anymore? I don't know.

Dave: Yeah. Literally, does Arc have this feature?

[Laughter]

Chris: Yeah, I don't know how you would do it in Arc.

Dave: I don't know where to drag it. I don't know where to drag it.

Chris: Yeah. I don't. I actually don't know either.

Dave: I can go to the side. Okay. I'm in the side.

Chris: Right, and so the point of this bookmarklet, though, is that it just runs some JavaScript on whatever page you're on. In Arc, it would be a boost or something, but you'd have to instantiate it somehow, so the boost would have to add a button, and the button would click the linter. Ugh...

Anyway, it'll look at the images on your page and see, like, "Did you get it right? Is your sizes attribute correct?" It knows through the hindsight of history. It can resize the page for you and mess around with the page and kind of figure out what size that image renders at, at different breakpoints and stuff on your page.

Yeah, you almost certainly have it wrong. But that's okay because it'll tell you what's right. Then you copy and paste it, and you use it. That's why it's such a great tool. But it turns out you did it right, Dave. So, you win.

Dave: I did okay.

Chris: Yeah.

00:39:40

Dave: Well, I tried. And this is, I think, the thing. You can also just choose an about appropriately sized image. It drives me nuts that everyone is like, "It's got to be exactly 602 pixels wide." It's like, "No, it can be 700."

Just hear me out. I know that's a waste of kilobytes, but it's not the biggest. I think, operationally, I didn't have to write a sizes thing. I didn't have to set up WordPress to spit out 52 images - or whatever.

Chris: Mm-hmm.

Dave: I just served a little bit bigger image. I apologize. I don't know. That's my take.

Chris: Well, that's fine. Yeah, you didn't even try to put a sizes attribute on here. Then Russell also writes, "Can't wait for sizes auto." Just a huge deal.

What that says is -- I know we've already talked about this on the show, but I am excited about it -- you don't need to put sizes attribute on your image for any of them that are lazy loaded and below the fold.

Dave: Mm-hmm.

Chris: Which is, on a lot of websites, almost all of the images.

Dave: Yes.

Chris: It's one of those things that allows you to be lazy on the Web, and I'm always a big fan of that. Instead of getting this perfect, meh, just lazy load everything, put sizes auto on everything, and let the browser figure it out. That's tremendous.

Dave: I love that.

Chris: Will do.

Dave: Yeah because then you can make cuts, like big cuts, right? Like 5, 12, 10, 24, 2048. You can make those big cuts and just say, "This is 2048W," and then do sizes auto. Then it's going to choose. That's cool.

Chris: Yeah, and it will choose right instead of--

Dave: It's going to choose right.

Chris: Instead of what you wrote, which is maybe wrong. You know?

Dave: Right now, it's just like, "Yeah, I've got to cut a 900 and 902 pixel wide, and then a 918." Just be like, "No, you get... I'm cutting five max and just choose the best one." That'll be cool.

00:41:54

Chris: This is the question I was trying to get to from our favorite writer-inner, Simi D'Clarke wrote in about excited about new browser features. "Sometimes, however," Simi writes, "I sometimes worry about the implications of this and what it means to be a browser engine since the Web standard is append-only." Interesting concept there. "Lest we break backwards compatibility, that means the browser engines must keep growing and growing and growing in terms of storage and resource requirements to support an ever-expanding, only-expanding encyclopedia of CSS, JS, and even HTML features."

That's true, right? The Web is an append-only set of rules.

Dave: Yeah, it is. I think somebody has kind of said, "Have we made it so complex that only Google can build a browser?" I've heard that sentiment tossed around.

Chris: That's been true for a long time, though, I would think.

Dave: But I do think there are things that deprecate HTML.

Chris: Sort of?

Dave: Sort of, but I also don't... The permissiveness of the way HTML and CSS work specifically, if I call an element Dave. Right?

Chris: Yeah.

Dave: Angle bracket Dave, and I put an image of my face in there, it's just going to be like, "I don't know what you meant here. I'm just going to call that a span." You know?

That's cool. There's a fallback for everything it doesn't understand. It doesn't try to... If Dave gets ripped out of Chrome because Firefox and WebKit didn't implement it, it's just going to be a span. You know what I mean?

Whether that's M's or I or B or maybe B has to stick around and I has to stick around as italic and bold, but some of this stuff will just... could compose away and just fall back to being spans or whatever. CSS will just ignore stuff it doesn't understand. That's a cool feature.

Chris: That's unique to software, too, right? Isn't the point there that Photoshop documents don't work like that. Some future Photoshop, or some old version of Photoshop can't open a new Photoshop file, and it's like, "This is fine. I'll just ignore the stuff I don't understand." Yeah, right. [Laughter]

Dave: Yeah.

Chris: It's going to tell you, "No. I won't open that file."

Dave: No. But there is, like JavaScript is different, right? It can't just be like, "Sorry. Geolocation is zero," or whatever. [Laughter] We had it all and then we took it out. Maybe it actually did do that.

Chris: Yeah, because it'll error. I don't know.

00:44:54

Dave: It'll just error out, but one thing that I learned recently is V8 actually has two engines inside of it. It has a legacy one and it has a new one. And so, if you use script-type module, it puts you on this whole new JavaScript engine inside V8 that's fast path, that's fast, like lightyears faster than the old one. So, they kind of just--

Chris: Is that one of the reasons you needed type=module? I've always thought that was so weird that you type import at the top of your file. Can't it just know that it needs to be a type module? Why do I have to tell it? That's so dumb.

Dave: Dude, I agree. Node seems to just really have a problem understanding modules, require, and all that stuff. [Laughter]

Chris: Yeah. It doesn't like both of them at once, that's for sure.

Dave: Gah! It's so mad at me all the time. It was mad at us today, and I'm like, "I didn't do nothing." But yeah, so it is interesting.

I don't understand. Yeah, I don't understand how that was such a huge deal, but it was, I guess. But yeah, so you can fast-track your JavaScript just by having modules and stuff like that. If you use modern script, you can get a faster engine.

Chris: Yeah, I've never heard that. I didn't know that you just get bonus speed just from using ESM, essentially.

Dave: Yep.

Chris: That's cool.

Dave: There are maybe some features you can't use or something, like old ones like do while, or something. I don’t know.

Chris: Did we mention that on the show? Once in a while, people bring up CSS strict mode that I think is neat.

Dave: Yeah.

Chris: That's a cool idea. That probably will never have legs, but it's fun to think about.

Dave: I would love strict mode. Just give me reports in the browser. Tell me what I did wrong.

00:46:39

Chris: But back to that Photoshop metaphor for a minute, it would be hard to argue that the Photoshop today is like the best version of Photoshop ever or that that product is... It's a pend-only software also. That's what they are required to do because - I don't know - capitalism or something.

You can't... Next year, you have to have a release that gets people excited that helps theoretically juice your sales. I think you'd have a harder time telling people the features that you removed from the software and hope that that boosts sales. You'd have to pair it up with "and it's 200% faster" or something.

It's been written about for Figma as well. Although, I did see -- What's the guy's name? -- Dillon Field, or something. Isn't that the CEO?

Dave: Dylan Field, yeah.

Chris: Yeah. He did one of those almost like Elon Musk tweets where he replied to somebody and be like, "Next Figma Conf, I want to be talking about which features got removed from Figma." He was like think-y face or something.

Dave: Ooh... ooh...

Chris: It's like, "You're not going to do that." If you did, that would be great. But it seems like the more inevitable march forward of Figma is that you add crap, add crap, add crap, add crap. Eventually, it becomes slow and gnarly and gross. Then a new startup comes along that's slick, hot, fast, and beats you eventually. But, along the way, a bunch of people made a bunch of money.

Dave: Then you have to launch Figma Lite or whatever.

Chris: Yeah.

Dave: Yeah. Yeah.

Chris: It just seems more likely, and that's kind of the Web, too. It's just the Web doesn't--

A) it never gets slow because, apparently, it's just incredible dedication to keeping all new Web features fast. Lest they never even see the light of day. Now, I mean you could argue that authors are making the website slow or crapping it up with ads.

But we're crapping it up. The platform isn't getting any slower, which is kind of rad.

Dave: It blows my mind when they're like, "Ah, we made query selector faster." I'm just like, "How do you make that faster?" It's been out for ten years. I go in there, and I'm like, "Oh, if I do this, I can make it faster." I'm just like, "Gees. Wow."

Chris: Yeah. Good job. Thanks for doing that really hard, really probably largely thankless work.

Dave: Yeah.

00:49:01

Chris: Especially as we've heard over and over about big companies that that's not the way. At least at Google specifically of getting ahead. That culturally, internally, the big ideas have a big, new idea, talk about it, launch it, see what kind of success. That's how you get promoted and that people very much don't get promoted for being like, "Ooh, I think I'll just make this long-time existing feature just a little bit better."

Dave: Oh, man. Yeah.

Chris: But people are still doing it, so it must be enough for work.

Dave: I wish there were more stories about that. We're kind of heading into a season. We're launching a big new feature this month-ish or so. Pretty soon here. It's pretty exciting.

Chris: Luroapp.com.

Dave: Luroapp.com. That's pretty exciting. I'll be talking about it more. Probably doing live-stream tours. I know it's been pretty clandestine about what's going on with Luro. That all ends next month.

Chris: Dave, you don't even know, man. I've been working on a new version for years.

Dave: Well, yeah.

Chris: Just so you know, you have a brother in crime here.

Dave: [Laughter] Brother. Yeah, I think it's a thing. Right? It's that tense, like, "I don't want to overpromise here on what we're doing." But I think we finally have a very clear vision on what we want to present as draft number... Official draft number one.

Chris: Mm-hmm.

Dave: That's based on feedback and stuff like that we got from people. But anyway, we're super excited.

But I think, we'll launch this feature, and then it's looking at what we can do next. Sure, we could jump into a new feature. But I think what makes most sense is taking a minute to look at the features we have and either make them better or get rid of them.

We had to pull one feature offline. It was analytics because Google switched its whole deal and stuff like that. There's just nuance we have to work through.

That will come online eventually, but are there features we can make better? But you don't get a LinkedIn bullet point for that. You don't get the, like, "I made that one thing we already built better." That doesn't look good on LinkedIn. But it's such a huge user-fixing thing or quality of life upgrade. I feel like you should get more credit.

Anyway, that's just what we're looking for and then opportunities like what could we just smash out and blow out that experience or really improve this. Kind of really make it work.

Chris: Yeah. It's a very adult way to think about things. It was certainly... Not to be too behind the scenes even. If you pick too many things to work on, nothing gets quite the attention that it should.

Dave: Yeah.

Chris: An example at CodePen is having two different editors.

Dave: Yeah.

Chris: We were trying to solve two different problems in weird ways. They have different code bases and stuff. We were just trying stuff. It was a little bit post-money for us.

Dave: Yeah. Yeah.

Chris: It was also one of our early React and GraphQL projects. We were trying out that. Why rock the boat?

There are reasons for it all. But if you (10,000 feet) look down, you'd be like, "Why did you make two things?" You know? Hopefully, we'll... Don't worry. We're going to rein that in.

Dave: [Laughter] I know too much. I almost gave out some big spoilers in the old ShopTalk Discord. It's very exciting what y'all are doing.

Chris: I know. You haven't even seen it in ages.

Dave: It's been a while.

Chris: Don't worry.

00:52:53

Dave: I'm not leaking, but no. Anyway, yeah. One example, we do Lighthouse audits of every page on your website.

Chris: Yeah.

Dave: Performance. Accessibility. Boom-boom-boom.

Chris: Very nice. Yeah.

Dave: Whatever page you--

Chris: ...get the Web core vitals then, too, because you get them in Lighthouse?

Dave: Yeah. Yeah, we do. We get them.

Chris: Yeah.

Dave: If you want to use those, I find those actually not that helpful. Sorry.

[Laughter]

Dave: Sorry. Yeah. Anyway.

Chris: Webpage test nerds.

Dave: Yeah. Sorry, webpage test nerds. But if I see my overall score has tanked, that's the next place I go, right? It's like, "Hey, okay. What vital is actually in pain?" You know what I mean?

Anyway, so we crawl all these pages. We realized, hey, we could probably just surface those errors. Now you have a report of every error across your whole site, like, "Ah, man. We messed up images on every single page of our site." Then you can take that information to your boss and say, "We're messing up images on every page of our site. We should fix that."

Chris: Yeah. Well, how cool is that? I mean what you're saying is instead of a full report that tells you all of the stuff you're doing well, as well. Who cares how well you're doing? Maybe you surface that some way, but it's more interesting to see the things that you're not doing well.

Dave: Yeah. Just in bulk, right? [Laughter] Like accessibility. We are missing alt attributes on 90% of our pages. That's a problem. We are bad at alt attributes. We need some education.

Something like that, I feel like that's pretty helpful. And so, that's an example of a feature we want to just blow out a bit more because we have that data or we are running that data, that test for you. We collect it. We actually throw it away in our collection process. But in theory, we can collect it and surface it to you. Wouldn't that be helpful? Wouldn't that be cool?

Just be a little bit more helpful. Blow it out.

Chris: Yeah. All right. That's all the questions that I bookmarked for today. Do we have any kind of final thoughts here on the day?

00:55:03

Dave: I don't have enough energy to talk about the Web Integrity API, which blew up. I don't know if you caught that drama, but that might be something we have to pull out the gavel for.

Chris: Discuss at one point? Maybe... I don't remember if this is it, exactly, but I saw some funny stuff in a Discord the other day. But it seemed like it was just some guy's idea. Not like from Google or something.

Dave: Well, I think some Googlers were backing it or something. Meh. Yeah.

Chris: Is it the one that was a little bit DRM for websites?

Dave: DRM for websites. Yeah, basically it would send a hash. Like, expect this challenge, this hash from the end result. It's because users love rich experiences but don't love paying for it. So, we would block that content unless you paid for it. [Laughter]

Chris: Hmm...

Dave: If you block the scripts for the ads, then you wouldn't get the thing. I'm just like, yowzer.

Chris: Oh, yeah. Oh, my God. Yeah, this is what I was... I was taking screenshots of the GitHub issue board because people were really hammering it. Most of it is rude and a pile-on and maybe don't do that. But some people took the opportunity to be really funny.

There was one that was like, "Feature request: Block copy and paste."

Dave: [Laughter] That's good. Perfect. There was... Yeah.

Chris: [Laughter]

Dave: There is one that's like "User research?" It was basically just like, "Hey, it said you researched this, but what is the research?" [Laughter] You know? Could you just tell us that.

Chris: You don't get to just say you did research.

Dave: Yeah. Unfortunately, you can't. That's not legal.

Chris: Yeah. Isn't it interesting? I think of how at one time Apple just -- not to... whatever. I feel like a fanboy but I kind of am.

Remember at one point they just removed DRM from all of iTunes? They're like, "Now if you download a song, they're just not protected anymore." You're like, What?! Really?! Thanks!"

Dave: Yeah.

Chris: That's cool.

Dave: Yeah. That's cool. I will say, with the Web Integrity API, here's the reasons they gave for it.

Users like visiting websites that are expensive to create and maintain but they often want or need to do it without paying directly. So, you're out of here.

Users want to know they are interacting with real people. Okay. So, I don't know how this helps, but anyway. I guess a bot. You would not show it to bots or something or a bot injects a script or something. Okay. Maybe.

Users are playing a game on a website. So, I think that's fair. Users want to play a game. If somebody comes in and writes JavaScript against the game, that's unfair. But maybe WASM fixes this already. I don't know.

Then users get tricked into installing malicious software that imitates banking apps. I mean that's maybe okay.

There are some things here, but I don't know, man. It does seem like it's ad tech and under the guise of security tech, and that sucks. That's my take.

Chris: Yeah. I feel less bad about the pile-on if it's from Google anyway. That's punching up, and that's okay.

Dave: Yeah. It's for Googlers on the authors section of the explainer, so we'll include a link to the explainer. But it was... Yeah. Again, I'm not going to cry if people don't make billions of dollars. But I understand the need to.

Chris: If we end up doing more research or talking to people about it, maybe we'll revisit this concept.

Dave: Yeah. I just also think most browsers are going to break that anyway, right? Safari has their TPI - or whatever - that they just shut off stuff. Is this a war against Safari? I don't know.

Chris: Ooh, yeah. You think there's a secret backroom reason for it all?

Dave: Yeah.

Chris: Yeah. What would Apple do?

Dave: Maybe for your bug reports, weren't you saying all your bug reports are basically Chrome extensions? You could be like--

Chris: They come and go in little rashes. There was one little very popular AI one that was blowing up. It was called like Blackbox or something like that. It just did all kinds of crap to CodePen.

Dave: Yeah.

Chris: It was just a mess. We'd write back, and just for a couple of weeks there it was almost always because of Blackbox.

Dave: Are you using this guy? Are you using...? Yeah.

Chris: Then props to Stephen Shaw on our team who, rather than just create auto-responders and stuff around this, actually just wrote to them and be like, "Look. Your shit is breaking our stuff," and they fixed it. [Laughter] So, go to the source, people.

Dave: Oh, a little cross-company B2B there.

Chris: Yeah.

Dave: A little B2B work. Yeah.

Chris: Yeah.

Dave: Sometimes it's B2B work. I had to do B2B work. I filed an issue against ProseMirror and they fixed it. We had a complaint come in. The thing jumped, and I figured out the repro. I posted it on ProseMirror, and they fixed it.

Chris: Marjin did it. Isn't he the ProseMirror guy?

Dave: Yeah. Yeah. Yeah, Marjin.

Chris: Yeah, that's nice.

Dave: I was pretty pleased with the service. He got on it. So, I think I had a good repro, though. I'm going to pat myself on the back. That was a pretty good repro, if I don't mind saying.

Chris: Yeah. Yeah. I don't know. That's just one of the people on Earth who is really going to hold you to that. I'll say that. He, I think, probably appreciated very much your good repro.

Dave: I did go through it. [Laughter] I did look at a few issues, and he's just like, "Boom. Close it. Close it. Close it." Like, can't repro. Can't repro. So, I was like, I'm going to really do this.

Chris: Yeah. When you're a one-man show like that on a lot of things, you probably don't have a lot of choice.

Dave: You can't. You can't do it.

Chris: Yeah. I've seen you do it, too.

Dave: I'm ruthless, dude.

Chris: Yeah. [Laughter]

Dave: I've got no time. If you don't have time for me, I ain't got time for you. Sorry.

Chris: There you go.

Dave: That's tough, man. Tough. Tough cookies.

All right, we can wrap it up - speaking of time. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on whatever we call Twitter now. [Laughter] Join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Oh, just ShopTalkShow.com.