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--no book yet--Rupert and with me is Chris--with a book--Coyier. Hey, Chris. How are you? [Laughter] Another book, Chris?

Chris Coyier: Oh, yeah. Oh, yeah, yeah, yeah. It's not. I like the word "book" because it has meaning that it's like--I don't know--I'm buying this distinct thing that I have access to and can read.

Dave: Artifact.

Chris: Yeah, but in this case, it's the loosest definition ever, and so don't even -- you can't read it on your kindle. You definitely can read it with your fingers like a print copy. All I did was -- so the book is called The Greatest CSS Tricks Volume 1 and part of it was because, like, oh, my god, it's been like 13 years of this website. I wrote a book about SVG in WordPress, and they both were good in their own respects. How have I not written a book about CSS? Part of it was like, there are a lot of good books about CSS already and I'm not sure that I can have a lot to add to that party. That's starting to change a little bit because I think some of my favorites are now many years old and, you know what? Maybe I will tap that market at one point.

The idea for this book was different. This is not an intro to CSS book. It's the namesake of my website, CSS-Tricks, which is funny because that site hasn't been just about CSS tricks in a long time, but I still like CSS tricks, gosh darn it. They are really appealing to me. I get a huge kick out of seeing a very clever CSS trick to this day.

The idea behind this was, let me pick out the ones that I think are just awesome and there are 15 of them in there right now. I might chuck a couple of bonus ones in there, too. I also call it volume 1 because I might pick out another 15 and do another volume at some point.

What empowered me to do this was, I was like, publishers are amazing. Everybody should do that. But I'm not in the mood for that at the moment. I like the satisfaction of essentially blogging. Fire up my comfortable editor that has all -- I've spent so much time getting my editor right, getting my Gutenberg set up really good. I like the writing experience on my own website.

I just wrote them as blog posts, but I made them a custom post type in WordPress so that they're isolated. They can be treated in their own special way. Then I put WooCommerce in front of it, which is a sponsor of this show. I don't even know if they're sponsoring this episode. I don't think so. But that way I could lock access to them.

Write 15 of them together. Give them the same parent. Lock them down behind a paywall. Call it a book. That's what this is, a "book."

You sign up and you don't even buy the book. What you do on CSS-Tricks is buy our MVP upgrade thing, like you're a supporter. It's called MVP Supporter. I pull all the ads off the site. You don't have to log into comments. I give you access to the book, a few other things, and then you've got the book and presumably the next book we publish, too. It's $20 a year. Big deal.

If you want to print the PDF or something, go for it. There's a URL that just stitches all the chapters together in a huge, long page, so you can go to that page, print a PDF. It's got a print style sheet and you could have it that way if you really cared to have it that way.

I wouldn't call it low effort. I put a lot of stuff into this, but it's like blog posts behind a paywall. It's more like that than it is an actual book.

00:03:56

Dave: I like the model. Long-time listeners will know I'm desperate to find something I can sell for $10.

[Laughter]

Dave: I feel like you got it, but you don't. You're offering like a Patreon-style buddy of the site, but you're also giving a reward or even the, like, I'm not going to show you ads. That's kind of cool.

Chris: Right.

Dave: A lot of people value that.

Chris: There are some other advantages. You can't lose it. It's on the site. You can always just reference it. Then I can do stuff while I'm writing it that I can't do in a book. I can put embedded Pens in there and syntax-highlighted code snippets that evolve with the site and links that you can actually click to other areas for more context and stuff, things that you just can't do in a book.

I like the Internet, obviously. That's why I have this site. I'm embracing the Internet with this writing style. I think it just vibes with me a little bit more.

Dave: What about a book, a printed book, but it comes with a CD of some of the coolest Code Pens?

[Laughter]

Dave: So, it's got a cool -- it's the coolest Code Pens book.

Chris: Oh, my gosh.

Dave: It's got a CD attached to it.

Chris: Oh, that would be great.

Dave: You can put it in your CD-ROM drive.

Chris: I will totally -- I will export all this code, put it on a zip disk and mail it to you right now.

Dave: Yeah. I'll print it. I'll CD-R it. Yeah. That's it.

Chris: [Laughter] You can still do that. I bet there are literally thousands of people burning a CD right now on planet Earth.

Dave: A friend gave me one because, to install Windows, you can use a USB key, but some people have a disk for some reason. I guess not new Windows but old Windows, like if you try to help your dad's whatever old website or drivers sometimes come on CDs.

A friend of mine gave me -- my friend Paul gave me a CD reader, DVR read/writer, or whatever, so I have that. But we have a bunch of old albums and stuff that aren't really on Spotify because they're kind of weird Indie stuff.

00:06:06

Chris: Yeah! Heck, yeah! Isn't that interesting? Sometimes my brain thinks of Spotify as the home of all music.

Dave: Mm-hmm.

Chris: If you're going to search for something, you're going to find it there. It often is. I even looked for old, timey crap. I'd generally be satisfied. But as far as percentage of recorded music being available on it, it's not even close to all of it.

Dave: No. Yeah, it's hard to even say -- well, and like, you know, it's cool and it's efficient to pay $9 a month for Spotify, but I don't know. You don't own any music. Then if Spotify goes away, you're like, "Oh, man. What do I do with all my stuff?" Maybe that's a problem you don't care about.

Chris: Yeah, I struggle, though. It took me a long time to embrace Spotify. I'm not sure that I even have entirely yet. I don't always use it. I don't know. It's tricky, but I do kind of embrace the cloud thing, generally.

I was just reading an article recently that was really good. It was like "Why Figma Wins" or something like that. Did that one cross your desk?

Dave: Yeah… I'm not sure it did. I think it was about it's kind of Web nature and auto-saving.

Chris: Yeah, something like that. But it was about that, that being a browser first product, it's a brilliant example of how that actually worked where it doesn't always for everybody. But for them, because it's so damn good, it really does work.

Dave: Yeah.

Chris: You can use it across platforms with everybody. But even more importantly that it's not like you just keep your documents in the cloud. It's all there. To me, that's the number one thing for Figma, to me, which is great, which is the reason I might like Spotify, too. Design documents are mine and the music doesn't feel mine. I don't know.

