Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. I see you in that bikini just loving your summer vibes. This is hot summer edition, haggard summer edition of the ShopTalk Show. I'm Dave--been talking all day--Rupert.

Chris Coyier: Yeah.

Dave: You can probably hear it in my voice. With me is Chris Coyier. Hey, Chris. How are you?

Chris: Every time I open a social media app, it shows me these men's clothes called Chubbies. Have you ever seen it? I don't know what they make, but what it's really trying to sell me is this American flag shorts but overalls, and the whole thing is an American flag because it's like, you know, summer-summer-summer is here. And it looks good, but I'm like, you know, I know my body and it's not going to pull off overalls at all, really, I don't think.

Dave: Okay. Yeah, yeah, yeah.

Chris: Let alone an American flag, and then I'm like, it looks cool, like the branding looks cool, but then I forget that the American flag has basically been coopted, you know? I feel like if I want in public like that, it must be like, "Oh, where's your AK, buddy?" You know? "Where's your AR-15, mother fucker?" Sorry. Beep that out.

Dave: [Laughter] Well, yeah.

Chris: [Laughter]

Dave: No. I was getting ads. I don't know if it's TikTok or what, but for a mankini company called Budgy Smuggler, based out of Australia.

[Laughter]

Chris: You never know.

Dave: Whoa! Saw a lot those days. I've seen a lot, so... [Laughter]

Chris: [Laughter] Seen a lot of packages, let's say.

Dave: A lot of packages.

Chris: [Clears throat]

Dave: Yeah. But anyway, what a fun thing to talk about here.

[Laughter]

Dave: It's going to be a good one. This is going to be a good one.

00:01:53

Dave: ShopTalk is like a box of chocolates. Eric Enn writes in. I love this question from Eric Enn. It's basically about having hostage users, like the people that have to use your thing.

Eric says, "I work in manufacturing and automation, and we create these Web-based interfaces that the people that use them, they must use them. They're an internal user or they're contractually obliged to use this interface to do their job." You know?

Dave: Mm-hmm. Mm-hmm.

Chris: So, he says, "I often struggle with wanting to make a good product, you know, which takes more time and work and resources, you know, polish, all that. But typically, businesses invest in resources into such things because users have options and could leave." You know?

So, if you perhaps at Luro want to compel people to use it, you're trying to entice people and keep people with your beautiful UI and UX.

Dave: Right. Right.

Chris: The stuff Eric is working on, it doesn't matter. They have to use it because it's just part of their job or whatever.

He's kind of asking how much polish effort would you put into such a project with these kind of captive audiences? Do you have any specific things that you would or wouldn't use - and that kind of thing?

Part of what I think of is I think that's a very cool opportunity assuming that it's not just--

What I worry about is that you just have to churn them out. Like this is your 80th one this year, and you have to make them quickly.

If that's not the case, and it's your full-time job to make this interface, it's like the most excellent opportunity for polish ever. Those users using it, they will definitely have opinions on how it works and I'm sure would be more than happy to tell you ways you could improve it. Whereas that's otherwise hard information to drag out of somebody. You've got to entice them with Starbucks gift cards and all that crap.

00:03:41

Dave: No, I mean you have users and I think - I don't know - you have a good opportunity to make it better and be best in class. Can I give you an example? Can I chuck an example out at you?

Chris: Mm-hmm.

Dave: Have you ever used a point of sale machine? Have you been a waiter before, Chris, or something?

Chris: Well, sure. I had a couple of years locked in at Applebee's, you know. It depends, though. I worked at some places where the point of sale was a little dingy notepad with a pencil, so there's that.

Dave: And the mechanical credit card swiper.

[Laughter]

Dave: But point of sale software is horrible. I mean it still kind of is, like on average, I think, right?

Chris: Oh, yeah, dude.

Dave: It's basically like these little blue squares that you tap--

Chris: Right.

Dave: --on this very awful touchscreen.

Chris: I tried to order a glass of wine at the coffee shop the other day. You know it was late in the day. Don't judge me. But obviously, people don't order wine that much there because they were trying to use their POS machine and having it be like, "Where is wine?" It took them like four minutes to dig through the menus to find this order. Anyway, you know what I mean.

Dave: A player like Square comes along and is like, "Guess what. You just put your products in here. You get a cool credit card payer, a tap to pay, and you get all these buttons. And then look. Flip the screen around. Boop. Sign a tip."

Revolutionary. Literally, the snow cone place we go to with our kids has Square, and it's fully powered by Square. They configure the products, and then they show you the phone. They're like, "How much do you want to tip me?" It's $300 because they charge too much, but that's fine. [Laughter]

Chris: Actually revolutionary. Every single person who sells something individually in person uses Square. It's crazy.

I always wondered. Are they their own payment processors, too? Or if you use Square, do you also need to sign up for Stripe or whatever to actually process the card?

Dave: No, I think they're the processor. Yeah, so I think--

Chris: That's cool.

Dave: Or they have some gateway tie in. So, I'm not saying your - whatever. You work on the P90X machine, and it punches out 80 widgets a minute. No one is going to -- there's not a lot of P90X machines because you have a patent - or whatever.

Sure, you kind of have a monopoly on the situation, but I think there are situations where a competitor might come along and offer just a little bit better of an interface and you're out. Part of the reason I bought my Volvo car was because it had the big touchscreen in the middle. You know? It had this beautiful interface. That's part of the reason I didn't buy a Honda Pilot, which is basically the same car but I just didn't like the interface.

Chris: [Laughter]

Dave: I'm picky. We're the Apple generation. You know?

Chris: It just doesn't sound right to say your Volvo has a bigger POS.

Dave: It does.

Chris: It does.

Dave: It's different.

Chris: It's a different POS.

Dave: It's a POS. Yeah.

Chris: [Laughter]

