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 and with me is Chris--in the booth--Coyier. Hey, Chris. How are you?

Chris Coyier: I'm doing pretty darn good. Thanks, Dave. It's just me and you today. I thought we'd talk drama, you know, hashtag. #HotDrama

Dave: Oh, my favorite. I got a story, you know.

Chris: Hmm.

Dave: We printed up these old ceramic coffee mugs that said #HotDrama on them a long time ago, right?

Chris: Yeah.

Dave: They were too expensive to ship. They cost more to ship than they did to make, and they almost certainly ended up broken when they got to their destination.

[Laughter]

Chris: I remember that. Yeah, yeah.

Dave: It broke. My last one broke. The handle popped off finally.

Chris: Oh...

Dave: So, I was....

Chris: Serendipitous timing. You didn't actually tell me that, but we've just been dreaming of this for so long. What did we do? Brought them back. Hmm.

Dave: Brought them back. The cup is back. The mug is back, and it's for sale. It used to be a special gifted item only, but now it's for sale over at the CSS-Tricks shop.

Chris: And it can't break because it's metal. You know?

Dave: Yeah, it's the metal enamel.

Chris: But not really. It's enamel. Yeah.

Dave: Enamel, which is, I guess, a ceramic.

Chris: They call it a camping mug, I guess, because it's just indestructible. You know? I'm still playing around with it a little bit. Not really. You can literally buy it right this second. I just want to get the pricing and shipping and stuff just perfect on the thing. But by the time you listen to this, it definitely will be, so don't worry about it.

Dave: Don't worry about it. But no, it's all very exciting.

Chris: Yeah, it's cool. We're going to make like $5 on these things.

Dave: We'll make five whole dollars.

Chris: It's not about the money. It's about having a cool -- it's literally a sweet mug.

One of the product shots they give you when you make it is the cup full, just overflowith with blueberries.

[Laughter]

Dave: Yes.

Chris: I was like, that's so perfect.

Dave: That's going on.

Chris: I don't know why I love it, but I love it. Yeah, that's going on, indeed. So, there's that. It says #HotDrama on it because we used to talk about drama more than we do. Even when we were more into those days, we would always be so tempered about it, so let's bring back those old days and talk about drama in our classic kind of tempered way.

[Law & Order chime]

00:02:35

Chris: You blogged about Safari. We may have even mentioned that on the show already.

Dave: I think we intended to talk about it and then we just skipped over. [Laughter]

Chris: We just didn't do it?

Dave: Yeah. Yeah. Yeah.

Chris: Oh, okay. Well, you weren't alone. There was something in the water. There were a lot of people blogging about kind of the pains of Safari (maybe months ago at this point). It kicked off with an Alex Russel post that was just fricken' packed with APIs that they were missing and stuff.

It wasn't just entirely whiney. It was like, "Look at all the data." He packed it with dates and usage and all kind of very important stuff.

Then people have been following up, including you. There were some good lines from you in there about, like, "Every project I have has these three categories of Safari stuff in it," right?

Dave: Yeah.

Chris: Stuff that's in there that doesn't even need to be anymore, but I don't even know, and then stuff that should be in there that's unique to Safari, but I didn't even know about it. Then things that absolutely need to be in there because just Safari alone needs it.

If you start thinking of it that way, you're like, "Wow!" [Laughter] "Safari is a little gnarly over there."

Dave: A little. That was it, right? I did this with IE 9 or something, the problem with IE 9. People complain about, "Oh, Safari is the new IE," or whatever. My brain is like, "That's cool. Whatever. What are the actual problems?"

I just try to have a minute where I sit down and write out the actual things I know I do to support Safari (or with the browser). Then I'll dig into the "can I use" to try to figure out is that something, is there something I'm missing, or something like that.

I think, for me, that's what it's all about. It's just like, let me actually document what I actually do to support Safari. It's cool, but it's got weird edges. I realized, through doing that, meta viewport stuff, which it's all been twisted around. But apparently, meta viewport, Jonathan Neil, I think, was on Twitter messaging us or you or something. It was just like meta viewport, you can just do width equals device width, and that's all you have to do.

But for the longest time, I've been doing 400 different attributes and stuff like that.

Chris: Zoom 1 and all that.

Dave: Zoom 1.

Chris: Yeah.

Dave: Minimal UI, blah-blah-blah. You know? Anyway--

00:05:16

Chris: Yeah, so that's changed, and how do you know exactly what the correct thing to do is? Remember HTML 5 boilerplate used to be the reference for that stuff. It would tell you what to do use and why, and that's kind of dead now.

Dave: Yeah. Oh, shoot. Who was it? Oh... I'm going to... Let me get back to this, but somebody wrote -- I'll put a link in the show notes. I'm forgetting how to pronounce his name -- wrote a take on their most recent boilerplate, and I thought it was really cool. They're basically boiling down what it takes. Let me find it real quick.

Chris: Is it Manuel Matuzovic?

Dave: Yes! That's it.

Chris: Yeah, okay. That's who I was thinking of, too. Yeah, it's pretty cool. This is probably more needed than it should be, or there should be more blog posts like this of people that go line-by-line through this stuff and question it all because it's been a while since (I feel like) it's been hardcore questioned, all the crap we put in the head and where we put what and why and stuff and what we're doing that we don't need to anymore. Yeah, interesting. Yeah, initial-scale=1, is that even on the chopping block? You don't even have to initial-scale anymore?

Dave: Apparently, you don't have to initial-scale anymore.

