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 -- just ate a whole bag of Doritos -- Rupert and with me is Chris Coyier. Hey, Chris.

Chris Coyier: Ooh, sick. What'd you go, cool ranch or nacho cheese?

Dave: Nacho cheese.

Chris: Yeah. Yeah.

Dave: We've got to bring balance to the ShopTalk Show - different opinions.

Chris: Yeah.

Dave: I know you're a cool ranch guy. Yeah.

Chris: Kind of a cool ranch guy.

Dave: Ugh! Well, I mean, I don't understand it myself, but I respect your choice.

Chris: Mm-hmm. Sweet chili once a year, I'd say. Uh, okay. Well, this is going to be great. This is going to be great. Jim Nielsen is on the show. Hi, Jim. How ya doin', right here?

Jim Nielsen: Hello. I'm the organic white cheddar Doritos person.

Dave: Whoa!

Chris: Whoa! Baked, you mean, like the real crispy?

Jim: No, not baked. I don't know. The local gas station carries it.

Dave: Man!

Jim: It has the USDA organic stamp on it, so that's got to be better for you than the regular Doritos, right?

Chris: Yeah. Yeah.

Dave: It sounds like one of those special Japanese flavors.

Chris: It's only come to my attention that you're not even supposed to say that foods are healthy or unhealthy, like intrinsically. You know? Your diet can be healthy or unhealthy, but a food itself can't really be. You know?

Because it's easy to be, like, "Oh, look at that gas station hotdog. That is an unhealthy piece of food." But is it really? If it's part of a healthy diet, you could make it work.

Jim: But you also can't look at broccoli and say that's a healthy piece of food?

Chris: Yeah. I eat plenty of broccoli, and I'm fat as hell.

[Laughter]

Dave: Give it enough cheese and butter, broccoli is a delicious vegetable, and it's good.

00:01:52

Chris: Just saying... Jim, let's say you're designing a form, and you had a bunch of inputs on top of each other that you have to have labels for (semantically, obviously), but you just don't have room for the label. Also, say it's 2013. What kind of label pattern would you reach for, would you say, in order to solve this UX crisis that you're in?

Jim: What would I reach for, and it's 2013, and I want to be trendy? I mean you reach for the floating label.

Chris: The floating label pattern. That's right. Oh, I was just looking at old Jim Nielsen blog posts, which you weighed in. You weighed in on this controversy. I don't even know if it was a controversy. I think, back then, it was just applauded. It was just, "This is the new way to do labels."

Jim: Yeah. I try not to look back on my blog posts any more than maybe a year.

Chris: [Laughter] Yeah. No.

Jim: Maybe six months.

Chris: No shade on this one. I just think it's funny. It just shows how long Jim's been around kicking it on the Web, sharing about how to do Web design techniques and stuff. And I just came across this and thought it was funny.

You know, today, you can find this article on Envato Tuts or Web Design Tuts+ or whatever it is. But back in the day, it was something else, wasn't it? I don't know. It had some different name before they all consolidated, and it was definitely like the biggest blog around for blogging about patterns like this.

I looked it up. I just remember because you were blogging then. I was blogging then.

00:03:35

Jim: Yeah. I used to. That was a fun time. I used to write for sites like that, and they'd pay me money, and nobody pays me to write on my blog now.

Chris: Yeah, a real step down.

Jim: I don't know why. Yeah. I don't know why I ended up writing on my blog instead of someone else's.

Chris: Jeffrey Way used to run that site. Yeah, anyway, a blast to the past. A blast to the past. Let's move all the way forward. Your name crossed my desk the other day, or I mean my podcast player because I was listening to the Postlight Podcast. It's one of my favorites. And you pop on there with Mr. Flarup. I don't know if I'm saying his name correctly.

I was like, "What a weird world-crossing thing is happening to me right now? I really like this Postlight Podcast. Then there's Jim, who I read his blog, and is just part of the industry for a long time. Then this other random guy, which somebody referred me to, to hire him to do an icon that I needed a couple of years ago."

It was like three very different places all smashed together into one podcast, and it was really cool. But it's because you and Michael put together a book of iOS icons of which I had no idea you did this, but your involvement is basically you had a blog that documented iOS. Was it specifically iOS, or is just any app icon?

00:04:53

Jim: It started iOS. I've got Mac OS and Watch OS now as separate and distinct sites, but yes, iOS.

Chris: Essentially, a gallery, right? It's a gallery website that just says, "Look at this sweet icon."

Jim: Yeah. I mean you probably heard it in the podcast, but back in 2010, those were hot things, the gallery websites. You know?

Dave: Mm-hmm.

Jim: The minimalist galleries.

Dave: I still miss CSS gallery websites. I wish I could - I don't know. I want my site to get on one, and I think it's all product hunt now. I don't know. I'm not getting them anymore.

Chris: Apparently, everybody stopped doing them except for you, huh? Suckers!

[Laughter]

Jim: Yeah. Suckers.

Chris: [Laughter]

Jim: Yeah. I set that up way back in the day. I needed to create an icon. It wasn't even an iOS native app icon. It was like a Web icon. You know the one that they put on the home screen?

Chris: Mm-hmm.

Jim: And I just was like, "I need some inspiration," and I couldn't find. I was like, "Surely, there must exist a gallery of iOS app icons." It'd been around for maybe three, four years by then.

Chris: Mm-hmm.

Jim: And there wasn't (that I could find), so I was like, "I could do that." And to be honest, it was the very first sort of real Web project that I did.

It was like, "Okay. I need a domain. I don't actually have a domain yet." I'd seen the Super Bowl commercial for GoDaddy. I think that's where you buy a domain. So, I bought a domain.

Then it was like, "Now, how do I actually--?" I know how to put files on an FTP server, but how do I actually put them on this thing so that when somebody types in iosicongallery.com, it resolves to these things that I've created?

It was this whole learning process for me.

Chris: Whoa! This was your first-ish website.

00:06:43

Jim: Yeah. It was really the first-ish website, and I ended up using WordPress--

Chris: Yeah.

Jim: --because I didn't know how else to create a post day after day after day.

Chris: That happened to me, too. How did it become that for so many people? What is it about WordPress that gets into people's minds as, like, this thing they should attempt to learn? It's nontrivial, man, with the MySQL database and all that. It seems weird.

Jim: Totally.

Chris: Yeah.

Jim: I know. Totally, to be honest, wasn't necessarily fit for what I was trying to do. I open the post editor, and it's like, "Here's a title and description." It's like, "Well, I'm not writing anything. I just need to put this image in there." They had the featured image back in the day. I haven't used WordPress in a little while. I don't know if that's still there.

Chris: No, but even that was kind of a relatively new feature. No, it's still there. It's a way to attach--like, for whatever reason, this is a built-in feature--one image to the post. You get this one opportunity to choose the graphic. Yeah, that does make sense in this case, right? Your icon is--

Jim: That's the featured image.

Chris: That's the featured image.

Jim: But there's nothing else to the post, so yeah. It was a whole learning process for me figuring out how to get that all set up. And I had a friend who had a friend who ran a server in his basement, and that was ultimately the server that was running WordPress.