00:06:58

Dave: And then you know I also worked for a large pizza company, and they have a monopoly on their point of sale system, which are custom point of sale systems. But I know they just went through an effort to make them better, and it's really interesting because it's like this huge cost because you're moving somebody's cheese. They have all this muscle memory for how to operate the point of sale on the phone.

Chris: Hmm.

Dave: Eyes closed, they could do this. So, if you move things too much, whoa, you messed up somebody's flow and they ordered the wrong pizza - or whatever.

Chris: Hmm.

Dave: Then even just deploying it out to all these Linux systems, I think, or Android systems - or whatever it was -- deploying that out was a whole big deal. But you know. I think there are some challenges, too, in this making good hardware products.

I don't know. Maybe it's just you kind of have to maybe set a vision for what it could be or start talking about, like, "We need a design language. Every app is different, and we just need a really good language."

I don't know. I would probably try to put as much polish as I could. I don't know.

Chris: Yeah. I mean what do you expect our advice to be? "Do a bad job." I mean I'm not going to tell you that.

Dave: [Laughter] Phone it in. Get the paycheck and move.

Chris: Yeah, but what's a version of phoning it in that's a little more realistic? Is it to make a super generic -- make your version of bootstrap POS - or whatever - so that the next time you have to build one, you just use that framework, and you've kicked it out in two seconds? Basically, it's big fat chunky buttons in Helvetica - or whatever?

[Laughter]

Dave: Yeah, I mean it's sort of like the company's standard. "Do they value design?" plays into this too.

Would you drive your Tesla? Would you buy the Tesla if it had Twitter bootstrap as the UI? Probably not.

00:09:07

Chris: That's the great irony of those things, isn't it, is that so many people reach for a component, existing libraries because of, like, material design or whatever. Oh, that's going to -- it's actually going to be good design. You know? I'm going to do it on purpose.

But then none of the companies that are really big, you know, really nobody uses anything off the shelf. You know?

Dave: Yeah.

Chris: But if you're looking for premium, you're in custom territory no matter what.

Dave: I think so. Yeah, so it's like, are you a premium brand? I don't know. Are you a middle-of-the-road brand? You can maybe kind of -- you know. I think you'll find something that works, but maybe--

Chris: There are too many unknowns here. How many of these things are you maintaining? If you have 80 of them that are under your purview that you need to maintain for years to come, you probably should have some kind of standard lib for it rather than doing it bespoke each time.

Dave: Mm-hmm.

Chris: If you have one client, and you're building some kind of cool interface for one of them to use, then just do it really super bespoke for their needs. And that's unknown. That's not information we have in this question.

Dave: Yeah. I don't know. There's Vue and Web components in space on the Dragon X capsule and stuff like that. People are making stuff that runs hardware, controls hardware, and it's very bespoke. But I think you could make an argument; good companies are doing this well and there may even be some dumb thing you'd be like - I don't know - find some quote where it's like "President Trump sat in the seat of the Dragon X capsule, and he liked it way more than the Bezos capsule, and that's why they got the government contract for a billion jillion dollars." I don't know.

Stuff like that happens, man. I don't know. So, you have to think what's your audience. I don't know.

Chris: Yeah, there you go.

Dave: Have the equal and opposite budget as your audience. That would be my recommendation.

00:11:14

Chris: We got another -- the theme today is very real world niche situations. [Laughter]

Dave: [Laughter] Good. Good. Welcome to niche talk.

Chris: Yeah. Yeah, Felix writes in. He's building a Nuxt Shopify store, right?

Dave: Mm-hmm.

Chris: Nuxt site must be hitting Shopify APIs to pull product data and inventory and who knows what else. Then using a headless WordPress site for the site's editorial content.

It must be like landing pages for products or blog posts or whatever. And it's working great. Cool. But notably, there are three pretty big pieces of technology there, right? Nuxt and Shopify and WordPress.

Dave: Mm-hmm.

Chris: Right away, I'm look, woo, that's a lot.

Dave: Yeah. Got a few. Got a few things.

Chris: Yeah. [Laughter]

Dave: Yeah.

Chris: "It's amazing. It would be amazing if I could create a custom Gutenberg block that pulls in (from the same Shopify API that I'm using for my Nuxt front end) so that the client could drop products into their posts and pages like you can drop in images."

So, just like a little Shopify block.

Dave: Oh, yeah.

Chris: "I've never created a custom Gutenberg block, and I'm quite experienced with WP, ACF," meaning advanced custom fields, "less so with React. Would it be a plugin? Where I do put the API key, et cetera?"

Where I'd be surprised is there must be Shopify blocks already. Those are both very huge products, and there's fricken' no way there's not Shopify blocks already.

Dave: Mm-hmm.

Chris: Felix, I think you're in luck. Just Google whatever, Shopify block for WordPress, and there's a 100% chance that you're going to find options there, and just use that. I wouldn't handwrite that.

Dave: Yeah. No.

Chris: I don't even know how Nuxt factors into this, really. You're not really talking about that. You're just plucking products from your Shopify store.

00:13:03

Dave: Yeah. I mean it looks -- I just found one, ShopWP. I'm not saying that's the one, but it seems like they exist. Right?

Chris: Yeah.

Dave: But, yeah, I mean that would be ideal is you don't even -- you know if this is all WordPress stuff, you could kind of -- because Nuxt just is rendering your WordPress content, I assume, somehow.

Chris: Oh, is that what's happening? Uh...

Dave: Yeah, I think Nuxt is being the bridge, I think, between the product renderer and the content renderer.

Chris: Oh, yeah, because he's saying headless WordPress. Yeah, okay, so there's only one website. It's the Nuxt website, which is plucking some of this content from the Shopify store and some of its content from headless WordPress, and headless WordPress should use that same API, he's saying - or whatever.