Chris: Hmm. Well, what do you know?

Dave: I don't know. Didn't know that.

Chris: I don't know. I don't know how you look up support for that either. If you remove it, is that true for 92%? Every time we talk about browser features, it's always predicated on, "Yeah, but who is your audience?" I've always thought that global audience numbers are so attractive to look at and think about and are largely irrelevant to your project because your project has statistics unique to your projects.

Guess which ones matter more, the statistics on your project or the global ones? Well, there's a clear answer there. It's the statistics on your project. If you're at 91% usage of that working, that's not good enough. You know?

Dave: Right. Yeah. No, but that even -- I don't know. You'd probably get support for meta viewport. But support for meta viewport auto initial-scale=1, you know? [Laughter] I don't know you find support for that.

Chris: Yeah.

Dave: Other than firing up a device lab with thousands of computers. [Laughter] You know?

Chris: Yeah. Yeah.

Dave: I don't know.

Chris: But your list is like there's special button stuff you've got to do. There's viewport unit stuff you've got to do. There's the notch on phones you've got to deal with.

Dave: Mm-hmm.

Chris: There's the weird favicons. Are they single color or not or what's going on with that? There's missing CSS features. There's WebKit prefixes for things that are hanging on. There's all kinds of stuff. So, the list of Safari-specific stuff seems to be growing, not diminishing. Any time one gets knocked off, a new one seems to arrive. Is that just going to be story forever?

There are people, I think, for whatever reason, has bubbled up. Right now, is like, "Okay, Safari! Let's do this!" You know?

00:08:26

Dave: "Come on, dude! Get it together!"

But you know there's more stuff, too. Right now, I'm using Loading Lazy everywhere, just like God invented it 100 years ago. [Laughter] It was born in the Web platform. I'm using it.

Chris: Yeah.

Dave: And you know, but I'm not Polyfilling it. But I've been in situations where it's like, "Well, loading lazy is too new and Safari doesn't support it, so we have to implement this whole JavaScript JS lazy load thing." You know?

But guess what. Pretty soon -- I don't know when -- but pretty soon, maybe 15.1 or something, loading lazy will be in Safari. Focus visible will be in Safari. Aspect ratio--which is awesome--will be in Safari. That's literally going to make fit vids irrelevant. It's gone. [Laughter] It's deleted from your codebase come like September.

But you're probably going to have to hang onto some kind of Polyfill for a while to make sure, you know, when this will eventually go away. It'd be cool--I don't know if this is possible--if there was a "this exists to support these browsers," if there was some browsers.json or something you could put in your repo. That would be the whole reason this exists is for this browser, this browser set. There's a new way to do it.

Chris: Oh, what a clever idea. Put a txt file at the root that has your little notes on what does what. Code comments can kind of do the same.

Dave: Right.

Chris: But maybe if it's in a consolidated place, that would be extra useful. You know I was thinking of that. I'm like, "Oh, really? We can delete that?" Because I'm sure I still run it on CSS-Tricks at least.

But you know I think of what it did was it threw a div around the thing. Remember?

Dave: Mm-hmm.

Chris: It did a little DOM manipulation.

Dave: Yeah.

Chris: Then I think because that became the outermost HTML element of the video, I targeted that with my own CSS in which to apply bottom margin, right?

Dave: Right. Right.

Chris: I can't just quite rip it out.

Dave: True. True.

Chris: I've got to move some CSS around, so I shouldn't have done that. I think that's probably -- when you're using something like that that kind of brings its own DOM, you should try to find another way to not use its side effects. You know?

Dave: Yeah. I just think it's going to be different. I don't know. What you do with your image or your videos, I guess, will be a little bit different.

Chris: Yeah. I love that you can just chuck aspect ratio on there. That's so cool.

Dave: Yeah.

00:11:02

Chris: You do that with CSS. Does that arrive in time for the first render? I guess it does. That's the point of CSS blocking, right?

Dave: Yeah. Yeah. I mean if you have a video high on your page, you may want to specify the block size.

Chris: Yeah, but why is SVG so stupid then? I always have to put width and height on SVGs to make sure they don't show up super big. But isn't that the same thing? The CSS should already be in place.

Dave: I think it should, but I think because its own HTML document, it's just like, "Great. You have space? I'll take it." You know? [Laughter]

Chris: Hmm.

Dave: "I'll render it very big. Why not?" But no, it's going to be cool. Safari is getting better. I hope that came across. There's a whole section of stuff Safari has that I didn't realize it had because A) no one is talking about it. Maybe Jen Simmons.

Chris: Yeah.

Dave: We need to pay her more to go out and talk and be like, "Use this now."

Flex gap, dude, it's in everything now.

Chris: Hmm.

Dave: Ta-da!

Chris: Yeah.

Dave: It arrived this summer. Let's use it.

Chris: I don't get as mad for reasons like that. It does improve. Jeremy blogged about it today as we were recording. There's a baller line that's like, "Safari is not an evergreen browser."

Dave: Ooh...

Chris: Which it kind of is because when upgrades happen, but they're so infrequent, right? They're not every two weeks or whatever crap. It's like six months or a year, a lot of times, right?

Dave: Mm-hmm.

Chris: Yeah, so to call it not evergreen is bold and I like it because it isn't and I'd love to see them on a two-week cycle. Wouldn't that be badass? I'd love them to take the most money in the entire world of any company and just pour it on Safari someday.

Dave: Yeah.

Chris: Just douse it, you know.

00:12:56