Dave: Yeah. Yeah, well, you know, Figma is cool because it's all in line. I think the thing they said it was, it's one of the first collaborative design tools.

Chris: Right.

Dave: Where it is a lot of tools and that is enabled by the Web nature.

Chris: Yes.

Dave: Web being a Web first client whereas you try to add multiuser editing into Sketch right now, that would be hard. It may exist.

Chris: Right.

Dave: You're adding in, like, now you have to have a user client, like a multi -- you know. You have to have all this--

Chris: It's this role-based permission system that has established itself as the way to do things now. Think of how Notion's documents are shared. It's gosh darn brilliant but it's also standard. It's like, here's a document. This person has access to this document in this capacity, and it cascades if there are some documents or something.

Dave: Mm-hmm.

Chris: It's like a solved problem. It's just, people need to actually do it well in their app. You kind of can't do it well if it's not cloud by nature.

Dave: Right. Right.

Chris: But then because it's cloud by nature, there's this secondary effect with Figma. It's kind of this viral nature within organizations in that whatever you think of it, people use it. It's done well is that it's not just collaborative with other designers. It's collaborative for whoever. It's collaborative with stakeholders or front-end developers that just need to see the design or whatever. It's like, "Oh, what's that doc again?" Here's the URL for it. Boom. I'm looking at it. I can go into comment mode, click on something, leave comments, and talk about design, too, so it's not just designers, which leads to this kind of usage loop within a company where, once you're in, you're in. Then you're not sad about it either. It's awesome.

00:09:52

Dave: You know I was kind of hesitant against Figma, you know, as like, "Oh, boy, another design app," but there are things I like about it. A client uses it, but all the designers have access to manipulate things. The developer, me, doesn't. It can even lockout features, certain features. That may be good or bad, but I can't--whatever--move something around on the page accidentally. That's kind of a good thing.

Chris: Hmm.

Dave: When I'm trying to grab whatever heading text or something, I can't just slide something around or mess it up.

Chris: Yeah.

Dave: There are some cool things, I guess.

Chris: I just love it. I just love it, but it is less featured. Once in a while, you will find something that you have some kind of memory or muscle memory or something with an Adobe app, in my case, where I'm like, "Oh, I need to do this thing," and I just am like, "Uh, I don't feel like learning how to do it in Figma," or maybe I can't so I'll just use that other tool for it, which is a privileged position to be because, if I need a design tool, I will just get access to it. I will get access to it right now. That will not be the thing that stops me today. I will buy my way out of that problem. You know?

[Laughter]

Dave: You will buy your way out.

Chris: Yeah.

Dave: Well, I have platform problems. I can't just install Sketch, so.

Chris: Yeah.

Dave: But Affinity Designer, I use that. it was $9.

Chris: Nice. That's a good product, too.

Dave: I bought my way out of that problem.

Chris: I don't know anybody that uses it and doesn't like it.

Dave: Yeah, it's got the limitation thing, though.

Chris: Mm-hmm.

Dave: Remember when Pixelmator came out and it was like version one? It was cool but also you couldn't do everything.

Chris: Yeah.

Dave: It's kind of like that.

00:11:34

Chris: I hear the new Macs won't have Bootcamp. I thought of, you know, you can't run Mac, but I can run Windows. I have a copy of Windows. If I want to run it, I just click a button and it spins right up. This Parallels product, I forgot how good it is. It is fuckin' so nice. It's a super nice product.

Anyway, they're not a sponsor or anything. I just like how -- they have this thing called Coherence Mode where your Windows apps are just in your doc. You don't even see Windows. You just click it and a Windows app comes up. It's not locked in a box like it would be with Virtual Box or something where you're looking at the Windows desktop.

Dave: Yeah. Yeah.

Chris: It's integrated together. It's so neat. I think it's neat.

I don't know if Parallels breaks on these new ARM Macs or if it's just Bootcamp, but I know Bootcamp does not work anymore.

Dave: Ah, yeah. I'd heard the switch to ARM is going to be pretty--I don't know--intense, and features like that. But what's weird is, I wonder if it's the VM software problem because Windows does run on ARM now. It's not the best, but it does.

Chris: Okay.

Dave: Because it has problems. The Surface Pro X just launched last year and it was ARM-based. Then I think people were like, "This is an amazing product but not all the software runs." I think that's not to, again, make this an Apple podcast, but I think that's where Apple is like, "We're going to take two years to transition this," pretty smart, to kind of be like, "This is the long plan to get there."

Chris: Sure.

Dave: I'm curious, though, how it'll all work. I'm curious, like when maybe they already showed it or have it, but you know how on iOS, you have that files bucket or whatever. [Laughter] Do you have access to an operating system when these iOS apps come into the main system? I'm curious how that's all going to work, too, on Mac. But that's kind of not a problem I have because I don't-- [Laughter]

Chris: We'll see how painful it is. You know I want to see the benchmarks and stuff, too. I haven't bought a new laptop in a while. I'm not exactly itching to either. I'm pretty happy, but it will be tempting when these do drop for me to take a look. I'd be like, what's the advantage? Does it feel smokin' fast? With Web development, it's always been less exciting because all this crap we run is so single-threaded anyway, it doesn't really take advantage of powerful computers.

Dave: I'm glad you said that. This has been something I've been thinking about. I have a six-core--whatever--i7 in this machine. It's an Intel processor. I've been thinking about, like, "Oh, what if I went to these ultra-threaded Ryzen Threadripper 16/32 core just bad mama jamas, you know?" But I'm just like, "Will that even make a difference? Does NPM or 11ty utilize multithreading workers and all that?" I don't think we do, right? I don't think most JavaScript is programmed in a worker threaded fashion. And I don't know how much of the Web developer tooling is multithreaded. I think it's mostly single-threaded synchronous. I don't really know, though.

Chris: Yeah. Yeah. I don't. I don't do a lot of, like -- I always think of it as micro waiting. It's the worst when you're on a computer where every little thing -- there's the little spinner. I still have it, for example, opening Photoshop. For some reason, it takes--I don't know--20 seconds. I hate that. I hate it.

Dave: Yeah.