Chris: [Gasp] Wow!

Jim: And I ended up getting some good traction. I was getting thousands of page views a day. This guy's server went down for like a month. You would just go to my website, and there was nothing there.

I was like, okay, I need to get this out of this guy's basement because he was doing it for free, so it's not like I could complain and say, "Hey, I'm paying you money. Fix this fast." So, I learned a lot through that whole process about trying to build things on the Web.

Chris: Nice. Then clearly, you have some spirit of longevity because the site exists today. It doesn't look like WordPress anymore, like when you view source. It looks a little more handcrafted, perhaps. Is it true that you moved off of it?

00:08:49

Jim: Yeah. I moved from WordPress to Jekyll, so I could put it on GitHub Pages and get hosting for free.

Dave: Mm-hmm.

Jim: That was shoehorning, for sure, trying to get that into Jekyll. Then eventually, it now runs on Metalsmith, which is my favorite static site generator. It's one of the not so popular ones, but I really like it.

Chris: Ah, interesting. Yeah. I know exactly what you mean because I've never actually used it, but every time I look up SSGs, it ends up to be it's in the top-ten list, but I actually don't know anybody that uses it. But now I do!

Jim: And now you know.

Chris: It's you.

Jim: There's five of us out there on the Internet.

Chris: Yeah. And so, let's just finish the book story. Michael is actually--

I'm sure you've designed some icons, too, but his whole life is designing icons, right? How do you connect?

Jim: You know I knew of Michael just because I've been collecting these icons, and I try to attribute. When I can find who the designer is, I try to link to them, and he was the most prolific person who kept showing up over and over again in all of these icons that I was collecting. And so, I knew who he was.

I kind of always thought about doing a book because I was like, "Well, I've got ten years' worth of icons here. It'd be cool to print them in a book." But I had no idea. How do you print other people's intellectual property?

Chris: Yeah.

Jim: You know? How do you actually print? Anyway, Michael ends up emailing me, and he has experience in this whole thing. He's run Kickstarter campaigns before and at least has more confidence than I do in figuring out the unknown.

He was like, "Hey, I want to make this book. Do you want to help?" I was like, "Absolutely. I would love to."

Dave: Awesome.

Jim: That's where we kind of started.

Chris: I wouldn't even want to write one email like that, like, "Uh, hey. Can I please commercially profit from your icon - or whatever?" I'm sure you found some nice way to say it and that made it amicable for them - or whatever. But that seems like a massive undertaking, right? Basically, get a signed PDF from a million designers.

00:11:04

Jim: Well, first, you have to find them all and find a way to contact them.

Chris: Oh, right. That's probably even harder.

Jim: I found so many Twitters that weren't active anymore and emails that bounced.

Chris: Then what do you do? Is that one out? You can't use it?

Jim: Yeah, basically, because we can't get permission.

Chris: Right.

Dave: Hmm. Wow.

Jim: I mean I guess you could, but I guess you're running some kind of risk there. You can't just hot fix the book in production and remove the icon from the book if somebody complains.

Dave: If there's any, I guess, positive side, I think anyone in their industry wants to be in a book, as long as you're not trashing them. [Laughter] If somebody is like, "Hey, I'm going to put you in a book," you just say yes. I would think most people do.

Chris: Yeah.

Jim: Most people were excited. There were a very few--I could probably count them on one hand--who, to your point, Chris, were kind of like, "Yeah, I don't know how I feel about me giving you my thing and you profiting from it." Not that we really even set out to profit from it. We weren't even sure if we could fund it enough to cover the cost. But it did really well in the Kickstarter.

Chris: Nice. All those people got it as a perk or at least above some certain level or something. Then presumably people could also just buy it, or is that not the case?

Jim: Yeah, you can - I think.

[Laughter]

Jim: I know Michael has also heard. Because the Kickstarter did so well, I think he's also heard from a couple actual publishers who are interested or possibly interested.

Dave: Oh, wow.

Chris: Mm-hmm.

Jim: Whatever that business scenario looks like.

Chris: Yeah, that's tricky. You have all the leverage at this point with the final product already being awesome.

Jim: Yeah.

Chris: So, don't take any flack, man.

Jim: [Laughter]

Chris: You got this.

Jim: Yeah.

00:12:59

Chris: Uh, all right. Okay. That's great. Congrats on all that. Highly Googleable, the iOS app icon book.

Dave: Do you see yourself as like an archivist? I feel like that's a term. I collect a lot of junk, it all sits on this bookshelf, and it's not organized. Do you consider yourself an archivist, somebody who collects and hoards, but in an organized fashion?

Jim: Um... If you're talking about my personal life--

Dave: Yeah. We could go there. Sure.

[Laughter]

Jim: Probably not. I'm always like, "Just get rid of it. Just get rid of all this stuff. Don't need it."

Dave: A purger. Okay. Okay.

Jim: But when it comes to certain digital things and, for whatever reason, I have an affinity for iOS app icons. I very much love to hoard them, collect them, and, over the years, I've amassed so many. I think there are like 1,300 now in my iOS collection that I'm starting to actually see patterns and connections between all of the app icons in the designers and all of that.

But I do really love hoarding them, and I'm always thinking about what's going to happen with these in 50 years.

Dave: Mm-hmm.

Jim: We're making the book, which is a great effort at trying to archive what app icons looked like in the early 2000s. But ultimately, you know, I'm not going to hold the domain forever unless I tell my kid -- hand it to him down in a will and tell him to keep running the site or whatever. I don't know what happens in that scenario.

Dave: Here, son. It's a website. You have to maintain it. [Laughter]

Jim: Yeah. And my blog, too. Keep that running.

Dave: Keep that running. Here's $8 a month. Yeah.

Jim: Yeah.

00:14:54

Chris: There is something to the archival-ness of static files. I feel like databases are kind of great and usually the right answer for a lot of things, except maybe longevity. I think the chances of a site right now that's powered by MySQL existing in ten years is way, way lower than a file that is just some files that could be in an S3 bucket or something. You know?

Jim: I have three blog posts sitting there in my drafts on this specific topic.

Chris: Hmm.

Jim: About files basically became APIs, right? None of us have--

I have a bunch of Photoshop files from 2010 that, fortunately, thanks to Adobe, I can still open in modern Photoshop, and I can see these weird things that I made, and it's fun. But in another ten years, will I be able to open something in Figma, like a Web app? There's no file. It's this kind of proprietary thing. If Figma ends up going out of business, what happens then? And it's not an application you download and you could emulate if you had an old computer, like you could maybe with Photoshop.

What happens to all that stuff? I don't know. I love the file.

Chris: Yeah, it's interesting. There is no .figma format. There just isn't. If you're going to export something from Figma, it ends up as flattened.

Dave: Then when you get into Figma API, it's just a bunch of layers with X, Y coordinates and stuff.

Chris: Yeah.

Dave: It's just kind of wild.

Chris: Whereas Sketch is so similar to spirit, it does have a file format. Then is that a competitive advantage or disadvantage? Hmm.

Dave: I wonder if JSON-- Is JSON the ubiquitous Web file format? Like as long as I can get a JSON of my Figma, does it work?

