Transcript

[Banjo music]

MANTRA: Just Build Websites!

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

Chris Coyier: All right. All right. Back in the saddle.

Dave: Do you think our tagline needs some updates, or we're good? We're still talking front-end Web design and development? The last ten episodes have been about AI.

Chris: Did you already say it?

Dave: I did. Yeah.

Chris: It just whizzes by my brain. Front-end design and development, yeah, I think that's okay. Or maybe just... yeah.

Dave: Development? Less design these days. But once upon a time, we had actual designers on the show. [Laughter]

Chris: Yeah. I mean I still fantasize about it and think of myself in that way. I just saw some meta conversation today of people being like, "Where do you go?" Kind of in it's not that Dribbble is dead. It's just weird these days. It just doesn't have quite the same inspirational modern feel to it - or something.

Dave: When it became a place to get a job, it shifted radically.

Chris: Hmm...

Dave: It turned into this, like - I don't know - these fantasy showcases sort of. It was interesting.

Chris: Uh... Yep. And so, it was like I still think of it. Once in a while, I still go there. Then I'll type in... I always never get quite what I want because sometimes I'm looking for a pattern. Usually, it's something like a menu or a footer or a dropdown or a card or a listing of blog posts or something. I want something boring like that, and then I want to see an amazing take on it.

Dave: Mm-hmm. Mm-hmm.

Chris: But that seems hard to find because the search terms are so boring (that you type in).

Dave: Yeah.

Chris: That you get unrelated stuff. Yeah, I kind of can't blame them because we've faced that same kind of issue at CodePen.

00:02:07

Dave: It's hard. I have an issue. I had that... You might remember that blog post I wrote about UI is a function of states, and it's just a big super-list, a mega-list of all the crap, all the states that are in UI, right?

Chris: Right. It seems like such a simple concept, right? You're like, "Oh, the UI has a bit of state to it," and then it looks the way that that state needs to look. You're like, "Oh, well, what composes that state then, Dave?" [Laughter]

Dave: Yeah, well, here's--

Chris: Muah! [Laughter]

Dave: --9,000 things. You know? And you think, "Oh, component state. Is button open?" or whatever. It's super way more than that.

Chris: Right. That's your state, which can be complex in its own right.

Dave: For sure. Yeah.

Chris: But then there are just other state that is intrinsic to the platform. How wide the browser window is, for example.

Dave: Yeah. And so, anyway, I have a few blog posts that are just these mega lists. One is all of the things you need to make a design system. And it's just like [rapid gun fire] all the things you need to start a startup. It's just [rapid gun fire] all this stuff, these mega lists.

And I'm kind of like, "How can I present this in a way that is interesting?" more than just a list of items. I've been doing explorations like mind maps and graphs. Do I do a full infographic kind of thing or a subway map? What do I do to make this all work? It's really... I don't know.

I would like to not just put lists of text on the Internet, but maybe that's my V0 of the post. [Laughter] I'm just kind of like... There's just so much you've got to do. I don't know. It stalled out more than one post just because I'm overthinking, like, "How can I make this compelling?"

I've tried to look on Dribbble and on CodePen. What are cool lists? You might be surprised to find out not many people are riffing on the list format. [Laughter]

Chris: But are they not? Is there really none or are they just hard to find?

Dave: I think they're just hard to find. Yeah, how do you make a mega list compelling? I think I'm maybe... You know we had mega dropdowns as a thing, right? There are lots of mega dropdown solutions, sort of.

Chris: Right.

Dave: A mega footer, but what about a mega list? That's what I'm into. That's what I'm looking for.

00:04:37

Chris: I just thought of it this morning. There are all these things that your brain gets cooking on stuff. I think it was Steam. I don't even use it but it's the thing where you buy video games. Right?

Dave: Yeah. Yeah.

Chris: A lot of people use it. Mostly well-regarded, I think, especially because they have sales and stuff. You can buy anything from AAA games to indie games on it.

Dave: Mm-hmm. Mm-hmm.

Chris: A lot of people have a lot of games, which leads to mega list territory, does it not?

Dave: For sure. Yeah.

Chris: Right?

Dave: Yeah.

Chris: Where do you put them? Not to diminish anything here, but a junior designer might be like, "Well, these games have great thumbnails, so obviously, you do a grid of thumbnails."

Dave: Ta-da!

Chris: Yeah, that's your dashboard. Yeah. Apple does it.

Dave: Yeah.

Chris: There are grid icons on your page. Maybe you can drag them around. I don't know. But it does seem like they generally do that. Although, like I said, as a non-user, it's more of a sidebar. It's more of a Spotify-Slack-like experience where there's a main sidebar of games.

Dave: Yeah, and you maybe get a favicon-size sort of thumbnail in that list. But it's, yeah, mostly just a list of names.

Chris: Yeah.

Dave: Like games you have downloaded, games you own, and games on your wish list.

Chris: I just remember looking at it and being, like, "That's an interesting place to put it." That's kind of the primary navigation that a user cares about when they log into this platform. Mostly, they're just trying to get to the game that they already have.

Dave: Mm-hmm. Oh, but they don't do that. They put you in the shop first. [Laughter]

Chris: Yeah. [Laughter]

Dave: That's the log-on experience. Yeah.

Chris: I'm sure. But once you're on this, once you have this kind of sidebar, it does kind of seem like not a bad way, especially if there is any kind of searching and filtering, which would not take that much UI to implement. Not a bad way to do it. I don't think that helps you necessarily.

Dave: Yeah, because mine have hierarchies, but maybe that is a good place to start. Maybe it is more of, like, I do a list. It's like a vertical tab panel kind of thing. Then you have to click through each one to figure out what's inside - or something. I don't know.

Chris: Maybe, or they're all expanded by default but are collapsible.

Dave: Mm-hmm.

00:06:43

Chris: I did notice that your mind map thing did kind of categorize them, so colors would help. Just use the colors that you already have.

Dave: Kind of section colors, yeah.

