Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another--got a tree trimming service outside the shed--show of the ShopTalk Show. I'm Dave--cankersaurus rex--Rupert and with me is Chris Coyier.

Chris Coyier: You're not going to have any trees left.

Dave: Yeah. The interesting thing about trees is when they die in an ice storm and big limbs fall down, there's a bunch of damage you don't see. And so, the canopy then turns green because winter is done. Then some branches in your canopy are just dead yellow, you know, dead brown. And so, you're like, "Oh, there's a dead branch about 100 feet up in the air. I will either be killed by that one night in the wind or I will hire somebody, pay somebody $1,000 to go up in the tree and get it.

Chris: Hmm...

Dave: Who knows, really? It's a gamble.

[Laughter]

Dave: Who knows? You know? What do you do? Life choices, right?

Chris: I'd love to offer you some guidance, but yeah, I can't.

Dave: I mean to each his own. You know?

Chris: Yeah.

Dave: Take the gamble on getting impaled by a limb falling 100 feet or pay somebody a bunch of money to go do that, so.

Chris: Yeah. Yeah. Yeah. You'd think that our rational brains would guide us to the right decision. You know? You know some people; it would be out of the question to pay somebody for this task. You know?

Dave: Yeah.

Chris: And that's understandable. And some people would be like, "Of course, somebody else is going to deal with this problem. I can't possibly deal with this problem." But there's a lot of gray area in between, in between those things.

Dave: Mix in some kids who could possibly get, you know, wounded. You're just like, "Wow, I'm just going to lose all my money at this point." [Laughter]

Chris: Sometimes it astounds me what I'm willing to do. You know? I'd like to change the math on that someday, but I think it's embedded into our core.

Dave: Yeah.

Chris: I need to stop going to the post office. I can't stand it. You know?

Dave: Oh, yeah.

Chris: [Laughter]

Dave: For sure. You can pay somebody $5 to come do that for you.

Chris: I know, but I never do.

Dave: Yeah. Yeah, yeah.

Chris: I will take on this two-hour job - or whatever - that inflicts not only time but stress. Anyway--

00:02:38

Dave: No. I wonder. It would be cool if... Here's an app idea. Here's a free app idea.

Chris: Mm-hmm.

Dave: Something that helps you understand or make those decisions, sort of like you do a little quiz, like, "Would you rather pay $1,000 to have somebody climb up in your tree to get a branch or just risk it?" It builds out your risk profile, and it sends that to investors. That's fine. Cryptos.

Chris: [Laughter]

Dave: But then that's what it's going to do behind the scenes, obviously. But then it just helps you, so you're like, "Hey - whatever - Dave GPT, should I go to the sports game today even though it's very expensive?" It would just tell you, "Yeah, dude. Yeah."

Chris: Yeah.

Dave: "You do that. That's within your risk profile or your--"

Chris: That's what feels like real AI is, is actual make decision-making based on all this, the data from my actual life and brain.

Dave: Stuff you know about me or, yeah, it's like in Austin, every house was built in the '60s and '70s and has cast iron pipes, right?

Chris: Mm-hmm.

Dave: Turns out cast iron is not a very good material for long-term pipes.

Chris: Oh, really? But it doesn't rust.

Dave: Because it rusts.

Chris: It does rust?

Dave: Yeah, because water goes through it. It rusts from the inside. Then trees burrow into it.

Chris: Hmm...

Dave: Break it. It becomes brittle over time. Houses shift. It cracks and splinters.

Chris: Wow!

Dave: Yeah, so it's bad when it's under a slab. If you're raised up, if you're on a pier and beam, it's probably fine because it's just pipes underneath. Right?

Chris: Yeah, but just picking any material that can rust seems like a questionable move for a thing that holds water.

Dave: For sure. For sure. For sure. But we didn't know that in the '60s. How could we have ever known that metal rusts. You know?

Chris: [Laughter]

Dave: [Laughter] Plastics were new back then. But anyway--

Chris: Yeah. That's true, but fucking copper wasn't.

Dave: So, you as a homeowner have to decide: Am I going to pay $20,000 to get the pipes replaced? People literally dig under your whole entire house to replace the pipes. Or am I just going to risk it? [Laughter]

Chris: Yeah.

Dave: Am I just going to wait until it fully implodes and my toilet is coming out my sink? Those are your options. You choose.

00:05:14

Chris: Are pipes like the TypeScript of houses? You know what I mean? The best outcome is that you spend $20,000 and it's the same--

Dave: Implementing types or fixing my pipes? [Laughter]

Chris: You have the same codebases that you had before. You know? There's no user-facing improvements at all. It just takes time, money, and effort to do the conversion. And the best case is that it's the same as it was before. But maybe it will break less.

Dave: Yeah. Maybe. You never know, right?

Chris: [Laughter] Pipes are the TypeScript of--

Dave: Types are the pipes of--

Chris: Types are pipes.

Dave: Types are pipes, baby.

[Laughter]

Dave: We solved it.

00:05:56

Chris: Whew! Whew! Yeah. See, that's why you should have... We're not past our prime. That's what I've been thinking lately because I have one... I have a conference coming up.

Dave: Mm-hmm.

Chris: In a couple of months: Render ATL. It looks massive.

Dave: Nice. Render ATL is good. I should go to that.

Chris: You probably should. I was amazingly invited to speak at it.

Dave: Oh, wow.

Chris: Yeah. Really, people speak very highly of it, and the website is super cool. Scope-wise, it just seems huge. I don't know how they pull that off.

Dave: Yeah.

Chris: It seems like out of nowhere.

Dave: Eighty-plus speakers.

Chris: Most of these things struggle to get 200 people.

Dave: Yeah.

Chris: They're like, we have thousands of people coming to this thing.

Dave: Ooh...

Chris: Really, a strong community. Anyway, I can't wait. But it's also the absolutely only one on my schedule.

Dave: Mm-hmm.

Chris: Which didn't used to be that way. You know?

Dave: I hear what you're saying.

Chris: Mm-hmm.

Dave: But I don't think it's you. I think it's just the situation. I think COVID cut the wind out of the sails of conferences in a big way.

Chris: Yeah.

Dave: I know Marc Thiele from Beyond Tellerrand, he's--

Chris: Yeah. What's Marc going to do?

Dave: Duesseldorf is back this week, next week, or the week this comes out.