Chris: Didn't even Sketch say they were going to move to a JSON-like format in their less proprietary thing, kind of on purpose?

Dave: Possible, yeah.

Jim: Yeah, I think they did. It's an interesting topic. You have really commonly used file formats that have a really robust ecosystem around them that enable all these different kinds of software. You don't have to have any single tool to solve these different problems because they all work on the same kind of file format. Do you know what I mean? I don't know. This is a really interesting subject to me.

Chris: It's two-sided in that let's say you had a Gatsby site. And no shade to Gatsby. I'm literally speaking at Gatsby Conf coming up pretty soon here. But the output of that could be just a bunch of static files, which I just said will have good longevity, and I believe. But it requires a build process to run that will also age out, probably. There's a decent chance.

No. There's a 100% chance, I'd be willing to say, that in 10 years, if you haven't spun that sucker up, if you go to whatever laptop you have a decade from now and type yarn run install, or whatever, NPM run dev, is it just going to go boop and work? It's not going to.

Jim: I could barely get that to happen for something from last week.

Chris: [Laughter] I know, right? It's not going to be impossible, so the site might have great longevity and the build process not. You know? Interesting.

Dave: I'm going to make a reminder in our calendar for this.

Chris: Mm-hmm.

Dave: February 27th, 2032.

Chris: [Laughter]

Dave: Gatsby won't work.

Chris: Hey, Siri.

Dave: There we go.

Chris: There might be some path to get it there. I'm just saying your machine ain't gonna be ready for it. It ain't gonna be.

Dave: Oh, man. I'm already busy on February 27th....

Chris: [Laughter]

Dave: Sorry, everybody. I've got lots of crap. Oh, God. Okay.

Chris: Isn't that a Wet Hot American Summer where they're sitting on the -- "You guys, in ten years, like--"

[Laughter]

Dave: Yeah.

Chris: "Let's all meet up here again." They're like, "What time, though?" [Laughter] "Because I've got a thing in the morning that day."

00:18:58

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Memberful. That's memberful.com. A link in the show notes, of course.

Memberful is the easiest way to sell memberships to your audience used by some of the biggest creators on the Web. I love that it's totally dedicated to this proven, great business model, which is, have a business that has members that pay you to be members for, and then give them something of value. You know?

It could be a podcast like this one. You could make a paid podcast. Why not?

It could be a paid newsletter. It could be educational content. It could be you're a comic book creator.

Anything you can think of where you can provide value for members, Memberful is there to do it for you. It handles all the hard stuff like taking money and doing the recurring revenue and all that stuff, allowing you to focus on what you do best, which is definitely the right way to run a business.

If you're looking to add membership to your business that you have already, this is the perfect technology for that. You can launch a new revenue stream. You already have the business. Add a new revenue stream. Get your brain thinking in that way. It's so great.

It integrates with the tools you maybe already use. You know I'm kind of a WordPress guy a lot of times. Memberful works with that. It works with Discord. It works with Mailchimp. It's so great.

It's like a literal technology here. If you're a big-time developer like me - come on - they have a full featured GraphQL API. They have Web hooks. They have OAuth. They have all that fancy stuff.

Then you are offering that to your users so they can log in and get access to the stuff they know they need to get access for. There's this and so much more. I mean it's really modern tech.

You want to make sure it's really easy to sign up, so you offer Apple Pay? They've got that. It's very modern, very cool.

Get started for free. You don't even need a credit card. Head on over to memberful.com. Thanks so much for the support. So cool.

[Banjo music stops]

00:21:06

Chris: Jim, you had a post about your mom the other day, which is a good one that I enjoyed reading because it was just a personal story but also a really important story that relates to how people think about the Web today. It ended up being a big one in my brain for a little while.

It was just about this idea that a lot of us think about browsers as being evergreen. Yeah, think about as the right term. I'm like, "Well, you know, it's Chrome, so it's just fine." I don't really think about Chrome version numbers anymore. That has somehow evaporated from my mind.

I might think about them as, like, "Oh, cool. Chrome 1.03 shipped, and it's got container queries now," or whatever. That's theoretical and future, by the way, people.

But I don't. I'm not thinking of, like, "Ooh, I better watch it. I better watch this API because," like in your blog post, Chrome 76 literally did have a nonsupport of a particularly important feature. Browsers that you think might be evergreen aren't. Isn't that the case? Not necessarily, anyway.

Jim: Yeah, that was kind of the impetus for that post. In hindsight, it almost seems a little ridiculous that I thought this, but I had just always thought Chrome equals you're on the most modern thing, right? And it's evergreen.

Chris: Yeah, as long as you've restarted it in the last week or whatever.

Jim: And so, when I was troubleshooting this problem for my mom, I thought, "Well, she has an iPad. That's a pretty modern piece of computing, right? That's probably fine."

"Well, I'll check on the computer because she said it was also a problem there," and they're running Chrome. The same problem.

It was like, "Hmm. That's weird." Then I pulled it up on my brother's laptop and my phone, and it worked fine. It was like, "Hmm. So, where is this problem coming from?"

Then I kind of fell back to, "Well, things are working on some computers but not others, in some browsers but not others. I guess maybe I'll start looking into it."

I knew that Safari had, you know, there was this age out problem with older iPad or iOS devices that would age out, and you'd get stuck on a certain version of Safari.

Chris: Mm-hmm.

Jim: Maybe that's the problem. Then I thought, "Well, I guess I should at least check what version of Chrome it is." I saw 76, and I was like, "I know we're on 90-something, so this is way behind." I hit the update button, and it just said, "All up to date."

Chris: Hmm.

Jim: And so, then I was like, "Oh... It must be that this piece of hardware that's running Chrome OS can't update to the newest Chrome OS because it's just too old."

Chris: Wow.

00:24:01

Jim: Yeah. It was kind of a turning point in my head of, like, just because it's Chrome doesn't mean it's going to be the most modern thing. I think Eric Bailey and his post on CSS-Tricks just recently used the term "Dead Evergreen," which I really liked because that feels like the new generation.

It used to always be, "Oh, you've got the modern browsers: Firefox, Chrome, Safari, and then that old Internet Explorer." Right? And so, it was like, "If I'm good in the other ones, I don't have to worry about IE."

Now it feels like we're moving into this new generation of browser matrix support in your head, which is no longer just, "Is it Chrome? Is it Firefox?" You're okay. It's, "What hardware are you on, and what version of Chrome are you on?" because it might not be so evergreen.

Chris: Is the way to think about it to not think about it? It's just to be like, I'm not going to think about versions. I'm going to just admit to my brain that it's possible that any feature I use just might not work.

Jim: That would be a very robust way of building for the Web.

Dave: [Laughter] How are you going to pull that off? Uh... [Laughter]

Chris: No. I mean not any feature but, in this case, what it boiled down to is a single character, which is hilarious. An optional chaining thing, meaning, like you said, the object?.property of object, and some developer just slugged that in there because it's -- [Laughter]

We should go on a rabbit hole talking about optional chaining, probably. But it's just like almost a copout on the front-end like, "Oh, I really, really don't want this line of code to hard bomb, so I'm going to allow it to be null if it is."

