Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--Rupert. With me is Chris--in the office--Coyier. Hey, Chris. How are you doing today?

Chris Coyier: Darn right. I'm doing pretty good. Another show for y'all out there. We have a couple of questions from people that have written in, a couple of ideas for us to talk about. Don't forget, everybody. You can always send us a question or topic right from ShopTalkShow.com.

Dave: And we maybe have some corrections from Jen Simmons [laughter] that we have to get through. But anyway, we'll get through it here on this episode here.

Chris, before we get into it, this week I got the worst haircut of my whole entire life, dude. [Laughter]

Chris: Yeah. I was wondering. You shared it in our Discord first, and I was like, "That is just-just hilarious looking." Yeah, it looks like you had to have asked for it. But clearly, you didn't.

Dave: No. No, no, no, no, sir. For audio listeners, it looks like Loyd Christmas from Dumb & Dumber. I mean it's just a bowl cut across the top. What was not surfaced in the picture was the kind of like bear pelt protomullet in the back, which was just this like thick pelt, and it kind of flipped out. It looked like... I don't know. Like a British popstar from the '90s, like the wet-haired British popstar. Oasis, Blur, that vibe, you know?

Chris: Mm-hmm.

Dave: It was horrifying. I went in, and I... So, here's... I think, as an adult, you need to have somebody who can cut your hair or whatever. That's just an adulting thing, right? If you're making the decision to shave your head, you just know how to do it or you have somebody who does it for you that's really good. Right?

Chris: Yep.

Dave: That's us. I feel like it's... And I had that. Her name is Kelsey. She's really good. But she's booked out.

Chris: Oh, my gosh.

Dave: She's gotten so good, she's booked out. And so, if I miss her, you know, the two days I can book a month, I'm out, right?

Chris: Yep.

Dave: But I have a business trip coming up, so I was just like, "Dude, I've got to... I'm going to--"

Chris: You've got to go somewhere.

Dave: I'm going to Config, Figma Config.

Chris: Supercuts.

Dave: I've got to go, so I went to Floyd's 99 Barbershop, which is kind of cool. It's like heavy metal Supercuts. You know? It's like, "Hell, yes."

Chris: Okay.

Dave: Supercuts, but edgy, right? Oh, man. They did me bad, man.

Chris: Yeah. Do you think somebody won a bet doing that to you, maybe? You know?

Dave: Yeah. Is it like worst haircut possible, you win $500? I don't know. That had to be the thing because they cut my hair. You know I'm asking, "How long have you been cutting hair?" You know?

Chris: Yeah.

Dave: They're like, "Ten years."

Chris: Ten years.

Dave: I was like, "Oh, well, we've got to be good." I was like, "Well, so, I think I want a normal, you know, fade up the top, you know, a little more on top, you know." And they said, "Okay, so like an inch and a half all around." And I was like, "That doesn't sound right." [Laughter] Like a uniform length all the way around.

And they just cut... It looks so bad. And I said, "Well, can you taper it on the sides like a fade?" They go, "Oh, yeah, yeah, yeah, yeah." They cut more hair, but it was not good, man.

Chris: Then you're like, "Gotta go!" Yeah.

Dave: I literally left and paid, and I'm surprised they took my money. That is ridiculous that they even took my money. I have hair on my face. It's just all over. Hair is falling out of my hair.

Chris: Yeah.

Dave: I went to Chipotle with this dumb fucking haircut.

Chris: [Laughter]

Dave: I'm surprised they served me.

Chris: You're in the bathroom splashing water on your face.

Dave: Dude, it was so bad! And I'm just like... Ah, man. It was so bad, I had to get a second... My wife was like... I was like, "I'm going to shave my head." That's the solution, right?

Chris: Yeah.

Dave: Of course, I texted my wife, and I was like, "Yo, check this out."

Chris: [Laughter]

Dave: She forwards it to her friends from high school. She's just like, "Get a load of my stupid husband!"

Anyway, we're celebrating 15 years today. It's wonderful. [Laughter] Anyway--

Chris: Today?!

Dave: Today, yes.

Chris: Congratulations.

Dave: Yeah, it's exciting. But anyway, but they... So, she sends it to her friends. I'm like, "I'm just shaving my head." I'm like, "This is tactical reset. We're going back to 20 years old." You know?

Chris: Mm-hmm.

Dave: I did that all through my 20s. That's the plan.

Chris: How is it to walk into a haircut place and be like, "I just got this today, and I need you to fix it"? Did you lay the stakes that high for...?

Dave: Yeah.

Chris: You did?

Dave: Yeah. Yeah, I went to the next place, and it's--

Chris: I'd be sweating. That's a bold thing to have to give to--

Dave: I was just like, "This is a salvage job." The pressure is off, too. You literally can't do worse than this haircut.

Chris: [Laughter]

Dave: I went to this Haircuts for Men, and there's a fireplace and a whiskey bar, and they give you a whiskey.

Chris: Was it a little pricier, the second one?

Dave: A little pricier.

Chris: Yeah, you went up.

Dave: But actually, the first haircut was half off or whatever, so it was cheaper than the haircut that started this whole thing.

Chris: Oh...

Dave: But I spent about $100 in haircuts.

Chris: Mm-hmm. Mm-hmm.

Dave: That's more than I spend in a year, to be honest. [Laughter] I'm usually like two, three haircuts a year for $30 - or whatever. But anyway, we are--

Chris: You're back.

Dave: I'm back.

Chris: It's a lot shorter, though. I'll tell you that.

Dave: It's a lot shorter. It's good. You put some goop in it. It salvages it.

Chris: Okay.

Dave: But man, anyway, not to... Everybody doesn't--

00:06:14

Chris: If anybody is waiting for the Web development analogy here, I don't think there is one. It's just a haircut story.