Dave: Mm-hmm.

Chris: Yeah, the WordPress plugin will handle where you put your API key. It's ultimately going to land in the database somewhere, so at least you don't have to worry about chucking it into your repo or anything like that.

Dave: You may even want something -- you could look at how the block works, but you kind of want just something dumber that just gives you a product ID. You know?

Chris: Yeah, maybe, because if you have to build these exactly. If you have to build the front end in Nuxt anyway, you almost want to do that component construction on the Nuxt side.

Dave: Mm-hmm.

Chris: Meaning, yeah. Yeah, you're right. The block would just be like, "Give me three product IDs." That'll give them to Nuxt, and Nuxt will be the component on its side (rather than having some of your HTML and crap be on the WordPress side and some of your HTML and crap be on the Nuxt side). That might get annoying after a while. So, if WordPress was just giving you data, it might be better.

00:14:50

Dave: Yeah, you might -- yeah. Figure out how to do that.

People, too, like don't underestimate the dumb way if that makes sense. You could make a Gutenberg block that just has the namespace, like Shopify stuff goes here - or something. [Laughter] Whatever you want to do. But then it's just three text inputs where people can go to the website and copy the SKU and paste it in. Or maybe they post the URL. They paste the URL, and you futz -- you RegEx the URL to crap and try to get the SKU out of that.

You don't have to build the full going out and fetching all the data and getting is super pristine. You don't have to build out the full -- you know.

Chris: Yeah.

Dave: --$10,000 experience. You can probably build a $200, $100 experience and it gets the idea across. And then if people use it, then blow it out. You know?

Chris: Yeah, there you go. Demo, demo, demo.

Dave: Demo, demo, demo.

Chris: Yeah, it does occur to me that if you used one of these off-the-shelf plugins like I started touting for you there, it's going to produce a very specific set of HTML that will come across when you hit the WordPress API. It'll have a bunch of class names and crap in that HTML that style that component in a certain way, which will not be present on your Nuxt site unless you deconstruct that plugin and figure out where the styles come from and pluck them out and put them in your Nuxt.js site.

That's a weird thing with API. The CSS isn't inline. It doesn't just come along for the ride. Maybe it would if they built it with Web components, but I promise you they didn't. Sorry. [Laughter]

00:16:45

Dave: Well, and you know. How deep do you want this to go? Do you want just one picture? Do you want the little color picker? How deep are you wanting to go?

One thing I'd worry about a plugin -- this is again talking us out of the plugin now -- is it probably wants to inject some kind of checkout flow into your WordPress site, and that may cause you problems--

Chris: Hmm.

Dave: --just with your general flow, but I don't know. I would try that. That would be a place I'd start. Is there a plugin that kind of gets me there, yes or no? Then could I just do a really lazy block that has three text inputs that you paste URLs? Yes.

Chris: Yeah.

Dave: Then step four would be -- 4,000 -- would be making a big thing that fetches products. You click the products, and you add them to the page. You customize on the WordPress thing that then goes to the Nuxt thing that then goes to the Shopify thing.

That would be the big -- I'd do that later. So, yeah.

00:17:54

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Deque Systems, makers of the beloved and powerful axe DevTools browser extension.

You probably didn't set out to build a website that was purposefully inaccessible to people with disabilities. I know I never do that. But you may have, especially if you aren't testing for digital accessibility.

Start accessibility testing in just minutes with the free axe DevTools extension for Chrome, Edge, or Firefox. Dev teams can find and fix accessibility bugs with very little effort and no accessibility expertise. That's because the plugin tells you what to do.

You visit a URL. It gives you a bunch of advice. You take the advice. It's great.

If you want access to even more features like sharing, saving, exporting, semi-automated tests, and more -- which are very cool, by the way. I've tried all this stuff -- you can sign up for a free trial of axe DevTools Pro. Visit deque.com/shoptalk to get started. That's deque.com/shoptalk. Remember; friends don't let friends ship accessible code.

[Banjo music stops]

00:19:16

Dave: Shane O'Sullivan writes in. "Have you ever published a VS Code extension? If so, what did you think of the experience? I wanted to share a common Vue boilerplate with my team, so I created a simple code snippet extension," and we'll include a link in the show notes. It's called Vuelets.

"The process was funky, though. I had to spin up an Azure DevOps organization. Got bounced between 700 Microsoft domains just to log in and publish. It makes me think MS is using some of its more popular assets to juice its numbers elsewhere in the ecosystem and feels kind of gross."

Have you published a VS Code plugin?

Chris: No.

Dave: No?

Chris: But it surprises me that you have to make an org to do it because it seems like most of these are under an individual's name, so that seems sucky. And, of course, they're trying to juice their numbers, you know, use their popular products. Everybody does that. That's just a thing that happens, like it or not.

But yeah, I mean is the process great? Oh, I'm sure it's not. [Laughter] You know?

Dave: Azure's stuff has always been tough for me. I've used it in the past, and I get in there, and I think it's still probably charging me $300 a month for something. I don't know.

Chris: [Laughter] Yeah.

Dave: There's -- [laughter] You know. I feel like it's kind of hard. Yeah, that's been my -- I haven't done it, but I do. I want to make a theme. I've had the idea to make a theme.

I think, too, one thing to notice or think about is a lot of these people who have marketplace extensions, they had something on Sublime that was on GitHub, and they had something already on Atom, and then it was just like, "Well, that's just one little hoop to jump through," or maybe even Microsoft jump through the hoop for them. So, that could be a thing, too.

Chris: Yeah. That's a thing.

Dave: Microsoft has little hack days or education-y hack days, you know, developer conferences.

Chris: Right.

Dave: Where they're like, "Hey, let's all get into a room and release a plugin," that they'll never maintain. [Laughter] It's all good.

00:21:38