Chris: Oh... So, for Beyond Tellerrand, you mean.

Dave: Yeah, for Beyond Tellerrand, and I think they're going to do a Berlin. But they're finally back.

Chris: Hmm...

Dave: I guess restrictions have laxed to the point they can do that in Germany. Oh, but it was not easy. He wrote a post. He just was like, "It's been a hard two and a half years of this."

Chris: No doubt.

Dave: Having the business that is very in-person-based for him suddenly get wiped out. Yeah. He had a really good post. He's just like, "We made it through. But man, ugh, can we just say, 'Ugh'?" [Laughter]

00:08:05

Chris: Rough. Yeah. This is making me think about the situations in which that happens. Totally out of his control. COVID happened, and this happened to restaurants and everything. He's not alone in that that was a huge problem.

Dave: Mm-hmm.

Chris: But then I was thinking about just yet another way that Chris Coyier is blessed in this world is that I've lucked out and I've missed the bullet on so many of those things (in a way) because of computers being the thing that I do. Nothing seems to be able to slow that down.

I'm sure an absolute super world crisis could. But COVID didn't really affect CodePen very much - one way or the other.

Dave: Yeah.

Chris: You'd think, for some businesses like Zoom or whatever, they did gangbusters. But we kind of just stayed steady.

Dave: Mm-hmm.

Chris: Interesting. But it's been like that for so many things. There's never been an American president or something that had a particularly outsized impact on what's going on with that. And so, that's the big stuff. But even little stuff, you know, I even mentioned I broke my arms a couple of years ago--

Dave: Yeah.

Chris: --and it didn't even slow me down personally. All this stuff can happen to me. I can be so sad and depressed, which seems to be going around. I think it's the end of winter.

I know it can be a little bright down there, plenty of sun, but a lot of the country is buried under snow and clouds.

Dave: Mm-hmm. The end of the season. A little effective disorder, yeah.

Chris: Yeah, and you're just like, "Come on." You know? I've been feeling it a little bit. But still, does it mean that I work any less? Hell no. [Laughter]

But then I think of my friend who owned a bunch of yoga studios. Right?

Dave: Mm-hmm.

Chris: Managed to get out a little bit before COVID, but kind of stayed around for the transition and stuff. COVID just destroyed all that.

Dave: Yeah. Yeah.

Chris: Then she personally had an accident recently and hurt her knee. She still teaches some yoga and even teaches me sometimes, does little classes with me. Just gone. You just can't. You can't step on your knee. It's over.

Dave: No. Yoga without a knee. Yeah, that's tough.

Chris: Here's me, again, who just seemingly anything can happen to, and I'll just computer my way through it.

Dave: Yeah. I read your post. You were just like, "Even if you're sick in bed, I can do a little tippy-tappy." If the brain fog is there, you've got to just nap, right? Listen to your body. But if you're just like, well, shoot. I'm either going to watch The Mandalorian--

Chris: Yeah.

Dave: --or type some stuff on my computer. You know? I can still type. I can type at midnight. I was up until--

Chris: I felt a little weird saying it because it's not like I'm saying, "Oh, you sickies. Don't tell me your sick. Get back to work." That's not what I mean.

Dave: Sure. Sure. Sure. Sure. You're just saying your personal capacity.

Chris: For me, yeah.

Dave: Yeah. Yeah. For sure. There are people who have a rougher go. Your health is not allowing you to do that. I totally respect that.

Chris: Yeah.

Dave: But usually, though, even when I had COVID and I was in the full brain fog, I was like, "I could--

Chris: Yeah. I might as well look at Slack. You know? [Laughter]

Dave: Yeah. I can do it.

Chris: Yeah.

00:11:28

Dave: I'm kind of out of different stuff. This actually is relevant to something I've been thinking about. You have a kid, right? [Laughter] Does your kid have just a pile of fidgets, pop-its and gummy bears, like the little squishies and stuffies, of course, and stuff like that?

Chris: Uh-huh. Oh, sure. There was a weird one where there was a rubber mat that looked like bubble wrap a little bit.

Dave: Oh, yeah, yeah.

Chris: You push it one way and then you could push it the other way. I was like, "Oh, is this a little game?" No. I'm like, "What is it?"

Dave: What is it for?

Chris: Yeah. [Laughter]

Dave: What is it do with it? Yeah.

[Laughter]

Chris: Yeah.

Dave: Yeah. Yeah. I feel like I want to bring that back to the Web. Do you remember how iOS had widgets or Mac OS has widgets? It's still there. You can swipe and go see some widgets.

I want fidgets. I want fucking meaningless apps that I just pull up on my phone instead of Twitter or Mastodon. You know? Just like this is going nowhere. It's not even a game. There's no score. It's just move this little ball around with another ball - or something.

Chris: I really like this. Yeah. Yeah.

Dave: Ah! I just would like--

Chris: That's kind of what... I think of that in pull-to-refresh.

Dave: Mm-hmm.

Chris: In that you could be like, you know, we were most addicted to Twitter and, what was it, Tweedie was out, the one that first invented pull-to-refresh. You could be at the top of your timeline just flicking that thing with your thumb. Just blah...

Dave: Paging, page hitting, yeah.

Chris: Yeah. Yeah, and so what's that like on the Web? Is it nice? Does it even have some kind of benefits? As you're fidgeting, your brain is still kind of doing stuff. Maybe you're thinking about other things that are on the page. You're a little less apt to maybe leave the page because you're in search of fidgeting. You can do your fidgeting right there.

Dave: Yeah.

Chris: [Laughter]

Dave: Yeah, it's like I don't... I don't know if you've... Have you played a WarioWare game before?

Chris: No.

Dave: It's basically just like eight seconds of chaos. It's a bunch of mini-games, but it's just like - whatever - pick this guy's nose. That's it. That's the whole game. I want these kinds of things, these little fidgets so I can just pull up my phone and get a random fidget and that's what I'm going to tinker with while I'm in line at the post office - or whatever.

Chris: Yeah. Okay.

Dave: I feel like there's just such an opportunity. There's an opportunity to waste my time not in exchange for money or maybe in exchange for money. But I would love to just have these little kind of pointless applications, maybe mini-games or very simple games. Just go do whatever, like catch apples falling from the sky or something. Just like, "Oh, this would be great. I'll just do this."

