Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another hard stop episode of the ShopTalk Show. I'm Dave--in the shed--Rupert and with me is Chris--in the booth--Coyier. Hey, Chris. How are you?

Chris Coyier: What's happening? I'm doing pretty good, man. I just feel like a somewhat productive week. Yeah. What's up?

Dave: You'll see in my room, I now have a mini-fridge, a gamer fridge.

Chris: Oh! With the glass front. Is that required now? It wasn't en vogue for a while, but now it feels like all of them have that, so you can see.

Dave: If you want to be a gamer, you've got to have a glass front fridge, so it shows off your G-Fuel. Hopefully, G-Fuel is ready to sponsor the podcast. Really angling for that, so I think it will come.

Chris: I've never even had it. Does the G stand for gamer?

Dave: I don't think I've -- Yeah, G is for gamer, but it's gamer fuel. It's like caffeinated Gatorade, basically.

Chris: What is the number one hottest game? We talked about League of Legends the other day, which I think is very popular, but it's not -- it's a little old, right? It's not top, top, top. Is it just some shootie MaGee thing, like War Captain?

Dave: Yeah, War Zone. What I like to do is go to the Twitch. Go to the Twitch. See the top one. It's Counterstrike Global Offense, which came out like 50 years ago. There must be a tournament going on.

The next most popular game is Just Chatting, which I think is--

Chris: Interesting. Yeah.

Dave: Most of the people just--

Chris: What about the one where you're on the island or whatever and y'all build - I don't know--

Dave: Fortnite?

Chris: Fortnite.

Dave: Fortnite. Yeah.

Chris: Is that popular still?

Dave: Well, not really. It's sort of dipped quite a bit, but it's still in the -- they're on the third row here or, I guess, maybe second row if I stretch my browser out. The second row of games.

Chris: What about that one you like, Overwatch. Is that super-popular?

Dave: Overwatch is not doing great, to be honest, Chris. It's on like the fourth or fifth row.

Chris: Yikes!

Dave: And then we got -- you know -- but there's Call of Duty is always kind of popular. Valorant is another one.

Chris: Hmm.

Dave: And Dota, League of Legends, those are top row.

Chris: Dota. Yeah.

Dave: Apex Legends, yeah. Fortnite, Heartstone, I think you'd know from your -- Magic the Gathering....

Chris: Sure. I tried to get into watching that because I played it for a little while and I feel like, in order to enjoy watching a video game, you have to have - I don't know - 40 hours logged at least.

Dave: Yeah. Yeah. Yeah.

Chris: You need to know some of what makes it hard, all the mechanics, all that stuff. Because once in a while, I'll just YouTube, and it'll be some game about - I don't know - building an empire and letting them fight or something. "Oh, this looks like something I would like," and then I watch it, and I get a little enjoyment out of it, but I don't really get the game.

Dave: Mm-hmm.

Chris: So, I end up bailing because I'm like, "I don't know what's happening." Whereas I can watch StarCraft 2 all day because I know exactly what's happening. It's just so--

Dave: It's like wallpaper to you. It's like animated wallpaper because you're just like, "I know exactly what's going on."

Chris: Yeah.

Dave: Yeah. No, I think there's really -- I don't know. I think there are just a lot of games. I'll say that. And people find their niche, and so I don't know.

Chris: Mm-hmm.

Dave: Maybe we're not. Maybe we don't have Fortnite anymore, you know, like big blowout games. Maybe everyone just kind of goes on these--

Chris: Oh, a new era Dave has predicted. Yeah.

Dave: I don't know. I don't know.

00:03:40

Chris: Like podcasts. There are no big podcasts. It's all niche.

Dave: There's no big podcast. There's no more serials. We're done with serials.

Chris: I wonder what the biggest one is. Is it Joe Rogan - or whatever?

Dave: Joe Rogan, probably, yeah.

Chris: Does it even count as a podcast if it doesn't have an RSS feed? Food for thought.

Dave: Right.

Dave: Because it doesn't.

Dave: Think about it.

Chris: I know This American Life is still popular. They did one with this guy who had a historic NFT. I found it a very compelling episode about This American Life's dive into that crazy world.

Dave: Yeah. Yeah. Well, and it's such a weird time for NFTs this week here, but yeah. I would listen to it. This American Life is always good.

The serial ones are actually interesting because there's spinoff ones.

Chris: Hmm.

Dave: Was it Nice White Parents - or something like that? There's another one about this school board in Birmingham that I'm listening to. Anyway, there are a lot of good series and stuff.

Chris: Yeah. It'll never beat [explicit used] S-Town, though. That was crazy.

Dave: Well, yeah. There are big podcasts, I think, but I don't think there's, like, everyone you know is listening to this one. You know? I don't know that that will happen again. I don't know.

Chris: Oh, I'm sure it will. But, yeah, it may be fewer and farther between.

00:05:04

Dave: I did a Twitch stream, Chris, this week. This week, I did a Twitch stream.

Chris: Oh, yeah? You fired it up? Nice.

Dave: I did some breakfast stream for like an hour and a half. I don't know. I'm not good at it, and the audio from my computer didn't pipe through, so that sucks.