Chris: It's giving me memories of years ago there used to be a Yahoo weather app for iOS that was so good. It was so strange because it was unlike anything Yahoo ever did design language style. It always felt like Apple made this for you. They made this. They gave it to you. And you put your logo on it, and then it just was good. You know?

It had to be. You know? It felt like that. Anyway...

Dave: Yeah.

Chris: But you don't have to make it. If you just want to make a theme, I bought that Dracula theme. I'm a little behind the market on that, a little pricy, maybe, for just a theme kind of thing, but it kept coming up in my head, like, "Oh, this is the premium color theme. It looks so good." You know?

It comes with themes for all kinds of different stuff, so it's just obviously super well done, so like, "I'm going to do it. I'm going to buy it." And it comes with this big thing you download. It even has wallpapers and educational e-books and all kinds. You know?

Dave: Mm-hmm.

Chris: When you buy Dracula Pro, you buy this big pack of stuff (whether you like it or not). But the VS Code theme is just a file with a .vsix extension. So, Dave, if you really wanted to do a theme, you don't necessarily have to put it in the marketplace.visualstudio.com. You could just be like, "Here's the vsix file. It's a gist. Take it or leave it." You know?

Dave: Yeah. Yeah. I think that's an option, too. I thought it would be cool to make a plugin even just for projects.

Have you used Tailwind in a project before? The auto-complete is really awesome, and I think it's because it does some stuff to seed IntelliSense its list of class names. I always thought, if you had a design system or whatever, being able to seed that your list of class names or whatever would be awesome for authoring or even just Sarah Drasner or this Vuelets style autocomplete. You could just type the component name and hit tab, sort of like Emmet style, and it would just spit out the component, the HTML you'd need for that component. I always thought that'd be cool.

Chris: Oh, yeah. That'd be cool. Maybe if you get a namespace, you type

Dave: Wouldn't that be cool? I mean, yeah, and if you're in React land, it would do it to your system. Right? It would just be like, "Cool. Here it is. Here are all your--" You know? "Here's your component, and here are all the APIs," and delete the stuff you don't need. I think that would be pretty cool.

Chris: Yeah.

Dave: Maybe Copilot is getting us close to that too, though. Hey? Hey? I don't know.

Chris: Yeah, maybe. Although, it's like the long way around, isn't it?

Dave: Yeah.

Chris: Instead of just teaching it the few things it needs to know, analyze every piece of code ever written and then apply computer science, you know, apply artificial intelligence to it. Then it'll know that you have eight components.

Dave: Yeah. Yeah.

Chris: Funny. But it does work. Are you going to pay the $100? Crucially, are you going to pay $100 for every single employee at Luro App?

Dave: Hmm... Yeah.

Chris: [Laughter]

00:25:11

Dave: You know a good question. Well, I had the post. It might be out by this time. I don't know if I'll every publish it, actually, because we had that episode with bdougie and Rizel.

Chris: Yeah.

Dave: We were talking about it, and I just was like, it stuck with me. The posture when I use Copilot changed. It went from now I'm writing code to now I'm reading code, and I'm code reviewing this robot. You know?

Chris: [Laughter]

Dave: I don't like the code reviewing posture as much as the writing code posture. You know?

Chris: Oh...

Dave: And so, I don't feel like I'm just in Tab of Valhalla, just like, "Yeah, dude! I'm rocking. You know? I'm playing an instrument." I don't feel like that yet, but maybe I would if I kept doing it.

I reinstalled it after that, and I tried to -- because I'm writing, doing kind of a test sprint kind of thing, and I just was like, you know, I'm just going to bust out some tests. That seems like bread and butter for a robot, right? [Laughter] Hopefully, it can help me.

It actually did a good job. It wrote some tests. But it had some downsides, right?

Chris: Yeah.

Dave: It kind of wrote -- it used the two-match snapshot in Jest, which was cool, but then it just created all the snapshots, like when Jest encounters that. It's like, "I don't have a snapshot." It just [raspberry] starts generating snapshots. I was like, "Whoa, whoa, whoa, buddy. I don't actually want that right now." Snapshots are cool, but it's also kind of like your driver's license photo. You know? [Laughter] It's kind of like it's never going to look like that ever again.

Chris: [Laughter]

Dave: That's a really bad way to take a photo of me.

Chris: Yeah, it definitely changes the equation when you have to pay money for something you're not sure you 100% love. You know?

00:27:03

Dave: But if somebody is like, "Dave, for $100, I can make coding easier for your whole year. Coding will be a little bit easier," easy, slam dunk, $100, go.

Chris: Yeah. Yeah.

Dave: You know?

Chris: Yeah. They're definitely going to make money on it. I mean I don't know what their costs have been so far, but there are enough people that are going to ... their $100.

Dave: But it's weird. It's like 2X the GitHub membership. You know? That's what gets me.

Chris: That is a little weird. Yeah. Yeah, it costs more than your org does, the dang thing.

Dave: The price pisses me off, and I think that makes it good. You know?

Chris: [Laughter] Yeah. Kind of.

Dave: I think that's like, "$10? $100 a year?"

Chris: Gees.

Dave: Ah... man. But like--

Chris: Compared to the value of GitHub itself, it's like nothing. You know?

Dave: Yeah.

Chris: It's really like buying a printer for $49 and paying $200 for the ink - or whatever.

Dave: Kind of getting into that world, isn't it?

Chris: Yeah.

Dave: It's just like, "Oh, you wanted to write code? That's way more." [Laughter]

Chris: [Laughter] Yeah. You want to write-- [Laughter]

Dave: "You just ... code, and GitHub is basically free. But you wanted to write code? Oh, yeah. Sorry, Charlie."

00:28:19

Chris: I think there's a sweet spot that I happen to be in on my Go journey that it's really pretty helpful in that language where I probably shouldn't have had it on early days.