Anyway, I've been thinking about that. I have a couple of ideas of stuff I might want to build, but I'm just kind of like, when am I going to build it? I don't know. Like a maze. Here's an idea. Mazes.

Chris: Yeah.

Dave: Who hates a maze, Chris? It shows a maze, and then they can draw on the screen how to get through the maze.

Chris: Especially as a kid, and now I've retained my ability to draw one, which I don't think is a particularly amazing skill or anything. But I can sit down with a piece of paper and draw particularly like a right angle or a circular style maze. My fingers just do it with lots of little choices.

Dave: You know how to do it. You know the metric or whatever.

Chris: Yeah, right. Anybody could do it, but kids can't.

Dave: Yeah.

Chris: Because kids are idiots. So, my ability to do that is amazing to a child. Then they sit there and play the maze, and they love it. Then try to draw their own.

You know another thing I think of here is go to Brad Frost's site, bradfrost.com. He's got all these circles in the upper left.

Dave: Mm-hmm. Yeah. Yeah.

Chris: You can just... You can just fidget.

Dave: People, people, people.

Chris: Yeah.

Dave: See. That's exactly--

Chris: It's fun.

Dave: It's fidgets, man.

Chris: Uh-huh.

Dave: I feel like it's the next wave in Web design technology. Just give me something to fidget.

Chris: Yeah. Right. I hate to have brought it down to time-on-site metrics, but if you need a reason, it couldn't hurt.

00:16:08

Dave: You totally could do that. I mean, yeah, you could totally exploit me that way, but I recommend - I don't know. I'm like, I should just collect these or kind of come up with little doodads.

There were some games. They used to do the JS to 10K. Do you remember that, or JS10K?

Chris: That's funny. Is that literally a play on couch to 5K?

Dave: No, sorry. It was JS10K. It might have been a couch to 5K or something, but it was under 10 kilobytes of JavaScript. You had to make something, like an app or a website.

Chris: Yeah. Yeah. Sure, and there was a game version of it, probably, that was even bigger.

Dave: Yeah. Yeah, and so that would be kind of... Those sort of experiences, these just little micro-doodads.

Chris: Hey, it maps to Web components pretty good. If you're going to do this, can you please submit it as a Web component so I can just mount it? You know?

Dave: Ooh... See. That's okay. Yeah. Just give me a Web component and I'll have an index of thing that literally just loads Web components. Hell yeah.

Chris: Yeah. Yeah.

Dave: Hell yeah, brother.

Chris: There are examples. You know I also think of the Chrome. It feels like if there's some kind of error page in Chrome, there's a little dinosaur that jumps and stuff.

Dave: The dino, yeah. Heck yeah.

Chris: Yeah.

Dave: I saw a TikTok. This guy was at a coffee shop and he was filming the barista--

Chris: Yeah?

Dave: --who looked like he was taking an order. He looked like he was punching in an order. The guy zooms in. The guy is playing the Chrome Dino.

Chris: [Laughter]

Dave: [Laughter] The barista is playing the Chrome Dino, talking to a customer, pretending he's getting an order in the system. The best, dude. This guy, whatever, the subtitle was like, "He's playing the dino game." I just was like, "Oh, my God. That's so good."

Chris: Wow!

Dave: Just ruining productivity, that's what we need to do.

Chris: There was one in the Discord of this guy who put, like, "How is my driving?" stickers on a bunch of cars with his phone number on it.

Dave: [Laughter] Yeah.

Chris: And then would field the phone calls and just mess with people. It was just tremendous. He'd just play YouTube for them, but he's still on the phone, even though they're on hold.

Dave: Yeah. He put on the hold music was Smashmouth, but just the first, "And you don't stop running, and you don't stop running, and you don't stop running."

Chris: But it was cut perfectly that it stops running, don't stop running.

[Laughter]

Chris: Then he would work that in to be like, "You know, sorry for the delay. The calls keep coming, but they just keep coming."

[Laughter]

Dave: It's good.

Chris: It was really, really funny.

Dave: Yeah. There were a couple of sort of videos like this, the guy who tells people to return their carts, and then people pulled guns on him and stuff. [Laughter] It was just like... I like that level of chaos. I do. I just don't know how it impacts the world. It is pretty severe.

Chris: Mm-hmm.

Dave: I'm just going to put stickers on cars to my phone number and then just waste people's time. Like, oh, my god, for a video. Ugh. What a weird world.

Chris: Yeah. You've got to feed the content machine.

00:19:22

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Frontend Masters. That's frontendmasters.com.

Hey, Dave. They're pretty good, right?

Dave: Oh, I'm a big fan, big fan.

Chris: Heck, yeah. They're super. They just run a good business over there. Lots of good learning material.

One thing you should do is click that learn link in the header. You'll be taken to their learning paths area, just /learning at Frontend Masters.

This is what I was so envious of when I was running CSS-Tricks is that I never had course material that was like, "Start here. Do these things and it will train your brain forward in this arena." CSS-Tricks was never good at that. It was more like a newspaper. Just somewhere where you landed via Google or whatever. This is better than that.

[Laughter]

Chris: This is learning done right because there's this big SVG circle that fills out the percentages of finishing a course. It gives you that satisfaction of actually learning something, right?

Dave: Yeah. The way my brain works is it's so much easier to follow a course, like end-to-end, versus piecing together 52 different blog posts and YouTube videos and stuff like that and hoping I understand React or something like that. That's what I really like about Frontend Masters is it's taught by experts and everything like that.

Chris: Yeah, man.

Dave: It's great. One of the most common questions on ShopTalk Show is, "What do I need to learn next?" or whatever. Well, there's your answer. There are like 10, 15, 20 courses that you can just go through and just A to Z it. Go for it.

Chris: Yeah, dude. Frontendmasters.com.

[Banjo music stops]

00:21:08

Chris: Yeah, I had a weird morning a little bit. I was feeling a little down, but almost that winter fake down.

Dave: Mm-hmm.

Chris: It's not like anything really to be sad about. But then I flicked on my phone, and here's Reddit - whatever. I look at Reddit. Everybody looks at Reddit. Don't tell me you don't look at Reddit.

Dave: I have actually not built up a really good Reddit habit. I go there from time to time when I need something.

Chris: Oh, you're literally the only one in the world.

Dave: I believe I'm the only one, and part of it is because I was in Japan. I'm going to blame Japan. [Laughter]