Dave: Yeah. People were... Triple threat Josh was trying to get me to do a Web development analogy, and I think it's maybe un... I don't know. There's a maintenance analogy here that even people who say they know what they are doing absolutely don't. [Laughter] Maybe that's the maintenance analogy I really am chasing.

Chris: Right. It could be fake it until you don't make it.

Dave: Yeah. Not everyone is qualified to maintain. Maybe that's it. Maybe maintenance is a skill. Maybe that's what I'm trying to say.

Chris: Yeah.

Dave: The person who styles your hair might not be the person who gives you the trim, maintains the hair. There you go. It might be different people. That's what I learned.

00:07:11

Chris: Yeah. Speaking of Josh, Josh's game is Hondo, isn't it? One of the many games I think he's made.

Dave: Yeah.

Chris: Isn't that right?

Dave: He's got a bunch of games. Yeah.

Chris: It's so good. I remember downloading it ages ago, looking at it, and be like... Because it was kind of off the Wordle craze. Everybody had their own little Wordle adaption. Not everybody, but there were some of them, and I think Hondo is in that classification of it's Wordle-like.

Dave: Mm-hmm.

Chris: Because it's five letters. But I've been playing it recently, and it's just so well done. I don't even know if Josh is a triple threat. Game development is maybe a quadruple threat, we'll say.

Dave: Yeah! Has to be quad threat.

Chris: [Laughter] Quad threat. Design, development, good looks....

Dave: Design, development, can vlog.

Chris: I forgot the third one, so maybe it is.

Dave: I think can--

Chris: Writer.

Dave: Writer, but also compelling product in game developer.

Chris: IP guy.

Dave: Yeah.

Chris: Yeah.

Dave: He's got the execution.

Chris: Good game, Hondo. Look it up. It's great. I think it's Vue-based. It's one of those, like, all he did was wrap it in something and it's in the app store, so it's kind of proof positive that you can just make a website and submit it to the app store and it'll get in.

Dave: Yeah. No, it's great.

Chris: If you're careful enough, they can't sniff it out. Okay, what was I going to say? Oh, we have a bunch of questions from people. Let's do a question first. Those are fun.

Dave: Rock it!

00:08:40

Chris: This is a personal one for you anyway. Matt Batman... [Laughter] Sorry. It literally says Batman.

Dave: I'm Matt Batman.

[Laughter]

Dave: Sorry.

Chris: He's asking about your bookshelf, which is--

Dave: Yes.

Chris: How do you even link that up on your site anyway? How would somebody find your bookshelf? It's hard to find, I feel like.

Dave: You go to About and then--

Chris: Oh, About and then over to Bookshelf.

Dave: Yeah. Technically, it could be its own root thing, but you know.

Chris: Yeah.

Dave: Anyway--

Chris: You're pretty good at documenting the books that you read, or at least some of them. They all have images of the book itself on the bookshelf.

Dave: Mm-hmm.

Chris: Kind of fun. I really know that you're not going to regret doing this. It's so cool having an archive of your things, and your ratings and all this metadata and stuff. But anyway, that's not what Batman is asking about here. He's asking about the images specifically, as in what do you--?

You can inspect and see that you've chucked them in an S3 bucket but - I don't know - what's your story? How did they get there? Do you automate it in some way? What's the deal? How do you deal with images on this page?

Dave: I am stealing them from Amazon. [Laughter] That's the secret. If you go into Amazon, it's like age-old URL hacking. You know what I mean?

Chris: Mm-hmm.

Dave: Every Amazon URL has a format that you can follow. Let me pull up my site and figure it out.

Chris: This isn't even your S3 bucket? It's their S3 bucket?

Dave: It's literally theirs.

Chris: Wow!

Dave: But it goes to their site, so I think they're not super mad. They could cut me off, and that'd be a pain in the butt. But there are a few, like, if that's not cool with you, so it's like images_na (North America) sslimages.com. Image is P, and then there's a nine-digit code. That's their... It's the ending half of their ISBN13, so it's ISBN13.

Chris: Oh, so anybody could do this. You just have a format that you've somehow discovered here, and you chuck that in there, and the book shows up. Okay.

Dave: Then .o1._sclzzz... _jpg. That's route-y. I think there's maybe a cleaner way, and you can get different sized images as well. But that's kind of what I'm doing to get the images.

Chris: This is interesting. One of the things you've done is you've put a hard... You just say width 180, height 270 on it because then you can say "object-fit contain" and if what comes back isn't in that exact aspect ratio, it doesn't matter, really. It just gets centered in that space. For the most part, it looks fine.

Dave: Yeah. That was kind of the... It's a little tough with variable height and squares. Some books are squares.

Chris: Yeah.

Dave: Dan Cederholm's books have little tails, the little bookmark tail in all this product photos, and so some of them are from people's sites and stuff, and I kind of put them in a bucket of my own or whatever.

Chris: Hmm...

Dave: A lot of them are really just hot linked. That's a double-edged sword because, actually, I'm like, "Ooh, I want to get this book cover that I like - or whatever." They'll change it. All the Malcolm Gladwell's got redesigned, and so it's not the cover I read, which doesn't matter.

Chris: Oh...

Dave: But it's now the cool, new Malcolm Gladwell design. I don't super care.

Chris: Yeah, so it's just weird for you to look at.

Dave: It's just weird for me. I'm like, "What book is that?" But it's like, whatever.

Chris: Yeah.

Dave: That's just what it was.

Chris: Okay. I see. These are so... These are really pretty, tiny jpegs, so I noticed you did not rigamarole around responsive images.

Dave: No. Look, I'm not... I'm stealing the images. [Laughter] But no--

Chris: They're 14 kilobytes each, already compressed to all get out, and you lazy load them.