Jim: That's funny. I never really thought of the irony there of, "I really don't want this site to hard bomb, so I'm going to use the optional chaining," and that's actually precisely what did you in.

Chris: That's what made it hard bomb. [Laughter]

Dave: Yeah.

Chris: There is an irony there, isn't there? That's great. Not great, I mean. It's not great.

I would have thought you would have thought it'd be the firewall first because I'm like, "Well, I'm at my mom's, and it might be her network." You know?

Jim: Well, that's why I was on my brother's laptop, which was the same network, and it worked fine.

Chris: Oh, yeah. You troubleshot it.

Jim: And it didn't-- The sad part was it flamed out the entire site, like nothing rendered. The site rendered fine. You just couldn't click this button and do anything. It was like nothing loaded at all.

00:26:46

Dave: That's wild. I mean was it a single page app? I've got to assume some kind of single page app.

Jim: Yeah.

Dave: Yeah. That's wild because I know -- I've heard of Galaxy, like Samsung browser - or whatever - is a few versions behind. They don't go to the latest Chrome just because I guess they depend on it internally or something. But I hadn't ever considered Chrome OS just being like, "Nope."

Jim: Yeah, I hadn't, either. I learned afterwards because my blog post ended up on Hacker News with tons of comments, which I try not to read all of them.

Dave: [Laughter]

Jim: Some of them were actually quite instructive, but--

Dave: "What the author doesn't understand is a computer is a rock that can think."

[Laughter]

Jim: It was quite instructive, though, in some ways because I found out that apparently Google knows this is a problem. They're trying to divorce Chrome the browser from Chrome the OS so that they can actually still update the browser even if the OS is still really old.

Dave: Mm-hmm.

Jim: It's a thing that they're actively working on. I had no idea. I found this all out.

Dave: And the people from Apple reached out, too. [Laughter]

Jim: Yeah. I got an email from Tim.

Dave: Yeah.

Jim: He said he would personally handle my case.

Chris: He's going to cook up a solution, he said.

[Laughter]

Chris: If Samsung is never up to date, can we say nevergreen?

Dave: Ooh.

Chris: Can we do that?

Jim: Ooh... Coined here first.

Chris: [Laughter]

Dave: Maybe Can I Use will tell me what's version it's on.

Chris: It's always a fun little battle at CodePen -- just to rabbit hole it for a second -- about the optional chaining because, on the front end, some of us are like, "I'm going to slap some optional chaining on this bad boy," because it saves a little boilerplate at the top of some components. Otherwise, you might have to write some triple equals null stuff and return null, possibly, to not try to render the component. Yeah, just let it be null. You know?

But on the back-end, people are like, "No, that's papering over a data problem. Then if you're having this problem, the problem is the data and we should fix the data." Hmm. Just interesting.

Dave: Now I was struggling with Vue templates because, in the Vue JavaScript code, you can optional chain all you want. But in the template code, like a V if, you can't optional chain.

Chris: Hmm.

Dave: I was getting frustrated. Then I was like, "I'm going to install a new Babel plugin to add this to my templates." Now I have Jim's floating head in my code editor. Every time I optional chain, he says, "This doesn't work in my mom's computer."

Chris: Not-not-nah. Not-not-nah. Not-not-nah.

[Laughter]

Jim: Well, I mean if you're using Babel, you can transpile back and get everything to work.

Dave: Totally.

00:29:33

Chris: What do you pay for that, though? Remember, Dave, one time you had a blog post that was like, "I Babeled my way out of one tiny little thing and it 4x the size of the compiled thing."

Dave: Yeah. I was using -- what's the cool new one? For of or for in?

Chris: They're both cool. Those are both cool.

Dave: Whichever one is the newest one because one is really old.

Chris: Oh.

Dave: Like IE 4 old. But for of loops, yeah. I just was like, "Okay, this is fine." But then I noticed everyone I typed, the bundle size got bigger, like by a kilobyte. I just was like, "What's going on?" [Laughter]

Chris: Whoa! It polyfills each one? [Laughter]

Dave: Each one has to be kind of like its own symbol iterator, because I had another problem. I didn't have the symbol iterator polyfill. I was like, "Well, of course, I'm a big dummy because I didn't bring that one." You know? I needed that one.

Then I was looking at the code and it's like 700 bytes. It's not a big deal, but when you have 30 of them in your code base, like 30 kilobytes of your code is for of loops. You know?

Chris: Yeah. It just made me curious. What do you think you pay for an optional chaining? There's always some irony that it's more code. You have to send more JavaScript to the older browsers. You know what I mean?

Dave: Mm-hmm. Yeah.

Chris: It's like they pay doubly.

Dave: I'm going to use ... so yours is going to be real worse real quick. But maybe -- there's a degree. Where do you draw the line, Jim, on future versus backwards? Do you have new thoughts on that now?

00:31:13

Jim: I hate to say it depends, but yeah. I guess who is the site for, who is going to be using it and, ultimately, how are you building it? Are you building it in such a way that if the optional chaining is there and that JavaScript throws an error, it's okay? The basic functionality of the page will still work, and people can still access the information and do what they want to do. That would be okay, right? I think I'd do that on my icon gallery site.

On one of my Web pages, I do that where I use some modern EX 7, or whatever that is. It's okay if it doesn't work because it doesn't have to for people to really be able to access what they need.

The sad part for me is with my mom when this is a site where she was using it to volunteer for some community service. Now she can't go volunteer because their webpage doesn't work.

Dave: Yeah, and she can't call the coordinator. I guess she could. But then she's that person. [Laughter] But call the coordinate and be like, "The website isn't working." Now they have to--

Jim: That's the thing. She can't even call the coordinator because she can't access the phone number on the website.

Chris: Oh... Whoa.

Dave: There you go.

Chris: Yeah. That's like when you ship some code that breaks your deployment process. You're like, "But I can't deploy the fix. Damn it!"

Dave: Been there.

Chris: That's what happened to Facebook, wasn't it, when they were down for dang near a day? Somebody broke the way to fix it. [Laughter]

Dave: Whoof!

Chris: [Laughter] Yeah.

00:32:50

Dave: Yeah. It's totally not the same, but this week, I was like -- I NPM installed something, and I got the, like, "You have 10,000 security problems," and I was like, "Okay. Yeah, well, I'll fix it." I just was like, "Let me just go turn on Dependabot and see what happens."

Chris: Yeah. Yeah.

Dave: See how bad I got it, you know, and I turned on Dependabot, and then it started filing pull requests. I was like, "Oh, crud!"

Chris: Yeah, man.

Dave: Immediately, I got like 30 pull requests. And I was like, "Okay. Okay. Let's go through these." Okay. This upgrade. Minor. Minor. Minor. And then it was like, Sass, six to seven. Okay. Yeah, sure.

Chris: Hmm.

Dave: People who do Sass are probably smart. Boom! Just everything exploded.

Chris: Yeah, there's a little API change in Sass that probably got you.

Dave: But then I didn't find out the sites crashed until 15 minutes later after the docker was built and deployed, and then everything is down. I was like, "Wait a minute. Stop. Back it up. Hold on." [Laughter]