Chris: I want everything to be instant as much as I can, but if it's down to like one second, you start to get into this place where it's close enough that it's fine. But you can't imagine a future in which micro waiting is over on computers, that you don't have it anymore. You ask it to do something; it does it. That'll be great. But that's what you're buying. You buy some premium computer. Those moments of micro waiting are really minimized and that can make you a better computer user.

Dave: Yeah. Yeah. I know RAM makes a difference just because you have it already in memory.

Chris: Right.

Dave: The app you're trying to open and stuff like that.

Chris: Yeah. If you just have oodles and oodles of RAM, it's nice.

Dave: But I think there are ancient computer laws, like Bill and Andy's Law, where the resources are going to get consumed by something.

Chris: Mm-hmm.

Dave: The minute you add another gig of RAM, Chrome is like, "Yes! Thank you."

Chris: Yes.

Dave: "I love RAM!"

00:16:20

Chris: I know. The Web proves it so perfectly, too, right? Theoretically, computers get better, networks get faster, all this stuff, and the net result is that things get slower.

Scott had a great article on that, didn't he? He was like 5G is going to come here and websites are going to be slower. Just watch.

Dave: Yeah. No, I thought it was kind of a -- the argument is interesting because, if I'm recalling it -- Scott, if I mess this up, I apologize. The idea is, 5G hits. Oh, my gosh. It is fast. Part of it 5G's improvement is latency. It's that waiting, that initial waiting. That's going to be faster and then people are going to feel like, oh, we can just ship a bigger initial chunk, but then the most people who aren't on 5G are going to experience a very big hit from that, so your average metrics are just going to tank, you know.

Chris: Yeah. We're living in that period now where websites are largely designed for computers that are faster than the average, for sure.

Dave: Yeah. Yeah, and it's my fault too. I have a very nice phone, a very nice iPad, a very nice supercomputer, [laughter] a gaming rig that runs at 240 hertz. I'm part of the problem and I build websites. I don't know. That's why I hedge. I over-hedge, though, with my minimalism. Maybe this goes into Sarah Drasner's awesome post, "The Fussiness of Websites."

Chris: [Laughter] I'm so jealous of her writing. Isn't it amazing? She hits the nail on the head sometimes and then, that article, it just struck with a lot of people and just got linked to forever. I'm like, "God bless Sarah. She's amazing."

Dave: Well, what I like, it came from a cooking article about the case for a fussy breakfast or something, like, "Here's why you should just have a weird tool to crack open an egg and why you should make the bacon and the egg and get out ten pans and make a big, dumb breakfast, just because." Because of Corona, basically. [Laughter] Everyone, you just need to do something. Make a coffee in some weird way that is overly complex. Take time to do that. Life is too short to just--whatever--had bad coffee, I guess. I thought that was very -- I liked that she pulled from that, like, totally tangential cooking article into the Web just because I've written something like this a long time ago called "Light Frames Great Content," where I'm trying to marry that idea that she was struggling with, too, that the more we focus on these lighthouse metrics and stuff like that, the more we're sucking the lifeforce out of the Web. We're industrializing it further. We're just taking all the fun and animation. Unless you can justify the kilobytes in the 60 FPS of your animation, it doesn't even -- you know, it brings no value unless it's completely fast and zero weight and stuff like that. I think she just makes a great article, a great case to be like, "Hey, look at what we're doing. Sometimes you just want to make a silly, overelaborate thing." Just go for it.

Chris: [Laughter]

Dave: I tend to agree. I'm also in the performance mindset, so I have trouble marrying that.

Chris: That's true, but they don't have to be at odds. They just are sometimes. Yeah. They're tangentially related but more so than we'd like sometimes.

I don't know. Put yourself in a good situation to do these things. I'm not as silly as I'd like to on CSS-Tricks, but I'm in a good place where I just can be at any time. I'm not fighting the tech. I'm working with the tech. I'm comfortable with how the whole site operates. I'm kind of in this spot where I'm not also trying to impress anybody with the metrics. When you're in a situation like that, it kind of opens up doors. If I want to make a funky-ass header, that's what I can do because I have the control, I have the knowledge. The systems that support it are there.

I'm bringing this up because I think you can put yourself in a position to be like the sites that Sarah does. Part of it is just stopping caring a little bit and some of it is, it doesn't mean that the site has to be anti-metrics or anti-success in any way.

Dave: Yeah, well, CSS-Tricks is probably a great example. It's a workhorse blog. It has to post dozens of posts a week, right? You can't be like, "I'm going to do a bespoke homepage for every single blogpost." I guess you could, but you'd bankrupt yourself pretty quickly and just, feasibly, it's probably very hard. Inside the article, you found a way that you can play inside the article, and I think that's cool, in your article templates. You're not just stuck with boring articles that always look the same - always. You know?

Chris: Yeah. We have that door. It's pretty cool.

00:22:08

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by An Event Apart. Now, I think it's fair to say that this is a pretty weird year for conferences. An Event Apart is an in-person conference that is the best in the business, and so they've adapted, of course, being the great conference organization that they are, to bring that conference greatness to online events until the in-person events can come back. They've absolutely been doing that and knocking it out of the park.

This is the most one that you need to get involved with right away, coming up July 20th. It's called "Human-Centered Design," and it's still a limited capacity event, you know, bringing you the best quality they can here. It kind of takes place in the central time zone. Time zone wise, it's going to probably work out best in the U.S., but you can attend it from anywhere, of course.

It's a conference to focus on all the users of your site, not just some idealized average, as they say. That's the theme of the conference is, like, build websites that work for everybody, which is a tremendous goal and it shouldn't just be a goal. It should be a fundamental part of how all websites are built, so go to it. Learn from it. Take notes. Let it seep in and just become a part of what you do. You are going to be better for it. Again, that's "Human-Centered Design" from An Event Apart, an online conference coming up July 20th. Please go. You won't regret it.

[Banjo music stops]

00:23:55

Chris: Do you remember -- on a totally different -- this is some old crap. I'm still playing my MUD game. I'm so into it, this new game.

Dave: Oh, yeah? Oh, yeah?

Chris: Yeah, it's fun. But now I'm trying to figure out what are all the different ways that people extract enjoyment out of this game. I can learn this and learn this and get involved over here. But part of the thing I'm realizing is that I enjoy the tech of it too.