Chris: Like, there are the purple ones over here. Yeah. That would be okay. And having some scrolling to it might actually help emphasize your point, like, "Look at how many there are. You have to use your scrolling to even see them all."

Dave: To catch... Yeah. Yeah, yeah. Ah... Okay. Yeah. Maybe that's V0 is a sectioned color, like I have the red section, like a little border on the left or something that sort of just hints these things are related.

Chris: Yeah.

Dave: Maybe that's... Yeah. Oh, yeah, that's maybe a good situation.

Chris: Also, using our brains here I think is pretty clutch, like understanding what the desires are, what you're trying to communicate, that kind of thing. And it might not be the worst, especially once you've used your brain somewhat and have some goals and desires. It's not the worst thing to try AI for. Just throw it all away if it's junk.

Dave: Yeah.

Chris: But it might just be five minutes of effort. It might be the kind of thing Bolt.net is good at. Just because then you're going from the prompt to the visual output quicker.

Dave: Mm-hmm.

Chris: Which I think, if you're just going right to ChatGPT or Claude or something that you might get code - or something - but they're not producing the visual output. There's just that extra step that might be annoying.

Dave: Yeah. I thought, too, are there better groupings? I have my own groupings. But sometimes... There's probably a better grouping of a list of things.

Chris: Perhaps. Yeah.

Dave: I don't know. Yeah. No, that's back to the whole, like, I want AI - or whatever - to be like a thinking tool not a doing tool. [Laughter] I want it to help me think.

Chris: And it doesn't have to be, like, use your brain in which to craft the perfect prompt. I would almost keep AI out of your brain for a minute.

Maybe you won't need it at all. Maybe me and you just talking and using our brains could land on a pretty darn good solution and not have to touch it. I think that's fine, too.

00:09:00

Dave: Actually, I had a blog post. Mouth blog time!

[Beatbox music starts]

Dave: Bop-bop-ba-bop! Bop-bop-ba-bop! Mouth blog!

[Beatbox music stops]

Dave: Chris, have fun with that one. [Laughter]

I was posting an image, a GIF on Bluesky, and Bluesky does the whole AI auto-complete thing. I was posting a GIF of Hayden Christensen and--

Chris: Wait, wait, wait. One second. Bluesky does AI auto-complete?

Dave: Or like AI alt text - or whatever. Sorry. j

Chris: Oh!

Dave: AI alt text.

Chris: You paste an image and you forget to put alt text, it just puts it in for you?

Dave: Or if you use their little GIF embed tool, it'll add alt text, so it's probably pre-generated at some point. I doubt they're doing it on the fly. Yeah.

Chris: Okay. Go on.

Dave: Anyway, I did this GIF. It was Hayden Christensen and Natalie Portman from the movie Star Wars Episode II where Hayden Christensen goes, like, "I don't like sand!"

Chris: Right. Right.

Dave: Right? You know. [Laughter]

Chris: Yeah. Yeah.

Dave: A very quintessential scene setting up the worst lines of dialog ever to exist in a movie. [Laughter] "It's itchy. It doesn't make me feel good." You know? [Laughter]

Chris: [Laughter]

Dave: So, I put this up there, and the AI auto-completed it. I'm going to tell you what the AI said. Are you ready?

Chris: Yeah, I'm ready.

Dave: We all remember the cinematic scene from the movie, right? You know? It says... The descriptive alt text says, "A man and a woman are sitting next to each other, and the woman is saying, "I don't like sand." And that's wrong!

Chris: [Laughter]

Dave: On multiple levels. It's not the woman saying it. Duh! You failed that one. Okay. [Laughter] Nice try, Chad.

Then it's not just a man and a woman. It's Anikan Skywalker and Queen Amidala or Hayden Christensen and Natalie Portman. That's very important context to the GIF, right? I don't just paste pictures of women saying, "I don't like sand." That's not... Maybe it is sometimes that, but the context is missing, right?

Chris: Right.

Dave: That's what's interesting about these machines. Sorry. I don't mean to make this the AI....

Chris: It's hard to blame it, right? How would it know what a character's in a movie name is, right? But you're saying nothing is almost better than wrong.

Dave: Well, sort of. Yeah. It misses the context, right? Alt text is all about context, like, how do you provide good context for why this image is in here?

I was even thinking, like, cavemen. Language exists to provide context, I feel like. A caveman might have gone, "Arg!" You know? But after six or seven times, people are like, "Okay, Grog. You said 'arg' but what kind of arg?"

[Laughter]

Dave: I need to know, bud. I can't just jump up every time you say arg.

Chris: Right. I'm sure arg, they can tell the difference between quickly between sabretooth tiger arg and sex arg.

Dave: Yeah, they probably came up with some conventions, some context, in the very early parts of speech, right? Anyway, it's just interesting that the machines don't have context. Then we have to give context to the machines.

How many times do you read, like, "Oh, you get better AI if you did more prompting and gave it all the context in the world." It's like, "Yeah. Okay. [Laughter] I just want it to have the context," like my files and my repo. Tell me how to finish this line of code to the standard that we are setting.

It's a bit of a beast. I think about that word "context" means a lot for me right now. We have to give the machine context if you want to use this stuff.

00:13:04

Chris: Was there some OCR stuff in there? That's one of the things that occurs to me. Let's say we decide collectively that AI-described images is not good enough because it will never have the context.

Dave: Mm-hmm.

Chris: So, let's not do that, perhaps. Make the opposite choice that Bluesky has. Then part of my brain goes, "Well, except for OCR."

What if an image is just a bunch of text? Can it please just say what the text is as the alt experience instead?

Dave: Yeah, that would be cool. Yeah.

Chris: Especially if it's so obvious, like it's just a screenshot of a notes app - or whatever - it's so common. Except for that it just failed in this exact circumstance that you just described where it did put the text that was present in the image. It just described it to the wrong person and whatever. Right? Didn't it fail at that?

Dave: Yeah. Yeah. Yeah. It just didn't do it. It generically applied a man and a woman labels to the future Darth Vader. You know what I mean? It just missed it. It just misses.