Chris: Yeah. Yeah, for the rise of it. It's probably a decent one to delete off your phone even though there are some funny and occasionally helpful stuff on there. It's hard to categorize all of Reddit.

I've been disappointed in Reddit many times in my life. But I've also been proud of Reddit many times in my life. You know?

Dave: Mm-hmm.

Chris: It's this thing. But like all algorithmically driven things, it can algorithmically benefit the bad news.

Dave: Mm-hmm. Mm-hmm.

Chris: And the emotionally generative things, right? I look at this video. It's one of these ones where it's somebody at the gym. Then there's a guy looking too much at another girl or something, so confrontation happens. But it turns out that - I don't know. There was some twist to it, but there was still real anger stuff coming out of people.

Dave: Mm-hmm.

Chris: You know? And I was like, now I'm watching this, which I have no idea where it is. I have no idea who these people are. There is no connection between this and my actual life, but now I'm having... I'm there now, so I'm having all the anxiety stuff that comes with it. And I'm like, "Why did I do that to myself?!"

Dave: Yeah. Yeah.

Chris: No good came of that.

Dave: You plugged into the anxiety machine.

Chris: What a waste of time. Yeah, and I was already not feeling great, right? It gave me this extra jolt. I was like, "Oh, man. Maybe it is time to delete this icon." [Laughter]

Dave: Yeah.

Chris: That was not helpful. I'm over it, but still, gees.

00:23:20

Dave: Oh, this gives me two thoughts. I was at the Gowalla Relaunch Party. Gowalla is back, baby.

Chris: Oh, I got that icon on my phone now too, yeah.

Dave: I don't know. I think it was Tim Van Damme, the @maxvoltar.

Chris: He was there originally, wasn't he?

Dave: He was there originally, yeah, and he's back.

Chris: Huh.

Dave: I think he kind of made the point. He was just talking. He was just saying, like, "There's no fun social media apps anymore." TikTok, but it's trying to harvest your data. It's also just a dopamine loop. But there's no, just, "We're doing social media for fun. It's a social app where the only purpose is fun."

I just thought that was a really, like, "Ooh, that's really astute." I don't know. I think I'd like to start going towards more fun in my life. Yeah.

Chris: Yeah. It has that fun look, certainly. I'm excited for it. Of course, the first place I went that I thought about it, I tried to check in and it didn't exist yet in the app. So, I was like, "Oh, man!">

Dave: Oh, and so now you're like, "I have to set this up." Yeah.

Chris: Yeah. And I added it, but I'm like, "Am I the guy to add this hotel in Portland that I have no affiliation where I'll probably never go back to in my life? Probably not the guy for that, but I'll do it."

Dave: Street Team. Yeah, I went to an Austin soccer game, and I missed checking into the--

Chris: Where do you check in, the field?

Dave: The Q2 stadium.

Chris: Yeah.

Dave: But anyway, I don't know. Then I was like regret. I was like, should I drive up there late at night to go check back in?

[Laughter]

Dave: I said, no, no.

Chris: See. How are they going to combat those feelings then because that's not all fun all the time.

Dave: No.

Chris: You've already experienced minor anxiety.

Dave: I think I now have regret and that will push me to live in the moment, check-in in the moment. You know? To just really live life and check-in in the moment. You know?

[Laughter]

00:25:22

Chris: Yeah. All right. So, I'm going to Render ATL. You know?

Dave: Do it. Do it. Yeah.

Chris: Atlanta. Looking forward to it. Keynote, CSS.

Dave: Ooh... Good.

Chris: I'm going to talk about CSS, which I'm excited about because there's a lot of stuff going on getting me thinking about it. But I have to make a larger point or whatever, so we'll see how that goes.

One of the things... Let me just pick some of the biggest things you should know about, but I want to have this angle. I'm going to call it "Modern CSS in Real Life."

Dave: Hmm...

Chris: Rather than be theoretical about any of it, it'll show you what the new thing does. But then I'm not going to put it in the talk unless there's a production website that I can show you that's either using it or that could be or should be using it.

Dave: Mm-hmm. Mm-hmm.

Chris: You know? Because that's what actually matters. Who cares about the theoretical stuff.

I think I'm going to avoid, for example, layers, which I think are cool and I have no particular problem with them, but I can't. My brain has yet to cough up a real-world example where I'm like, these people should have been using layers.

Dave: Hmm... Yeah. Yeah.

Chris: I'm sure that that exists, but I haven't been able to figure that out. That's not in the talk. I'm going to do other things that I think are cool.

I started looking at one page. It's like the simplest thing in the world. It's kind of like a hero top to an article.

Dave: Mm-hmm.

Chris: Then you scroll from there. But just looking at this thing, I was like, I feel like I could do the whole talk on this one page. I'm trying to decide whether I should do that or if that will get boring since I have a decent... I have kind of as much time as I need, really, to give the talk.

00:27:06

Dave: Is it the one with the synthesizer on the top of the page? Is it that one?

Chris: [Laughter]

Dave: That's the best one.

Chris: Wasn't that the Robin Sloan article, the short story?

Dave: Robin Sloan, short story commissioned by some agency, I think, and it was about an old lady who learns how to play the accordion or the synthesizer at a library.

Chris: Just tremendous, wasn't it?

Dave: Then the title, the hero, the title of the whole thing is a synthesizer, "A Working Web Audio Synthesizer."

Chris: It was amazing.

Dave: Man, that was--

Chris: It was truly good.

Dave: I don't know who is in charge of Webeyes anymore, but that was it. What a fun thing. What an immersive, you know--

Chris: Because I think it was some agency and the agency had some Web audio experience, built this thing, and then commissioned Robin Sloan to write the article about it, which that was a stroke of genius.

Dave: Mm-hmm.

Chris: Who would even think to reach out to Robin, and who would expect Robin to say yes? The guy is a famous writer.

Dave: Yeah, Mr. Penumbra's 24-Hour Bookstore - or whatever. You know?

Chris: Yeah. Now several around that. Just amazing.

Dave: And he makes his own olive oil or something.

Chris: He picked right.

Dave: Yeah.

Chris: Yeah. Yeah. We get all that stuff.

Dave: Oh, yeah? Nice.

Chris: Just as a Robin super-fan, just tremendous writer. I'm almost the biggest fan of... The books are good, but it's just his newsletter is just great.