This is how it works, I think. It's kind of like SSH'ing into a server, these MUDs.

Dave: Mm-hmm.

Chris: You connect to a port and data just starts streaming at you. Then you type in commands and you affect things that are happening there.

Now, I don't know how it works but you do have access to it. It's not proprietary. It's not totally locked down. You have to authenticate and you're authenticating your account and then you pick a character that you're playing or whatever. Then you're in.

I know this because there's an open-source project called Lich that you connect to the game and Lich is generic. It works for a bunch of different MUDs, I think. But the idea is that it intercepts that network funnel and it can do interesting things. The main point of it is that it enables scripting and that's such a big deal. You want to be able to write a script for the game. It's a little bit like setting up alias like you can in Bash or whatever, like, "Alias this to this," and then it will run those commands for you. That makes the game more fun because you're kind of customizing and, just, I'm getting a kick out of this.

The client is so bad. To get Lich working with -- because then you also need a UI. You can't actually just sit there and SSH and play the game. That's no good. You need a client, too.

Dave: Yeah. Yeah.

Chris: There's a Mac client for it that's a miracle it stills run. That's why I'd be nervous to upgrade laptops because I feel like it'll be the final version where they just stop supporting the app.

Dave: [Laughter]

00:25:52

Chris: But this guy that wrote Lich wrote another app, too, called Profanity, but it runs on this thing called Ruby Curses. Have you ever heard of Curses?

Dave: No.

Chris: It's like if you want to build a UI in a terminal, it does that. [Laughter] I don't know. Like a--

Dave: Oh, okay. Okay.

Chris: It doesn't scroll. It gives you little windows inside of your terminal. What's an example?

Dave: You know, sort of like Yeomen or something like that where it would give you dialogs like, "Do you want an X, Y, or Z?" Or something like that. Is it kind of like that or it gives you frames?

Chris: No, but I know what you mean. It's like frames.

Dave: It's kind of like tmux style.

Chris: Yeah, it's like that, like tmux, but it's like you configure it with an XML file, like I want this crap up in these quadrants and this crap over here. Then it updates automatically. You never scroll when you're in a Curses environment. It just is constantly updating. If you want scrolling, it's got its own little page up, page down key scrolling that you have to use instead because it's constantly repainting the terminal. It clearly repaint.

Dave: Right.

Chris: It clears, repaints, you know. This guy made a client for the game in Ruby Curses, which is really cool, too, but it just kind of proves that this is all kind of like -- all the primitives are there to make a cooler client if I was so inclined. Now, I have in my mind, like, ooh, what if I tried to make a client? Maybe I'll do it in Flutter so it'll ship on all things? Getting excited about that.

Dave: Whoa!

Chris: But then there is this little funky thing, and I'm done talking about it after this because I know this is so esoteric. I feel like 90+% of the game is Windows. People, gamer nerds, just the history of this game, it's just largely played on Windows. The client on Windows is way nicer. It's easier to get Lich installed on Windows, yadda-yadda.

These scripts sometimes have a setup, so you'll type myscript setup, and it'll bring up a UI with like tabs and crap and the UI is Windows. It has Windows tabs at the top of it.

Dave: Okay.

Chris: It'll be like, "What commands do you want to run?" and there'll be tabs at the top that you switch between them. That's obviously Windows-specific, so it's a little hard to run those on a Mac, but you can through this ancient thing called XQuartz, which is this--

Dave: Oh, dear. Whoa.

Chris: It was shipped in OS 10.5, which is ten versions again of Mac OS, but it would run the Windows system on a Mac, so you could bring up Windows. It's really funny, but I managed to get it working by backporting a million things, homebrew, blah-blah-blah. It's so funny. I can TypeScript setup and this ancient Windows interface comes up in which to configure these scripts. I'm like, ew. So, anyway.

Dave: Well, I'm wondering. Is this not popular on Linux? Do you know what I mean?

Chris: No, you can't get it running at all on Linux. You can get the command line, Curses, thing going just fine.

Dave: Yeah.

Chris: But the Windows, it just is this little culture that the people that made some of these best scripts used this Windowing system for setup because it's so much more user friendly and it doesn't just port. It doesn't port to anything else.

Dave: Yeah.

Chris: You'd have to write -- like the Windows system on Mac is called Metal, I think, or there was one. The trick would be to get these scripts to use the Windows system or Metal. I don't know. Anyway, this is--

Dave: Yeah, like the Windowing system.

Chris: This is deep in the weeks, so we can stop here.

Dave: No, no, no.

Chris: I'm just excited about the possibility of writing an app that's based on some of this tech. What would that be like? I don't even know where to start.

Dave: I'm just surprised neckbeards haven't explored this territory. It just seems very -- I don't know. You know, if they haven't, they haven't.

Chris: Yeah, the player base for the game is just not big enough for that. There are plenty of nerds, but there are just not enough.

Dave: Essentially, if it's just a -- I'm thinking like buttons that call functions, scrips.

Chris: That's it. Yeah, that's it.

Dave: You could use JavaScript. I don't know.

Chris: Yeah.

Dave: Why couldn't you? There are probably a bunch of reasons why you couldn't, but I don't know. It seems possible.

Chris: It does and there are all kinds of hooks you can hook into because once you've got this thing going, you have access to essentially these global variables. There's one called Game Object and the game object has all kinds of interesting stuff in it that you can just ask for and it will give it to you, which gives you the possibility of making these little widgets that are like, how is my health bar?

Dave: Yeah.

Chris: You could program a little health bar that just has access to that, which I think is cool. I think some of the work is done. That's why I was talking about Lich and Profanity and these things too is that somebody already wrote the code that can connect to the game and output some crap.

Dave: It's getting data.

Chris: All I want to build is--

Dave: Yeah.

Chris: Yeah, it's getting data. I just want to make a window that has that crap in it and just add some UI around it that runs but also is kind of like, maybe it's like dockerized or something because some of this stuff runs on some very specific gems, some very specific crap you've got to homebrew in and alter a little bit. The pain of that is significant.