Chris: I was trying to help.

Dave: I tried to do security and then it blew up, so--

Jim: The silver lining there is that your project all of a sudden had a bunch of -- a flurry of activity on it, so it looks like you've been really active.

Chris: Dude. Yeah, you've got some serious green dots for that work.

Dave: Yeah. Yeah. I think -- you know, representatives from large companies reached out to me after they saw that surge in green dots.

Jim: ...position underway?

Dave: Yeah. Yeah. Big green dot traffic. That's what they value. Green dots.

Chris: [Laughter] It sadly is, sometimes, isn't it?

00:34:30

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Here we are in 2022. Welcome to January 2022, a new year, a fresh start. We're going to be seeing lots of blog posts making predictions about the new year. I bet a lot of those predictions are going to involve Jamstack in some way, and Netlify is the home for your Jamstack site.

I like how Jamstack has come to mean static and more. It comes to mean split your services amongst people that do those services the best, use the best search company there is. Store your data in the most flexible place you can store. Build your front-end however you want to build your front-end. Statically generate as much as you can of your front-end. That's what Jamstack has come to mean, and I love it. It's such a cool thing.

Netlify's support and growth in that world has just been unprecedented, really. They have changed the game for Web developers worldwide, and we're so lucky to have them as a sponsor and grateful. It's just going to be awesome. I have so many sites (I can barely count anymore) on Netlify. If we're going to spin something new, I love the idea of picking a framework, exploring what's out there in terms of static site generators and JavaScript frameworks, and just knowing that Netlify is probably way ahead of me and it's going to work great on Netlify. I have never been wrong about that.

Again, thanks for the support, Netlify.

[Banjo music stops]

00:36:08

Chris: What else do you want to talk about? We could just throw a dart at blog.jim-nielsen.com.

Jim: I think I actually pinged you on Twitter once and was like, "Do you ever regret putting a hyphen in CSS-Tricks?

Chris: Never.

Jim: Because I regret the hyphen in mine. Jim Nielsen was already taken by some guy, and he wouldn't give it to me, and I couldn't think of a better name.

Chris: Oh, seriously? If you just remove the dash, it's just some other dude's website? [Laughter]

Jim: I don't even know if it's -- if he has anything there.

Chris: See, the fact that you don't know says it all to me. You know? Like, who cares then? It doesn't come up, right? It doesn't affect your Googles.

Jim: It doesn't. I hate -- it's just a personal thing.

Chris: You just don't like it.

Jim: I hate typing that hyphen.

Dave: Mm-hmm.

Jim: Do you know what I mean? No, you don't know what I mean.

Dave: No, I grabbed Dave Rupert. Hey, you could buy the unhyphenated thing later. It just costs a lot of money. [Laughter]

Jim: I'm not going to lie. I've been tempted by maybe like Jim Niel since that ended up being my social profile everywhere else.

Dave: Mm-hmm.

Jim: But then I have to -- my other domain has already been on the Web for like ten years, so it's like, "Well, I'm just going to have to keep it and do redirects." Now I'm just paying twice the amount of money, and for what? I guess, ultimately, I could get rid of it.

Chris: Ah, you leave the five -- what is it, a 5-0? What's the redirect one? 3-0-1? You just leave it up for like a year, and then you can kill it. You don't have to do it forever. Well, you kind of do have to do it forever, right?

Jim: You do.

Chris: Because other people's links and stuff.

Jim: Yeah, all those links out there.

Chris: Hmm.

Dave: Link Rod.

Jim: Plus, Jeremy would come knock on my door, I feel like.

Dave: Yep. Jeremy, come very nicely, very politely, though. He would tell you; you've destroyed the entire Internet. [Laughter]

Chris: I like that everybody knows what you're about to say when you say cool URLs.

Dave: [Laughter] That's pretty impressive, right?

Chris: Yeah. It's like shorthand for this exact thing, and I'm not even going to tell people what it is. If you don't know, then I'm sorry. You're just not in the cool URLs club.

Dave: Maybe mine is cool subdomains.

Chris: [Laughter] Then just stop?

Dave: Don't charge you $25 a year. [Laughter] Maybe that's it. Right?

Chris: Yeah. Subdomains are great.

Jim: I'm a big believer in subdomains.

Chris: Mm-hmm.

Dave: I'm going to stand then for--

Chris: URLs are free. You need one and everything else is a subdomain.

00:38:54

Dave: Question. Question. You think a lot about the Web, Jim. You blog prolifically. We've talked about your blog. It's the best blog.

What are you interested in at the moment? What is kind of occupying the majority of your thoughts? I guess you have a lot of book posts, obviously, because you're writing a book. What are you thinking about in the Web from the high level that you tend to think about it?

Jim: Good question. I should probably glance at my drafts folder to see what is really in there.

Chris: What is it in? Is it literally on your file system and it's a folder named drafts with stuff in it .md? Is that how you blog? Is it like Dave?

Jim: It is, actually. I was actually really enjoying Dave's soliloquy -- or whatever you want to call it -- on a recent episode where you were talking about the VS Code editor for blogging people.

Dave: Mm-hmm.

Jim: Which I'm still trying to find that perfect-- So, I use IA Writer.

Chris: Hmm.

Dave: Which is very nice. Yes.

Jim: To draft everything, so everything gets drafted up there.

Dave: Mm-hmm.

Jim: And so, it's a really primitive naming system, which is, I put a one in front of it so it sorts everything alphabetically, and it puts it at the top if that's the post I want to write next: 1, 2, 3, 4, 5, 6, 7, 8 - all the way down.

Chris: Ooh, yeah.

Jim: That's how I organize the immediacy of how much I have an idea that I want to write on. I write it out, and then it ends up -- once I get it complete, I move it over to my Git folder and then push it up to my blog.

Chris: Yeah?

Jim: That's basically my workflow.

Chris: Metalsmith takes over?

Jim: Metalsmith takes over.

Chris: Nice.

Jim: Good old Metalsmith.

Dave: Then the Netlify deployment notifier that you built, the native one--

Jim: Yes.

Dave: --then tells you if it deployed?

Jim: I do have that, too. I'm still trying to figure out the images part of my blog posts. I have a workflow right now.

Chris: Yeah. I was going to say IA Writer doesn't do images, right? So, you do that the last second?

Jim: I have my little Netlify public folder (in the spirit of the Dropbox public folder).

Dave: Ooh, nice.

Jim: Where I drag the image into that. It syncs to Netlify and puts it on a CDN. And then I have a URL, and that's the URL I reference in my Markdown post.

Chris: Whoa!

Jim: Presumably, if I'm on my laptop or on my phone and I have the post up, it will actually -- the image will display in line because it's linking to a live image on a CDN. So, when I publish, I don't have to actually change anything about the URL for the image - if that makes any sense.

Chris: Yeah, it's a little weird, but it doesn't render. Do you have a local build and it doesn't render there?

Jim: The local build just points to the same image out on the-- If I was disconnected from the Internet, yeah.

Chris: No images?

Jim: Yeah.

Chris: Yeah, there's no relative file path or whatever.

Jim: No.