Dave: Do you think we can hang out with him and we'll just say... Just always refer to him as, "Oh, Mr. Penumbra."

[Laughter]

Dave: Do you think he loves that? I bet he loves that.

Chris: Oh, I'm sure.

Chris: Okay.

Chris: Just like the basic understanding of what he does. Oh, I got an email from him the other day, just totally un--

Dave: Unsolicited? Really?

Chris: I can't even remember what it was about. Yeah. But then I made another connection because I was like, "Dude, you know we've met before. In fact, it was a fascinating time to have met because we were at... It was in New Zealand for Webstock."

Dave: Oh, wow. Okay.

Chris: My now wife was there, so you met her, too. You know? What a weird time to have met somebody in all that.

00:29:09

Dave: It's funny how those little Internet moments can still happen. I had an exchange with Clive Thompson who wrote Coders.

Chris: Wow! You've talked to Clive Thompson?

Dave: Yeah. I had an exchange with him because I started getting into his articles. I was just tweeting, like, "Here's another really good Clive Thompson." You know? I think he was just like, "Thanks for reading." I was like, "Oh, man! You're amazing."

Anyway, it's cool. I don't know. Internet stuff. That's part of why I got on Twitter in the first place was I could talk to Paul Boag or something. [Laughter]

Chris: Yeah.

Dave: It's cool. Or Jeffrey Zeldman.

Chris: Yeah. Yeah. It's still impressive. I've talked to Jeffrey enough times now that I'm less starstruck, but I was for a long time.

Dave: Yeah. Yeah, maybe I've seen him enough, but then sometimes him and Eric will get talking. You know? Just going on. What's it called? Hemming and hawing and something. But anyway, there's a Texism for that.

But anyway, they'll just get talking. It's very intoxicating. It's very cool.

Chris: Yeah. I know what you mean.

I sent you the link to it. It's this article from last year.

Dave: Oh, let me find it.

Chris: On CNN originally, but if you Google around, I think it was syndicated a bunch of places.

Dave: Oh, yeah.

Chris: But can you see it on your browser screen?

Dave: Yeah.

Chris: It's this article about--

Dave: I just want to surf.

00:30:44

Chris: Yeah. Exactly. It's about black women and nonbinary surfers, rarely in the spotlight. A bunch of cool photos of it.

Dave: Mm-hmm.

Chris: And an article around that concept. A) It's a great article. But just in looking at the top of it, I had this thought of all the different stuff that is being done and could be done on this page, and it's just an endless trove of it. There's so little to look at here but think of it. A) It's a hero image across the whole thing.

Dave: Mm-hmm.

Chris: There's all that stuff to think about. I don't want to dwell on that too bad because I feel like responsive images and stuff is a little trod territory at this point even though more people need to know - but whatever. You know?

Dave: Well, it'd take you six hours to adjust the basic premise of it but go ahead.

[Laughter]

Chris: Yeah. Right. You know. But notice how there's a gradient that comes in from the left.

Dave: Yeah.

Chris: Which kind of helps the text. That's kind of an interesting concept. It also takes up exactly the viewport, so there's a lot of stuff to talk about just with viewports.

Dave: Mm-hmm.

Chris: Especially now that dynamic viewports are out and that's a thing to think about.

Dave: Yeah. Yeah.

Chris: Then there's how do you get the text down there where you want it. It's not just, "Oh, the hero is the size of the viewport," which has its own interesting categories, but I want to now position stuff within that viewport.

Dave: Mm-hmm.

Chris: Which is a whole other can of worms. Then that which brings up the whole idea of logical properties because it's like this text is set at the block end inline start of the viewport, essentially.

Dave: Mm-hmm.

00:32:17

Chris: Then I was out to a food court thing with some friends, and the conversation has come up a number of times how this friend of ours wants to teach her daughter Arabic because she knows Arabic.

Dave: Okay. Yeah.

Chris: Her and Ruby are sitting there filling out this little kid's Arabic language workbook.

Dave: Good. Yeah.

Chris: Which is cool to see. I've never seen anything like that (just because of my white, Midwestern ass doesn't see a lot of Arabic workbooks, as it were). For one thing, it's bound on the other side.

Dave: Oh, yeah, yeah.

Chris: The books are just bound the other way, which is just interesting to see anyway. And so, now I know somebody in my life who I can check, you know, with the text.

Dave: Oh, yeah. Yeah, yeah.

Chris: Like, does this look right to you? So, I send this website through Google Translate into Arabic. You know?

Dave: Mm-hmm.

Chris: I send her the screenshot of that, and she's like, "I don't know. it's fine. It's not amazing, but I'm used to seeing that." You know?

Dave: Okay. Interesting.

Chris: I'm like, okay, so a pass, I guess. But I was also like, "But what if I actually right to left it?" because Google translate doesn't force the RTL onto a translated page.

Dave: Oh, interesting.

Chris: You know what I mean? So, it's still LTR and you still read it RTL, but it doesn't change the position because there are some literal absolute positioning happening here.

Dave: Yeah. Yeah.

Chris: Maybe it does, but in this case it didn't because that thing is set on the bottom left of this viewport, which does not translate in RTL to do anything.

Dave: Yeah.

Chris: I change it, though, to use logical properties and use inset block end, and that type of thing. Then it does work.

Dave: Right.

Chris: Then I send her that screenshot. I'm like, "Is this better, though?" You know?

Dave: Mm-hmm.

Chris: Like, would this page? It's like, yeah, it's a lot better. It's just one sample, but at least it's an actual human being that speaks and looks at Arabic websites, so better.

But guess what didn't move. The gradient because the gradient still has "two right" on it.

Dave: Yeah, and you're still in the hero. You're in the hero.

[Laughter]

Chris: Yeah.

Dave: You have not left the hero.

Chris: Right.

Dave: Yeah. Yeah.

Chris: No. Right. And it's just RTL. It's not a language that does top-to-bottom or bottom-to-top or anything like that.

Dave: Yeah.

Chris: It was interesting, and she'd even expect it. So, because it's on CNN, there's this black bar at the top. On the upper left (on the English version of the site), that's where the CNN logo is. She went as far as to say as it actually makes more sense to flop those, even, that the CNN logo should be on the upper right.

Dave: Oh, yeah. No, that would make sense too. Yeah. Wow.