I had to work with this, you know, [laughter] I don't want to call him a neckbeard because I love the guy. It was amazing how patient he was with me. It took us a week of building crap from source and getting this all to align to get this working for me and he doesn't even work for the company. He was just a nice guy that just gave me tons of time, which makes me feel like I need to find ways to pay it forward to other people, and I have been. But you know, anyway.

Dave: Yeah, yeah. Well, even if you just--

Chris: Because it's just incredible how nice he was.

Dave: Even just writing out how this works, you know.

Chris: Right, we did. We updated the wiki for the site and all that stuff. Just writing it out is useful, but it's too hard and it's going to get harder. It's not getting any easier, so that's why it's like somebody needs to package this crap up and throw it in a virtual box or something just so it can never -- you can just use it forever. Ideally, you don't even have to run a virtual…. Ideally, it's just an app and you just double-click it and you open it and it works. What do you modernize and what do you containerize? I don't know.

Dave: Well, that's why you want to go Web tech, man.

Chris: Yeah.

Dave: Get into just an electron app that people can use.

Chris: Yeah, right.

Dave: It could be--

Chris: I kind of want to write all this up and then talk to the company and be like, "You have a Web version of this. Maybe that's the way to go here is that we make the Web version of it super good."

Dave: Yeah.

Chris: That way you don't need any third-party stuff. You just use the website. Yeah.

Dave: Well, and you may -- I don't know if they want a big dearth of users, but maybe that's part of it, too.

Chris: Oh, they do.

Dave: Maybe there needs to be a point of entry, a port of entry for casuals. You know what I mean?

Chris: Yeah. Right. You cannot play this game casually. I mean I think you kind of can in the beginning, but I think you hit a wall pretty early on that's like, "This is tedious and all this other stuff makes it fun instead of tedious."

Dave: Yeah, yeah.

Chris: I think that's just kind of a big deal, you know.

00:33:50

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by WooCommerce. Now, WooCommerce is a WordPress plugin, you know, for your WordPress site that brings super powerful e-commerce to your WordPress site.

I've used it on and off over the years. Now I'm back on, on CSS-Tricks! I have been loving using it recently. For one thing--you've heard Dave and I talk about this--I published a "book" on the site and it's largely just blog posts that I especially wrote, specially designed, specially created and put in a special place on the site altogether and kind of wrapped it up. All those are chapters of a book that then you can go read it online and print it out if you need to or whatever. It's not really an ebook. It's definitely not a printed book, but I'm calling it a book and it's available on CSS-Tricks.

It's behind a paywall and that paywall is powered by WooCommerce. That's what enables that to be and it couldn't have been easier. I tied it to a subscription, too, so that's the way you read it is that you become -- and I did this, this way, on purpose. I designed the e-commerce this way on purpose is that you become an MVP supporter of the site. Kind of the main thing you get is access to this book, but there are other benefits too, not to mention just feeling good about supporting the site, but I remove the ads from the site for you. Then you're logged in, so you can kind of participate in the social features of the site without having to type in your name and stuff like that when you're commenting, and a few other features.

Now, that was pretty easy to wire up. All those APIs are available with WooCommerce. I just love how kind of easy it was. Now, I write a new blog post. It's a custom post type. Attach it to the book and then I can just scroll to the bottom of the editor and say, "Put that one behind the paywall." If I wanted one chapter to be free, I just don't lock it behind the paywall. It's kind of like the flip of a switch. That's just the tip of the iceberg of the powerful things WooCommerce can do.

Another thing I'm doing with it is that I've attached an on-demand print provider and had custom poster designs done by Lynn Fisher, who is just the best. These posters are sold in WooCommerce, so they're just like a product on the site, like a T-Shirt, a hat, or whatever. Only they're not T-shirts and hats. They're posters.

You buy the poster. It ships off to this on-demand printing provider. You get this beautiful poster in the mail and I sell it right on my own website and take the money right on my own website. It's just so cool. Just the implementation of WooCommerce on CSS-Tricks has just been super smooth and super empowering, and I love it.

They also have new navigation coming for WooCommerce--we'll put a link in the show notes--to test the prototype of it. I think that's kind of a big deal. Software products, when you change up what it looks like and how you use it, it's fundamental. It's part of the day-to-day of using software. That's changing and they're getting feedback and it's pretty cool.

[Banjo music stops]

00:36:59

Dave: Yeah. Hey, speaking of packaging things up.

Chris: Yes.

Dave: Here's something I've been thinking. I think you posted about this or something or tweeted. You know how there's Netlify, right? We love Netlify here.

Chris: Mm-hmm.

Dave: A wonderful sponsor of the show. [Laughter] If you switch over to Git LFS--

Chris: Yep.

Dave: --you can do that little ?w=120.

Chris: Right. Right. Right.

Dave: It'll auto-resize your images.

Chris: Yep.

Dave: Which is really awesome.

Chris: It really is awesome. Although, I have my issues with Git LFS, but I know where you're going, I think.

Dave: Oh, I'm curious what the issues are.

Chris: Well, it's not nice for everybody else who works on the project. Everybody else also has to set up Git LFS. It's like a barrier for entry for working together with people.

Dave: For team-based development? No, that totally makes sense. I love that aspect and it's got me thinking about an image machine. I have an images folder in my blog. It's like 40 megs right now or something like that. Every time I deploy my site, it's git diff, so it's a lot less because I don't always add images, but my repo has 40 megs of images sitting in it and that's just blog posts for the last ten years.

Chris: Okay.

Dave: And so, I was kind of just sitting around the other day in a chat we're in, but just asking, "Is there a command-line tool to run against all these images to auto-optimize these?" There's a lot of stuff you can do, like tools that will do lossy optimization. There's lossless and lossy. Lossless means the image quality stays the same. Lossy is the image quality dips to give you more compression gains or sizing gains.

Because I work with designers, I can't always do the lossy compression because they'll notice if I messed up an image too much, so I just really want the lossless stuff. But I want a tool that goes through and does all that stuff. I kind of dug around and there are a lot of scripts you can do. There are a lot of performance gains you can. But there are two things like image min, which was recommended by--

Chris: That's a CLI?