Dave: I mean it's telling when people are like -- well, I mean, shoot. We can come out and say this. Throw our podcatcher recorder under the bus. We're using an app that takes our audio and video and stitches it into a thing. I use another one for my other podcast.

Chris: Mm-hmm.

Dave: We're getting Chrome-only warnings for this stuff. That sucks. I use Edge. It does not work in Chrome Edge for some reason.

Chris: This used to be "the thing" that everybody worried about - "the thing" that the Web starts to fragment slowly, and little signs come up that says, "This site only can be viewed in X." When those were the prevalent times of the day, days were bad. We ate mud sandwiches.

Dave: And I use two or three apps now that only work in Chrome, capital C Chrome, not little chrome.

Chris: Yeah. Well, let's be mad at Chrome for a minute then. You'd think that they're the ones you wouldn't be mad at, right? But I don't know. It depends. They support APIs that nobody else does. Isn't that bad? But somebody has got to go first, so it's hard to cast a stone in that particular situation.

Dave: Yeah. There's another post. Was it HTTP Toolkit blog? It was maybe a smidge more ranty than mine, but kind of pointing out. They were very on the, like, "Safari is killing the Web. Here are places where it's stalled out the Web."

In that post, I think a lot of people blame Chrome. They say, "Oh, Chrome has all these engineers they're paying. How can Safari keep up?"

Chris: That worked for Mozilla, but not for Apple.

Dave: For Apple. Apple is a trillion-dollar company. [Laughter] How do we just let them slide? With a browser monopoly, how do we let them slide on, "Well, you can just do whatever you want"?

Apple could have as many people as Chrome has to work on their browser, but they don't. What can we do to get to that point or close the gap?

Chris: Right, that's when people lift the meta-conversation up and say, "Well, if you're not going to, well then at least flip the switch so we can have other--" on iOS and iPad OS, have different rendering engines.

Dave: Yeah.

Chris: It's like one or the other or both.

Dave: Yeah.

Chris: But not neither. Either make Safari awesome or allow -- I would say both would be really cool.

Dave: Yeah, I mean I think they should probably pour into it a lot more because otherwise we're going to have this baby browser [laughter] that's the default browser on iOS, and then we have these supped-up super-nerd browsers that are hooking up to blue-tooth and stuff like that. I don't know. That'll be an interesting twist if that were to ever happen that they opened it up, but I don't know. I don't know if they ever will.

Chris: Yeah, I don't know. Sometimes tech news is shocking. You wake up one day and you're like, "Holy what?! Stack Overflow sold for what?!"

[Laughter]

Chris: I can imagine a news story of that caliber happening one day. Either that or the government gets involved and says, "You can't do that anymore." You know?

Dave: I think the government needs to get more involved in tech, but that's my hot take. [Laughter]

Chris: Yeah. Okay. So, we know Safari, they're missing a lot of crap. Everybody has got their own list. It was interesting to read all these posts because literally everybody has their own different list of reasons why they're mad at Safari, essentially, so I think that's kind of telling.

Jen, who is our best insight into Safari, is like, "Keep 'em coming. We're listening," so that's great.

00:17:02

Dave: I think A) Jen is the perfect person to have in this job. She did it for Mozilla, just like, "Tell me your problems. Let's see what we can do." I think that's awesome.

I just read this Cloud Four. Cloud Four, Jason Grigsby's agency, they have a really good blog, actually, if you're not subscribed.

Chris: Tyler Sticka blogs there all the time.

Dave: Yeah.

Chris: Every post, I have to link to because I'm like, "Damn, that was a good blog post."

Dave: It's just like, "Man, y'all are like, 'Hey, we think about it.'" [Laughter] So, anyway.

Chris: Yeah.

Dave: It's very cool. He was on an Olive Garden website or something like that, and it's all part of a chain of restaurants, but a group of restaurants.

Chris: You're telling me Olive Garden isn't a locally run kind of, "Hey, mamma Italiano," thing that's just in my neighborhood?

Dave: It's not a local.

Chris: Oh, okay.

Dave: Yeah, it's not a local operation, surprisingly. Chipotle, Chris, not a little--

Chris: Similar?

Dave: --Mexican--

Chris: Not a mom and pop?

Dave: Yeah, cafe, no.

Chris: Too bad. Yeah, I remember this, the $8 billion button or $6 million something where he couldn't check out because of a viewport unit crap or some crap like that. Bush the button off the page and it was literally unsolvable outside of dev tools. Meaning that there's a lot of missed orders there. He does the math and, every twist and turn, he underestimates the number.

Dave: Yeah.

Chris: And he still comes up with that many millions of dollars in lost revenue kind of thing. He must be right. How would you refute it?

Dave: Yeah. No, well, I mean even if he's wrong, it's probably like, oh, it's only ten million, not eight billion, or whatever.

[Laughter]

Dave: You know? You're like, "Yeah, exactly. That's still a lot of money for a restaurant." It just was the thing where they're doing a flyout column for your checkout and then it just got stuck. It's stuff like that.

He said, you know, I think it's 100 VH bug. It's not necessarily Safari, but I would also say it's probably Safari [laughter] in this situation.

Who is like, "Oh, you know, we've got to really test the checkout in landscape mode on iPad OS"?

Chris: Yeah, but the human being, too, because if your Puppeteer test says, "Click this button," it's just going to click it. It doesn't know--

Chris: Yeah, it's query selector button click.

Chris: Yeah.