Yeah. You know it's funny. It's like Flexbox and Grid are actually super good at RTL and LTR. They get it.

Chris: Mm-hmm.

Dave: So, if you can use those. Inline.

Chris: Oh, you totally can because the flex-direction just straight up changes when the direction is the other way.

Dave: Then your logical properties are going to set you up for success too. Yeah.

Chris: What if you took this page and you just changed all the stuff to use logical properties and dynamic viewports and all this stuff and then sent it through Google translate? Well, guess what. It's way better.

Dave: Yeah.

Chris: You know?

Dave: Yeah.

Chris: And it's not because this page had a mandate that it be translated. There's not a language switcher built into the website. But that's not reality for most websites.

Dave: Mm-hmm.

Chris: The vast majority of websites do not offer that. People just auto-translate. And they auto-translate because auto-translate is fine. You know?

Dave: Mm-hmm.

Chris: It is good enough (in a lot of cases), especially if the entire Web is in English and you speak a different language. That's all you've known.

Dave: Mm-hmm.

Chris: You just hit the auto-translate button and are used to what the results are.

00:36:35

Dave: I mean I'm pro let's get more languages, obviously. But I've heard recently we do all this stuff for localization. I don't know if you've ever worked on a fully localized website where you basically build out these trees.

If you hop into WordPress, it's actually all in WordPress because WordPress is localized. But it's basically these tokens for your text that then get translated. The tokens also are in French. The tokens are also in Arabic and Hebrew and German, Japanese.

Chris: Yeah, yeah.

Dave: Then when you reference text or you put text out, you put it in a method like T, and here's the English token, and then I want that token to then translate into some other language.

Chris: Which is kind of... It's a plus one in the category of maybe don't crap on build processes all the time because you need some kind of build process to do this.

Dave: Yeah. Somebody had mentioned recently these new... You know ChatGPT4 came out - or whatever.

Chris: It did.

Dave: Somebody mentioned that these are getting so good that they are better and faster at translating something than maybe Google. It may be a situation, like translating your website may be as easy as putting an edge function in between and being like, "Translate this to whatever the user's browser says."

Chris: Wow.

Dave: Any text on this page, run it through and get it localized by this ChatGPT edge function.

Chris: Yeah.

Dave: That was the first, like, whoa, whoa wow moment for me.

Chris: That blows my mind a little bit.

Dave: Yeah. I just was like--

Chris: I'm also like, "But you're going to cache it, right?"

[Laughter]

Chris: Don't. Don't. But is it true that it's different every time? I guess this is just showing how much ignorance I still have around all this stuff. When you use one of the image tools, every time you use it, it's different. That's the point. It starts with static and, every time, it's different.

If you ask the same question to AI, is it similar? Do you get a slightly different response every time?

Dave: I don't know. Maybe these translation Ais are slightly different. They're just more like--

Chris: This is the best possible answer. That's what you're getting.

Dave: I'm giving you my best idea here.

Chris: Yeah.

00:39:05

Dave: Which is probably the same as flipping Google Translate on. I'd be curious for non-native English speakers, what you prefer. I'd be curious how you feel about that because, obviously, there are limitations of this technology.

But I was on a Dutch website. I've been cruising Dutch websites because I follow Heide on Mastodon.

Chris: Mm-hmm.

Dave: He posts a lot of Netherland content. I'm using translate to put that back into English from Dutch. Anyway, but that whole idea of using these serverless AI to translate on the fly, it was really interesting to me.

Chris: Yeah.

Dave: That was the first time I kind of heard of that.

Chris: I'm hearing it for the first time now. That's awesome.

Dave: Localizing an app is kind of a pain in the butt because, for every database field, you need every language in there, basically. You know? But you know if you think about, oh, we could just use some kind of edge function to run that through, it'd be pretty amazing.

Chris: Yeah. I mean I admit it's a little attractive because we have to do less work and that there's a little bit of an antipattern there of....

Dave: Yeah. There's some consistency though, too, like sources of truth. For the Accessibility Project, if we had a German one and an English one, well, uh-oh. We had an error on the English one. We fixed it. Oh, we've got to go email German. We've got to go email Japan. We've got to go email the Netherlands to go fix their copies because we don't speak those languages.

If you have a source of truth, that's maybe the best. But I will fully acknowledge if for some reason you're like, "Don't not add a skip link," that might get messed up in the translate software. [Laughter] Then it would just be like, "Don't add skip links."

00:41:07

Chris: Yeah. ChatGPT4 came out. it's not Chat, even though it's still chat. I don't understand the naming exactly.

Dave: I think Chat is the interface and GPT is the large language model - if that makes sense.

Chris: Oh, there you go. But you can still enter a chat with GPT4.

Dave: Yeah.

Chris: Or at least you can send it commands and get stuff. Maybe it's not chat because the interface now doesn't--

The whole point of chat was that it would just send all your previous commands with it, right? Then it felt like a conversation. Maybe they haven't built that part of it yet. I don't know. But I did log into it because, immediately after the little developer announcement (which was massive, by the way) or later, I think, the same day as the announcement, Shawn Wang sent out his newsletter, which has been very AI-focused lately, and showcased just how insanely popular of a tech event it was.

Dave: Mm-hmm.

Chris: Just outrageous, like one of the most upvoted hacker news stories of all time. Absolutely trending on every social thing that it could possibly trend on. The tweet was four times more popular than the original announcement, which that was the story of the year last year, so there's no doubt that this will be the story of the year this year. On the day it was released, it's just an enormous thing.

Dave: Mm-hmm.

Chris: I was hit six ways to Sunday with, "Did you see CodePen in the demo?"

Dave: Oh, no, I didn't know that.

Chris: Yeah, and it was cool because it was perhaps the most impressive part of the whole thing, which was a napkin drawing of a joke website. It had a header and then a button that said, "Show me a joke," or something like that, and then another button that said, "Show me a different joke."

With rudimentary instructions that when you click the button, it reveals the joke, essentially. Then points a phone camera at it and then just posts that photo to a Discord channel, so a little bit like Stable Diffusion or, no, the other one. What's the one Trend likes?

Dave: Midjourney.

Chris: Midjourney was all Discord-based. I think they might be screwing around with Discord, too, OpenAI. But the point is the GPT4 model can accept image input now, which I think is a first for them.

Dave: Oh, interesting. Yeah.