Dave: CLI, yeah, and so it has like five plugins by default and you can add different plugins, too, and kind of program it into a script. But it'd be like it'll compress your JPEGs or whatever. Shrink your JPEGs. Shrink your PNGs. Shrink your WebPs and stuff like that.

It got me thinking, like, I want an automated image machine that will losslessly optimize these JPEGs, PNGs, SVGs, WebPs. It'll also cut a WebP version if I don't have it, you know, so that that WebP version has it, and any image has this server or whatever, this image machine has this query-based param resizing that Netlify has. I would just love that because, how many times are you writing a picture element or something like that and you're just like, "Dude, I'm just going to give you the source image and you just spit me out a small one"? I want that.

There are services that do this like Cloudinary or Netlify or this thing called Thumbor, which is interesting. But you know. It's like, do you pay a service for that? Wouldn't it be cool if just every server had these functionalities in them that I could turn on or something? I don't know.

Chris: Right. Right. Right. I wonder if even the -- I don't know. I don't think browsers can do it because it needs to be an image format level thing, probably. It's got to be server, server-powered. But you're right.

Okay. There are two fundamental things happening here, though. One of them is, you're looking around for, like, I've got a bunch of images. I know they're not optimized at all. They could be way better. I just want to do that on my machine so that it's handled but do it with the CLI so it's kind of easy. It's batched up and you don't have to think about it.

Dave: Yeah.

Chris: Maybe it's even part of your local build process or something. But now you've altered those images from their originals before they even go out.

Dave: Right. Right.

Chris: That's problematic to me, not like terrible like I would just do it anyway. It's not that big of a deal. But there's something kind of cool about just keeping your originals the originals always, even if it's just gnarly. If it's huge, just huge and just super high quality whatever, at least you've got it. At least you didn't mess with that. Then every time you use it from a server, the server is interfering and making sure that at least it's optimized, at least it's being served in the format that's appropriate for who is asking for it, and then, additionally, like you said, there are parameters to control it. If you want to resize it, you just resize it on the fly and that kind of thing. That's the best of both worlds.

Now you have the best possibly optimizations and you still have the original. I think that's just a powerful concept. It's not that hard to do because, on my WordPress site, that's how I do it. I upload the biggest one and Jetpack gets involved and does all the resizing and serving of it appropriately. On CodePen, we have our system cooked up and we run it through Cloudflare and Cloudflare workers, which means we have those same kind of parameters that we can do.

Cloudinary is the best in the business because they just do. They can optimize better than anybody else. It's just some stuff they can do that's kind of above and beyond their parameters and stuff. ImageOptim does a great job. What's this Thumbelina? [Laughter]

Dave: Thumbor. There a whole web.dev article. Let's see. Thumbor. I'm just going to search.

It's optimized images with Thumbor, is what the title of the article is. But it's basically like your own personal image CDN. I don't know how, like, me running my own DigitalOcean becomes an image CDN because that's essentially what it is. You upload your stuff to a DigitalOcean and that becomes your Thumbor machine. But then you need the CDN backbone, right? It has to go to every computer in the world.

Chris: Yeah.

Dave: How do I get the CDN--? I mean I guess I could just throw Cloudflare in front of that. That's another option. But now I'm getting complex. I run a DigitalOcean and a Cloudflare just to make my images go to the website.

Chris: Right. But you can't just use Cloudflare alone because Cloudflare doesn't offer the hosting. You'd have to host it somewhere anyway. That's how Imgix works, too. It expects you to put it in a bucket and then you attach bucket policy stuff to the S3 bucket.

Dave: Oh, I hate buckets. I hate bucket policies. Go ahead. [Laughter]

Chris: I don't think you actually have to edit the actual policy.

Dave: Okay.

Chris: It's like their bucket policy. It's there like you've attached this Imgix bucket to that bucket. I don't know. It's just a thing, but they don't offer the hosting either. Cloudinary is distinct in that they do offer the hosting but sometimes you almost don't want the hosting. You're like, I kind of don't want you to be the source of truth for these images. Now they offer that kind of URL format, too, where they'll pull it from somewhere else. That's kind of cool.

Dave: Okay.

Chris: But isn't this fricken' complicated? I enjoy thinking about all this, but it's a Rube Goldberg machine sometimes.

00:45:00

Dave: Well, that's it. For me, I want to do the best. I want to minimize whatever I put online. That's on my end, so that's the automatic image optimization. Wouldn't that be cool, like a pre-commit build? I just minify. Boom-jim. It's up.

But then I think you were showing me there's a Netlify image optim build process, too. I could inject that and make sure that everything happens on the build process.

Chris: Well, let's not confuse those two. It's not -- this is not the Git LFS thing, but this is just like a -- [Laughter] It's one of their build plugins, right?

Dave: Which is kind of a new thing.

Chris: It is a new thing. Some of them you write, and I've written my own. I think they're cool to write because it's kind of like just some Node JavaScript that you write that says, "Hey, run this on my stuff at this hook," like before it runs or after it runs or yadda-yadda. There are like eight hooks.

But then there's this ecosystem of them, too, which do the same things that the handwritten ones do. They're just already handwritten and they're kind of blessed by Netlify saying, "These are good. They're functional. They work." One of them is image optimization, so you just literally click a button and then, on that Netlify build process, any image that it finds, it's going to optimize. I don't know what the -- I don't think you have a lot of control. I don't think you can say, do it losslessly or lossfully, or do it only to this degree, or use these particular CLI products to do it. It's trying to be a little more chill than that and just be like--I don't know--"It optimizes them. Press the button. You're going to love it." You know? [Laughter]

Dave: Yeah. Yeah, well, that's what any kind of, "Just push a button and it's fixed," that's Dave Rupert's antiestablishment bone where I can't use any product and just be happy with my life. That kicks in.

Chris: [Laughter]

Dave: The same with Cloudinary. It's like, "Oh, no! Then I wouldn't own it," for whatever that means. [Laughter] Again, these services are great. I want the automatic like in my code base and then I want the automatic on the server it goes for, the media machine.

Chris: Totally separate things. Totally separate.

Dave: Then we're just talking about images, right? How to put a fricken' image on a webpage.

Chris: Mm-hmm.

Dave: But there's video, too. There's audio. These things have problems too, and you could host it yourself but then you're going to hit bandwidth problems.