Dave: And it works, so there are so many of those things. Anyway, I think what I find interesting, it's interesting to heard nerds like us complain about Safari, but it's also interesting to hear Apple Wonks and stuff complaining about new Safari too because they're kind of like the general Apple fanboy crowd is not happy with the new tab situation.

00:20:09

Chris: No, no. The funniest one is, "We took every button you might want to press and we put it in a kabob menu."

Dave: [Laughter]

Chris: "You're going to love it."

Dave: Yeah. Well, and--

Chris: But that's changed, you know. I think they plucked them out. I think reading mode is easier now. I think the share button used to be tucked in there and that really annoyed me. I'm like, "I click that share button five times a day, at least."

Dave: Yeah.

Chris: Get that out of a kabob, please.

Dave: Yeah. I don't know what they're going to do there.

Chris: But they did. They plucked it out.

Dave: Okay.

Chris: That's the point of a beta is that things change and whatever, you know.

Dave: I think somebody was saying there's like six different interactions stuck inside one tab or something like refresh and edit and share.

Chris: Yeah. A big one too is it's a little hard to see what tab is active and the URL bar moves around in Safari, depending on what tab is active. I was trying not to weigh in on that stuff because I'm like, I little bit like it when software takes some chances and tries some stuff and then is willing to change it, you know, depending on stuff. I don't think just because a URL bar moves puts it in the automatically bad category.

00:21:18

Dave: No, I agree. I'm into going weird. Edge has vertical tabs now. I don't know if you've used Edge's vertical tabs.

Chris: No.

Dave: Where they show up in a sidebar, and then they can collapse. It's great and bad because you're like, "Okay, I need that, but then I don't know which icon, you know, which of these GitHub icons is the actual one I want."

Chris: Hmm.

Dave: It's good and bad, but then they have an option to tuck up, like the location bar or the address bar goes all the way up as high as it can go, so it gets really condensed. It's really nice, but then your window is hard to move around. Anyway--

Chris: Hmm.

00:22:02

[Banjo music starts]

Dave: If you need content for a website or whatever, you should do yourself a favor and use Sanity.io. Sanity lets you treat content as data. You can query it. You can update it through APIs. You can query your images by dimensions or dominant colors and so on.

It comes with an open-source customizable CMS that you can make your own using familiar tools like React. Sanity has an active and kind community where you can get help, too. Go to Sanity.io/shoptalk to get a boosted plan - no credit card required.

Also, Sanity is hiring, so go to Sanity.io/careers to find out more.

[Banjo music stops]

00:22:54

Chris: All right, well, plenty of interesting things happening in Safari land. I want to take one minute to shift our ire to Chrome for a moment because it's affected my life.

Dave: Get mad at that guy. Yeah.

Chris: [Laughter]

Dave: Let's go. Let's go.

Chris: Well, the big one was the CodePen support inbox gets flooded with people saying, "Why does my pen not work?" Right?

Dave: Mm-hmm.

Chris: Loads of them for a couple of days before this gets reverted. They removed entirely with just a little warning in the console that says, "All JavaScript dialogs are deprecated in cross-origin iframes."

CodePen is a big cross-origin iframe because we have to run your code in a little iframe on the page that does not share the same domain (for security reasons), so you don't have access to cookies and all that stuff. Otherwise, it would be the most embarrassing security failure of all time. You know?

Dave: Mm-hmm.

Chris: Now, if you type "alert" in a CodePen, it just doesn't do anything.

Dave: Oh, no!

Chris: Yeah. Alert! Can you think of a programming tutorial that--?

Dave: Even on CodePen.com?

Chris: Oh, yeah, CodePen.io. Yeah, you just can't do it. You can now because people were annoyed, and then they said, "Oh, we're going to roll it back for two weeks," after this couple of days of Internet outrage as to what the heck.

Dave: Mm-hmm.

Chris: Because it's not just CodePen. It's any cross-origin iframe, meaning every single code playground type of place, right? All of them, all these programming tutorials.

Dave: Can't use confirm or prompt or alert.

Chris: Or prompt or on before unload, or anything. Anything that brings up a native--

Dave: On before unload - interesting. Okay.

Chris: How bad is that one? That's awful. Then when you dig in and you learn we're not just doing this for cross-origin iframes, even though the security story is a little more interesting to be told there because the dialog looks the same whether it comes from an iframe or not. I think that's part of their reasoning, like, "Oh, that can be a security weirdness, or at least confusing to users or whatever." But the actual plan is just to nuke them. Gone from the Web platform.

Dave: Wow!

00:24:54

Chris: Just not a thing anymore. So, it's not just tutorials, because I think they have a story that's like, "Well, they're not good to use in programming. There are other things that you can do," yadda-yadda. But they are literally control flow things.

Dave: Yeah.

Chris: A) They're JavaScript blocking. An alert stops the thread until you continue it.

Dave: Yeah.

Chris: That's a pause button for video games, for example, for free.

Dave: Yeah.

Chris: But there are other things like do you want to quit your account, yes or no?

Dave: Do you want to break my app?

Chris: Yeah.

Dave: Do you want to break my app?

Chris: Yeah. Yeah.

Dave: Yeah.

Chris: Prompt returns a true or false value, so it can be a logical gate in your program.

Dave: Yeah.

Chris: So, your program is now broken because your logical gate is broken. Then they say, well, page views wise, it's 0.009 or 0.006 or something, a page-load with a cross-origin iframe in it. Fair enough, but I think this was what Dan Abramov brought up. He's like, "Yeah, but you might use that logical gate on your cancel account flow."