Chris: Dude, there's a learning curve. There's a learning curve to your lawnmower. There's a learning curve to literally everything you do in the world, so now you're a little further in it.

Dave: Now I'm a little further, and I said if I do ten episodes. Ten episodes, Chris, guess what.

Chris: Yeah? You get a milkshake.

Dave: Dave gets a stream deck. I get a stream deck.

Chris: Oh, a stream deck. Nice.

Dave: And a milkshake. [Laughter]

Chris: That's like 50 milkshakes.

Dave: Yeah. Anyway, I'll get a stream deck, and that's going to make me good at streaming, I think. I think everyone knows that makes you good at streaming if you can push the little buttons and switch your camera.

Chris: I'd say it's for your children because, at some point, they're going to ask about that world. Then if you don't know, how embarrassing is that? Now you're going to know.

Dave: Right. Right.

Chris: Even if it's not for your own fame and fortune, you know.

Dave: No, I don't think I'll be famous, but I think it's also about carving out time for my junk because I have all these ideas in my head, kind of background processes taking up memory, taking up the brain RAM. We talked about brain RAM recently. It's taking up brain RAM, and I need to get it out. I think streaming is a really good opportunity to purge my brain RAM.

Chris: Nice.

Dave: We'll see. We'll see.

Chris: Purge brain RAM, I really like that concept. Well, here's one thing that you might have even worked on. I don't know. Although, I think you're using it professionally. Felix -- secret last name -- writes in. "Yo, Dave!"

Dave: Secret--

00:06:42

Chris: "Have you taken Nuxt 3 out for a spin yet? And how are you finding Vue 3?"

Dave: Ooh!

Chris: Just a quicky, you know.

Dave: Just a quicky. Yeah, so maybe we mentioned it last week. I think we did. But I did take Vue 3 out for a spin. The new release candidate is super good. I think it's two weeks old - or something like that.

I tried it a month ago and I had a bad time. I couldn't even get it, like, I couldn't even start the application. As somebody who uses Nuxt every day, that was a little bit like, "Yikes! This could be a very bad situation."

But the new Nuxt 3 is absolutely great. It has this nitro server, so it's like file-based back-end server routes. Then you can push that to Netlify, and Netlify will automatically turn that server into edge functions.

Chris: Nice.

Dave: Because all they are is single file endpoints.

Chris: Did it ship with adapters for all of them, though, like Cloudflare and Vercel?

Dave: Yeah. I think Vercel and all that. Yeah, so there are different strategies, I think is what they are called, deployment strategies.

Chris: Strategies?

Dave: Strategies, but anyway. Or adapters. Maybe they're called adapters.

Chris: I like that better.

Dave: Anyway, there are different ways to deploy it, but it's basically the idea is your server -- your whole folder ends up in a little process, or each file ends up in a process at some point, whether that's a cold start process or not a cold start process.

Chris: Nice. I remember it was interesting talking to Fred. It seems like people are latching onto this idea that SSGs are cool, but it sounds like an evolution of them that might take hold is, like, just make the cloud your SSG. It's not that different. Write your SSG such that it can run in a cloud function, and then the pages are generated on demand. It's like there is no lengthy deploy process that has to build all the pages. It just doesn't exist. You just ship the new version of your app. Then as the pages request it, it runs once, caches it.

00:08:59

Dave: Mm-hmm. Gets some kind of thing in there. I was going to say I read this post, somewhat similar. It was called "The Demise of the Mildly Dynamic Website," and this is on a very old-looking website. [Laughter]

But it was just talking about how we did CGI a bit, and then we did PHP, right? CGI was like you could post data, and it could go create a file. Pearl would do that in the background.

Then PHP showed up, and it was like, you don't need to know this Pearl stuff or whatever. You can just add a bit of math in the page or loop through some stuff. PHP kind of lightly grafted in. You could do their use all PHP or you could just lightly graft in PHP into the page. Right?

Then it just kind of goes into -- and that was an interesting era because it was like, okay, now, guess what. If you're in there, you can just go query a database. Now your data lives somewhere else. You know?

Chris: Mm-hmm.

Dave: It's not in static files somewhere. Then the article is kind of like, and then we did this big overcorrection of going to all this client-side stuff. Now, to render the website, you have to build an API server, and then yoink down a bunch of JSON. You're kind of slowing everything down.

I kind of disagreed with enough of the article. I kind of pealed out.

Chris: Yeah.

Dave: I think there's a little bit of remembering it wrong. It was kind of like, "Oh, then people got into JavaScript and then Discord was popular or Disqus and Disqus was bad."

I was like, well, people were using Disqus on WordPress. It's sort of in their PHP app. You know what I mean?

Chris: Yeah.

Dave: Disqus was great on your static site, but it was also being used on database stuff. That was more about the spam management and stuff like that. Anyway, there's a little bit of -- what is it? The history where you remember history wrong, kind of intentionally, to support your argument.

Chris: Revisionist history?

Dave: Revisionist history! There. Malcolm Gladwell's podcast.