Dave: And I lazy load them, and I just kind of am really trying to just basically do it as simple as possible. If it's hard, I won't maintain it.

Chris: Right.

Dave: That's what I'm doing. I could probably, in theory, get a Cloudinary or something and put it in front, but yeah. I see one - whatever - a book cover fell off. I see a couple missing. So, occasionally, I have to go through and update the image.

Chris: Yeah.

Dave: Gues what. It's not the end of the world. I don't know.

Chris: No.

Dave: Stuff breaks on the Internet.

Chris: It's interesting. It's kind of a good reminder that you don't always have to do everything because there's quite a big checklist of crap that you could do to have the most performant image as possible. But maybe on this one page on a personal website with tiny, already super-compressed images, not so much. If you had a hero image, maybe that's something to talk about.

00:13:37

Dave: Yeah. One thing I might do, and I think my strategy (if it ever went bad), I'd pay a friend $100 to download these images and put them in a folder or something. I don't know.

Chris: Right.

Dave: Or I'd just do it on a lazy Tuesday evening or something.

Chris: If you switched to Astro or something at one point, that could be cool, too. That's kind of one of the benefits of using something like that is when you just use their capital I, Image component, it just does a bunch of smart crap. You don't have to think about anything.

Dave: It generates versions, Web-P's, yeah.

Chris: Right.

Dave: Yeah.

Chris: Theirs is pretty simple, actually. It just does Web-P, and I think just does a couple of other things. Makes sure to put that decoding attribute on it and stuff. But I'd say, for your page, 95% of the value is loading lazy on it because that's a lot of savings, just that alone.

Dave: In the ruthlessly eliminate nuance era--

Chris: Of your life, yeah.

Dave: --lazy loading is the best thing you can do. If somebody ends up on this page, they didn't download 200 book covers. That's great. Or 2,000. I don't know how many books I read. 100? 300, let's say. You're only downloading the top 20 maybe at most, or 14 books.

Chris: Right.

Dave: That's not absurd. You download more images than that in a day. But what's neat is, as you scroll, you're basically opting into more bandwidth usage. That's how I see it.

Chris: Yeah. Yeah. Yeah.

Dave: If it's a little slow, that's a problem, but the fact that it's just object-fit in a box, I don't get any kind of herk-jerk.

Chris: You're not going to get any better squishing the crap out of these things anyway - I don't think.

Dave: No.

00:15:35

Chris: Maybe someday. What was interesting, Safari dropped JPEGXL, which is kind of cool because it's one of those... We thought we might lose that one.

Dave: Mm-hmm.

Chris: There seems to be quite a few benefits to that one. One of them being that you don't have to change the file extension. It's just jpeg, still.

Dave: Yeah, so that would be an option.

Chris: But someday, you'll just run that crap through a little JPEGXL machine.

Dave: Yeah.

Chris: And you'll just get a little bit of benefit for nothing.

Dave: If you resize your browser to like a mobile phone width, you'll see my image. It goes into a table view, not a grid view.

Chris: Mm-hmm.

Dave: Let's see... That image is now 80x121, right? So, it's a third of the size. I could serve a smaller image here, but I, Dave Rupert, don't believe in 1X mobile. I don't think 1X mobile exists. I mean it does in very limited constraints.

Chris: I see, so it's probably 2X mobile, which puts it at 160, which is pretty much what it already is.

Dave: 160, and I was sending a 200-width image anyway.

Chris: So close.

Dave: I'm fine.

Chris: Right.

Dave: I'm not crying tears about it. [Laughter] And on mobile, you only get like four images because of the viewport height.

00:16:57

Chris: And don't forget that there's another thing to talk about here that I actually put in notes for our next show, but I'm going to yank it into this show because I think it's interesting.

You're saying, "I could serve a smaller image." Well, there's some overhead with that. The only way that you'll actually succeed in serving that smaller image (in those circumstances in which it made sense to) is if you put a source set on there and actually produce and host the smaller versions of those files, say what they are, and then have a sizes attribute that allows the browser to do math to determine whether, when, and how to serve the smaller image. That overhead is a lot. Very, very, very, very especially how you've laid out this page in this fluid grid.

It's going to make your sizes attribute damn near impossible to express because sizes is just so weird and hard to do. This is based on the size of the viewport and then how big the image is at that viewport size. Your sizes attribute is going to be about 30K, I feel like. [Laughter]

Dave: Yeah, well--

Chris: ...each.

Dave: Because what I really need is a container attribute. I need it container-based, not--

Chris: Yeah, that's true.

Dave: It will... There are about 20 or 100 pixels of flex between when it pops in a new grid row or grid column.

00:18:20

Chris: Yeah. It looks like... The reason I mention this isn't to crap on sizes because I think the whole responsive images thing is interesting, but there are two points.

One of them is that if it's hard, people don't do it, which is, I think, interesting. Right? That's starting to prove itself out. We should have known that all along. But if you ask a lot of someone (as far as it comes to writing very specially crafted HTML markup), they just don't do it. That's good to know.

And, more interestingly, and a wonderful twist to all this, is that there is a GitHub thread, which of course, we'll link to in the show notes on the whatwg/html forum about sizes=auto. Follow that link if you haven't seen this.

I assume you've seen this, Dave. I think it was dropped in the Discord.

Dave: Yeah. I didn't understand how they do that. But maybe they just kind of find your breakpoints and then figure out how big the breakpoint is.

Chris: It only works with loading lazy.

Dave: Oh, nice. Okay.

Chris: It's relevant to you. The point is, they don't know how big an image is going to load ahead of time. If all you have is the HTML, they have no idea. That's what sizes is about.

Dave: Yeah.