Chris: And so, this napkin drawing of a joke website was immediately turned into HTML. In the demo, the fellow -- sorry, you'd think the biggest news story of the year, I'd know exactly who the executive team of OpenAI is, but I don't have it all memorized.

Greg Brockman was his name. I think he's one of the co-founders of the whole thing. Grabs the HTML and needs to render it somewhere, so paste it into CodePen.

Dave: Oh, wow.

Chris: It does exactly what... I mean the output is literally a website where you click a button and it reveals the joke.

Dave: Amazing.

Chris: The joke is generated, which is truly--

Dave: And it's on CodePen right now?

Chris: Yeah, and GPT3 could do this type of stuff, too.

Dave: Mm-hmm.

Chris: We even have a collection on CodePen of all the stuff that says that it was GPT generated, and it's impressive. But I was like, "I've got to try this myself," so I get into the GPT4 demo, which cost me $20 because, of course, it's not free at the moment.

Dave: Yeah.

Chris: But big deal. That's a business expense, if I've ever heard one. You know?

Dave: [Laughter]

Chris: And I said... because you can't do images yet. That was just a demo. I don't know. Maybe it's coming later or something. But I said, "Build an HTML page where you click a button to go to a random Wikipedia page," not even knowing how to do that myself necessarily. [Laughter] I mean certainly I can make a button with a click event on it. But I didn't really think of how you'd get to a random Wikipedia page, and sure enough.

It's a little slow because it does it character or word by word, essentially.

Dave: Mm-hmm.

Chris: You're watching it slowly build this website. Three-quarters of it is the CSS to put a button on the page and center it. Then there's five lines. One of them is a button and the other one is just a click handler being applied to that button that changes the window.location.href to a special page on Wikipedia that goes to a random page.

Dave: Hmm...

Chris: Which I didn't even know existed, really. Then I copied and pasted it into CodePen. Sure enough, it works. It works perfectly well. I don't think that's totally unique to GPT4 because there are examples of it happening in 3. But I've heard that the code generation stuff is amazing.

Also, I wonder if CodePen was part of any training data or not.

Dave: Ooh... Yeah.

Chris: Part of it makes me think of, well, why wouldn't it have been? I don't know. It seems like it's trained on all sorts of crap. But I do note that the output is not how CodePen does output. We separate the HTML, CSS, and JavaScript. There's no HTML doc type and stuff. You don't see that in the CodePen editor of today. We just put what's in the body in there. If it was scraping entirely based on the normal-looking output of Pens... Unless it's scraping the final put together - or whatever. Or maybe it doesn't use CodePen as a data source at all. I have no idea.

Part of that is not my favorite thing about these models. It's trained off of stuff in which they absolutely didn't ask or give anybody any sort of way to opt-out or anything. I sort of bet that it wasn't, based on what I'm seeing.

Dave: Yeah. It was based on my diary and not... Yeah. I don't know. Yeah. I probably need to jump into it a bit more. I tried to get it to do a picture of me with Barack Obama and it didn't do it because I'm not going to give the AI 40 of my photos. I want it to figure out how to steal its own photo of me. I don't know. That would be a fun thing to just pretend I had as a photo of me with Barack Obama.

Chris: Right.

Dave: But yeah. I don't know. I would like to... I don't know. I'd probably like to get better at it and figure out how to do it good.

Chris: Yeah. It seems like a sink, like how much should I invest of my time in here right now? What's fair to invest also?

I look at a guy like Simon Willison - or whatever. He's been on the show before. You're like, "Look at him playing with it a little bit." Now it's clearly taken over his life. You know?

Dave: Really. Yeah. He's fully....

Chris: Well, every blog post. Yeah.

Dave: Yeah.

Chris: Truly. And it does kind of seem like, yeah, any more than dipping a toe is almost dangerous. But how connected is what we're talking about, or am I missing the boat? What if I could give it a website and say, "Update the CSS of this website using all logical properties"?

Dave: Hmm... Okay.

Chris: Would it do that?

Dave: That would be cool.

Chris: And if it does do that, shouldn't I know that?

Dave: Yeah. God, that would be kind of cool. Yeah, go through my whole codebase and fix the font sizes, please. That would be a good one.

Chris: Yeah.

00:48:43

Dave: Then... Yeah. No, I do like these tools. You were saying half of the CSS was to center a div or whatever, which is kind of funny. It inherits our bad jokes. But I do wonder. Is the last stretch of my career--? I'm looking at about 20 years left. Right, Chris? Just age-wise, right? Is the last ten years of my job just going to be fixing AI barf? Is that it? Is that what it is? I hope not, but it'd be interesting.

But I also am a firm believer, like, hey, if I can get this thing to make whatever, some dumb task or time-consuming task takes less time and I have a high degree of confidence it's going to do it okay, then that's great.

Chris: Yeah.

Dave: Let's do that. Make me a PR but change all the ems to rems and make sure it's all the right root, or whatever. [Laughter] That might be hard. But that would be worth it. I don't know. You know, change all my pics to rems. Set the base font size to 16. Set the body font size to 14. Then set all my padding in rems - or something. That'd be cool. I don't know.

Chris: Ooh... I like that. Yeah.

That was another part of this news. There are tokens, which I guess if you are familiar with ASTs and stuff is a fair word. But a sentence would break into words and punctuation and stuff as tokens.

Dave: Mm-hmm.

Chris: If you're looking at code, the tokens are as fine-grained as you can knock that piece of code down. The word function and then the function name and then the parentheses and then the arguments, all those individual things are tokens. These LLMs (or large language models) would have some kind of like token limits to what it does.

Dave: Mm-hmm.

Chris: The token limit in GPT4 is way higher. It's up into the five figures somewhere.

Dave: Okay.

Chris: That happens to be pretty good for DOM size.

Dave: Okay. Yeah, like what it can spit out.

Chris: In a way that it wasn't before. Yeah, like it's about as good as an average webpage is. Maybe on the small side, but you know what I mean. So, it's going to get good at HTML pretty quick here is the point.

Dave: Yeah. God. Man, I wanted to have a job. But maybe I can use it to make my fidgets too. I don't know. You know?

Chris: Oh...

Dave: I don't want to spend evening after evening coding these fidgets, but I want to have them.

Chris: You like the idea more than the code?

Dave: Yeah.

Chris: Yeah.