Dave: Right.

Chris: Of course it's not a high number of page views, but it doesn't mean it's not super important.

Dave: Right.

Chris: Like, what do you mean rip this out of the Web platform? What are you smoking? And why is there not WAY-WAY more information about this?

Then they're like, "Well, what you can do in the cross-origin iframe is just post message it to the parent and then have the parent do it."

You're like, "Well, okay. A) That's not blocking anymore, so that is still a fundamental--"

Dave: Yeah, so I'll just email Salesforce to support that, or whatever.

[Laughter]

Chris: It turned into almost like Twitter fighting.

Dave: Oh, yeah.

Chris: You know Chrome devs get a bad reputation for this, but sometimes it's the thing where it's just like, "Well, did you look at the doc?"

It was one of those things like the Hitchhiker's Guide to the Galaxy when they're going to destroy Earth.

Dave: [Laughter]

Chris: They're like, "Did you go read the notice on this other planet in another galaxy?"

You're like, "No! I missed that. Did you put it up over there?"

Dave: You know I was not at TPACK 2018.

Chris: [Laughter]

Dave: I admit it. I forgot to attend. Yeah.

Chris: I think it comes from what WG writes. I don't know that it's entirely born out of Chrome, but it kind of felt like it because they're anxious to get it rolling.

It felt very mismanaged to me. But of course, I feel that way because I'm on the first line of defenses here. Whose inbox got filled with, "Why the hell did you break my pen?"

Dave: Right.

Chris: Was it mine or was it theirs? Well, I guess it was both of ours in this case because I made sure to fill their inbox with the same--

[Laughter]

Dave: You were like, forward, forward, forward. [Laughter]

Chris: But it just was like you're breaking how people learn JavaScript. You're breaking all this historical stuff. Is it as big of a concern as you make it out to be?

Dave: Yeah.

Chris: It just seemed abrupt. And now they're delaying it for six months, but definitely have not changed course. So, you won't see it today. If you go to CodePen, it's still working, unless you have this one little weird version that shipped for a couple of days in there where it was ripped out.

My Twitter is blowing up over it.

Dave: Really?

Chris: The conversations are thick and long, just thousands of tweets long of conversation about and around this.

00:28:12

Dave: Well, I think you just answered why monocultures are bad. [Laughter] Browser monocultures don't work. Yeah, no, I mean that's a serious change. I don't doubt that there's reasons, like security reasons. Because it is control flow, you can just lock somebody in your website forever. Before unload, "Are you sure you want to leave?" So, I understand that that's--

Chris: Oh, yeah. That's the only API that makes that possible.

Dave: Right.

Chris: That's it. You have that or nothing, and so that will really screw up CodePen if you can just all of a sudden close a browser tab without saving. That forces every app that has potentially unsaved work to figure out some kind of very reliable real-time saving strategy, which might be good.

Dave: Yeah.

Chris: Is alert actually good to use in your production programming? No, it's not. I get the point.

Dave: Right. Right.

Chris: There are better things to use. Use async/await for stuff and whatever.

Dave: Right. Use it as an alternative to debugger every day of my life.

Chris: Yeah.

Dave: Yes, I do.

Chris: Has it been around for 20 years? There was one Tweet. Let me try to dig it up. I think it was Ben Lesch. It was, "I thought there was some kind of holy doctrine to not break the Web. Right? Didn't we live in that world? Yeah." It was like let's never do that.

Dave: Right.

Chris: That's the thing that we never do is break the Web, and then we just try to evolve it. I know there's mistakes from the past that we can maybe smooth over, but don't break a 20-year-old logic gate.

Dave: Yeah. No. That's wild, man.

00:29:54

Chris: Anyway, I'm not super pleased about how that went down, especially--

Dave: Well, it's interesting too, right? That's bad, big time, using alert. Definitely you're a bad guy if you ever used it. You know? Bad guy.

But I have this other situation working on a client site. They installed Google tag manager, and somebody on the tag manager team put a debugger in there, like just type debugger. So, if I ever open dev tools, everything stops in one second on some weird for loop that they're debugging in dev tools.

And so, I'm just like, I guess I won't use debugger. [Laughter] I'll just un-pause the debugger because something -- nothing in my code is debugging, but their code is. So, it sucks.

Chris: [Loud exhale]

Dave: They've broken the Web for me, but I don't know. I guess I'm only saying there are a lot of ways we could break things [laughter] that we don't really even -- that we aren't policing. I don't know.

Chris: Yeah. Let's see. It seems like this is going to be a bigger story before it gets smaller, so we'll see where it ends up. It sounds like at least six months just for the cross-origin iframes and then probably at least a couple of years for all of the rest of the control structures, but we'll [laughter] see. You know?

Dave: I'd be curious how popular confirm is - or whatever. You could probably search CodePen code and see how many confirms you have or alerts you have.

Chris: Yeah.

Dave: I bet it's in the millions.

Chris: Right. Then is the point eventually that they don't care?

Dave: Yeah.

Chris: Right? Is that ultimately going to be the thing?

Dave: Yeah.

Chris: If we fast-forward a couple of years? I don't know. You know?

Dave: Yep. Oh, well. Well, I'm sorry you're having to deal with that. That's too bad.

Chris: Yeah. I mean it's delayed for six months. If I have to do the -- it won't be that big of a fallout. If we have to do the post message thing, we'll do it, but that does not actually fix it. It kind of just smooths it over. But I would think, in six months, the story will be more clear. You know? It'll be like, what's the actual plan? I think they've learned their lesson on the outreach thing on this. It's a huge, big deal. You know?