Chris: Well, I wonder if deeply AI person perhaps even bias towards AI, what would they say, Dave? Would they say, "Well, it's early days, brother. This stuff gets better by the minute. Before you know it, it's going to describe the hell out of that image"?

Dave: It's going to have every movie ever made in its brain, in its positronic brain.

Chris: Yeah.

Dave: Yeah.

Chris: Right. I guess if I was a betting man and we're talking tens of years, I'd say that's probably true.

Dave: Oh, interesting. Yeah. All right.

Chris: It doesn't mean it's okay right now. I feel like Jeremy Keith is famous for saying that.

Dave: Yeah.

Chris: He's pretty hardline against a lot of this AI stuff. And he says, "Well, if you're optimistic towards the future of AI." I think I'm getting this a little wrong, perhaps. The idea is that it's all the more reason to not use it now, to force the next generation. If you think the next generation is going to be so good, force them to get there sooner than later rather than validating the current crop of tools and their problems.

Dave: Mm-hmm. Yeah. Yeah, it's tough. I think... Will it get better? I'm sure, to some degree. I think we've seen a bit of an icing on the scale of how quickly it grows or gets faster and better or whatever. Anyway, I don't want to make this the AI show. Is there other stuff going on in tech? No? Okay, cool. Back to AI. [Laughter]

Chris: No, but I want to do it for one more minute so that we don't have to circle back to it.

Dave: Yeah. Yeah.

Chris: I think it's interesting enough. I don't know. I don't want to shy away from it.

00:15:39

Dave: You asked what would I expect it to do. I don't know. I think a GIF of somebody saying, "I don't like sand," would be actually better than what came up - or something like that.

Chris: Oh, like the title of something.

Dave: Yeah. Yeah.

Chris: Yeah. Yeah, maybe.

Dave: I don't know.

Chris: Yeah, it's hard. That's a classic that comes up in workplaces of all discussions. How do I say it? If you're going to criticize it, it's better to have an alternative. It's a bummer to just be like, "This sucks." It's not useful. But sometimes it just has to be.

Dave: Yeah. Yeah.

Chris: You know? You're allowed to, especially if it's harmful because then you're saying, "This sucks," because of harm.

Dave: Yeah. I think my general thesis is I think AI for alt text will not meet the needs it needs to because of the context requirement. Even how you use an image on a page depends. If I'm showing a picture of a beautiful beach in Bali, it means different things on a yoga website and a Bali tourist website and a poem about beaches. You know what I mean? It means different things.

Chris: It truly does.

Dave: You have to just kind of think about the context that's surrounding it, not just the context inside the image.

Chris: You're on a fricken' travel website for Bali, you come across an image, and it says, "A beautiful beach in Bali." What do you think is going to be in that image?

Dave: Yeah. Yeah. [Laughter] It might as well just not. It could even be empty in that situation because it's going to say, "Visit beautiful Bali."

Chris: Unless it says, "Free Orange Juliuses on the beach Tuesday at 3:00 p.m.," then I need to know that.

Dave: Yeah.

Chris: Then the OCR is what I want.

Dave: Yeah. Then I need to know that. And so, I feel like... My general thesis is AI for alt text is not sufficient.

Chris: Hmm...

Dave: However, I'm going to put a big caveat. I think there should be tools for non-sighted users (or whoever needs alt text) to get more context out of an image. If somebody gives bad alt text like "image" or "screenshot," non-sighted users should be able to grab that image and say, "Dude, tell me about this. Somebody didn't label this image correctly. What is it? What's in it?" I feel like that would be a helpful thing.

I see it as an accessibility tool for people who want to get more. Does that make sense? Like, "Tell me more about this."

00:18:29

Chris: Oh, it absolutely does. Well, here's another. I'm going to throw one at you because, while we're on it, this is a fascinating idea. There's an Eric Bailey blog post from... I don't even know when he published it, but he was addressing, very interestingly, this.

Have you heard of this, the idea that you could put alt text right in the JPEG itself or the PNG (any image format)? You don't have to put it in the HTML because it's baked into the JPEG itself, which is a chin scratchy moment for a lot of us, right?

Dave: Oh, yeah. Yeah.

Chris: The first time you hear that, I think, maybe the tenth time you hear that, you're like, "Huh! Why not? Wouldn't that be nice? Wouldn't that mean that this image that I've produced can never fail?"

Dave: Mm-hmm.

Chris: Wherever it travels, it will have the alt text forever. Now, Eric admits that it's a chin scratchy, interesting kind of moment except for that the big C word there that you've said a million times this time. Could you imagine the same image used in two different blog posts with two different bits of text that would choose different alt text because the context in both posts is different?

Dave: Mm-hmm.