Chris: Interesting. Yeah. Everybody's image-- I just was working on a talk and I put an image workflow in there that's just super-duper different than that, which is okay. I think it's interesting to hear about how people do their images because it's weird.

Jim: It is weird.

Dave: Yeah. Mine are all in the thing, and it's not good. [Laughter] It's causing performance bottlenecks, to say the least.

Chris: Oh, you throw them in your repo?

00:42:17

Dave: Yeah. I'd like to do what Jim's doing, this Netlify. It's just like a folder? You have a Git LFS project, right? You drop an image in there, sync it up, and then Netlify does it?

Jim: It's actually not even a Git LFS. Okay, it's a--

Chris: There's no Git at all, right? It's just deployed.

Jim: Yeah. It is a Dropbox folder, so it's actually backed up in Dropbox. If something were to happen to the folder, it's in my Dropbox account.

Dave: Okay.

Jim: But then it essentially uses the Netlify CLI in the background.

Dave: Okay.

Jim: It looks at that Dropbox folder and syncs it to Netlify.

Dave: Oh, okay.

Jim: To a site on Netlify, which then gives it a URL. Then everything that's in that folder is just my domain, a slash, and then whatever the structure of that folder is.

Dave: Oh, okay.

Chris: It's a good way to do it because if that stopped working or you didn't like it anymore or something, they're all at the same folder level, right? You could pick all those up, put them in an S3 bucket, run a find replace on the domain, and you'd be fine.

Jim: Yep.

Chris: Yeah.

Jim: Which is exactly why I didn't want to do the LFS thing because it's more involved. That's now I'm handing over a little bit more of control to Netlify, and it's harder to break away from them if I ever want to change.

Dave: Right, and they do because, with the LFS on Netlify specifically, you get query parameters for height, width, or whatever to make responsive images.

Chris: Well, that's nice, actually. You'd be giving that up.

Dave: I think it will even do whatever WebP and that sort of stuff too, if I recall correctly.

Jim: It doesn't do WebP yet.

Dave: Okay.

Jim: I have an open thread in the community forum if you want to go upload it asking for WebP or AVIF.

Chris: Yeah.

Dave: Yeah.

Jim: That would be really nice.

Dave: It'll do it on the regular CDN, because you're not using LFS?

Jim: Yeah.

Dave: Oh, really?

Jim: Like the same way you would just drag a website folder to Netlify to deploy it, it's the same thing except it's just images instead of HTML and CSS.

00:44:33

Chris: I think they should do it. I say that because we have this screenshot service at CodePen that we wired up. It's not to underplay that because there's some interesting tech and very smart people were involved with putting it together. But we do that. We make advanced versions of it and then decide (on the fly) which version to serve to the browser. It's like we're not a media host, but we pulled it off.

Jim: Yeah.

Chris: If you're a media host, you should definitely pull it off. Please.

How do you do your syntax highlighting? Is it on the build or does it do it client side?

Jim: It's on the build. I've kind of always wondered. Is it better to do it on the client or in the build?

Dave: No, it's way better in the build. Otherwise, there's a fout to it. It's like, "Oh, it loads and it's all black. Then, blap, there are the colors come in." It doesn't reflow. It's not that bad, but I always found that a little annoying, not to mention you're shipping a probably 50k-ish library to the client.

Jim: Yeah, that makes sense. I think, for me, it was mostly -- and this is probably -- nobody cares about this except for my brain -- that raw HTML that you first get on your initial request.

Chris: Mm-hmm.

Jim: When it comes back, if nothing else loaded and you were just reading the HTML, it reads much better because it's a code block inside some pre-tags, right? And that's it.

Chris: Oh...

Jim: Whereas if you do it on the server, all of those, every single one of those characters of code is wrapped in a span tag with some class highlighting or whatever.

Chris: Hmm... Can't there be some--? Maybe they should be-- Isn't there some ARIA something you could put on the span that's like, "ARIA, ignore me, please"? [Laughter] "Don't hide me, but don't make me do a pause - or whatever."

Jim: Yeah. I don't know. It's a good though.

Chris: Possibly. Possibly. Just a thought. We're just mouth blogging here.

00:46:28

Jim: Well, I have to ask you how you do-- One of the things, going back to images, that I still struggle with, and I've got another blog post around this specific topic, is the image tag is getting beefy.

Chris: Beefy city.

Jim: It's not just source with height and you're done. There's source set and all kinds of elaborate declarative descriptions you can add for all the different kinds of images that one could serve.

When I create a blog post, I just screenshot it on my retina display--

Chris: Yep. Pop it up, baby.

Jim: --and optimize it and put the width and height as half that just so retina screens display it just fine, and it comes with those values. But I'm doing it all by hand, so there's no server that's injecting the optimal image tag markup for everything that I do. What do you guys do?

Chris: I'd say you're not -- [laughter] -- I think the workflow really matters a lot here in that if you try to do too much and you grow to hate it that that's doing a disservice to you and your blog. I'd rather have un-optimal slightly performance than overengineer something.

That said, there is a lot more you can do. You should at least chuck lazy loading on these. You know? You might as well just do that if you have some kind of build. I notice that's not on there, and that's just free performance. There are a couple of other ones, like decoding async and stuff. You just get little micro performance just based on an attribute - or whatever.

I personally draw the line at having to use the picture tag in which to serve different formats of images - myself. I think that sucks. Although, I'm sure plenty of people do that. But I would rather have the server have that job. Even though you have a .png extension, for example, the browser doesn't care about that. Whatever server you're using serves it in an AVIF, if the browser supports AVIF or supports/sends it in WebP if it sends it in WebP.

You can outsource that. You could, for example, real quick, sign up for a Cloudinary account or an Imgix account - or something - and then drop that URL in front of cdn.jimnielsen.com and have it pull your canonical one, but give you that ability. It would be real easy to remove because it's just a URL prefix, essentially.

Jim: Yeah. Yeah.

Chris: You'd get that for free, and it would be like their very image forward CDN abilities. I'm sure your CDN is fine. It's just Netlify or whatever. But one that's literally built for images might be a smidge better. You know?

Jim: Yeah, and I can't just, on the fly, decide, "You know what? I want that PNG that I originally cut to be WebP now."

Dave: Yeah.

Chris: Yeah, which you could with these.

Jim: Right.

00:49:33

Chris: But even better is just serve it as whatever you want. Cloudinary calls it F-auto.

Then they have Q-auto, too, which means optimize it but just use super-science to optimize it. Right? Which I appreciate them doing.

But then another thing they can do is give me the 1200, the 600, and the 300. I will take the time to make a source set syntax of those three and drop them in there and throw a size attribute in there, too. To me, that's a good middle ground with the source set syntax and all that. You know? That's something that you don't get from just image source.

Dave: I just put it in Squoosh and set the width to 1200 and call it a day.

Chris: And ship it. [Laughter]

Dave: I sort of regret that now that I have a 4K display.

Jim: [Laughter]

Dave: So, there you go.

Jim: Are you changing your behavior?

Dave: Ah... No.

Chris: [Laughter]

Dave: I thought about it, but I just was like--

Chris: Argh.