Dave: Mm-hmm.

Chris: You spend a lot of time with the syntax in your early journey. Just write it out. Write it out. Even tutorials, you know, just copy them word-for-word.

Dave: Mm-hmm.

Chris: Then when you're really good, it annoys you too because you already have in mind what you're doing. There's this middle zone where you are very amateur at a language that it helps you the most. It's that middle chunk that it's most valuable in, I think.

Dave: I think it's helpful. You know I think, too, one thing that's interesting -- this is sort of the meta problem -- is, where is it getting its information from. You know? Is this GPL? Is this MIT - or whatever? I think that it's really interesting, and I actually kind of welcome it, like this whole copyright lawsuit that's going to happen. You know? Code copyright is kind of stupid, but that's just me. I don't know.

Maybe we just need, like, GPL is awesome, but then your whole product has to be free if you have any GPL. But then MIT is just like, "Oh, you can share it."

Chris: That's why people are pissed because GitHub is going to make a bunch of money of code that everybody else wrote. I kind of get that. But it's like they're not uniquely doing that. You could have done that also.

Dave: Yeah. Yeah. Totally. Right, you could have scanned GitHub - or whatever - or NPM or something.

Chris: Yeah.

Dave: Yeah, I mean I think they have a unique advantage that they are hosting the code in some way.

Chris: Certainly.

Dave: Yeah. I don't know. I just kind of welcome this idea that code can be written by a robot now, and so maybe our idea of copying has to idea because now it's really just like, "I found this on the Internet." You know? [Laughter] It's basically, "I found it on the Internet."

00:30:40

Chris: It does need to change a little bit. Don't you think about--? My sister has this draft of a kid's book.

Dave: Mm-hmm.

Chris: She had questions for me. I don't know anything about it, but I was trying to ask around and see what people thought and stuff. But then mixed with my own opinions, too, I'm like, you've got to have -- you can't -- you're not a trained drawer. Maybe it would be a little endearing to draw your own little stuff even though it's highly amateur or something. But I don't think you're going to get the kind of readership of this book if it's you plus some crayons. Right?

Hire and illustrator. There are lots of illustrators in the world. They'll do an amazing job and make this thing feel like the professional thing it deserves to be. So, I don't know how you find the perfect illustrator. That's going to be its whole journey itself, but certainly, it's doable.

Oh, wait. Why don't you type in, you know, the Raisin Bran's son wearing shorts into Dali, right click save, and now you just bought an illustrator because you just typed in what you wanted into a fricken' image generation machine.

Dave: Yeah.

Chris: A little weird.

Dave: I mean, yeah, and that's--

Chris: It might look amazing. You know?

Dave: Yeah, and you know it's funny. It's like my brain is like, "You can't do that for a kid's book. But for a Buzzfeed article, yes." You know? [Laughter] Why would I treat those differently, because they're the same thing? I don't know, man. Maybe you can.

Then there's a question of who gets paid, but does the robot who stole stuff from the Internet, do they actually deserve a cut of the money? [Laughter] I don't know. I don't know. Anyway, it's all interesting and I'm looking forward to the future copyright fights as robots assimilate the human workforce.

00:32:29

[Banjo music starts]

Dave: Today's episode is brought to you by Wolvic XR browser. Check out the new, open-source Wolvic XR browser by our friends at Igalia.

If you've been listening to the show, you probably know about Igalia. They've been doing a lot of cool stuff and bringing us lots of things on the Web like - I don't know - CSS Grid, the :has selector, unblocking container queries, focus visible (through their open prioritization effort), Math ML. You can put math on a webpage. It's a long list.

They have the second most contributions to Chromium and WebKit, and they're building their own browser now, so it's available on a bunch of XR devices: Oculus, Huawei, VR Glass, HTC Vive Focus, Pico Interactive, and Lynx. I didn't even know Lynx was a VR headset, but it is and it's cool. And it's coming to more soon, so check out wolvic.com for more; wolvic.com for more. Thank you, Igalia for sponsoring the show.

[Banjo music stops]

00:33:40

Chris: Well, like you said, we just had bdougie and Rizel on the show, and we talked a lot about GitHub actions. Now we have a question here. More like, actually, a little follow-up from Russel Heimlich referencing something else you mentioned even before that show about, like, I kind of want, when my GitHub action is done, for it to go ding. [Laughter]

Dave: Yeah.

Chris: Like a toaster ding or something.

Dave: Yeah.

Chris: He's like, "Yeah, you can absolutely do that. There's a thing called a webhook action that you can apply, which is in the GitHub marketplace." Interesting.

Dave: Oh, interesting.

Chris: That's part of how that stuff comes together, right? You could write it yourself, but they almost don't want you to (with GitHub actions). It's like, "No, just plunk this one in there," which is kind of what I think the model that kind of Netlify was hoping for with their build process step things, like just pluck them off the shelf. Let the sitemap builder just work.

He's just saying if you do that, though, then once you have a webhook, then you're off to the races. Just have your little Raspberry Pi be listening for that webhook on the Internet, and have it hit a bell or something. I don't know.

Dave: Oh, man. Yeah, this is really interesting. The webhook could just - whatever - hit some URL, and then that URL could play some noise.

Chris: Yeah, that could just be a browser window you have open listening for webhooks on a socket or something. I don't know. That's a million things.

It makes me wonder how convoluted we could make DevOps. You know? Be like the GitHub action finishes. It hits a webhook, which triggers a Netlify build, which when it finishes commits a file to this other thing, which kicks off an Azure DevOps flow. How insane could you make--?

00:35:31

Dave: Well, no. Well, this could work today. I kind of went down the path of building an extension that lists--

I was like, "Could I find the event that triggers -- the custom event that triggers when an action completes?" Then on whatever action finished, ding, you know, play some wave file or something.