Chris: It's trying to describe (through only looking at HTML) how big this image is going to render when it does render. It was a timing issue.

Dave: Right.

Chris: That's why sizes exist. It's not a timing issue anymore if the image is already sitting on the page already rendered.

Dave: Yeah.

Chris: Sizes knows exactly how big that image is going to render in that browser. So, if it's loading lazy, it just knows. It's got a box.

Dave: It has a box to fill. It knows how big that box is. Wow. That's cool.

Chris: This is huge!

Dave: Yeah.

Chris: This is very good. So, it looks like it's happening.

00:20:07

Dave: That's awesome. That was my... I was involved in the RICG a bit, tangentially.

Chris: Mm-hmm.

Dave: But as much as I do appreciate the solutions, I don't use them. I would only use them in a context like WordPress where it gives it to me for free, where it's free.

Chris: Yeah, you want it automated.

Dave: I am maybe naïve here, but I think there are much bigger gains with WebP and AVIF. If you're going to talk about, "Where should I spend my dev credits?" it's like, just cut a new image. You're going to... AVIF is going to be a 20-kilobyte image versus a 100-kilobyte jpeg.

Now you could slice that for the mobile one and maybe get a 2-kilobyte AVIF and do both operations, but if you're talking about just raw, make it fast, I would just do AVIF. I think that it's a better format for that.

Chris: Yeah. Let technology do technology, man. If you can help us without--

Dave: I like the sizes auto. I like the idea you can say "size auto" and then, hey, here are some source files. Figure out which one is cool.

Chris: Right. It means you can use source-set without it.

Dave: Source set.

Chris: It almost should be the default. I shouldn't have to say sizes auto, and I've been making proclamations like this and regretting it recently, so maybe I should shut up a little bit.

Dave: Yeah. Maybe we're... [Laughter]

00:21:48

Chris: Just like the async. I think you mentioned that recently. Why do I have to say "decoding async"? Just make that the default if that's so much better.

Dave: Yeah. Why do that? Then I saw Addy Osmani do fetch priority high if it's a hero image. It's like, "What?! Isn't lazy or loading eager the same? How is that different?" I still don't fully understand.

Chris: Oh, yeah. Loading eager, that should do the same thing.

Dave: Right. Maybe that doesn't actually work.

Chris: It turns out there are reasons for all this, which does kind of lead us into the corrections episode of this. We got a little pushback on the, like, "Ack! They should have just fixed VH units," and I told you, only use DVH.

Actually, I'm not totally convinced you shouldn't there because I feel like the problems caused by just using VH units alone are worse than what... VH units suck. [Laughter] They cause problems all the time.

Dave: Yeah. Yeah.

Chris: DVH is better in that way. Do I think that they should change the behavior of VH units to behave like DVH? That's where I should have been more tongue-in-cheek about that.

No, don't break the Web. I get it. You can't just change the behavior of stuff. As much as I like box-sizing border box, I don't think you should just change how the Web works. It's going to break too much stuff.

I like not breaking stuff. That's one of the big things the Web has got going for it.

Dave: Right. Right. Yeah, yeah. Then I think the idea was there's stuff sized in type, like a lot of VW is in for like font size equals 5-VW plus 1-REM calc.

Chris: Right, but the VW units don't need to change, though. Those are fine. It's just VH that needs....

Dave: like a side or a scrollbar popping in or becoming visible affect VW.

Chris: Ah... I don't think it does.

Dave: It doesn't, but would it in a DVW? Anyway, I'm just trying to think what--

Chris: I don't know if they made a DVW.

Dave: Yeah.

Chris: I know, yeah, the answer to that one was the scrollbar gutter stable.

Dave: Yeah.

Chris: Which is kind of a good solution. I've reached for it two or three times since learning about it, so I shouldn't crap on it. I'm just always a little... I thought it was going to better somehow, but really it just leaves this white space on the right side of the thing that you can't really--

Dave: Oh, yeah. Style or adjust, yeah.

Chris: You can't reach in there. Yeah, it makes the padding look uneven.

Dave: Mm-hmm. Mm-hmm.

Chris: It's not my favorite. Although, it does what it says on the box.

Dave: There are places where it's like I know 90% of the time there's going to be a scrollbar here, so why not? I should just own that debt. You know? [Laughter]

Chris: Right.

Dave: I should zone. It's like zoning in a city planner, right? It's like I'm just going to zone this for scrollbar, so this is a right of way.

Chris: Right.

Dave: No public use.

Chris: And it's only the times when sometimes there's a scrollbar and sometimes there's not (within one user session).

Dave: Mm-hmm.

Chris: If sometimes it's there, sometimes it's not, based on content, but it never changes, then who cares?

Dave: Mm-hmm.

Chris: But it's like, will the user resize something or add more content of their own or something? Then that's what triggers the shift. That's what's annoying.

Dave: That's when it gets weird, yeah.

Chris: It's a little niche, should we say.

00:25:09

Dave: Then I think we had it wrong on tracking eyeballs. Jen was very much like you can't do that. I think, if I'm understanding it right, it's almost like a stylus or something. Your eyeballs act like a stylus. This is my own analogy that's going to be wrong, and we're going to get corrected on it again.

Chris: Yeah.

Dave: But your eyeballs are like a stylus hovering. Then when you click your fingers, you do the pinch gesture, that's a click, right? It's basically like tapping your stylus on the screen, and WebKit doesn't know where you're looking or doesn't inform the browser where you're looking or hovering your stylus. But one thing it does do -- and this was in the videos, and I think this is where I got confused because I watched this video and it is not a hover effect, but it will add a shimmer effect to the thing to interactive elements that you're looking at, so buttons, links.