It's like the first thing you learn in JavaScript. It'd be like if HTML was like, "Divs are out." You know?

Dave: Mm-hmm.

Chris: CSS is deprecating border. Border is out. No more border.

Dave: We'd be like, "Wait a minute."

Chris: [Laughter]

Dave: Hold on. Margin and padding are the same thing now.

Chris: [Laughter]

Dave: What?!

[Laughter]

Chris: We're going to switch that up, we decided.

Dave: Oh, boy. Please don't.

00:32:44

Chris: Anyway, what else is on your mind? [Laughter]

Dave: Oh, man. No, that's wild. No, I've just been -- I want stuff to get better. I want new elements. I want new APIs. I want new everything, but it's really hard to get there. Somebody does have to go first. Usually, in the last decade, that's been Chrome. Before that, it was Safari. Before that, it was Firefox. Before that, it was only IE. Before that it was Netscape.

Somebody has to kind of go first and be like, "We're just going to make a bunch of stuff and just see how it goes." Then they get all popular because they have all the new, cool stuff. Then I don't know.

But now, we're, I guess, in a place where we're breaking stuff. I'd be curious to see what's everything on the "we're going to remove it" list. I don't know that I've ever seen that list ever, so I'd love to know that list.

Chris: Yeah, I would too.

Dave: There's also, I feel like the Web needs a CONBON, you know? Like, "This is in progress. This is getting close. This is out. This is getting deprecated." You know? I wish we had that for Web features because there are so many. Even in open UI, we're working on a bunch of stuff: popups, tabs, different stuff. But can you use it? Not quite. You know?

I was looking at accent color in CSS. I'm sure you're familiar because you run a CSS blog.

Chris: I know carrot color, that's the one where the carrot and the input. What is accent color? Hmm. Oh, is it the line, like a spelling error? Is it that one?

Dave: No, no. Accent color would be like so you know how Chrome has those new -- Chromium, I guess, has the new inputs. It's like a gray checkbox. You can do accent color lime green, and it'll turn your checkbox lime green. So, you can basically inject your brand colors into the custom or into the native elements. Then you can do two colors, like lime green, white to make the checkbox white or blue or whatever. That would be gross, but you can kind of do a background and a foreground color.

Chris: Wow!

Dave: As an accent color, it's flagged in almost every browser. The support is actually pretty radical if you can unflag it. I don't know if it's coming out or when or what, but I'm like, "Ooh! This is very cool, and it would maybe get things 90% of the way there." Checkboxes, radios, you just want them to look a little bit better or a little bit more on brand, less browser standard. It's a really cool tool for that, but I don't know how far away we are, though.

00:35:44

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by, well, Automattic, really, in a variety of their products that we can all kind of stir together to do something cool.

Did you know that you could send one of those paid subscription newsletters with WooCommerce? You totally can. Here's the little cocktail to make it work.

You have to have a WordPress site, and this works on your self-hosted WordPress site or WordPress.com or whatever. You have WooCommerce on it, so you're e-commerce ready. Then you throw on WooCommerce Subscriptions. That's $199 a year. It's a paid plugin that allows you to do subscriptions. Yeah, you sign up. You pay me $5 a month, whatever it is.

Then you throw on this plugin called Mail Poet. Mail Poet is like an email builder right in your WordPress dashboard, so it can build all kinds of cool emails. You can even use it to customize your general e-commerce emails for WooCommerce. It has all kinds of beautiful email templates in there.

But you can send it out to your active subscribers in WooCommerce Subscriptions. So, it's pretty straightforward to wire that all up. It's like a natural fit. It all works together nicely.

Author an email in Mail Poet. Have a segment of your list that's only for active WooCommerce subscribers. When you hit send, it just goes out to those people and that's that. If they stop paying you, fall off the list. They stop getting the email. A new customer signs up. They have an active subscription. They'll get the next email you send. It's all beautiful like that.

You just pay for a little bit of WordPress hosting. In fact, the WordPress.com business plan will totally do this for you. Get WooCommerce Subscriptions and then Mail Poet is even free (using their sending service, which you're going to want to use because it's great) up to 1,000 subscribers. Your costs are pretty minimal here. It's going to be cheaper than doing it any other way, and it's all on your website. It's a very satisfying way to pull off the paid newsletter subscription thing.

I think it's the way to go. Good job, Dean. Thanks for the support.

[Banjo music stops]

00:38:02

Chris: Eric Griffiths writes in here. Thanks for the email. He's reacting to something I said in some previous episodes about WordPress and where do you start. What's the build process, not having a super modern, new spin-up, a site, like what's the DX like? Can it be great?

I think there are actually a lot of answers to this, but somehow still not to my satisfaction. You know? There's not a component library, necessarily, or something that tries to bring you that. I don't want to get into it so much.

But recently, I wanted to spin up a new, black-on-white, just nothing WordPress site, just to start out with the most nothingness I could possibly start with on a theme. I feel like even that's hard to find. You Google around for blank themes, you don't find a lot.

Dave: Yeah.

Chris: What you find is a lot of starter themes that attempt to help you with that DX issue, so they come with their own. I've seen a lot of these that come with the prebuild Gulp process with browser-sync and stuff in there because they're like, that's the hard part about these WordPress themes.

Sure, here's the files, but then there's nothing. You're just editing files and hitting command-R. You don't have Sass, and you don't have any Babel or nothing.