Chris: Yeah. Oh, this is funny. Russel really literally points to a repo which the description is "Trigger sound effects from a webhook." [Laughter]

Dave: Oh... Well... Jackpot.

Chris: Yeah, that's what this I20 is. You can play sounds or listen to a message using text-to-speech. You'd just spin this up at some server. You'd have to have the browser window open, I imagine.

Dave: Mm-hmm.

Chris: Whatever, but it's pretty ready to go.

Dave: Interesting.

Chris: Fun.

Dave: It's Python. I don't know how to do that, but I could probably put it somewhere, so.

00:36:24

Chris: Maybe. Good question. I have to execute some Python code on a cloud server. Go. Digital Ocean, maybe?

Dave: DO. DO. We're going to choose DO.

Chris: Heroku? I don't know.

Dave: Heroku can do it. We'll see. Yeah. Hey, this is cool. Thank you, Russel. This is pretty interesting. I like the webhook, like adding another webhook to my -- a webhook action. I like that idea of, like, go do this. You know? Yeah, that's pretty cool. It would be cool if there was an event hook. Could I just trigger a custom event? Then I'm just like, "Play sound." Ba-ding.

Chris: What you'd want is a little menu bar app, though. Right? Because then you don't have to--

Dave: Yeah.

Chris: You don't have to be at a website for it to work. You want it to be on your system.

Dave: Yeah, well, and that would be cool, too. In the webhook, I get -- maybe that's the solution there.

Doesn't Jim Neilson have a Netlify deploy toolbar thing? I could have it just basically be like, "Okay. Actions are running," and there's a little running man or green icon spinning or something. Or it turns green when it's done. That's all I want. I just want done and a ding.

Chris: [Laughter]

Dave: Or a plunk when it fails, or something like that. Just give me that.

Chris: I wonder how you could distribute it. If you were going to build a thing for all Luro App employees - or something - that would do confetti on their screen when you sold an account or something. Could you have multiple apps listening to the same webhook?

Dave: Ooh...

Chris: Or is that antithetical to other? Is that like the reverse Internet?

Dave: I don't know. Well--

Chris: [Laughter] How does that work?

Dave: You could certainly use "if this then that" or something and post some Slack message or something. But I don't know how you'd get it to blast confetti, but you could totally put a GIF or something. You know?

Chris: [Laughter]

Dave: That would be pretty cool.

Chris: Yeah.

Dave: Maybe this is the next expressive layer of the Web is a public hooks API or webhook, and then you're like, "Go do this thing. Just go celebrate something," or whatever. I don't know.

00:38:42

Chris: I've got one here from Ben LaBron. Sorry. I'll chuck a few more in the--

Dave: Sure.

Chris: --in the thing here. He's wondering, "What are your thoughts on static site builders that look to compete with WordPress such as Statamic?" I forgot what that one is called. "With no database, what are you experiencing with them, and would you recommend them to a beginner familiar with static site generators but don't want to go the headless CMS route? Would love something akin to Jamstack WordPress."

Yes. I've been saying that forever. Right? Give me Astro in the front and WordPress in the back. [Laughter] Kind of thing.

Dave: Yeah.

Chris: Which you'd ever want. I don't mean to answer -- we don't have to dig too much into this, only saying that we're going to have some creators of CMSs like this on the show this summer.

Dave: Mm-hmm.

Chris: So, maybe we'll abstain from going too deep in this until we can talk to them, but feel free if you have a thought, Dave.

Dave: No. It feels like, especially as the winds of change are happening and as things are going more server-side, this seems like something that should exist, right? Your options were WordPress-only server, and then it was like, well, or React all client. You know?

Chris: Yeah.

Dave: Then Jamstack sort of came along and said, "Why not both? We're whatever," you know? But static is probably your best bet, like statically generate everything.

But I feel like there's some middle ground here for a hybrid approach. And so, I think it would be cool if something was like, "Hey, I am more dynamic in the backend, but I more or less function like a static site." That would be pretty cool.

00:40:35

Chris: There's this, "If you do one thing and do it well," kind of thing that if you make a great CMS, people will find a way to use it.

Dave: Mm-hmm.

Chris: And if you make a great site building system, people will use it, too. And they kind of want them both, and it's hard to pull off both together in a single product. Pretty tricky stuff there.

There is this disconnect, though, that's like, "What's the best headless CMS?" I bet it probably has come up. Didn't that just come up in the Discord the other day? Somebody was asking about that.

Dave: Yeah. Maybe, yeah.

Chris: It was like, I don't know. What is the best headless CMS? And it's like, I don't know. There's Contentful. There's Sanity. And they're not all the same. It's not like just pick one and use it. They all have different tradeoffs and stuff. But it's like, what is that? What are you asking, essentially?

If you get that good, then what? There's another half of the coin that's there. I always found it weird that there's a disconnect between the place where you create the content, which is super important to me. I think that's like I almost don't care as much about the front end. I'll find a way to fricken' make a website. I'm not worried about that.

Dave: Yeah.

Chris: I'm worried about what the experience of crafting the content is. And that if you're truly isolated, like the CMS had no opinion whatsoever about the front end, how awkward that is. When I build content, I almost expect to be thinking about where it goes and what it's doing on the front-end, too.

It's just my lack of experience or that I've done it a certain way so many times. It feels so awkward to me to go in and craft a bunch of content and not be thinking about where it's routed on the front end. You're just like, "That's not my responsibility. The site builder will deal with routing."

00:42:26

Dave: Even with the idea of columns, right? Like, "I want this image next to this image." Now your display and your CMS are starting to get connected. You know?

Chris: They are. They are. Yes.

Dave: You really expect, though, (in the authoring phase) to be able to express, "Hey, these two things are next to each other." You know? And so, I think Gutenberg does a pretty good job of it, like, "Here. Let's do a block with some columns."