Chris: I see. But it doesn't report that to the website, so it would have no idea. But if you could know that you're in the visor and that somebody tapped on a thing, you could say, "Ooh, that was a look-inspired tap." The question is, will there be a user agent that is unique to the device? If there's not, that's pretty baller.

Dave: Yeah. No.

Chris: There may not be.

Dave: Yeah, and that is a question I asked and have not heard back. Is the user agent undetectable?

Chris: I hope not. Don't you?

Dave: If it is available, then Apple should hire me to [laughter] be their bad idea monster because I will implement user tracking. No.

Yeah, I hope not. I hope it's just like Safari, MacOS 10 - or whatever.

Chris: Yeah, exactly. It might actually cause less problems. I would assume it wouldn't if they just didn't have a unique UA. You really don't want people--

Dave: But aren't there situations where you want to give bespoke experiences to the visor website? I'm sure people are going to ask for that.

Chris: Yeah. Maybe there's a way to do that that's not UA. Maybe it's a client hint or something.

Dave: A Web XR detected - or something - or something like that.

Chris: Yeah. It opens the same kind of doors, unfortunately.

Dave: Yeah. I don't know.

00:27:32

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Notion. That's notion.com/shoptalk. Use that URL, of course, notion.com/shoptalk.

Today, I'm excited to share that they just launched Notion Projects, which includes new, powerful ways to manage projects and leverage the power of their built-in AI features, too. Notion Projects combines project management with your docs, your knowledge base, and AI, so you can stop jumping between tools and stop paying too much for those tools, too. Notion is so great.

I wanted to mention one tiny, little thing that I just love about Notion. It's a small feature, but I wonder if it will be compelling to you, too. It's like this block-based editor, so you write a paragraph or put an image there or a block of code or some bullet lists or a togglable element. The things that you build these documents from is very loose and powerful, and you can kind of do whatever you want in there.

A paragraph, for example, turns out to be a block, so you can kind of copy and paste it around or just drag it around and stuff. It's a nice way to build documents.

But let's say you have one and you're like, "Ooh, this is actually some good insight," from, say, a meeting document, which is one of the ways I use Notion. You can copy it. Then you go over to, like, "Oh, I'm going to do a project management card," and we were talking about this problem, so it's become now a card that you're going to manage. I'm going to paste that paragraph because it was insightful and useful to this task.

You can paste or you can paste and sync, which means that the meeting notes and that thing, it's kind of like the same block. They stay in sync with each other, which is just so clever. I just love that feature. Now if you update one, it updates the other one, too, so that you don't get this information drift. It's such a nice thing.

While you're managing projects, of course, if you need to get a little Kickstarter in your thinking about that task, use their AI tools and prompt them to fill out some stuff in there. It can really help your brain get going. It's so nice.

Again, that's notion.com/shoptalk. Use that URL, notion.com/shoptalk.

[Banjo music stops]

00:29:49

Chris: Here's a more simple one. George Peynione wants to know, "What's the best modern way to load JavaScript after the document has loaded? Most of us, me included, work mostly in the world of frameworks and Webpack."

I guess he's kind of saying if you do that, then that framework is probably just doing it the best possible way or the way that it needs to do it so you don't have to think about it, which is questionable. But I get the point. I don't think about how Next.js is loading its JavaScript. I assume it's just doing the right thing.

He's saying, "What about just plain old websites? I've always heard just put the JavaScript at the bottom of the body. But does the defer attribute let you put it anywhere now, including the head? Also, if defer is indeed the way to go, I find it unbelievable that WordPress's enqueue function doesn't support that. A little research suggests that you need to write a custom PHP function just to add the defer to the script tag that gets enqueued."

I think that all sounds about right, George. The WordPress enqueue function allows you to put it in the footer instead of the head. And putting a script at the bottom of the body is just as good as putting defer on it. You need the defer attribute if you're going to put it anywhere else, like in the head or whatever. It makes it literally defer. But if it's already at the bottom of the body, the defer attribute, I believe, isn't helping. It doesn't do anything extra for you. It's already been deferred because it's at the bottom.

Dave: Yeah. I think this had kind of come up, but is there an issue with async and defer? I feel like there was Perf Planet or somebody had something on this, like the best way.

Chris: Yeah, they're different things because one of them, it's about when does it load versus when does it execute. I think defer is both. It says, "Don't even load this until the end and execute it later," whereas async is like, "Load it now. Execute it later," which is smart that they did them both separately. Defer is a little bit more powerful, I think.

Dave: Yeah.

Chris: It's really, really just don't prioritize this.

Dave: Yeah. Defer seems to... This is MDN. The bullion attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

Chris: Yeah.

Dave: But before firing DOM content loaded.

Chris: Really?

Dave: So, the document will get parsed, and it's about to say, "Hey, I'm done content loaded," but then it's going to--

Chris: Do your deferred stuff first? Even if you defer a script, you still have to write a little wait until DOM content loaded crap inside of it?

Dave: I think you would.

Chris: That's a little surprising, actually.

Dave: It says, "Scripts with the defer attribute will prevent DOM content loaded from firing until the script has loaded and finished evaluating." Based on that reading alone, I think you could put it up there, but I would still probably just put it in the footer. But then the footer is going to block DOM content loaded as well. Maybe it's no different. [Laughter]

Chris: We're just talking about some website where you're trying to load a little squooshy bit of hand-crafted JavaScript, probably. Just loading it in the footer is fine. I don't know that I would overthink this to death.

00:33:33

Dave: Yeah. Harry Roberts has a really good talk right now, and I probably should have watched this when I saw that come in. "Get Your Head Straight." He kind of points out there's a lot of tricks, I guess, for scripts and stuff like that.