Chris: Yeah.

Dave: Yeah, it's like the revisionist history going on, but it's good. Anyway, I found myself identifying with I want a little bit of server. Going all client-side was not super great for me.

Chris: Mm-hmm.

Dave: Even just ethically.

[Laughter]

Dave: But even just like, "Oh, man. I have to go work on this file or this project, this part of the repo, just to spit out a thing. Then I have to go over here." I know GraphQL solves that, but it just was a pain, and so I like a little bit of server. That seems very helpful.

Chris: Heck yeah. I mean it might swing back full server at some point. You know how fast--

The fact that you can run server stuff at the edge seems like a big deal to me. It's starting to be so fast to do that, not only because it's edge, but because the engines that do it are so fast.

Dave: Mm-hmm.

00:12:18

Chris: I'm still on my Go journey and just loving. I was up a little too late last night just watching YouTube about Go.

Dave: Oh, yeah?

Chris: "I'm going to watch this and this and this and this." I don't know. I'm just into it, and it's just so fast. It's so fast.

Dave: It's really fast. Yeah.

Chris: Then to know that you can write cloud functions in it.

Dave: Mm-hmm.

Chris: Maybe not the same edge ones that Netlify and Cloudflare support, but just a Lambda, for sure. Netlify supports Lambdas too. I just mean that sometimes in here we talk about the really fancy edge worker ones that only run in JavaScript.

Dave: Mm-hmm.

Chris: But just one that you can just hit real quick as a Lambda. Go is absolutely supported, and I don't know. It's just so good to have a server [laughter] that's like, why not just use servers again?

Dave: Yeah. Yeah. I like this idea of, like, I'm just going to code this. There's an interesting switch to Dino over on the Netlify side of things.

Chris: Right.

Dave: They're kind of betting on Deno.

Chris: You don't even have to learn it is the beauty. I mean I guess you kind of do, but it's not that different.

Dave: Well, yeah. Your require shouldn't work or whatever, maybe it does, but the idea is it's more like standards compatible. It was just like, ooh, that's kind of cool too. I'm just writing JavaScript and it's kind of working everywhere. It works on my local. It works in the cloud, and so--

Chris: I like that if you ship a Deno function -- is it dee-no? Den-o?

Dave: Den-o, dee-no, I'm sure somebody knows.

Chris: That you don't have to make sure you turn off file system access - or whatever.

Dave: Mm-hmm.

Chris: Because it's just secure by default. That's great. You know?

00:14:03

Dave: Mm-hmm. Yeah. And it has the Web's auth model, kind of. Anyway, Felix - secret last name - thank you for writing in. I am liking Nuxt 3. I'm still not fluent in Vue 3. I was watching BenCodeZen's Twitch streams, and he just fluently writes out all these hooks and stuff. I'm just not there yet. But I am excited to use it because I think you can actually nerf down or smurf down - we'll say - your files quite a bit just by using the new hook syntax or the new composition API.

There's a lot because your Vue files right now are just this big object, and so these kind of make that a lot easier to deal with.

00:14:56

[Banjo music starts]

Dave: This episode is brought to you by MongoDB World 2022. Be there in person as the software engineering community comes together in New York City for MongoDB World 2022.

It'll be three days of announcement-packed keynotes, hands-on workshops, and deep-dive technical sessions. It's happening June 7th to June 9th, 2022, at the Jacob Javits Center in New York City. Tickets are available now. Just visit mongodb.com/world-shoptalk. Use discount code WORLDPOD25 to get 25% off your ticket.

[Banjo music stops]

00:15:56

Chris: Just a thought that we don't have to talk about but I do think I'll just leave it hanging out there in the air that if you follow Netlify and read their blog and their Twitter and stuff, for years now, every major release (it seems like) has something to do with running code on a server. It has long-running functions or super-fast running functions, or whatever, or new languages that they support on the back-end, or this type of run it then cache it thing. Now edge functions and stuff.

A type of company that's so dedicated to, like, we are a static file host, even though they've always said we're obviously more than that. it's not like a mismarketing or anything. But to have this company that has that at the root, have all of their engineering effort and releases behind server-powered things is interesting.

Dave: Server-ish, right? Yeah.

Chris: Server-ish. Yeah.

Dave: Not server-less. It's server-ish.

Chris: Yeah, and not like PHP and stuff. It's different. Anyway, here's an interesting one from Brody Austin.

"I work on sites that display third-party images where I have no control over the size, aspect ratio, orientation, et cetera. I want to display them nicely in a card layout (three cards across or whatever), and I like CSS stuff like aspect ratio, object-fit, but I feel like I just throw these properties at my sites without really having a game plan for the best effect. I do have the ability to run images through resizing tools to at least make them manageable from a size perspective. But again, the images could be square, rectangle, tall, wide, so on. What's your advice?"

I'm happy of that second part because if you have no control over the images, that seems like not great territory, you know.

Dave: Mm-hmm. Mm-hmm.

Chris: Because if it's a two-megabyte image, object-fit and aspect ratio -- sure, you can get it on the page in the right way, but I was like the first thing you need to do is proxy those things through something.