Chris: They kind of do, but it's almost because the existence of trust, like I use that feature because I think that's nice to be able to do columns right in the CMS. And so, I pluck out the CSS that's exactly what the WordPress admin uses to put on the front end because I want there to be that perfect connection forever between the admin experience and the front end experience, but that's weird. You know? I don't trust that everybody does that necessarily, especially in a headless CMS situation.

Dave: Imagine a world where WordPress shipped some Web components, and the backend editing interface and the front end interface used the same layout components. Imagine this.

Chris: That would be great. It's actually a really good idea. You know?

Dave: Yeah. I've always thought layout components would be a killer Web component feature. Like the app layout with the little sidebar on the side and the big column in the middle, or a search bar. Then you even get into this idea of maybe that app layout could morph into a dual screen, like for those Windows phones or whatever - the Surface Duo, I think is what it's called.

Or there's this new thing where, in an electron app, basically, if the Chrome is removed, you can suck your UI up into the top stripe.

Chris: Oh... Right. Right.

Dave: I think it would be cool if there were layout machines that kind of did this for PWAs and electron apps and stuff like that.

Chris: Yeah, it's a good idea.

Dave: I don't know. Text me. Give me 10% in royalties. That's all I ask.

[Laughter]

00:44:45

Chris: Well, speaking of Web components, Stuart Pullinger writes in, "Have you heard of the block protocol?"

Dave: Oh, yeah.

Chris: Block here meaning just the -- this was that -- who was it? Is it the Stack Overflow? It was some -- it's like a famous Internet guy who decided to do this. Who was the famous Internet guy? I missed it.

But it's kind of like, you know, famous Internet guy is like, "You know what the Internet needs? Blocks. I'm going to do this from scratch without really--" totally discounting all the achievements of Web components so far. Even WordPress, too. But I think, in the launch blog post, it was like, "You know how Notion has blocks and WordPress has blocks? Like that, but our blocks."

Dave: Yeah. I would love to -- I think the view has matured more because I think people in the Web component sphere and even open UI sphere were kind of like, "Hey, we should talk." You know? Yeah, when it launched, it was like, "We are fixing UI," and it's like, "Well... Yeah, cool."

Chris: It was tone deaf. That's what it was to me.

Dave: A little tone deaf, and it was kind of like, "Well, yeah. Let's do it." But there are also some other people who are working on it, and so--

Chris: Joel Spolsky, that's who it was.

Dave: Joel Spolsky. Joel on Software Joel. I think it was cool, but I think, yeah, it was kind of like it came from a React world and an "I use Notion" world. But that's fine that there are different corners of the Internet.

Chris: Maybe it's a good idea, but I think WordPress is way ahead with this in that the blocks, the Gutenberg thing, project, is open source.

Dave: Mm-hmm.

Chris: It already is this and with the same goal. They want you to use it in other stuff.

Dave: Yeah.

Chris: And I know maybe that's a power play or something. Maybe if you make all the other CMSs feel like WordPress, why don't you just use WordPress or something, so I don't know. Maybe there's some weird, secret, nefarious stuff - or something. But I kind of doubt it. You know?

Dave: Mm-hmm.

Chris: I kind of think they just want people to use good software and that's that. But protocol means something else than just straight up what is the HTML of this block - or whatever. I'm sure it has something to do with how multiple blocks interface or how they nest or what the API for them should be like and stuff.

Dave: Yeah, what the data store is and stuff. I mean I'm looking at one, and it's like a Notion-y style table with filtering and sorting. You know how Notion does that and, like you say, what column and ascending, descending, show/hide different columns and stuff. It's pretty awesome. I like that. Or a spreadsheet or video tag. You know?

Chris: Yeah. Fine.

00:47:41

Dave: I don't know. I'm into UI. I think what's a bummer is I do not use React so I can not use this stuff. You know what I mean? Unless it--

Chris: Oh, this is react specific? No way. Is it really?

Dave: Yeah... Yeah, so--

Chris: Ooh... Really?

Dave: So, I mean, but here's what I'll also say. There are whole corners of the Internet that believe React 1 UI is a solved problem, React 1, so why would you use anything else? There are VCs and people like that who absolutely 100,000% think that. TypeScript won, too, so sorry. You just have to--

Chris: A little tricky because, you know, it is pretty dominant at the moment but there are so many popular alternatives at the moment.

Dave: It won, Chris. It won.

Chris: [Laughter]

Dave: It won.

Chris: Fair enough. Fair enough.

Dave: Why would you use anything else? And so, taking that into consideration, they probably made a great bet because people have React stuff, and so they want to - whatever - ride the cool waves. That's fine too.

Chris: Yeah, maybe. What I'm thinking, though, is I don't think Joel Spolsky really gives a crap about the VC of this. He's in that phase of life of, like, I'm more interested in changing the world kind of thing than rubbing some VC shoulders.

Dave: Yeah. Yeah.

Chris: So, the choice here is questionable. Stuart wrote in, "Shouldn't we be using Web components for this?" Yes, we should, Stuart. Good question. Isn't this just--?

Dave: I think so.

Chris: Yeah.

[Laughter]

Chris: Because you can still do interesting block protocol stuff but use Web components as the core technology powering it. Why not?

"Is this just a workaround until, unless, React has decent support for Web components?" I don't know enough about it to answer that won, but maybe.

00:49:32

Dave: Well, and I think that is part of it too, right? I think React is the cool kid. React is popular. React won. React doesn't support Web components vis-a-vis no Web components. You know?

Chris: Yeah.

Dave: In some ways, our hype cycles and our survivorship biases are playing against each other. We're just like, "Oh, it's big. It won. Coke - Pepsi - Coke," you know? Like that's the only one that matters. You know? We're not even open to a Dr. Pepper option.