He does this talk, and he basically shaves seven seconds off the loading of a website just by organizing stuff in the head of his document. I forget where he was at on this whole thing of adding the optimal order or what defer stuff happens and when that should happen in the thing. But it's a pretty compelling talk, and it's really just nitty-gritty going line-by-line of a head and fixing it.

Yeah. I can link that up in the show notes. I'm trying to find the part where he talks about script defer. Let's see. I'm almost there.

Chris: Yeah, it's interesting there's an optimal order at all. Obviously, there's nobody I trust more than Harry to know what's up with all that stuff. But it makes me think. Aren't there occasions where I don't want the optimal because I want some other side effect behavior, or is that shortsighted or stupid in some way?

I used to think if you load a jQuery script at the bottom then I didn't have to do the DOM content loaded trick because the div has already been loaded because where the script is lower than that div. Remember? But if you were to load scripts in the head, jQuery always had to wait for DOM content loaded. Otherwise, its little query selector wouldn't be able to find the div that you're looking for.

Dave: Right.

Chris: I'm just saying div meaning any element that it's looking for.

Dave: Any element, yeah.

Chris: Yeah. Right? [Laughter] I don't know. It was almost like cool side-effect behavior to load it at the bottom because then I didn't have to do that. But likewise, you might load something in the head, which is not optimal performance, but I'm doing it on purpose because of some other reason. Maybe it's an analytics thing that I want to be absolutely sure loads as soon as possible, so it's a performance hit but with a side effect that I want.

Dave: Mm-hmm.

Chris: I don't know. Maybe that's shortsighted.

Good luck, George. I know we like to give nuanced answers. But if we're going to ruthlessly eliminate nuance here, just put your scripts in the footer.

00:36:18

Dave: Here's what Harry is saying. Using async and defer is redundant, an antipattern user, even. So, flag that.

Then... Let's see what else. I'm trying to get all this defer knowledge.

You can't use defer on inline scripts. Then, yeah, so I guess Harry is cool with head defer, yeah, script defer, so go for it. Do it. I'm going to say do it.

Chris: Yeah. But if you're in WordPress, there's no way to do it unless you hack into the... What does WordPress call it? Hooks. You've got to write a hook that takes--

Dave: WP enqueue scripts - or something.

Chris: Yeah, but even that doesn't have an option to put defer on the script. So, you either need to put it down in the footer because that's just a bullion that's part of that method or you need to use the hook to change the script output to add the defer tags. I think it's easier just to put it in the footer.

Dave: Yeah. There you go.

00:37:17

Chris: You know what Melanie brought up in the Discord the other day about view transitions. We've been bringing them up here and there. I found it interesting.

I'm back from Render (a couple of weeks now), a lovely conference down in Atlanta. I put view transition stuff in there. It's a perfect thing for a conference to talk right now because they're very wow-inspiring.

Dave: Mm-hmm. Mm-hmm.

Chris: I'm sure they showed up a bunch at CSS Day, too. I was very jealous of all the people that were at that conference.

Dave: That looked cool.

Chris: It looked really cool. Yeah, I saw Adam posted a really fast... He made his slides using view transitions and then just pressed the forward key really fast, and you could see all the view transitions go really, really fast through his slide. It was so cool-looking.

Anyway, one of the ways that I feel like you always have to present view transition is that there are two kinds. There's the on-page kind and the multi-page kind.

Dave: Mm-hmm.

Chris: Or the page transitions versus state transitions. Even the name of it, to me, is very... How do you refer to them properly? But hopefully, you know what I mean.

One of them is a JavaScript API that just moves stuff on the same page, and one of them happens when you leave the page and another page loads. They're both really cool. They just happen to be under the same banner called view transitions, but they're super-different.

Melanie was like, "Oh, I just saw a super-inaccessible view transitions demo." There are a few people that responded like, "How is that possible even? Isn't it just some thing that progressively enhances? You click it and it loads the next page. I didn't even know there was an opportunity to make a view transition inaccessible."

That's not what she was referring to. She was referring to the same page transitions. I found that interesting because I thought if it's the same page transition, by definition some state is changing on that page because, otherwise, the view transition is irrelevant. Something has to be changing. It's moving around in some way. Then, by definition, you have to deal with accessibility in some way.

It was so interesting to me that there are these two types of view transitions. First, you need to understand them. Then need to know that, on one hand, accessibility just isn't involved at all hardly because a new page is loading and that's just the way the Web normally works. There's almost no accessibility implications.

Then the state transitions way, which inherently needs to be dealt with from accessibility. They're just very extreme on both sides.

Dave: Yeah. I think it's A) stuff people don't know, myself included. I don't know the right thing every time, even though I do this stuff and I'm a maintainer of the Accessibility Project.

I think it is hard sometimes. I think there are... If you hit a view transition and, all of a sudden, that element you are clicking on is now at the top of the page or something, is the violation a focus violation? Is the violation--? Or did the browser sort that out? I don't know. Or is it a vomit, like a motion error? Is it making people vomit? You've got to be careful with that stuff. Yeah.

Chris: True. Yeah, yeah, yeah. Yeah, anyway, now I feel bad that I said there are no accessibility implications because, of course, there are. Like if you make something too fast or if it moves at all. It's not like there's none.

00:41:02

Dave: Yeah. Tyler Gough has this really good... He started playing with transitions, and he put some on his site. I'll put a link in the old show notes.

What's cool about it is he has... If you go to the last video on his little post about it, there are some radical transitions. Stuff is just exploding and swooping and blooping. He's done very little code to make that happen, and that's what's very cool.

Chris: Right.

Dave: I haven't looked at the code, but I hope or assume there's some "prefers reduced motion." That's one thing.

Chris: Right.

Dave: But beyond that, there are so many things. Opacity fading is generally kind of okay. But at some point you maybe just need to--

Chris: Because it's not movement, really.