Dave: Mm-hmm.

00:18:01

Chris: And that proxy machine might be able to crop it too, so I'd look into that. The part that bugs me about aspect ratio and object-fit is that there's inherently some cropping that's going to happen.

Dave: Mm-hmm.

Chris: Chances are, the image in there isn't exactly the size that it needs to be. It gives me the heebie-jeebies a little bit that there are images -- like all this data that's just being chopped off and not used.

Dave: Mm-hmm.

Chris: Can you crop it on the server so that I'm not sending absolutely unused data across the wire? Wouldn't that be nice? If you have a little machine already that's doing resizing and such, maybe it can crop too.

Dave: And if it can do smart cropping, like figure out a focal point and then crop it, that would be cool too because that's the trick with aspect ratio, like responsive changing the aspect ratio. Now you're cropping off stuff. If the focal point is in the top left, chances of that--

Chris: Yeah, you wanked it.

Dave: --fitting in your object-fit cover are zero or just won't look right. I think card layout, like great artists steal. Just copy Instagram. Do squares. Right?

Chris: Sure.

Dave: Squares are never going to lead you wrong. Squares are never going to let you down. But you can also do object-fit contain and then your tall rectangles and your wide rectangles will fit in that square. You just set aspect ratio 1:1, object-fit, object-fit contain. That should work.

But if you want hierarchy like image needs to be big and this image needs to be small, you kind of have to work on it a bit because, on a phone, tall images have hierarchy. On a desktop, wide images have hierarchy - or kind of. Like wide and tall.

I find switching that but also using a little bit of object-fit is awesome. It's really hard to explain that to designers, even using terms, print terms like bleed and stuff like that. it's just hard to wrap your brain around the math that makes those safe areas disappear.

Chris: Mm-hmm. Mm-hmm. Good luck, though. It sounds like you're like, "I don't know what I'm doing. I have no plan." It's like you have a plan. You've got a proxy already. You've got card layouts happening. You're using aspect ratio and object-fit. It seems to me you're ahead of the game - if anything.

00:20:41

Dave: Yeah. I mean if you're displaying images, the classic thing is a logo, right? We get logos and every logo is different. Some are tall. Some are small. Some are square. Some are rectangle. Some are circles. I usually like to draw a square box and fit the image into it.

Chris: Draw the box, though. That's my trick for logos, not that I'm some design genius. But if you impart some structure that looks structured and then put the weird logo inside the box, it feels less weird.

Dave: Mm-hmm.

Chris: If you just try to lay them out without actually drawing the box, it looks messy. Your eye can't follow what's happening because there's no super-straight vertical or horizontal lines that happen because logos are so weird.

Dave: Mm-hmm.

Chris: Just draw the box.

Dave: Draw the box. Add a little padding. There you go.

Chris: Yeah.

Dave: Make it look like you meant to do it. [Laughter]

Chris: Mm-hmm. [Laughter] You know you mentioned -- we can do another question but there was an interesting one that kind of came up naturally about what's more valuable, assuming the cost is identical: a very small amount of time from a super senior developer or a lot of time from a very newbie developer. Let's say that's going to cost you X bucks and they're the same X bucks.

00:22:09

Dave: Yeah. No, that was a question we've been kind of wrestling with is, do you want somebody senior part-time or do you want somebody junior full-time? I don't want to get too specific but it's just been an interesting conundrum because you can probably--

I don't know. If you had to choose, would you rather? It's a classic, like, would you rather have one senior part-time or one junior full-time?

Chris: That seems like it could -- you don't know, so you're flipping a coin a little bit because the super senior person could really be checked out and not be applying their senior-ness to it, and that would screw it up. And the junior could be too junior that they were kind of useless, or they could be a super go-getter and they level up a ton. And then the fact that they have so much hours in the day is just, "Wow! That was super awesome and worth it." You have no idea how that's going to play out, so you need to think of other factors. You need to think about how much do you know about these people? How much more information can you feed this algorithm in order to make the choice?

And you have to fact yourself into it too. If you're like, "I have no time to level somebody up manually," then that factors into the equation.

Or if you were like, "You know what? Actually, I could pair every day for an hour, at least, with a newbie." That factors into that equation heavily.

Dave: Mm-hmm. Mm-hmm. Yeah. For me right now, it's context switching too. Does that add too much bouncing around from tasks, jobs, management, coding, and whatever other crud I'm doing? Yeah, it's tough.

I've talked to quite a few people, just milling this around. It's tough.

Chris: Right.

Dave: It really is a pick your poison because, though, I think sometimes you do need very tactical skill, like CodePen. You needed a Go developer who knows Go.

00:24:32

Chris: Most of our hires have been like that, weirdly. I hope it's not that way forever. But usually it's been like, yeah, we hire senior and we hire specialists because we just need them.

Dave: Senior specialists. But if you were like, could I hire somebody who is like, "I love programming," [laughter] you know, or somebody who is like, "I can do Go, but it's one day a week," what do you do? It's tough.