When we were hosting MP3s for the ShopTalk Show, like at 30 megs a pop, we ran up a pretty good Amazon bill.

Chris: Mm-hmm. Mm-hmm.

Dave: For us, I mean.

Chris: Don't put them on S3. That's expensive. [Laughter]

Dave: That did not work for us. [Laughter] It was about $200 a month or something like that. It was not fun.

Chris: That was stupid, though. It's just different now. You could do it now and then I'd put Cloudflare in front of it now or even the Amazon one. What's the cloud--?

Dave: Front.

Chris: Front instead of, yeah.

Dave: Cloud. Cloud guy.

Chris: Just put some kind of caching in front of it and our bill would have dropped to nothing, you know.

Dave: Yeah, because it treated everything as like a unique request.

Chris: Yeah, and that's not what S3 is for. It's not a CDN. It's not. It's just storage and you need to front it appropriately.

Dave: You know that's just too hard. [Laughter] It's just to--

Chris: It is. It's too hard.

Dave: Anyway, I've been thinking about these image machines. I would love to have something. I don't know if it's grow my own or maybe the easiest thing for me is this Netlify kind of path with their Git LFS and their query parameters. Maybe that gets me most of the way there. I don't think it does auto-WebPs or anything at this point, but--

Chris: Ah, I think it does.

Dave: Really? Okay. Well, then.

Chris: How could it not? That would be weird if it didn't.

Dave: Well, well, well.

Chris: That seems like the core benefit, to me, because there is a lot of -- and I just read an article today that kind of questioned this premise, but I questioned their premise. [Snide laugh]

Dave: Ooh…

Chris: Well--

Dave: Who questions the questioner?

Chris: I mean you measure one JPEG and it has the data. Then what's the -- you know, I don't know what there is to argue there. But the idea is that we have some -- and we know this at scale at CodePen because, for example, this was a big one that we just fixed. We would take screenshots and throw them in a bucket and serve them in a variety of formats. We use them in the Grid. We use them for social media, whatever.

There are tens of millions of screenshots on CodePen. That's just one for each Pen, not to mention the fact that we don't even a super good reaper. If you change that JPEG, we keep your old image too. Well, that's got to change. You know what I mean? There, you know, probably hundreds of millions of screenshots on CodePen largely served as just whatever came out of Puppeteer, you know. Kind of like, blap.

Dave: Mm-hmm.

Chris: That's not true because, eventually, we started running them through Kraken, which is like an API for optimizing things - yet another. Yet another part of the Rube Goldberg machine of images, you know.

Dave: Yeah.

Chris: They have an API for it too. We didn't even talk about APIs because there are CLIs and APIs. Anyway. [Laughter] Okay.

Dave: Oh, boy.

Chris: But we just decided to get it out of there and not optimize it during the process but put it in the bucket and then let Cloudflare's image optimization stuff that can sit in front of images, which it's not as robust as Cloudinary's but it's fast-fast-fast. You know? And Cloudflare is just the best in the business for that kind of stuff.

We had a million PNGs and JPEGs that are all now being served as WebP. It is as dramatic as 90%. Some of those WebPs are 10% of the size their originals were. That is mega dramatic. That's the only thing we changed, not the size or anything.

Dave: Yeah.

Chris: I think if your image CDN does one thing, and that serve WebP when it can, that's epic.

Dave: Yeah. Yeah, I think WebP is the -- that's the main requirement because, again, I can't even author a WebP. You know?

Chris: No.

Dave: A job doesn't spit out WebP, as far as I know, and so I need a machine to do that. I might as well let the server do that. But then while I'm doing that, could you just please losslessly compress everything and give me query param sizing? Thank you. Good night.

Chris: Yeah, your requirements are fairly chill. You're not asking for the world. You don't need to rotate them. You don't need to apply a sepia filter. You're not trying to add a water stamp to your photography images.

Dave: No. No, no, no, no, no. Don't overcomplicate it. Then deliver it over a CDN. That's sort of the last big chunk. [Laughter]

Chris: Yeah, and CDN it. Yep, yep, yep.

Dave: Because that's assets.

Chris: That's almost as important as WebP because it gets that ping time super low for people and stuff.

Dave: Yeah.

Chris: It's also incredibly important. Yeah. I've got to tell you, at the moment, running it -- having Cloudflare as part of that stack is the way to go.

Dave: I think you need Cloudflare, which I think Netlify uses to some degree, or you need Cloudinary, kind of, or something.

Chris: I don't think….

Dave: Okay.

Chris: Only because they really discourage you using it.

Dave: They have their own.

Chris: Yeah, they might use it internally or something, but they don't love it when you put Cloudflare in front of a Netlify site only because it's like--

Dave: Oh…

Chris: I think it duplicates a lot of the effort, like the cache busting then becomes more complicated and the headers get weirder. It's not that they -- you know, you can do whatever you want. It's not like they're mad at you for it, but they're just kind of saying, "You don't need it because we do all that stuff too. If you think you need it, you probably don't need it," and I don't know how always 100% true that is because I think there's probably stuff that they both do that are uniquely cool but I generally don't think it's worth it and probably not suggestable to do it because it'll cause you more grief than it's worth, I think.

Dave: I don't know. If anyone knows of this magic machine that exists, please email me. I would love to know.

[Laughter]

Dave: Hopefully, it costs zero dollars. That's my fifth requirement: zero dollars. [Laughter]

Chris: Yeah, how do you self-host? I mean if you're putting Cloudflare in front of it anyway, you don't need because they'll do the params for you. But let's say you didn't want to use that. You didn't want to use an element or Cloudflare. You wanted to self-host a URL param image situation. Who is doing that? What's the ruby gem for that bad boy?

Dave: Well, that's where I think this Thumbor thing comes in.

Chris: Oh, yeah. You're right.

Dave: But that's like a Thumbor to a DigitalOcean, so I'm paying $5 a month for DigitalOcean plus hosting plus bandwidth plus -- you know?

Chris: Yeah.

Dave: It's going to rack up.

Chris: I haven't seen this. This is cool.

Dave: I can put a link in our little show notes about use Thumbor.