Dave: Yeah, it's not movement.

Chris: It's just staying in place.

Dave: It's just staying in place. Then some people would argue there's some cognitive benefits by elements kind of, you know, morphing. If your logo is in the middle and then you click a page, and then the logo goes to the top, you might be like, "Okay, that's a way to get back to that page." But you know.

Chris: Hmm... Is that object permanence concept?

Dave: Yeah, the object permanence, so there's cognitive stuff that might be good. But I don't know. Yeah, I think it's going to be a thing where we overdo it a lot and then we have to figure out how to taper it back. That's kind of my general thought.

Chris: Yeah. Yeah, I see Tyler's last example is very, vey extreme in that way. Everything is enormous. Yeah, I can't shake from my head the fact that, on desktop, the opportunity for it being overwhelming is just way higher. There's just more pixels to be moving around.

Dave: I mean, yeah, it's like the browser width is really the nausea meter. I don't know. It's like the bigger the movement is, the more you're like, "Wow, that's a lot!"

Chris: Truly. Yeah. Moving something 1,000 pixels is always just going to feel overwhelming. I wonder if there's some kind of metric we could put on it? If you're going to suggest that something is coming in or coming out, like rely on opacity a little more than you'd want. Keep it under 50 pixels or something.

Dave: Mm-hmm.

Chris: But use a little opacity instead so things aren't just absolutely flying.

Dave: Yeah. Well, we have--

Chris: Yeah.

Dave: I just coded up a view, and it's like a drill-down, like go into a details view. You know?

Chris: Sure.

Dave: I wish these existed because it would be very cool to be like, "Hey, browser. Just give me a little slide-y transition so that people know this is a drill-down." That would be cool to me, but we don't have it quite yet. I guess I could code it, and then it might show up one day. I was just kind of like, man, it would be very cool if this existed.

00:44:23

Chris: Well, some of the news this week was around everybody's favorite website Reddit and the drama being that they're charging now for what used to be a free API into now--

Dave: Prohibitively expensive.

Chris: --by all accounts, very expensive API.

Dave: Yeah.

Chris: And that prices out all kinds of third-party usage for Reddit, including my own beloved Reddit client, Apollo. I don't know that we need to dwell on it. The point is, it's interesting to talk about API pricing and stuff. I think you've always fell into the bucket of, like, "You should probably charge for APIs," so that's tricky, but it doesn't mean you're on Reddit's side necessarily.

Dave: Yeah, I'm on the, like, you should pay, but not in the millions of dollars like they're requesting. In the hundreds of dollars or something range. If you're building a business off of somebody else's data, there should... I don't know. I'm just thinking. There should be some sort of sleight-of-hand or some exchange of money, quid pro quo, maybe - I don't know - that happens to make that, to grease those wheels.

Chris: Right.

Dave: And make sure that the API is always there. It's always staffed. It's always a dedicated resource. That stuff, I care about.

I'm depending on a few APIs. And I'm just hoping, out of the goodness of their heart, they're going to keep them open. [Laughter]

Chris: Yeah. There are no promises. You didn't sign anything.

Dave: Yeah.

Chris: Yeah. I worry about companies like -- not "worry," but -- relatively new Mimestream. It didn't drop because it's been in beta forever, but it got some press. It's a Gmail client for Mac, but it looks a lot like Apple Mail. But instead of Apple Mail, just using iMAP and being kind of not a particularly first-class client for Gmail. Mimestream is a Gmail-specific email client for Mac. I've been using it and liking it.

But of course, they are 100% at the whim of Google's free Gmail APIs. You know? Should they up and close that, then they're just done as a business. I don't think I've got the guts for it in my old age, Dave, that I could do it.

Dave: Yeah. Well, rate limiting is kind of one thing APIs do to keep it manageable, and I'm into that as well. But I'm trying to think of a good example.

Like Dribbble, I built a couple of things with Dribbble data. I think I probably scraped it or RSS'd it or something like that. Dribbble, I think, had an API at one point. Maybe they shuddered it.

I liked Dribbble. I'm using their data to swoop up some images. They should get a cut of that. It's their data. I guess I'm growing their ecosystem and building on their platform. Now it's a platform. That's a big deal.

It just seemed to me, like, pay to play, I guess. I don't know. Maybe you need a paid user account to get access to the API account or something. Even something as simple as that, right? That might have solved Twitter's problems.

Chris: Right. It limits bad behavior so well, too. It's just they're trying to use it as, like, "We're not profitable, so this is going to be how we make a profit." And that nobody is willing to pay your prices. Well, then it's not the way then.

Dave: No.

Chris: It just is whack.

Dave: They're doing, I think, the ad play that Twitter did.

Chris: Oh, they don't want third-party clients because there are more ads.

Dave: They don't want them.

Chris: Yeah.

Dave: No. Otherwise, they'd price it to let it... They see it as a threat, and it is siphoning money and ad revenue off of their system. I'm assuming. That seems like the only logical play for me.

00:48:24

Chris: You know sometimes when this stuff happens, there are people that go, "Ah, screw you. I'm out."

Dave: Mm-hmm.

Chris: Sometimes they're serious and sometimes they're not. I hesitate to make proclamations of that sort, but it was very easy for me to make it... It's almost like I could do it without having to make it on Reddit because I just like Reddit as the most casual user ever.

Dave: Mm-hmm. Yeah.

Chris: But still a daily user. I had Apollo on my phone. Over the years, I crafted my little subreddits that I enjoy the most. A little bit of technology, but not very much because I don't feel like it's that good for talking about tech, really.

Dave: Yeah.

Chris: It was mostly like kids falling over and magic tricks and cool tattoos.

Dave: Heck yeah.