Dave: 1200 is a good number, so we're probably just going to keep it. I do have a Figma now, and I kind of make assets in there - or try to, occasionally. That's been good for standard asset sizes and stuff. Whatever. Twitter cards and stuff, they want to be 1280 and all that stuff.

Jim: Right.

Dave: I have my Squoosh set to 1200, so. [Laughter] But you know. I have a column of text, you know, a 1200 pixel wide column of text.

Chris: Yeah.

Dave: That's probably going to--

Chris: Yeah.

Dave: That'll age fine.

Jim: [Laughter]

Dave: Unless you zoomed in, and then it's going to look like garbage.

Chris: I'm telling you, man. What an image CDN buys you for low technical debt is a lot - a lot.

Dave: I agree. I should do it. I always get tripped up because they're like, "Price it in florps," and it's like--

Jim: Yeah.

Dave: You've got 17 florps per credit.

Chris: Yeah.

Dave: Good luck.

Jim: Plus, for me, I just throw them on Netlify and I'm on the free tier.

Chris: Yeah. Free is good.

Jim: I can pay nothing.

Chris: Yeah. [Laughter]

Jim: Or I can pay something. I guess I'll pay nothing.

00:51:45

Chris: We'll switch gears back to November. Sorry if this is too far back. [Laughter] I know you only think about blog posts that are a month old or newer.

We've been talking about color a bunch. I did a whole CodePen Radio about color the other day, but it's frickin' fascinating to me. You wrote about if we just scope it down to the relative color syntax, that clearly excited you at one point, too. Or are you? Or do you think it's weird?

Jim: I love it. I found myself so often wanting to sort of dynamically manipulate colors. I loved that about Sass. You have the desaturate and saturate, light and dark, and hue - all of that.

The ability to now do that in CSS, being able to break down the component pieces of the colors.

Chris: It's a weird syntax. Exactly, yeah.

Jim: Uh... I don't mind the syntax. It's that de-structuring you have in JavaScript. Now it's like, oh, I can pass it even a named color like green, and then de-structure it into HSL values or RGB values or whatever. I find that so fascinating and powerful in CSS. I'm personally very excited about it.

Chris: Yeah. I agree. It's really -- I think it's one of those really quick ones where the first time you see the syntax, you're like, "Whoa! Weird. No." Then the second time, you're like, "Oh, I get it. That's actually awesome." You know? How it just kind of breaks it into the chunks.

If we're talking about the HSL function, the first word parameter that you pass it is literally the word "from." You have to do that. Then the very next parameter is whatever color it is, and it can be anything, like Jim was saying. Even just the word "green" is fine.

Then the next ones after that are literally the letters H-S-L. If that's all you put there, it would just return H, S, and L and be fine. But what it's saying is, "This is your big opportunity, people, to change H, S, and L," meaning you could just replace it. You could just put a number there instead of H - or something. Or you can manipulate it with calc. Or you can combine it. There are all kinds of-- It's just giving you this opportunity to mess with those values if you want to, which is so clever.

Then crucially to me that you can pop a transparency at the end, too, if you want to. If it was just that alone, I would think it would be worth it - to me. Meaning, I already have this color. It's already a custom property set somewhere else, maybe even by a different team or something. But I want to use it as a drop shadow, and I don't want it to be full blast. I want it to be 25% blast. That's my opportunity to do that, and that just rings true to these years.

You were blogging about this way back, man.

00:54:51

Jim: Yeah. I got the idea from reading something Dave wrote where he casually mentioned it as if it had always existed. I was like, "Wait. What is this thing?"

Dave: No. I mean, yeah, I think what gets me is it's only in Safari TP right now. This is a very, very cool feature, and so now we just have to wait for it to either go live in Safari to leverage it. But then this is one of those features where you can't base your whole design system on these polyfilled values or whatever, maybe, because this is doing that sort of CSS variable thing where it's probably not going to polyfill very well. You know? I don't know. Maybe it does. Maybe it's fine. Maybe somebody Post CSS is smart enough.

Jim: I haven't actually looked into that. Yeah.

Dave: I'd be curious.

Jim: I'm excited. But like you, yeah, my excitement is tempered by the fact that it's going to be a while before we can really use this in a meaningful way.

Chris: Especially because we just got done talking about how browsers aren't always exactly evergreen and all that stuff. But let's say they were - or something. This time next year, do you think we'll maybe not just rocking it but it'll be a much bigger part of our brains because it's just more around? At least it's not just Safari? I don't know.

Jim: I don't know. Do you think a year is enough? I feel like--

Chris: I kind of do.

Jim: I haven't seen anyone else planning to: Chrome or Firefox.

Chris: But they tend to just arrive. I don't know.

Jim: They do.

Dave: Chrome is being kind of Safari about their whole color for stuff. You know what I'm saying?

Chris: [Laughter]

Dave: [Laughter]

Chris: Whoa! Rude!

Dave: Whoa!

[Laughter]

Dave: But my point is I've heard Chrome folks say, "Oh, yeah. Color for is on the way," but maybe there's some other thing they have to refactor first or something like that. But it's not here. But they won't tell you when it's going to happen or what, like what release or whatever, so I'm waiting.

00:57:05

Chris: That's true. Look at our excitement. I am reminded of a Brian Kardell post called "Unlocking Colors," though. At the bottom of the blog post, he says, "To recap this blog post, we have two new color related functions." I think he's talking about LAB and LCH in this case, but they started to be all lumped together with a bunch of new abilities that CSS Color has.

He says, "We have two new color related functions, which are not controversial, are quite mature, and widely used color standards, are important for accessibility, are important for design systems, make all of design system related work much more attractive, are actually some of the easiest things that we could implement in CSS, and--" the last bullet point "--just aren't getting done." [Laughter]

Jim: [Laughter]

Chris: Which I felt like was a damming thing about this. That's what makes me feel like, at some point, we'll just get them because you don't have to reinvent how browsers work - or something - like container queries. At some point, somebody can kind of just pick up this JIRA ticket and do it.

Jim: Chris, you wrote recently about colors, all the new colors that are coming. We've got LAB and LCH and the whole non-RGB thing and all of that. I've been thinking and we've kind of touched also on how complex (I guess, maybe is the word) the image tag is becoming.

Chris: Hmm.

Dave: Mm-hmm.

Jim: I've been thinking about this idea of how it's easy to complain. Web development was so much easier a decade ago. I feel like maybe one of the reasons that gets said, and I feel it sometimes, is it feels like there was kind of one way of doing things and it was pretty constrained. That made what you could do pretty constrained, but it made it easier in some ways.

Chris: Hmm.

Jim: And now there are whole different color models. When I want to do a color, should I do a named color? Should I do a hex color, RGB, HSL, LCH, LAB - all the other ones? Now they're already onto -- there's LAB2 now or LCH2 or something.

Chris: That's OKLAB and OKLCH. Yeah.

Jim: Yeah. Yeah, that's it.

Dave: I've heard they're just okay.

Chris: [Laughter] Oh-oh! Somebody had to do it. Woo! All right. Move on.

Yeah, you're right. That's like ten-ish [laughter] ways.

00:59:37