I feel, too, as I get into the hiring realm here with Luro, it's tough decisions. I read all these blog posts about hiring. But they're all companies with 5,000 people. There are not really a lot of blog posts for, like, "Hi, you have a three-person company. Here would be my recommendations." There's not a lot of advice there.

But we're figuring it out, so we've talked to a lot of nice people already. But we're just figuring it out. We're just trying to figure out what would be valuable to an early-stage company.

That's the other factor too. Early-stage company, you have a limited number of dollars, so you have to spend those dollars very wisely.

Chris: Yeah, you do.

Dave: So, how do you do that?

Chris: It's called runway, baby.

Dave: Yeah, runway, so how do you effectively spend your dollars? That's what maybe I don't like, and that's just me. Every question -- every conversation ends up in a budget question. You know?

Chris: Right.

Dave: Whereas, I doubt Salesforce is like, "Man, should we hire a junior developer because we only made $1.9 trillion last year? So, what should we do? Should we just--? I don't know, man. What do you think?" You know?

Chris: Yeah, they don't have to think about budget, but actually they probably do because they're actually hiring from some sub-sub-sub-department that actually has a really strict budget.

Dave: Right. Yeah, but you know. It's just kind of that thing. Then there's, like, Amazon, right? Oh, they've got like 17 levels of engineers. Are you an E4.5? It's like my wife's tennis ranks. [Laughter] It's like, what is going on? What level are you? I don't know. I've been doing it a while.

Chris: That factors into your risk stuff too then because an easier budget decision is, "Let's go light on the budget." It's a much harder call to be like, "Let's burn it, baby."

Dave: Yeah.

Chris: That's almost an emotional, personal thing than it is practical.

Dave: Oh, yeah. No, it's all mixed up. Yeah, I can't say I have a good answer.

00:27:21

[Banjo music starts]

Dave: Here's an exclusive and free invitation from Microsoft. On May 19, 2022, Microsoft is celebrating its one-year anniversary of Azure Static Web Apps.

Azure Static Web Apps is a turnkey service for modern full-stack Web apps with prebuilt and pre-rendered static front-ends and serverless API back-ends.

Join live on Microsoft's Learn TV for their two-hour celebration of Azure Static Web Apps with an excellent lineup of guests and speakers, aka.ms/swaanniversary or click the links in the show notes below.

[Banjo music stops]

00:28:12

Chris: Here's a classic. How about that, huh? Eric B. -- this is almost a language question about UI Kit versus design systems. He's planning a redesign. Okay?

Dave: Mm-hmm.

Chris: The goal of it is design consistency today and years from now. You know?

Dave: Mm-hmm.

Chris: Rock the UI Kit, but he's kind of saying, "What makes up a "design system" beyond the "UI Kit"? Is there more to a design system than just typography and common elements and such? Or what? I'm missing the full picture."

I think this is common. I even talked to -- do you remember Micah Godbolt? He's at Microsoft now.

Dave: Mm-hmm. Yeah. Yeah.

Chris: He wrote this book Front-End Architecture book. Then front-end architecture, in his mind -- it turned out that what he was talking about was design systems.

Dave: Okay.

Chris: It's just like the word "design systems" won, but then it still feels confusing to me, and I do not blame Eric B. here at all for being confused by it.

I even live in this world where I have one product, and it's a website, so our "design system" really is just some components.

Dave: Yeah.

Chris: But I feel like hasn't it come to mean that design system really means there are rules and thinking that you read behind a design system. Maybe it incorporates language and stuff, too, and certainly tokens that aren't just for your website but can manifest everywhere. Design system feels more like wider. Whereas, if all you're doing is building a website and need some components, I would maybe -- you could maybe call it your design system, but that's pretty narrow and calling it your design UI Kit is a little more what you're actually doing.

00:30:00

Dave: Brad Frost had a pretty good post on this recently. I'm trying to find it. I'm learning I might need to fix my Brad Frost RSS feed because I didn't know he is blogging this much.

But he was talking about his big thing is this design system idea has become a big umbrella term for voice and tone, for dos and don'ts sort of in the UI. What are some other things? I don't know. It's just become a gigantic umbrella term. Anything--

I think even inside of business, people see the success of a design system and they just try to latch their thing onto it. They're like, "Ah, yeah. Visual integration testing, that's design system." You know?

Chris: Yeah. [Laughter]

Dave: It's like, well, sort of. Yeah, totally.

Chris: It's design. But I thought about it a little extra hard, so it's a design system.

Dave: Yeah.

Chris: [Laughter]

Dave: You end up like it's very much a target for pile-on stuff, which I think I agree. I do think all those things are sort of the same sort of boat. But Brad Frost was drawing a line to where he was like, "To the extent that it impacts the UI, design systems are for user interfaces," I think is the post here.

Chris: Hmm.

Dave: He just basically kind of gets into, like, to the extent design systems care about content as it pertains to user interfaces. Design systems care about accessibility as it pertains to a user interface. Design systems care about personalization as it pertains to user interfaces.

Chris: Hmm. I see.

Dave: I thought that was -- I don't know if I totally agree with Brad. I like Brad, but I don't know if I totally agree. But I understand the need to draw a line somewhere. If you have to draw a line, this is a pretty good line.