Chris: When it's baked into the image, then perhaps you don't have that ability to change it or, even if you do (because I could easily imagine that the alt text in the HTML would override the one that's in the image).

Dave: Yeah. Yeah.

Chris: But maybe you just wouldn't do it. Particularly if this idea spreads, the amount of people handwriting alt text is already low and would plummet even further. I'm ultra-guilty of it, by the way.

Dave: No. You would just assume it works, right? You would assume it exists.

Chris: Right.

Dave: And so, to some degree, I do want that, like GIPHY or whatever. I don't want to have to describe every GIF from GIPHY every time if I'm just posting a goof. You know?

You have these repositories of images, yeah, I think that's solvable. I think the other part that got me in Eric's post was the malice.

Chris: Yeah. You put some horrible crap into the alt text of an image that's not seen by the bulk of people because that's the nature of it.

Dave: Yeah. Buy FIFA coin 2025. Visit my website www.buttphotos.com. That would cause--

Chris: Well, there's spam and there's also, like, "Genetically inferior human present in this photograph," or whatever.

Dave: For sure. Yeah. There is extremely bad stuff. Yeah.

Chris: Right. of course, there's bad stuff. But this is hidden to most people bad stuff.

Dave: Mm-hmm.

Chris: Yet still spreads.

Dave: About, too, performance. What's every performance nerd going to tell you? "Don't serve that. Make it an AVIF and strip out all the metadata." [Laughter]

Chris: Oh, they're....

Dave: We're already stripping metadata. I guess you could flag it or create a consortium to allow this AI alt text in the image.

Chris: These are interesting problems, and sometimes problems have solutions.

Dave: Mm-hmm.

Chris: I wouldn't say that I'm 100% against this because some of these things, I can imagine even just armchair reading it, can imagine ideation and solutions around it. So, I'm not going to put myself in the "anti" bucket here. It is interesting to me. But perhaps there are too many problems. And if that was decided as well by a consortium of smart people, I would accept that.

Dave: Mm-hmm. Mm-hmm.

00:22:04

Chris: All right. So, to drag us... To conclude the AI section... Again, I do think it's relatively interesting and worth not ignoring.

There's been some discussion about AI browsers, which I think is interesting because, partially, I think, "Oh, God!" Eye roll century! Oh, of course! Yeah! Feed me a browser. Blah!

AI is getting smashed into everything else. Not to mention, every time we've seen it, it's been absolutely yawn-worthy or boring.

Dave: Mm-hmm.

Chris: Now. Arc is obviously a part of this discussion. They made a browser and, in my opinion, as painful as it is for me to say because they annoy me with turning their backs on it in a way. Not really, but they just don't... It's not as exciting as it once was.

Arc is an amazing browser. I cannot get the hell away from it. I love it.

Dave: Arc is great, and they deflated their own balloon, man. [Laughter] They're like, "By the way, we don't work on Arc anymore." It's just like, "What?!"

Chris: Well, "We want to make a new browser."

Dave: Yeah.

Chris: I think they said it's just too niche - or something.

Dave: Mm-hmm.

Chris: It's too power-user'y or something.

Dave: Yeah.

Chris: Despite insanity growth.

Dave: Right.

Chris: What?!

Dave: But they're like, "It's never going to reach a billion people."

Chris: Can't you involve the one you already have? I don't understand. But some people did really like the AI features. That was one of the ways that they tried to monetize the browser.

Dave: Mm-hmm.

Chris: They packaged them all up together. "You want them? You pay for them," kind of thing. They called it Max, as part of Arc, and I literally disliked every single one of them.

Dave: Mm-hmm. [Laughter]

Chris: I just couldn't. I didn't like any of it.

Dave: Renaming your tabs was kind of okay, but it was not.

Chris: Yeah. I do rename my tabs. I rename every pinned tab because I have my own little way of doing it and I really like that. But not AI. And the ones that automatically did it, not my favorite either. I really hate it when it renamed my downloads. I don't need extra features. Whatever.

If you like them, whatever. I'm not trying to yuk your yum, but it didn't work for me in that way. So, all of a sudden... That's my main entry point to put AI in the browser. Now we're seeing a bit of a race for it because they've said, "We're going a little heads down, I think, on a more mass appeal AI browser," just because they see that train coming. In that kind of way, I don't really blame them. Why that can't be a continuation of the excellence that is Arc, I don't understand, but whatever. You do you.

Now, there have been rumors forever that OpenAI is doing this. I don't know that they've said anything. That could be incorrect, but I think there's been a number of hires and stuff that point to the direction of OpenAI is probably going to do a browser.

Dave: Mm-hmm.

00:24:54

Chris: And the news broke just two days ago - or something - that Perplexity... I think they broke their own news with a tweet, with a really super-duper-duper generic screenshot thing, that they're going to do a browser. Guess what. It's space-themed (like every other thing in the universe). Anyway, it's called Comet - or something.

Dave: Mm-hmm.

Chris: Then there's absolutely no detail about it. At least three AI-focused browsers coming. Okay. Right? What do we think about that?

Part of me is like, "I absolutely can't blame them," because the jobs to be done concept of, like, users have something in mind that they're trying to do always. Then they use whatever tools in front of them to do it.

The tool, generally, for browsers is need to go look something up. Click browser icon. Go do that thing. For most of the world, the job to be done is I need to look something up. The browser is the best way to be frontline in the way of that query.

Dave: Mm-hmm.

Chris: It's not to make another website because otherwise the icon that they click is going to be Edge or Chrome or Safari or Firefox. Then they are the first line of looking something up, probably. It's going to be in the main search bar of what that app is.

Dave: Yep.

Chris: That's not giving these AI companies that first query that they want. And if they had a browser, it would be the first query. That's what they're doing here, I think.

Plus they have all the evidence in the world that Chrome has done it in the past. Chrome, in a sense, pulled off what still to this day feels amazing to me. Google doesn't really make a computer. They do these days because there's a Chromebook or something. Maybe your kid has one. I don't know. But they don't make computers the way that other companies do, like Apple. Right? They obviously make computers.

Apple wants you to use Safari. Safari is already installed. It's already in the doc, so they have some usage of Safari just naturally. So many people use it just because it's the one that comes on their computer.

But Chrome somehow, despite not really making a computer or operating system that they have control over that a lot of people use (aside from Android and stuff, which is huge, but I mean desktop or whatever), especially during the beginning days of Chrome, somehow pulled off whatever it is, their 80-90% market share despite that. I could see OpenAI saying, like, "If they did it ten years ago," whatever it was, "maybe we can do it, too." I don't think it's going to be helpful for a company like OpenAI to get 0.002% market share with their browser, or even Arc levels. I don't think Arc is happy with their browser share (despite the fact that I think they should be). [Laughter]

Dave: Yeah. It's only 200 million. Wah!

Chris: Yeah. [Laughter] Whatever. But I think if these AI ... want to do it, like a little baby side project isn't going to be the thing. One of them is trying to kind of win this I think.

Dave: Yeah. I don't know. I'm curious where it goes. I have questions.

[Laughter]

00:28:05

Dave: I use Bing and Edge.

Chris: Yeah.

Dave: And so, occasionally, I'll do a query. An AI gen will start happening. But I'm just speaking from experience here. I usually beat the AI gen to the link I'm looking for. [Laughter] I don't sit around and wait for it to generate.

Chris: Okay. Okay.

Dave: I just wonder how it's going to be long-term just given the limitation that AI takes time. I'm curious how that goes.

Chris: Yeah. I think that they want it the other way, that you're seeing AI generated results first and then, if it needs to go scour the Web for more information--

Dave: Fetch things.

Chris: --then it will.

Dave: Yeah.

Chris: I think that's very clear that that's what they would want.

Dave: Yeah.

Chris: From their own business perspective, I understand that. Do I think that's great? I don't know. I don't know anymore because the alternative is Bing or Google or whatever.

Dave: Yeah.

Chris: And those experiences have gone so downhill, in my opinion, that, like, "What do you want then?" What is the best thing that could happen for a first query in a Web browser these days?

Dave: Yeah. I don't know. Yeah. I mean you've got options, so I'm going to ask, "What are some cool websites?" and see what I get.

Chris: [Laughter]

Dave: I get Squarespace and Reddit and a picture of toilet paper (for some reason). [Laughter] Paper toilet, okay. All right. All right. Interesting. Neal.fun and Dribbble got on there. That's interesting.

Chris: What are some cool websites?

Dave: Yeah.

Chris: It says Squarespace, which is absolutely meaningless, all the way to neal.fun, which is probably the best answer you could possibly get.

Dave: Yeah. Yeah, so it's a funny twist there.

Chris: Yeah. How the hell did Squarespace get on there at all?

Dave: Yeah.

Chris: They're not even gunning for fun. They're gunning for... "Need website? Give us money and you can have one." No shame. It's just that fun isn't a part of it.

Dave: Yeah. I got some interesting ideas. It's interesting. That's going to be my test the waters query. [Laughter]

Chris: Oh, yeah. "Show me some fun websites"?

Dave: Yeah.

00:30:39

Chris: I wonder if mobile is a part of it or not. Have you heard? There's a little bit of a meta conversation that's been lurking about just how bad the mobile Web sucks. That's been a conversation for a long time because it's so... It's such an embarrassment. I think there's probably a conversation happening on an airplane right now where one person doesn't really want to tell the other person what they do because they're a Web designer because the other person in the seat who is not a Web designer is going to be like, "Ugh! You're responsible for this mess?" It's embarrassing how awful mobile websites are.

Dave: How about, on the count of three, we say what the biggest problem is (okay) with mobile websites? Are you ready?

Chris: Oh, yeah.

Dave: You got your answer?

Chris: Yeah.

Dave: One--

Chris: Sure.

Dave: --two, three. GDPR consent.

Chris: Overlays.

Dave: Oh, okay.

Chris: Yeah, we kind of said the same thing, in a way, because those tend to be overlays.

Dave: Yeah, yeah.

Chris: Depending on how big they are.

Dave: I am so tired of, like, "reject all cookies," "reject all cookies."

Chris: Mm-hmm.

Dave: Because the options they give you are, like, "Allow me to track you on the Internet or configure it all." You know? It's like, I open "Configure it all," and then I have to... Now I'm configuring an app before I even read something on the page. It's stupid.

Chris: Yeah.

Dave: The Internet is broke.

Chris: I know that I'm going to repeat my controversial opinion about this, but I feel like the alternative is to do a great job, essentially write the equivalent. I very much care about user privacy and pinky promise to you that we're going to do the right things and have civil disobedience against showing the banners that we're not going to do it.

Dave: Yeah. Yeah.

Chris: But don't do that for real because then you'll get sued and you can't blame me for that. Get sued, you know, by who is another question. But you know. It's probably happened.

00:32:27

Dave: Yeah, I just think it's so much friction. I get that it's necessary. Europeans are already emailing me. I've got people telling me, "There's a plugin that fixes that." And I understand that. But it's bad, and most people are just suffering. Your website is not loading because it's bad.

Chris: Mm-hmm.

Dave: The other thing is we have put too many JavaScript farts in the engine, man. There is just way too much JavaScript on the mobile Web.

Chris: Right.

Dave: I feel it. I have an iPhone 13, low battery mode all the time.

Chris: Would you say that's top 5, top 3 problems?

Dave: I think it's a number two, probably, would be mine.

Chris: Number two?

Dave: Yeah.

Chris: Hmm...

Dave: Yeah. I think ads fits into that, you know. I don't think ads have adapted to the mobile Web. I think they're like, "We need five ads on an article that's two screens tall," or whatever. It's like, "Dude, mobile Web ads should just be one good ad."

Chris: Yeah.

Dave: [Laughter] That's all it can support. This whole, like, "I'm going to do a full page takeover with ads on a phone," it just doesn't work.

Chris: No. They're all just different kinds of interruptions.

Dave: Yeah.

Chris: I don't want to just say interruptions are the worst part because it's like, well, that's all of it, really.

Dave: How often do you scroll and there's just 400 pixels of blank white space because something is loading in?

Chris: Right.

Dave: Then you scroll past it, and then it hurt jerks back to some weird--

Chris: Yeah. Then you're like, "Is it me because I blocked something? Then that's fine, I suppose. But is that really it or not?

Dave: Yeah.

00:34:06

Chris: Yeah. Well, here's the meta... The reason I called it a meta conversation is that's the conversation. We all know that. The meta conversation is that it doesn't have to. That's lurking in a lot of people's minds. There is no reason. There is no technological problem with the mobile Web that makes it be that way.

There might be law. GDPR, it could be a counter-argument there. But for the most part, the technology does not force the Web to be as bad as it is. And that, if anything, the apps should be suckier if there's a comparison happening between a company that offers a native mobile app and a website. The app should be the one that sucks, probably. That was kind of Gruber's thing, and I've seen lots of agreement about it, even with people that generally don't agree with him.

Dave: I didn't see that Gruber article. I'll have to look for it.

Chris: I think it was kind of a while ago now.

Dave: Oh, okay.

Chris: But the conversation has just been lurking. Yeah, I think that's interesting. Because they're so rare, you and I can make a mobile website that isn't awful all day long, and it's so rare in people's experience that they browse one that it's not there.

Dave: Yeah.

Chris: I've always been like, "Well, it must be incentive-based then because people don't do things just randomly." Or at least they don't intentionally harm user experience just by accident.

Dave: Mm-hmm.

Chris: They do it for a reason. They do it because they think they have to. They do it because they think there's money there or there is money there.

Dave: Correct.

Chris: There are these market forces at work that make it the way it is. It is not random. That's not how the world works.

Dave: Yeah. No, it's tough. I think there's... I will give Ethan Marcotte credit for responsive Web design. Fine. I'll do it. I'll give him credit.

Chris: [Laughter]

Dave: I'm the guy giving Ethan credit for it.

Chris: Ooh! Spicy!

00:35:57

Dave: Yeah. I think... There was a point where everyone was making m-Dot sites and website desktop sites and trying to... under the guise of, like, "You can make it even better," you know, m-Dot, you know, and it could be super-fast and super-good. We built a couple of those, and it was cool. I used jQuery Touch and stuff like that. [Laughter]

I think responsive design does make it harder because people are just kind of like, "What?! I have to make a mobile website?" But I think it at least solves the problem of, like, you don't have to switch apps. You can just build one thing. I think that's huge.

You don't have to build ten things. You just have to build one thing. I think that's a big, awesome thing. I just think we aren't given the time or the allowance to pay attention to that small screen experience enough. I think if you made your assumptions at the big screen, the result at the small screen is not good.

I have that problem on my site. I pull it up on my phone. I'm like, "Ick. I thought I did better than this." It's just because I wasn't developing an iOS simulator - or whatever. I probably should more often.

Chris: Yeah. Yeah, I've definitely had periods where I kind of liked it and then kind of didn't like it. I have this problem now. The version of my homepage now... I always liked the concept that the homepage is the about page for a personal website.

Dave: Mm-hmm.

Chris: Even a lot of times for a business website. Why do I have to click About? Obviously, I want to know about your company or yourself.

Dave: Yeah. Mm-hmm.

00:37:42

Chris: What's the homepage for if it's not that? So, I made the homepage the About page, and it just says all the most important things about myself. I like how it turned out. I think that's fine. If you don't know me, here's about me. That's on the left on the desktop, and then a list of blog posts on the right just because I'm like, "Yeah, I know that my site is mostly a blog. But that doesn't mean that people think of it as mostly a blog. They might come there for any number of reasons. So, I tried to split the middle. You know?

Dave: Mm-hmm. Mm-hmm.

Chris: The problem is the default behavior of that then is that when you break that grid down to display block or you just make it a one-column grid or whatever that the About page stuff is first. Now, when I land on my own website, it's not that I don't want that. It's just that it's not... It's always the same, and there's quite a lot of content before you get to anything that signals any semblance of freshness.

Dave: Mm-hmm. Mm-hmm.

Chris: In previous designs, I managed to pull off kind of a two-column look that did some about stuff and fresh bloggish stuff even on a portrait small screen. I was like, "Ooh! God, I kind of nailed that, I think." [Laughter]

Dave: Mm-hmm.

Chris: But I have since lost it and just haven't dealt with it. Yeah, yeah, we should name that syndrome, like, "Don't like own website" syndrome.

Dave: Yeah. Don't like your own website? Call my phone number: 555.... I'm going to help you get out of website jail.

Yeah. No, you're never going to be pleased with your own website. That's why they exist. But you know.

What is it? Ethan called it a worry stone or something. Yeah. It's your little worry stone. You work on it when you don't want to think about anything else. Make it a little better each time.

Chris: Yeah, until you throw it all away.

Dave: Throw it all away and start over. I know people who do that, and they do pretty good.

I think the next thing I'm going to do is that cool grid, the named grid parts. Ooh, yeah! That's going to be a cool thing I'm doing.

Chris: Oh? Yeah.

Dave: That's what I'm going to do. Yeah.

Chris: Yeah. I just did mine recently, so I need to let it simmer. But I would like to lean in a little heavier, too, to all the view transitions stuff and have a play with that because I think round one is over where we all just put view transition name on cards or headers or something.

Dave: Yeah, auto. [Laughter]

Chris: Now it's time.

Dave: Yeah, get funky. Get funky. [Using a beat-box voice] Get funky.

Chris: Right, and use those CSS hooks a little bit more as well.

Dave: Yeah.

00:40:13

Chris: De Scale writes in, "I've been reading about scale recently in terms of making a scalable website or Web app. Can you talk about the topic of scalability? Pick your favorite topic, scalable CSS, scalable traffic. What do you think? Scalable databases?" What does scale mean to you, Dave?

Dave: [Speaking high to low pitch] Your website must have a good scale.

Chris: [Laughter]

Dave: And that's what I always say.

Chris: Musical scales, absolutely.

Dave: Yeah.

Chris: Yeah.

Dave: I think about this a lot. Scalability in websites, there's startup scalability, which is, can it accept 100 billion users at 80 billion connections per section? That's one form of scalability is throughput and availability at load. Does that make sense?

Chris: Sure. That seems like starting at the top, baby. That's the ultimate scalability, which probably a lot of us will never even think about.

Dave: Right. Right but you know I'm in a situation where I do have to think about that right.

Chris: Yeah.

Dave: And it happened in the past to large pizza websites, et cetera.

Chris: Yep.

Dave: That's scale. And so, at some point every kilobyte you add impacts sales. There's an old Amazon thing, wpostats.com - or whatever it is.

Chris: Mm-hmm.

Dave: Where it's like one percent, 100 milliseconds was 10% of revenue - or something like that. You're probably leaving a bunch of money on the table if you're not scaling to meet the requirements.

Chris: I see. What's happening, the way scale factors in there is if your website scales poorly and the traffic goes up that you're going to have performance and then reliability problems.

Dave: Yeah, your performance gets worse as load happens--

Chris: Yeah.

Dave: --because the five connections your server has to other clients or hosts start disappearing. And so, now your website takes even longer to load - and stuff like that.

Chris: Mm-hmm.

Dave: Your server can have X number of connections. Then you might have to stand up other servers to handle those connections and load balance those connections. It's a big deal. That's one form of scalability.

I would say the other, there are other forms, just like... I'd be curious what you think, Chris. There's, like, if I write a line of code, is the next person who comes along going to understand it or are they just going to delete it or write over it or mess it up and break something else?

I think there's this term of, like, human resourcing scalability. Can multiple people, teams, and stuff work on something at the same time? I think that's another form of scale, like how many people can work on it simultaneously.

Facebook famously has thousands of engineers, and they all work in one folder. [Laughter] There are tens of thousands of React components and stuff like that. So, that's a form of scale.

Chris: Right. Right.

Dave: Google is a mono repo, too. Can you imagine--?

Chris: Right. In that case, a scalable choice you might make is we're going to try to break things into as small of files as we possibly can because then the chances of conflict are high. Even if you had five people working and the way that your architecture was that you just have a script.js file, just one file, and all five people work in it, it literally will be a huge problem to do PRs because every single PR will be a merge conflict because somebody else was working in it, too. It sometimes can handle that well but, for the most part, just says, "No, two people touched this. You've got to figure it out."

That's a difficult and error-prone way to work. It's going to slow everybody down. But if you just said, "If you're going to work on a new component, you're going to make a new folder. You're going to name it something. You're going to put the relevant code for that component in that folder." That PR is going to be nice and clean and easy to read and not conflict with something else. That's a scalable choice you could make about the architecture of your application.

Dave: Yeah. So, I think those are, like, how many people can use it and then how many people can author it successfully without collisions and conflicts and slowdowns.

Chris: Yep.

Dave: That's probably the two biggest versions of scalability.

00:44:46

Chris: Sure. There's cost as well. That's another one.

Dave: Cost.

Chris: You're making choices to get this website online. And as it scales up (or down, even), can you find a way to kind of host it for free at the beginning? Great. That's kind of a low scale choice that you could make because scaling, you generally think about up, up, up, up, u, and that's a good way to think about it, too. But starting as low as you can practically is good, too.

But if you start so low, does it mean that you have to make really difficult choices later about moving it? You know? You can pick a host that isn't particularly scalable.

Dave: Mm-hmm. Yeah.

Chris: You're going to have to pick up and move later. Or a data storage choice that just becomes too expensive. Then the next choice is, like, "Well, you're going to need to go to a hand-managed PostgreSQL thing." That's going to become a really big, hard job because you didn't pick something scalable to begin with.

Dave: Yeah. Hopefully, your scale problems match your income, like how much money the site is making.

Chris: Mm-hmm.

Dave: But how many stories do we have of, like, "Oh, man! My Netlify (or Vercel) charged me $100,000"? - or whatever. You know? Because they put a serverless function in a hot path and then they got on Hacker News - or something like that. And so, tens of thousands.

It cost you $0.08 to build locally, and you're like, "This is going to work forever." But then when people show up, the cost, the actual cost of a server, went up immensely. Now the cost to move is also immense.

Chris: Yeah.

Dave: Yeah. I think those are themes.

Chris: All that said, it doesn't mean that the correct way to do this always is to pick the most scalable possible choice from the first day you ever work on a project because there are costs to that. Sometimes really scalable things are also very manual and difficult things to choose.

It is not a mistake to pick more managed services or simpler technology in the beginning. The trick is when to start thinking about those moves on the way up. You cannot learn it.

Dave: No. Trial by fire, huh? Only.

Chris: Right.

Dave: Yeah.

Chris: I think only.

Dave: Only.

00:47:16

Chris: Or if the world was a better place where everybody... I don't know that it was easier to live. I feel like it was possible, in the past, to be an apprentice plumber for 12 years.

Dave: Yeah.

Chris: It's still cool. You still drove a Buick Skylark to work and lived in a three bedroom home on the outskirts of Texas. It was fine. You know?

Dave: Yeah. Yeah. [Laughter]

Chris: [Laughter] That's harder now. But if you could be an apprentice dev ops person for 12 years, you'll probably learn these things without it being a disaster. But for now, it's got to be a disaster to learn it.

Dave: Yeah, you learn under the cover of somebody who has experience. And so, we just don't have that really apprenticeship model any more.

00:48:04

Chris: Yeah. I saw one the other day. Now, I don't think... This may not map onto this perfectly, but there's a website called Sill, sill.social.

Dave: Mm-hmm.

Chris: It's kind of the... Now I'm forgetting the name of the thing that it replaced, but you basically hook up your Mastodon and your Bluesky. Then you get a little digest of what was the hottest stuff kind of in combination of the two.

Dave: Oh, interesting. Okay.

Chris: It's like if you had five friends that all shared a link yesterday, you won't miss it because you'll get it in the little digest. Then you can kind of click down into it and see what they said about it as well. Really nicely done kind of app.

I happen to know the guy that did it. We crossed paths a decade ago in an interesting way. That's neither here nor there. I think he's a pretty accomplished guy. Probably a lot smarter than I ever will be. But still, is kind of running the thing alone and probably made some smart scaling choices early on to verify if this thing has any legs or whatever.

But it had kind of a little disaster the other week where some database thing went down and was unrecoverable. Now, Sill doesn't keep a lot of your data, so it's not like it lost a ton.

Dave: Mm-hmm.

Chris: But it lost your... a lot of stuff.

Dave: Oh, was that the Turso thing? Turso, or something, did that. Anyway, yeah. I heard about something.

Chris: Yeah, maybe it was.

Dave: Yeah.

Chris: But you just had to kind of re-log in and connect your stuff again, and then you were good to go. But it's like that was probably in the disaster category. [Laughter]

Dave: Mm-hmm. Mm-hmm.

Chris: It had to do with scaling, so that can happen.

00:49:41

Dave: Well, and you don't think about it. You launch it, and you have eight whole dollars in income from it. You're not thinking, "Dude, the next thing I need to do is really intense backup structures." [Laughter] You don't think about it.

Chris: Yeah.

Dave: But the next time, he will, the next time it happens.

Chris: Perhaps, yeah. He specifically mentioned scalable CSS. I don't know. It means the longer it's around, the more you need a system. Davis said CSS kind of begs to have a system.

Yeah, I think if you have one, it'll probably scale pretty darn far. With no system at all, just a little random, like--I don't know-- I'll just give it this class name, and then I'll go into some file and just use that class name, that can last for quite a while I'd say.

Dave: Mm-hmm.

Chris: But eventually, it'll become a little annoying, especially as multiple people work on the codebase. You might just need to agree on some stronger conventions or a different set of tooling to scale it. But there are probably pre- that and after that in scaling CSS, and that's about it, I would say.

Dave: Yeah. Well, and people give CSS a hard time for, like, "It's a pend only, blah-blah-blah." So is JavaScript. But it's a pend only, but the problem is usually not CSS. But I've come across one megabyte CSS files in my day and, boy, let me tell you about it.

Chris: Mm-hmm.

Dave: Once upon a time, I was working for a large pizza company, and they had a one-megabyte CSS file. I mean that's a problem.

Chris: And it's in the head, and it's blocking.

Dave: Yeah.

Chris: That's always the nuance of CSS is that, sure, it's usually not as big of a problem. But it happens to be this render blocking resource, which is a thing.

Dave: You have to think about that. It will stop the page from loading, so you have to think about that.

Chris: Indeed, you do.

Dave: Yep.

00:51:35

Chris: We'll do one last one before we kick it out of here. Project Manager? writes in.

Dave: Okay.

Chris: [Laughter]

Dave: I like it. I love it. Let's do it.

Chris: "Doing front-end for eight years. Not really a rock star coder. Can figure stuff out, but just whatever." I think that's cool when people self-identify as, like, I'm mid.

Dave: Yeah.

[Laughter]

Dave: Meh. Solid B.

Chris: Yeah. High-five. Yeah.

[Laughter]

Chris: But he likes.... I don't know why I said "he." There's absolutely no... Anyway, I used it because I flipped a coin.

"I do like discussing code architecture, though, and client requirements, and exploring different options and ideas (sort of like R&D). Is there a role for me out there? Could I be a project manager with technical insight? Is this even a thing?"

I actually know somebody that does this exact thing. They like tech well enough and went through a coding bootcamp and do more prefer the early stage CTO kind of role of, like, can we strategize how this is all going to come together? That's where I find my biggest value comes in.

They are struggling a bit, so not sure that there's... rolls out for the.... I would guess that it's probably a little easier when you have a really obviously demonstratable and "I can solve these problems" skillset.

Dave: Yeah.

Chris: But maybe. I don't know.

00:53:00

Dave: I was going to say, I think technical project managers are the best project managers, so definitely pursue that.

Chris: There you go.

Dave: In my experience, being able to be like, "I can't do this because the database will crash is super important because then the other person will be like, "Well, just make it not crash." You're like, "No, it's 700 joins. I can't do it," or whatever. Right?

Having a technical project manager is huge, so if that's something you're interested in, I would definitely pursue it or figure out a role that can work. I think that's super, super valuable.

I think you have to make sure you're up on your tech. You can lapped out pretty quick, and you're not just like, "Dude, what's popular on Hacker News? We're doing that." I think that's going to exhaust some people.

Chris: Okay. Okay.

Dave: Hacker News-driven or Reddit-driven development. You have to curb that. But I think that's something. There's this role of an architect that you could be. But usually, you have to have proven chops, sort of, and ship a piece of architecture.

Chris: I know. That's what worries me about this is a lot of times manager is placed slightly higher than the IC (in the role).

Dave: Mm-hmm.

Chris: You're like... My brain always takes things to the logical conclusion, kind of, is let's say you're like, "Eh, I can't. I don't like coding so much. I don't like marketing or accounting or any of this. So, I guess I'll just be the CEO."

[Laughter]

Dave: Yeah. I can't play guitar or drums, so I'll be the lead singer!

Chris: Yeah.

[Laughter]

Dave: How's that? Yeah.

Chris: That's what makes this kind of hard to apply for a position and say, "How is your coding?" "Not great. I'll be your manager." It's hard for me, but it should be okay, especially because that's not true. You probably are a pretty darn good coder. You just gravitate more towards project management. I would very much hope that you could find that role, and I think Dave is making a good point, especially because you know that about yourself. Do not give up on that dream then.

Dave: That's the part that, like, you have a unique thing in that you're like, "This is the part of the job I like." You know?

Chris: Mm-hmm.

Dave: How many project managers are like, "Dude, I love moving cards across the board. Man, that's the best"? You know? [Laughter]

You're like, "No, I like this technical problem-solving part, and I can assist in that and then help plan that out and then deliver that." That's just what everyone wants to hear. So, I think, lean into that.

Chris: Mm-hmm.

Dave: Just own up that you like this specific part of it. Be like, "I'm not trying to take anyone's job or anything, but this is a part I really thoroughly enjoy and I can assist in that." I think you should chase it.

Chris: Chase it, PM.

Dave: Yeah. Good luck out there!

Chris: Absolutely. We'll wind her down, I suppose.

Dave: Yeah, we've got a hard stop here.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to shart it up! And join us on the good ones: Bluesky, Mastodon. And then follow us there for four posts a month, this month in February. And then join us over in the D-d-d-d-discord. That's where the party is happening, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Um... ShopTalkShow.com, dot-com, dot-com.

Dave: [Speaking high to low pitch] ShopTalkShow.com.

Chris: Dot-com, dot-com, dot-com, dot-com. [Fingers snapping]

Dave: ShopTalkShow.com.

Chris: Dot-com, dot-com, dot-com.