Chris: Yeah. An aspect of that, though, is that Coke might be dominant forever. They have been for a long time.

Dave: Yeah. Yeah.

Chris: But React will not be. It just won't. You know? There's no evidence that a piece of third-party technology hangs on for 50 years - or something. That's just not going to happen.

Dave: Well, can I interest you in some asp.net, Chris? [Laughter]

Chris: The front end is just different like that. Different ideas will come along, and things will evolve. It just won't be the darling. Things can hang on for a while, but to base the whole thing on that seems silly, especially when there are Web platform stuff that really will be around for that long because that's how the Web platform works.

Now, to be fair, WordPress's block thing is also React. You know? So, it's not like they're doing any better in that department.

Dave: Ka-chung. Yeah, well, so yeah. The heart is awesome, is in the right place. I think everyone wants more richer, newer UI. You know? Then there are people on browsers (Nicole Sullivan) working on this stuff, like, let's do it. You know? When is it going to happen? I do not know, man. I guarantee you the JavaScript stuff will move faster than Web standard stuff, and so this might be a great place to start.

00:51:43

Chris: Mm-hmm. [Laughter] His final question is, "Is the term widget too Web 1.0?" [Laughter] Nope, widget is coming back. It's coming back.

Dave: Widget is back, baby.

Chris: [Laughter] Good question.

Dave: Do you remember that?

Chris: Do they really use the word widget in their marketing?

Dave: Remember that YouTube comment that called us Web 2.0? Do you remember that?

Chris: [Laughter] Thank you. I appreciate that.

Dave: I still cry about it.

Chris: [Laughter]

Dave: People on the Internet are mean.

Chris: Did we? I kind of missed that one. I'd like to read that.

Dave: Really? It was something like -- it was like, "When I hear you guys talk about floats, I'm like, no one uses that."

[Laughter]

Dave: Just like, okay. Perhaps we were explaining something. [Laughter] We were explaining a very old way to do it.

Chris: It's not like I wake up in the morning and crack my knuckles and just find elements to float. You know?

Dave: Yeah. No. We were just explaining an older problem and why it is weird. Whatever. Anyway.

Chris: [Laughter]

Dave: People are mean on the Internet. I'm too soft. All right.

Chris: All right.

Dave: We should wrap it up. Thank you, dear listener, for asking questions, man. This show is brought to you by you and your ability to ask questions. We really appreciate that.

Follow us on Twitter, @ShopTalk Show, for 16 tweets a month. Head over to the Discord, patreon.com/shoptalkshow for the D-d-d-d-discord because it's fun in there. And then, yeah, we have--

I'm out of words, Chris. I'm going to hand it over to you. Do you got anything else you'd like to say?

[Laughter]

Dave: My brain is fully shot.

Chris: I feel like you overestimate how many times we tweet in a month, too, you know.

Dave: Oh, yeah. I thought with videos we'd go up, so maybe I'm going to....

Chris: Oh, dude. I have like four video ideas that we can do.

Dave: Oh, really? We should do that.

Chris: Yeah.

Dave: We should do more videos. Okay.

Chris: Here's my concept is that you can -- that there's Jest lite. Not actively developed anymore. It works fine in the browser, right?

Dave: Yeah.

Chris: Meaning tests. I know you're feelings on tests are different, but there's a fun way to do a video style. Tell us. Write in if people have ideas for this, but you know like Cassidy Williams has a newsletter and, at the bottom of it, there's always an interview question. Not only in her newsletter, but you Google her out, and you can find interview questions like that.

We could solve them on YouTube by the first thing you do is write the little Jest test that's like test this function and assume that it gets to the right value. Then we sit down, and we think out the solution to it.

Dave: Use Copilot.

[Laughter]

Chris: Not available in CodePen. Sorry.

Dave: Oh... Okay.

Chris: They didn't license that to us for free. But yeah, it's kind of fun, and I just think of it because I've been watching all these, like, calming sudoku videos where they just calmly use logic to solve the problem. I'm like, "Oh, Dave and I could do that," but we'll have to -- we'll sooth Jest tests.

Dave: Oh, what's the -- cracking the sudoku?

Chris: Yeah, cracking the cryptic, baby.

Dave: Crafting the cryptic. I love this guy. He's full of ASMR. There's a little bonus segment at the end.

If you stayed for listening to this, tweet us a high five emoji, and we'll high-five you back. Anyway -- [Laughter]

That guy is so calming, but what is he called? The people who make the test for him, they have a word, like the--

Chris: Oh, they're just constructors or builders. Yeah.

Dave: Yeah. But he's like, "Oh, this is just a fantastic one. Oh, there's only one square filled."

Chris: Yeah.

Dave: "How am I going to do this?" Yeah.

Chris: The philomath square or the phistomefel.

Dave: Yeah.

Chris: That's my favorite one. The phistomefel ring is this, like, he's a constructor but he also famously has all these proofs, right? The really hard sudokus, you can't just be like, "I'm going to see if there's a 3 in row 5."

Dave: [Laughter] Yeah.

Chris: "And there's a 3 in row--" You're like, "No. No. That crap has long sailed."

Watching these guys solve sudokus, they have to use theorems and stuff to prove stuff.

Dave: Yeah, and they're like, "Well, we all know that this row adds up to 45," and I'm like, "What?!"

[Laughter]

Dave: You know what I mean? "So, that's going to be a 2 or a 3," and you're like, "Huh? How did--?" Anyway, it's great.

Chris: It's good stuff.

Dave: Wonderful.

Chris: Yeah.

Dave: All right.

Chris: We can be this. We can be cracking the cryptic for JavaScript tests.

Dave: Perfect. I'll crack it. Let's go!

All right, Chris. Do you got anything else you'd like to say?

Chris: All right. See ya later. ShopTalkShow.com. Blah-blah-blah.