You could say UI Kit, but it's UI Kit that has to care about some other stuff. That's maybe what I would call it.

Chris: Well, part of it. This is interesting. This is what I was kind of trying to say but couldn't spit it out exactly. He quotes Nathan Curtis here saying, "Design systems are systems of systems," which I like. Then he's got this. I guess it's a Venn diagram, "Whereas design system is as huge gray circle and it encompasses processes, the style guide, the voice and tone guide, the content strategy, the brand, the documentation, the components, the visual design language." There's a ton of stuff, each of which is a system, and the design system is all of those systems together. Wow! That's a lot. But yes? I guess.

Dave: Yeah.

Chris: You're saying maybe no. [Laughter]

Dave: Well, I think just the idea that you have--

A design system doesn't have to encompass. I think it just has to be informed by all these things is kind of what I'm getting at.

Sorry. My tummy is rumbling. I must be hungry. My tummy is hungry.

Chris: [Indiscernible]

00:33:18

Dave: I think about what -- what did--? Robin Rendell called it the hyper-object in just that it's a big -- design systems can be this big thing. Yeah, I think maybe, too, we don't have our wording all figured out yet. I think that's part of it.

Chris: After all this time, we still don't. UI Kit even means component library sometimes.

Dave: Which I think is what a lot of what Brad builds, right? That's a lot of what Brad's work is, is building these distributable component systems.

I found, too, in my work, you get into it and, guess what; all these pages are bad, not because the UI is different but because the content is garbage. If we hire a content strategist, we can actually fix the content and have a cohesive word and feel across the entire site. Think about that.

Or images, right? Not just even in compression, like making your site look like garbage, like over-compression. But like a client site, how you display your pizzas might really impact. Or it's like we learned, showing a pizza this way is actually way better than showing a pizza this way.

Chris: Yeah, which has nothing to do with your React components.

Dave: It has nothing--

Chris: That's like photography advice, but it's part of it.

Dave: But you have to put that information somewhere, so where does it go? Confluence -- page 9,000 of your confluence printout? [Laughter] You know?

Chris: Yeah. Yeah, and make sure people know it and stuff, and the right people know it.

Funny how things change over time. Remember -- was it Samantha Toy?

Dave: Yeah.

Chris: I think it Warren at the time (in my brain) but she changed.

Dave: Warren? Okay.

Chris: She had these design tiles or whatever.

Dave: Yeah.

00:35:24

Chris: That was a big thing for a while. I worked at an agency more like Paravel (in the past) and have worked with lots of other agencies where what used to be more common, like that's not specifically build a website, was like you'd work on a design system -- even though it probably wasn't called that then -- but it was like, "We're going to work on your brand, and we're going to work on the logo, but also, we're going to bring some of that design tiles into it, so we're talking colors and vibes and feels and that photography strategy and how we use language and all that in our deliverables.

The way that we're going to prove it to you and what you're going to pay us money for is that we're going to give you this presentation that shows you your new logo, but it's going to show you a variation of that logo that works on a hat. And we're going to show you how you might use this design system to put on the side of a truck, your delivery trucks.

Dave: Mm-hmm.

Chris: And we're going to show it on a coffee mug. And we're going to show it on your letterhead. And so, a website was a small part of it, but it was this system that could work everywhere that had feels to it. Surely, that stuff still exists. It's just that you and I are so buried in website bubble town that design systems are less meaningful.

Dave: Yeah. Well, yeah. I think that the whole brand package was part of the deal. I think design systems is kind of part of the deal.

It's like, here's your brand in components across a thing, across a whole site. Here are your tokens that establish that look and feel. That can go to different operating systems: Web, iOS, or whatever.

Chris: Yeah.

Dave: I think it's a muddy ground, but I think, too, it's up for your organization to decide how far it's going to go. I think Eric saying, "Is it typography and common elements and a color palette and white space? Is that it?" I think it can be that, and I think maybe start there. Maybe start simple. But I think it can also be just any--

I think a lot of things can impact your design system, whatever you need to systematize of your design. You could think of it that way, like, "Hi. We are John Q. Industrialist, and we are going to make design efficient. How are we going to do that? What are our top ten priorities for making design efficient?"

You may have designers who don't want to be efficient. They just want to open up Figma and jam. What do you do?

Chris: I love that. What do you do?

00:38:19

Chris: There's a shout-out here from Rob de Kort. He's just been a long-time listener of the podcast. Thank you.