Jim: Yeah. It's like, okay, I need to put a color on there. Which color should I choose? I don't know.

I need to put an image on there. Should I use picture? Should I use figure? Should I wrap--? I guess I'll just do image. Which attributes do I need?

It's all becoming -- there's a lot there, right? They're solving lots of different problems. I get that. But it kind of feels like -- I don't know. You feel like maybe that's one of the reasons why it feels like it was easier is there was kind of just one sort of path for doing things.

Chris: Yeah, that's fair.

Jim: And just straightforward.

Chris: I think so. I think that's a fair thing to say. I mean the counterargument could be that you don't have to use any of it. It's all additive. So, if you just didn't choose to use anything new, that the Web isn't going to penalize you for that, necessarily. It still behaves exactly as it would before.

But the system is getting more complex, though. And the ability to teach the system and to do Web searches and find the right answers is going to get harder, and stuff. It's definitely a two-stop thing. Yeah.

This color stuff is a good example of that. It's easy to just champion it, but what are the costs?

Jim: I understand that point, but what do you think about beginners who are coming on where it's like, "Okay, where do I start with colors? I need to figure out how to do a color. Where do I start? Do I start with what the Web first used, hex colors? Do I start with RGB? Do I start with the new gamut? Where do I start? Where do I even start?"

Chris: Hopefully, it's just fine. You know? [Laughter] You're going to stumble across some answer to it and just roll with that. It won't be the end of the world.

I take the point. I'm not trying to necessarily argue against you. I'm just hoping that it's not a disaster. I also think the fact that these color formats unlock new colors that it was mathematically impossible to represent the type of colors that monitors can display using the old math system, it just had to change. That sucks and all, but you can't just be like, "Oh, well. Let's just not ever have the colors that monitors are capable of displaying."

Jim: Right.

Chris: That's untenable.

Jim: Right.

Chris: Got to do something.

Jim: I mean that's what I always loved about you, Chris, is your practicality. Just build websites. That's all.

Chris: [Laughter] True! But Dave probably invented it. All good ideas come from Dave.

01:02:06

Dave: Nah. I think it's actually a testament to the Web, its ability to respond (very slowly) to new monitors, new displays, new HDR profiles in your actual hardware, and it's able to adapt itself and create a future pathway. I think that's cool.

I don't know what it will be. There's a big pile of education that's all RGB.

I even had an eight-digit hex, like the HEX8 format come through. My coworkers were like, "Why is there an FF on the end of every color, an extra FF?"

Chris: Oh, that was weird. Yeah.

Dave: You're trying to explain, "Well, that's the alpha value. It maps to zero to 255 because that's how we think about opacity." [Laughter] That was one of those things where it was just like maybe there's a better thing out there.

For me, I don't know. I wonder if it's -- these P3 colors, Display P3, I don't know how popular -- how many devices support P3, but it is such a vibrant thing, such a vibrant profile. I wonder if you do that for big stuff - or something. I wonder if there are conventions like that, kind of like, you use P3 for really big punch of color. Then you use LCH just to maintain your life, or HSL. You know?

Chris: Oh, dude. I hate to burst your bubble, but what your brain wants right now is some general guidelines on what to use.

Dave: I want rules. Yeah, I want rules.

Chris: You're just not going to get them.

Dave: Okay. Then burn it all down.

Chris: Yeah. [Laughter]

Jim: Dave's coming over to my side now.

Dave: See. I'm on Jim's team, so we're going to burn it all down. No colors. No one gets any colors!

Chris: Well, even if you scope it just to gradients, it's weird.

Dave: [Laughter] You get five grays.

Chris: Yeah. [Laughter]

Jim: Web safe colors.

Chris: We're going back to Web safe.

Dave: Yeah. We're going back to Web safe.

Jim: It's funny. I think I just saw a tweet earlier today. I can't remember who it was, but he was saying how his team had inherited an old project, and they were having trouble with the CSS. He whipped out clear both, float none, and everyone was like, "Whoa! What?! What is this devilry?"

[Laughter]

Jim: That's kind of an example of, like, you know, we used to only have floats. Then we got flex and grid.

Chris: Yeah.

Jim: Who knows what we'll have in the future.

Chris: Float both, that's a--

Jim: That arcane knowledge, and why is there an FF on the end of this hex code?

Dave: Yeah.

Chris: Oh, yeah. The old eight digit; that is really weird. Unless it's four digits, in which it's not 256. It's 128 because the last digit is doubled. Oh, my God. [Hyperventilating]

01:05:12

Dave: You see, to fix this problem, we need to create a pseudo after element with display table. That's, for some reason, how it gets fixed.

Chris: It does seem a little academic of an argument, though, to say, "Are we ruining the system as a whole?" because I don't think there's a lot of evidence that people entering the industry are having a hard time making websites. I feel like there's just as many websites getting made. There's lots of education. If anything, it's easier than it was before.

I think we should be careful about the system. But I don't think we should be worried, like prematurely worried, that we've ruined the world. You know?

Jim: I think there are lots of other things that are ruining the world before that.

Chris: [Laughter] Speculative currencies--

Dave: I will concede there's a bit of an olive oil aisle problem with some of these. Not just colors, but everything, where you're just like, "Wow! Images, what type of image?" You know? I don't know. Viewports, everything, so--

Chris: We need grapeseed oil. There's only ever one grapeseed oil.

[Laughter]

Dave: It's got a good flashpoint, though. You know?

Chris: [Laughter] It does.

Dave: That's what you want.

Chris: I know. You could just say grapeseed oil. That's what people know. And you can say Web safe. You don't even have to say colors. People just automatically know.

We've really homed in on some isms of the Web, I feel like.

Dave: The universal truths. Well, we should wrap it up. We're going over here.

Jim, for people who aren't following you and giving you money, how can they do that?

Jim: I'm on Twitter, @jimniels, and also on my website, jim-nielsen.com.

Chris: [Applause]

Jim: Giving money, I don't know.

Chris: Buy the book!

Jim: Buy the book. There you go. Buy the book, even though I don't get any money from that. But buy the book.

Chris: What?! Oh...

Jim: You'll like it. You'll enjoy it. You'll enjoy the book.

Dave: Awesome. Well, thank you so much for coming on. Always a pleasure. Appreciate the thoughts over on the old blog - really do.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Twitter, @ShopTalkShow, for 16 tweets a month. Join us in the D-d-d-d-discord, patreon.com/shoptalkshow.

I don't know. This is a change that's happening. We have YouTube videos. We are starting a whole new ShopTalk Show YouTube channel. It should be out or we'll have a link or something, so stay tuned for that if you've missed the videos.

Chris: Right.

Dave: We're going to be pumping it. We'll ask you to re-subscribe over there. Check the show notes here. We're starting a whole new -- just keeping it clean. Just putting those videos over there. We lost all of our view counts, so you're going to have to rewatch them all and smash that like button one more time.

Chris: [Laughter]

Dave: It's just really important - the algorithm.

Chris: All 24 of them.

Dave: Yeah. Yeah.

Chris: Mm-hmm.

Dave: All right. Well, thank you. Chris, do you got anything else you'd like to say?

Chris: Oh, ShopTalkShow.com.