Chris: I'm already against their -- [Laughter] -- their URL format. I think Cloudinary does this too, to some degree, that I don't like is that it puts some of the options within the URL, not as query parameters but as part of the path. I'm like, don't do that.

Dave: Oh, double. Yeah, double HTTPS, sort of. Yeah. Yeah, yeah.

Chris: Like image/300x200/something/. You're like, no, no, no, no. Put them all as query params for a good reason because then that URL object in JavaScript, you can use to manipulate stuff more better.

Dave: Yeah. Well, and it's a little easier to -- yeah, it's just a little easier to read, right? Like when you're going down. All the parameters are at the end.

Chris: They're named. They're named parameter.

Dave: Yeah, named parameter. Well, and that's basically what you're doing. You just want parameters that you parse.

I also think about this in a different, like, this is particularly design system work. Do you know what a DAM is, Digital Asset Manager?

Chris: No.

Dave: It's like where big companies have fancy design teams and they'll put their assets in this digital asset manager.

Chris: Of course. Right.

Dave: Like, whatever, Vogue Magazine. They just put all the photos they took into the big thing and then people can source those.

Chris: Like a Dropbox folder isn't good enough because it needs to have names and metadata and comments.

Dave: Accreditation.

Chris: Yeah.

Dave: Sourcing fees, like cost of use and things.

Chris: Sure.

Dave: It goes wild. But it would be cool, like when you build a design system, you always need a fake hero image. I use Lorem Picsum or whatever or Place-Hold.IT or Fill Murray, you know.

Chris: Yeah.

Dave: I use all these fake image surfaces. Placebear is another good one.

Chris: [Laughter]

Dave: But it would be cool if I had this image machine and I could take some of my clients' very fancy, good photography and poke it, plop it into this image machine and then build my own images as we go like with the cropping and the sizing and everything.

Chris: Oh, that would be awesome.

Dave: Wouldn't that be so badical? Because you always need whatever, like whatever photo person using device.

Chris: Yeah, it could be another named parameter. Send me a couch. Okay, we'll pull it from the couch folder then.

Dave: Yeah. I'll try to find the best couch.

Chris: Yeah.

Dave: [Laughter] Yeah, it would be cool if that exists, like build your own Place-Hold.IT, basically.

Chris: Yeah. Yeah.

Dave: Golly.

Chris: I hate to tell you again, but Cloudflare workers is going to be your buddy here.

Chris: Oh, gees.

Chris: I'm telling you, dude. They're really cool and they're totally built for this.

Dave: But that will -- I'd write a little program using Image Magic or something, like JS Image Magic or something, right? Is that how that works? Then it'll say, "Oh, you've requested this? Oh, there are query params? Oh, I'm going to intercept this and--"

Chris: Yeah, well, it gives you this layer that you can say, "Let me just look at these query params, make some decisions, write some logic, maybe make another fetch request based on what I see there or something." It just gives you this layer where you can write code based on the URL that you get to make choices about what you want to return and then return that, but it does it at the CDN level and real fast. You don't have to spin up a Web server to do this. You don't need the DigitalOcean box in between. I don't know. They're just real cool, Dave. Get on board.

Dave: All right, well, I just -- you know. Not to--

Chris: [Laughter]

Dave: That's one of the things. It's like I'm sure I can find value out of it. I just need the project. I just need the time.

Chris: I know. Yep. Exactly. As soon as you do, you'll know ten times more about them than I will. I'm just the canary that likes to sprinkle good ideas to the people.

Dave: Yeah. Yeah. No, I'm definitely into it. I've been dragging my feet. I've got a couple things. I want to make a little puppeteer screenshotter like y'all have probably for CodePen or something but do that in a function. You know? Like, go get me a screenshot of this page, or something.

Chris: Yeah. In fact, that one is so common that you're almost better off using somebody else's API to do it than writing your own. You might get the old DaveRupert-ometer out and be like, "Oh, shoot. I need more control than they offer." Unfortunately, that one gets complicated because you have to deal with time-outs. I don't know. Are you happy with the font rendering? Are you cool with the weird Linux emojis that happen? There are all these little edge cases that other APIs have commoditized and made it cheap and easy.

Dave: Oh, that's a good word. That's a good word.

Chris: [Laughter]

Dave: Well, and I also -- there's also weird stuff, right? You're like, I want a picture of the account page. Well, if you go to /account with the robot--

Chris: Yeah.

Dave: --it just gets a--

Chris: You need auth. Yeah.

Dave: You need to sign in, and so you're just like, "How do you do accounts?"

Chris: Oh, I'll make a query parameter called admin=true.

Dave: Password.

[Laughter]

Chris: It'll shoot right in there.

Dave: Social security number.

Chris: Yeah. [Laughter]

Dave: 129.

Chris: Yeah. We have done a little too much of that in our lives.

Dave: Whoops! That makes -- anyway. On the next show, we'll talk about how I think you should have to have a permit to write artificial intelligence. [Laughter] That'll be a cliffhanger.

Chris: Oh, wow. That's really good. We got to zero questions from the audience. Let's make the next show all questions from the audience.

Dave: We can do all questions and I will let everyone know my theory that you need to have a license to write AI.

Chris: I cannot wait, personally. Yep.

Dave: Anyway, all right. Well, cool.

Chris: Totally separate.

Dave: We'll wrap it up. Thank you. Oh, go ahead. Uh-oh.

Chris: To have a kid, too, a license. License.

Dave: Maybe. Like just at least a certificate.

Chris: I was just kidding. I actually don't actually believe that, so don't write to me. I have not thought it all through yet. I just was throwing it out there. Okay.

Dave: [Laughter] A certificate, at least. All right, so thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

If you hate your job, oh, boy. I don't know if I can help you in this economy.

Chris: [Laughter]

Dave: No, I'm just -- actually, head over to ShopTalk Show.

Chris: There are a handful of jobs there, still. I'll tell you it's not booming, but they're there.

Dave: Well…

Chris: Automattic, notably, has lots of jobs available.

Dave: There you go, and I know lots of people -- I know people are looking for work. I know people who are hiring, so be sure to check that out, ShopTalkShow.com/jobs. People want to hire you.

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

Chris: Oh! ShopTalkShow.com.