Shout-out to (let's call it) a starter kit or a UI Kit. Force Statamic.

Dave: Mm-hmm.

Chris: It's one of those CMSs that I've never used and we don't talk about a lot on this show but certainly has its super-fans. It sounds like Rob here perhaps created this. It's called peak.studio1902.nl. Just happy to shout that out for you and put it in the show notes for you. It looks pretty nice. I think that's cool when a CMS is popular enough that people build stuff on top of it and share that around and all that. Pretty sweet.

Have you ever used Statamic?

Dave: No, but I'm looking at it now in these screenshots over on Peak. It looks pretty cool. It looks really user-friendly is what I want to say about it. But no, I haven't used it.

I think I Hello, World it a long time ago - maybe. I feel like there was some Dropbox integration kind of thing that happened, which maybe still exists.

Chris: Yeah, because it was flat-file-based, which was pretty hip. Obviously, it's still hip considering how powerful static site generators are, and we just got done with a thing, like, "But maybe servers too."

I feel like that was part of the vibe here is that you build the content in flat files, but then you still had PHP, so if you needed to sort them, you could just sort them.

Dave: Mm-hmm.

Chris: If you want to edit them in a CMS, you can just do that. It just so happens to write the content back to a file, which is kind of cool. It did some things. It's still doing things that are a little unusual. But I think, as history is playing out here, they're actually kind of right about some of the stuff. Think about how Netlify CMS writes your files back to disk and stuff like that.

Dave: Yeah. It's getting written somewhere, right? It looks -- I don't know. It looks awesome. Statamic has a great website, too.

Chris: Probably what killed him was that, well then, you're doing all this static work but then you still need to host it somewhere that has PHP. You never got the benefit of just being able to toss it on GitHub pages or whatever, which was probably the clutch thing that made some of the other ones successful.

This seems highly successful. Success is a very relative term. But I wouldn't say it's one of the top five CMSs. You know?

Dave: Right. Right. Yeah, so you still needed PHP, but then it kind of spit out static files. I think that was a part of it. But it's been a while since I've even considered it. I don't know. It looks cool though. That's what I want to say is the UI actually looks way fresh compared to some other systems I used recently.

Chris: [Laughter]

Dave: No names. I'm not going to name them. Yeah.

00:41:29

Chris: Well, we're both in the middle of working on our personal websites a little bit. You might stream some of it, I imagine.

Dave: Yeah!

Chris: It's looking good around there. Nice and snappy. You did a teardown before a buildup. Wasn't that the spirit?

Dave: Yeah. I started going through. I was going to move some pages around. My typography was just dying. You know? I was fighting it. I was like, "Okay, I've got to do an important over here," or an override or a more specific class or something. That's the same as doing an important to me. I don't care. Fight me. [Laughter]

But I just was fighting enough. I was like, I need to bail out entirely, so I deleted everything. I have a few custom styles on sub-pages, like for my bookshelf and stuff like that. But I've tried to kind of keep it all real tidy.

I really haven't done the big flexes, but a couple of my goals were surface tags and then I stole the little bar chart thing from Josh Collingsworth, his little CSS Grid bar charts.

Chris: Mm-hmm.

Dave: Just so I could show my posts, my sparkline of posts, which is only useful to me. No one else cares about that.

I've got some ideas for the homepage, like spicing it up. I've got that locally. I'm going to maybe work on that on my stream.

Chris: Oh, you do.

Dave: Yeah. I think I'm going to play with Houdini paintlettes.

Chris: Whoa!

Dave: Yeah, and then I think I'm going to, at least for the homepage. But then also what's cool about Houdini is you can script it. I could change the homepage every day, over time, too. It could be like seasonal. There's cool stuff you can do with a few variables. Anyway, that's kind of the current plan right now is just to kind of mess with this stuff and get it to a cool place.

Chris: Heck, yeah. So far so good, I think. You left it in a pretty usable spot. Some people do this design in the open, and then it's not in a particularly usable spot.

Dave: Yeah, it looks kind of rough. But yeah, I need link colors. I had a dark mode. I was using -- this is interesting. This is good ShopTalk fodder.

I was using color theme light/dark. What is the way to do it to where you get an automatic dark mode?

Chris: Yeah, prefers color scheme dark.

Dave: Yeah, color scheme. In your root, your HTML, you can just do color scheme light/dark. You're basically just saying this is a light--

Chris: You got it, operating system.

Dave: Yeah. Take it over, buddy. You got it.

Chris: But that means you have to be careful. You can't set any background colors and colors and stuff.

Dave: Yeah. I wasn't doing any of that, so it was fine. It was doing fine, and it looked great in Chrome and Firefox. Then the dark mode, I noticed it on my phone. I was like, I can't really see the links in dark mode on my phone.

Chris: Yeah. Right.

Dave: So, I don't find that out until nighttime when I look at my website on my phone at night. You know? It was basically unreadable. That's because Safari's default colors in dark mode are too dark or, a.k.a. inaccessible. Chrome goes for a bit more lighter, like purple visited link or something like that.

It's really interesting how that thing. It was broken, and it was just like, "Oh, man. That would be too convenient if it just was kind of okay by default in dark mode."

Chris: Right. Mm-hmm.

Dave: But they don't change the link colors in Safari, so you get that really blue-blue, 00. What is it? 00F, basically. Just the blue-blue, and that looks terrible on 000. Yeah. Anyway, I have backed out of that strategy and I'm going to do a proper dark mode. That might be something I do on my stream. We'll see.

00:46:00

Chris: Yeah. I just can't. I don't know how I feel about it. You can do whatever you want on your site, but I can't bring myself to quite care about dark mode.

Dave: Ooh...

Chris: I just can't do it.

Dave: Spice! It's spicy in here.

Chris: I like that too. You do it then, browser. Which I don't really love because it's kind of taking away some design control. But on my personal site, I think I'm kind of fine with it.

Dave: Well, and I was kind of like, if this color scheme light/dark worked, I could roll with it. Or if I could just program a few, like deep browser defaults. It just makes the links orange, always orange - or whatever - that would be kind of cool. But yeah, so I basically had to back out of that whole strategy. Too bad.

Hey, it's too bad.

Chris: Yeah. I've been doing the same thing, tearing down bits by day and building up bits by day.

Dave: I really like yours. The new chriscoyier.net.

Chris: It just doesn't have much spirit. I've just been pulling crap down. I finally got the type just how I want it, I think. It doesn't have much.

It occurs to me that I operate CodePen, and there's just unlimited, fascinating creativity on there. And all of it inspires me every day. Yet, I'm like, almost afraid to pull stuff. You know?

I'm like, "Hmm... Should I put some crazy Web GL background thing, or should I do some insane variable fonts thing?"

Dave: Mm-hmm.

Chris: Then when I find myself sit down to do the work and build this, just my personal blog site, something scares me about doing anything too whack.

Dave: Right.

Chris: Anything too ambitious or something. I'm trying to get past it because I want there to be something. Then what was it, just a couple of days ago, there was some blog post. We'll put a link in the show notes. It started out with this computer screen. You press the button. Then a 3D scene of an office comes into play. Then it zooms down on the screen. It's just this incredible personal website.

Then I feel jealous. I'm like, "Oh, man. I've been a Web designer and developer for a long time and I don't have a cool website like that. I just have some typography on a white page." [Laughter]

Dave: Yeah. This website, gosh, I want to find the thing. It was incredible. You could play Doom inside the website. It was using JS DOS, which is like a WebAssembly thing to run DOS in your JavaScript. It was--

Chris: That's amazing.

Dave: It was off the charts cool. I was so impressed. But it was so cool. But that website was on Netlify. Then his website was this Web GL scene that imported the website, the Netlify into the computer, so it looks like an old computer. It was really too damn cool. I'm full jealous. I'm going to try to find it in my browser history.

00:49:21

Chris: No regrets on my side just yet. I feel like I'm enjoying the process of pretty much shipping code every day to my personal website, just bringing it up, making little tweaks. Spinning it up.

Dave: You've been doing some good--

Chris: It's pretty fun.

Dave: You've been doing some good blogging. Some blogging....

Chris: You know what I want to do? It's still WordPress and I have no regrets there. An old WordPress feature was to have post types. Not custom post types where you define your own, but some built-in ones that were like, "This is an image," or "This is a quote," "This is a link," and you could just choose what types they were.

Dave: Yep.

Chris: They were kind of built-in.

Dave: Mm-hmm.

Chris: I think I might just lean into those and just be like, "Yeah, those are the types that I want to use," and then do special design around the types. If I want to do a one-sentence blaster, it makes sense in the design of the site. Or if I want to do a long-form thing, it makes more sense. If I just want to post a photo, I have this design opportunity to make that make sense in the stream of the site. But otherwise, stick with the one column, just whoosh. You know? It is a stream.

It almost compels me to try to make a WordPress theme called Life Stream - or something - that embraces that fully.

Dave: You know, yeah, I did that to some degree, and I kind of backed out because I had too many not different enough. You can totally do it.

I was going to say the site was henryhefferman.com. That's Henry's website. Yeah. Anyway. It's too dang cool.

Chris: Yeah. Props to anybody that does something amazing with their personal website.

I do a lot of time, and even on this show and personally, talking about the amazingness of personal sites and RSS and stuff. I want to couch it by saying it's not the answer to everything in the world. It's not the solution to social media problems or anything like that.

Dave: Mm-hmm.

Chris: But I do just love it. I do really like it when people blog. I really, really like it. I think it's cool. It's a cheat code for our profession being that the only reason I've literally had any success was writing and you can have that too. It's just a good message to spread, I think. Blogging is great. It's great for me because I get to benefit from it. But for you, it's really good.

Dave: Oh, it's great for everybody. It's a though that's been documented. The only problem is I read something and I don't remember where I read it. That's my biggest blog problem. I read something about -- I'm trying to -- it was something about hiring or something. But I read this thing and it really stuck with me. I've got to think about that, but I don't remember what blog it was on. Hey, somebody can figure out how I remember what was on something, let's do it.

Chris: Let's do it.

Dave: Blogs.

Chris: Let's leave it at that, Dave.

Dave: All right. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. Blog about it. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for 16 tweets a month. Watch our YouTube. Those should be coming out. I said last week they were coming out. They didn't come out last week. They're coming out this week, so that's youtube.com/shoptalkshow. Join us over in the D-d-d-d-discord, patreon.com/shoptalkshow.

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

Chris: No, but it's always a pleasure speaking with you, Mr. Dave. Can't wait until the next one. ShopTalkShow.com.

Dave: Yay!