Dave: If I just want to get an idea out, could I just see if it's good and then be like, "Cool. I'm going to eject from ChatGPT and build it myself." You know?

Chris: Oh, pretty rad. Look at us.

Dave: Interesting times.

Chris: Just trying to stay relevant. [Laughter]

Dave: Staying relevant. Hey, kids, cryptos.

[Laughter]

00:52:00

Chris: Oh, I could end with that. How do I say this? I had some crypto. I told you I did years ago.

Dave: Yeah. Yeah.

Chris: Not like many, many, many years ago. Just in time for it to have been a terrible idea is when I put some, a small amount of money in crypto. By small I mean it's a lot of money for my... whatever. It's somewhere around $10,000. At one point I was like, "I'm going to make that."

Dave: In a day, absolutely. Yeah.

Chris: If this 10X's, I want in on it. You know?

Dave: Mm-hmm.

Chris: Crypto does crazy stuff sometimes, especially then, which was before any of the collapses. Maybe not any, but any recent. It was a very bullish market at the time.

Dave: Mm-hmm.

Chris: It just sat there, and it did fine for a long time. I was like, "Hey, maybe I'm not stupid." But then all the collapses happened, or at least the one big depeg one and whatever.

Dave: Yeah.

Chris: Now it's maybe going to happen again. I don't know. But it essentially halved at one point. And then it just stayed halved, at least my particular blend of investments, and then just stayed at about $5,000 for a long, long, long time.

I was like, "Maybe I should just pull this out of there. I hate all this stupid stuff." I did it kind of because A) I didn't want to miss the boat but B) I feel like, as a low-grade tech journalist here, should have some knowledge of how this goes down.

Dave: Technologist. Sure.

Chris: Now I'm off of it as an investment strategy. That's dumb.

Dave: Mm-hmm.

Chris: All of this NFT stuff was a little bit like eye-roll-y at the time, and now that the world has stopped caring, it feels especially eye-roll-y and all that. Just in time for somebody I really like and respect to do an NFT drop that I thought... you know, I was like, "Oh, this is interesting. Maybe what I'll do is I'll take that money that's just sitting there."

Dave: Your losses, yeah.

Chris: Yeah, and I'll essentially help a friend.

Dave: Fund a project you like.

Chris: Ultimately, I should extract it.

Dave: Right.

Chris: But this is just one thing to do. And so, it was Charlotte Dann.

Dave: Yeah!

Chris: This is very much worth your time. Did this art project called Ceramics, and blogged it, and is very interested in sharing the whole process of anything, too. It's outstanding work!

Dave: Mm-hmm.

Chris: In turning essentially Web technology graphics, generative, into what looks just wonderfully like ceramics.

Dave: Yeah.

Chris: I have some history there. I should know a little bit. And I sent it to my ceramics buddy, my old college roommate that I'm still friends with for ages. He's just like, "This is incredible." You know?

Dave: Yeah.

Chris: Then did 300 generative drop thing on some art auction thing, so I learned how to connect up a wallet again and put money in the wallet. I tried to participate in the auction, but the auction was so fast, they were just gone.

Dave: Yeah. Wow.

Chris: Apparently, that world -- or at least she's popular enough or something that a 300 drop. And these things are, you know, she sets the first one goes for like 8 ETH or something, which is $10,000 or something at this point.

Dave: Wow. Yeah. Geesh. Yeah.

Chris: Each. But then they drop from there. I don't think they're all that. Then she's like, "Oh, don't worry about the auction. People buy them and then they just resell them on OpenSea immediately."

Dave: Right. Right.

Chris: So, I totally missed the drop by like five minutes, too, because there was one left. I was almost going to get it, and then it was gone before I could do it.

Dave: Yeah.

Chris: Then I ended up getting one for like 0.4 ETH or something on OpenSea. I'm not trying to... Feel free to criticize me, people. I took part in the NFT economy just yesterday, but not because I don't think it's a little stupid. [Laughter]

Dave: Well, actually, that's pretty - I don't know. This is actually--

There have been a couple, a few, and this would hit the mark. What would be cool if you got an actual tile, too. Do you get an actual tile? No. These are just computer-generated tiles.

Chris: Yeah, but they sure look real.

Dave: Gosh, but wouldn't it be--? That would be a cool thing to have in addition to your tile. You know? Anyway--

Chris: Oh, God. If you could make the tile, that would be incredible. But yeah, I think that's kind of anti the point in this case.

Dave: You could almost take your NFT, if she could get you the vector that built it. You could 3D print something that could stamp a tile. Then you just glaze it yourself.

Chris: Yeah.

Dave: Anyway, very interesting.

Chris: I'm looking in my OpenSea right now and it's not even in there. It's either a bug or it was stolen from me, which I'm just going to assume it was stolen from me because this whole world--

Dave: This world is crooked. But yeah, I don't know. There are a couple, a few projects that were cool. I don't know. I don't know.

Dave Rupert is fine on money, but I just wasn't in the, like, "I just want to throw money at this." You know? It wasn't in my range of "This is what I'm going to throw my money at."

I'd rather buy tiny plastic robots, which are all behind me. [Laughter] That's what I spent my money on.

Chris: Hmm...

Dave: The anime version of NFTs.

Chris: It really has disappeared from me. Now I have to chase this down.

Dave: I'm sorry, dude.

Chris: I'm going to spend exactly seven minutes on this.

Dave: Time box it.

Chris: And if I can't figure it out--

Dave: Time box it. Get it back.

Chris: Then I really am going to extract every cent I have in this crazy world and just wipe my hands of it.

Dave: That's probably... not to drag this out, but that's probably my biggest critique is if experts, like literal people, Bitcoin maintainers, like codebase maintainers can lose their shirt by clicking a link, it's not for everybody, and it's not even for somebodies. That's such a bad system, monetary system, that it feels hard to put my money into it. Anyway, that's me being a grump.

Chris: Oh, gosh. I get it.

Dave: Hey!

Chris: All right, man.

Dave: All right. Welcome to grumpy technology where we complain. It's like the anti-Verge. We just complain about everything new coming out. [Laughter] I love it.

All right. Well, Chris, we'll wrap this up. 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 tens of tweets a month. We also have a front-end.social, ShopTalk Show. Join us in the D-d-d-d-discord, patreon.com/shoptalkshow.

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

Chris: Hmm... ShopTalkShow.com.