Dave: Yeah.

Chris: It's like, "Here. We'll give you this blank theme," but even the blank theme is super opinionated - in my experience. I looked at four or five of them and it was very deep. It wasn't intending to be minimal, necessarily. It was like, "Here's our opinion about what a blank theme should be with DX in it."

Although, now I feel like I'm being salty about it. Eric Griffiths writes in with his, I think, called Understrap.

Dave: Okay.

Chris: Which is like Bootstrap and Underscores. Then it gives you this -- this is just an example of one of them. In fact, I didn't even look at this one. I looked at a bunch of other ones. Just a shoutout to Understrap for Eric Griffiths. He wrote in about it. But it applies a little of the DX stuff to a WordPress theme.

I still didn't really find what I was looking for, which is, I don't even want the Gulp process. I just wanted nothing. I just wanted a really, really stripped down, nothing.

There's Underscores by Automattic, but even that's a little more opinionated than I wanted it to be. I wanted one of these really classic, just the absolute minimum amount of files with very, very little styling kind of thing to start from scratch with, and I wasn't coming up with much. I might have to make my own at some point or something.

Dave: Uh-oh. He's doing it.

Chris: No. We'll see.

00:40:44

Dave: You know what's interesting is the number of files here is a lot. [Laughter] Anyway, I know it takes a lot. WordPress is sophisticated, but it's a lot of stuff.

Chris: Are you looking at the GitHub repo or something?

Dave: Yeah. Yeah.

Chris: Yeah.

Dave: This is lots, but you know it's stuff you need. It's like the index, the header, the page, the search, the sidebar, the single, comments. You've got to have all those. Archive, author, you've got to have those. It just ends up it's a lot of files to stitch together.

Chris: Yeah. Every time, it's like you can agree on 85% of this stuff a lot of times, and some of it is just not even optional. You've got to have a style.css file. You've got to have an index.html file. And you really should have an archive, a search, and a 404, and all that stuff.

Then there are ones that are like, "Yeah, but would I have done it like this? Would I have included these eight-page templates? Would I have broken into these fake PHP partials in this particular way, or do I tend to think about it a different way?" I don't know.

Dave: Yep.

Chris: There are a lot of files here. You know?

Dave: Yeah.

Chris: It's like I diverge a little bit, and so when I have to think in your way, then my mind starts to reject it, especially when I'm in this case of, like, this is just a quicky dick little project. I want as minimal amount of files as I can because I cannot dedicate a lot of brain space to this. Ideally, I want about six PHP files in here that control the whole theme.

00:42:15

Dave: Yeah. At Paravel, we've been talking about the ten-peso version quite a bit. I don't know if you've watched Three Amigos. There's this scene. It's kind of famous, but this guy writes a big telegram, you know, "Three Amigos, come visit our town. We need your help." He's like, "It's 100 pesos."

They're like, "Oh, we can't afford 100 pesos. We only have 10 pesos."

He goes, "For you, I'll give you the 10-peso version."

Chris: [Laughter]

Dave: It's like, "Three Amigos, come to our town to stop the infamous El Guapo." You know?

Chris: [Laughter] It got truncated?

Dave: It's just very simple.

Chris: Oh, I see. But the message got across.

Dave: It's smaller.

Chris: Yeah.

Dave: The message got across. We were like, "What is the cheaper version of the thing we're building?" just so we can scale it down and get the thing.

The joke is, later, the three amigos read the thing and they're like, "Come to our town. Stop." Like a telegram. Like, "Come to our town. Stop. The infamous El Guapo."

They're like, "Infamous? What's that mean?" They're like, "Oh, it means even more famous." You know?

Chris: [Laughter]

Dave: That's the joke.

Chris: It's the exact opposite of the Mark Twain thing where he was like, "If I had more time, I would have written a shorter letter."

Dave: Right. It's kind of that. But I don't know. We're big on, is there a simpler way to do this? But that even gets me into this thing. I've just been blogging my feelings here - in my brain. It's all in my Notion, not on my actual site.

When somebody is like, "Let's just do the simple version," that's hard to tease out. One thing I hear a lot, it's like, "Can we do this?" I'm like, "Yeah, man. You can program satellites with code. I think we can make a website." You know? There's JavaScript on Mars. I can do what you're asking, but the bigger question is, can I do it in a budget? Can I do it in the timeframe? Can I do it without tearing the social fabric of American democracy?

[Laughter]

Dave: There are other questions we have to ask than just "Can you?" because I think the answer is always yes. But then people are like, "Do whatever is easiest."

Then it's like, "Well, now I have to go and investigate. I have to find potential candidate solutions, interview them. [Laughter] Go down a path. Rank them from easiest to hardest.

Now, I have easiest. Easiest is actually, "Do nothing." Literally, delete it. But what you're asking for is the next easiest, so okay. Now--

Anyway, it kind of spins you off into these whole, like, "All right. I want to do the easiest or make the easiest WordPress theme," but it just spins you off in this whole other direction.

What would easiest mean in this context? Oh, we've got to have a build process. Oh, we've got to have an easy Sass structure. We've got to have an easy -- you know?

Chris: Yeah.

Dave: I'm just like, easiest means nothingness (in my brain). I don't know. Lightest touch possible.

Chris: I understand where you'd want to try for a more complete because it probably works for whoever wrote it really well.

Dave: Mm-hmm. Yeah.

00:45:55