Chris: Stuff like that. So, I'd open it up, and it would just be my little newspaper of funny stuff, sometimes insightful, maybe a link here and there that I would save if it was interesting to write about or something. Not that much.

Okay. Oh, there are big problems? Oh, Apollo is going away? I just delete it. It's just gone. Whoosh from my life.

Dave: Yeah.

Chris: It just doesn't matter to me. But I would think way more people feel that way about Twitter than feel that way about Reddit. I bet people like Reddit, generally. It's more a part of their thing because so many people on Twitter, they just log in to see what Tom Brady tweeted - or something.

Dave: Mm-hmm.

Chris: It's so easy for them to just delete Twitter because they're like, "Oh, who cares. What a stupid app." But I'm exactly the opposite. It was very easy for me to leave Reddit, but I have struggled to leave Twitter.

Dave: For me, it was like Twitter was very chaotic with its new CTO or CEO/owner. And so, I don't need more chaos in my life, so I just said, "No." [Laughter]

Chris: Yeah.

00:50:26

Dave: I'm posting there a little bit here and there, but it's keeping it very minimal. I have a Bluesky invite. That is also very chaotic for me, so I'm kind of not there that much or interacting much.

Chris: Oh, I tried. I tried. I'm in there, too. No hate on it. It's kind of neat. Although, I do find that Jack dude just as weird as any other of these crazy Silicon Valley people. I know he's not really the... I don't know how much he drives the ship or anything, but he was definitely involved, right?

Dave: Yeah. I don't know much beyond funding, but I think it's... Yeah. For me, the feature, like where you see everybody's replies, that's so hard for me. [Laughter] I'm getting looped into conversations I have no reason or no desire to be in, and so that's the hard part for me is like, "Hey, I do not need to see you reply to this person, a guy from college."

Chris: Yeah. Just in the regular feed.

Dave: Yeah, so that's where it breaks for me.

Chris: It seems to mostly be just jokes.

Dave: Goofs.

Chris: Poop posting.

Dave: Yeah.

Chris: Yeah, that's all it is at the moment. I mean, in my little circles - or whatever.

Dave: Yeah.

Chris: I don't know if I made the mistake or whatever, but I kind of just follow the same old people I follow everywhere else, which maybe that wasn't right way to go. It turns out I don't really regret that because I don't know who else I would follow. It's not like I'm going to reinvent my life.

Dave: Yeah. These are my online friends. I'm going to follow them. But it is like, "Okay, now I see you in triplicate, so there we go." [Laughter]

Chris: Right. If you're cross-posting but the tools to do that aren't super-great yet. Then I feel like, should I be cross-posting more? Even if I cross-post to two places, I feel a little weird about it. But I'm like, I don't know. Give me my likes, you know. I don't know what's going to resonate the best somewhere. Now my blog only publishes to Mastodon just by virtue of there happening to be a pretty good WordPress plugin that would do that for me.

Dave: Mm-hmm.

Chris: But now that that's broken on Twitter because their API sucks or doesn't exist now or whatever it does. Bluesky is so new that I don't expect people to be building lots of stuff for it just yet. It's such a weird time.

I did put that in our notes because I'm kind of like what if... Is that a way that you could approach this is just to be like, "You know what? I'm just going to pick one, and I'm going to put all my time and effort into that one"? Or is that not the way to go right now and we should all be keeping our toes in all these different ones just to kind of see who--?

Dave: Yeah. I don't know.

Chris: --see which one--?

Dave: I'm sure there's a strategy. Right? Like be the king of one domain, like go all in.

Chris: Yeah.

Dave: But I wonder. Like TikTok, Instagram, YouTube shorts. I'm sure there's some advice there on which one you'd need to do first and sink all your bucks into. Anyway, it's just kind of like... I don't know. That's weird, right? It's just weird that followers and growth--

Chris: If that sounds tiring to you, maybe you shouldn't be in the business at all. It sounds tiring to me, but I would think that maybe the people that are excited by that are the people that should be doing it.

Dave: Yeah. Well, the irony is getting on Bluesky, for me, actually kind of ruined social media entirely. It's not Bluesky's fault. It's just like... I'm just tired of checking feeds and seeing the same people tell the same joke in three different platforms.

Chris: Yeah.

Dave: It's okay. But, man, I'm tired. I'm wiped out. And I'm doing it, too, so I can't even fault anybody.

Chris: Maybe for you, you should just pick the one and just be willing to be totally absent.

Dave: Yeah, and just trust -- what is it -- good stuff gets amplified or will cross platforms. That's kind of my hope with a lot of my stuff.

Chris: Is there an official term for that? I do kind of like that. If some big news event happens, it's a little unclear how you exactly find out, but you almost for sure will.

Dave: Yeah. Yeah, just like the ubiquity something. I don't know.

I'm having really excellent experiences on Mastodon, really fun engagement, like people starting conversations and stuff. I'm kind of there for right now, still. That's where I'm at.

Chris: Yeah. Okay. Pretty good. Pretty good.

Dave: There's a lot. I should probably blog, but there are a lot of things I do like about it. It is a little bit like an HOA, like you moved in and there are rules and stuff to the neighborhood, and that kind of sucks. You have to apply to get in. That sucks. But the result is it's a lot... It's more of a controlled atmosphere and less about seizing the chaos emerald, which I think is what all the other places are about. [Laughter]

Chris: Ah... all right. Well, fantastic. Good to talk to you, Mr. Dave. Maybe we'll save... I think we have one more question. We'll just do it next week, I think, on the show.

Dave: We'll do it next week.

Hey, 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.

If you get a bad haircut, send it over to @shoptalkshow on one of the social medias. We'd appreciate it. Join us in the D-d-d-d-discord to find out all about the latest haircut breaking news.

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

Chris: Not really. ShopTalkShow.com.