Chris: Then sometimes really opinionated frameworks just take over the world, like Next or Create React App or Nuxt and stuff that are just so good and do offer all this kind of similar stuff. You can see that sparkle in developers' eyes, like, "I can do that. I can offer that kind of DX for this other platform." Then for some reason, it doesn't land as well.

Dave: Well, I think part of the reason Create React App and even Gatsby exist is because Webpack is hard. [Laughter] They're like, "Hey, we figured out that part. We'll just give it to you." You know? You're like, "Oh, great." I think it's almost like a side-effect, right? We made it easy, but it's because this other thing was hard - or something.

Anyway, you're still on the hunt for a simple them, then?

Chris: Nah. I think I found one and then I just started ripping out, lalapalooza, just everything and just seeing where I got. It was kind of like a fun -- it was a fun one.

There's an artist that I remember from a local museum that I liked her work and then kind of like stuck in my mind for a long time, and then would periodically try to chase their work down and not find much. Then I noticed that her website was down, but I still was able to find her email address somehow. It was Facebook or something. I can't remember.

I emailed her and just didn't ask about the website but just asked about art, like, "What do you got?" You know?

Dave: Mm-hmm.

Chris: Maybe you can just mail me something. She responded, and I was like, "Oh, yes! I finally basically tracked you down," not that it was that hard to do, but felt good, and bought some art.

I bought kind of a small one because her work is expensive. She's good. You know?

Dave: Yeah. Yeah. Art is expensive.

Chris: Yeah, it is. I was like, "But I like the big ones." They're energetic charcoal drawing stuff, but I don't know that I want to pay that much money or that I could budget that with the family and all that.

"But I noticed your website is down, so maybe we can do this," like back in the day when I worked at the pizza place, we'd call Hardee's and trade pizzas for hamburgers. "I'll trade you a website for art," kind of thing. She seemed pretty into the idea.

It was like, let's do this really simple static site thing. I'm like, "Ah, yeah." Heck, yeah, I'll Netlify banger, and that'll take nothing. "I'll make it real nice for you."

Dave: Yeah, 45-minute, yeah, here we go.

Chris: Then she's like, "I want all this, this, and then you've got to be able to buy the prints." I'm like, oh, snort, you know?

Dave: [Laughter]

Chris: That's the next-level stuff. You know?

Dave: Ooh, oh...

Chris: But I'm like, fortunately, I have some experience with WooCommerce. You can buy a coffee mug from ShopTalk Show. I got that all dialed in, so I'm pretty comfortable with WooCommerce, and I'm comfortable with WordPress, so it's actually not that huge of a stretch to just throw up a pretty simple thing. What I would have done with a static site anyway, but actually just do it in WordPress instead, and then just slap WooCommerce on it.

Dave: Yeah.

Chris: Wire it up and hopefully, that's fine. [Laughter] But that's good that she asked for it because then it puts it into, like, that's still what I consider thousands of dollars' worth of work and thus worthy of a nice piece of artwork.

Dave: Yeah. Well, yeah, I guess you have to hit a certain level to unlock the art.

Chris: Yeah, like a 45-minute Netlify site isn't worth a $3,000 drawing.

Dave: Right. Right. Yeah, nah, I see the trade-off there. That's cool, though. I like that you're like, "I'll just barter a website."

Chris: Yeah.

Dave: I've got some landscaping I need to do. Maybe I should trade for a website because every landscaper website is hot garbage. Let me tell you.

[Laughter]

Chris: Doesn't that comfort you sometimes, though, if you're looking for the website of a bowling alley in some town or something? You kind of don't want it to be too good.

Dave: Yeah. You don't. You want it to be lime green and whatever, have a frameset. You just do. [Laughter] Yeah.

Yeah, we should wrap this up. I play pickleball, Chris.

Chris: Okay. Yeah.

Dave: I do pickleball now.

Chris: Yep.

Dave: Pickleball. We're on this app.

Chris: Fastest growing sport in America. That's what it's always said.

Dave: Fastest growing sport in America, man. It's pretty good. It's like tennis meets ping-pong, and it's good.

But anyway, we have this little app. I'm not even going to say the name of the app because I don't want to give them any negative publicity and get sued, but it's terrible. It's just awful.

There's like a wallpaper on it, and I'm just like, "This is a very poorly, badly designed app," but everybody at this little pickleball club is using it. Hundreds of people are using it. I'm just like, "I should have made this. I should have made this little app."

Chris: Probably.

Dave: I'd have customers because I could have done a better one, for sure.

Chris: I wonder if, like, ten years from now there'll be a lot of people like me and you, and people in our bucket, kind of getting closer to retirement and then realizing that our only hobby is pickleball and we have another ten hours of the day left, but we don't really need to make money anymore because we've theoretically spent the last ten years doing that. That there's a surge in really great apps for stuff like that because we're bored and can now do it in the free time that we now have and didn't before.

Dave: Yeah. We'll just do whatever.

Chris: I realize that was a very privileged thing to say, America, so don't kill me.

Dave: [Laughter] No, well, the whole idea is, well, maybe we'll have Social Security when we're ready to be done.

Chris: [Laughter]

Dave: But you know.

Chris: Yeah.

Dave: We'll see. All right, well, cool.

Chris: Well, folks.

Dave: One day.

Chris: See you later, Mr. Dave.

Dave: Yeah.

Chris: Thanks for the podcast. That was fun, as always.

Dave: Thanks for getting old with me. [Laughter]

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Join the D-d-d-d-discord at patreon.com/shoptalkshop.

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

Chris: Oh, ShopTalkShow.com.