Transcript

[Banjo music]

MANTRA: Just Build Websites!

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

Chris Coyier: I'm doing pretty good. Thank you, Dave. Just a normal show for us this week. We're going to answer some of y'all's questions. We have a Windows one, and we have a build process one, some kind of classic stuff, but I think they were well-written questions, so thanks, everybody, who does that. You can always do that at ShopTalkShow.com to kick over questions and topics to us. We really appreciate that.

Of course, at ShopTalkShow.com, too, you can join the Discord via Patreon.

Dave: D-d-d-d-discord.

Chris: I'm afraid it's a paid thing, but our community there is very strong. We would love to have you as well. I mention today because today, as we record, we got threads, and we're all pretty (I mean mostly) stoked about the idea that Discord has threads.

Dave: The hot new feature of Discord is threads, and ShopTalk Show has it now. It's exciting because threading was brutal because you'd get replies from six days ago or whatever. You know? You're just like, "What's this reply related to?"

Now you're going up and down the stream. You kind of know when something is a big breakout topic or something. Whatever.

Chris: Yeah. How do you feel about the idea that you have to name a thread? I actually don't even know if you have to, but it really prompts you to name one. Do you like that or is that weird?

Dave: I think it's cheese, but seeing it in the UI, your general channel has a little folder. It turns into a folder with a file or an item called your thread name. I think that's helpful.

We have a Hot Drama channel. We should just go ahead and say that. If you're posting drama, we are definitely talking about it.

in the Hot Drama channel, I could see this being recent drama: Activision blizzard firing, their whole scandal thing, or something. I think the Basecamp one was a big one we talked about for a long time, right?

Chris: Yeah. We average maybe one a day. [Laughter] There's the old main character of the day, not on Twitter but just anywhere.

Dave: Yeah. Yeah and lately -- this may dovetail into some stuff we're talking about today. Safari stuff that's going on, there are a lot of articles and stuff.

But if you could hop in and see what people are talking about from the named thread, like this is the Safari thread, that would be kind of cool. You get a high-level overview of what people are talking about just by naming a channel. Then we'll see about it disappearing. That could be cool, too, but maybe that gets sad when they go away.

Chris: I don't know. Also, this is day one, so you know how software evolves.

Dave: Mm-hmm.

Chris: Well, I would highly suspect that this evolves. I am just a big fan of Discord. [Laughter] I remember I was part of a local community thing that was on Discord. This was before I used Discord much. I'm like, [speaking in a whiny voice] "Why do we have to be on Discord? I use Slack for everything. Let's move to Slack."

We did. I strong-armed it over to Slack. Now I'm like, "Um, hello. Same guy. Could we move this back to Discord?"

Dave: Yeah.

Chris: [Laughter] Yeah.

00:04:02

Dave: No. I'm with you. Discord, for me, because I've got Slack dialed in, I'm kind of too good at Slack, Chris. I ignore the hell out of it.

Chris: [Laughter] Sure. Debatable.

Dave: I'm pretty good at Slack, and so to the point, my D&D group messaged me on the weekend. They were like, "Hey, we're starting a half-hour early," and I missed it entirely, Chris. I don't check Slack on weekends whatsoever.

Chris: Aw...

Dave: I'm out. I'm ghosted. No notifications on any device. I'm out.

I showed up to the D&D 30 minutes late, so whoops - you know. That would have been good to know.

Chris: Yeah. I guess you could fine-tune it so just that channel, maybe, with notifications or something.

Dave: Yeah. But I'm in one where I'm in the Lone Star Overwatch Outlaws Esports Club, or whatever.

Chris: Yeah.

Dave: It's the Austin Esports--

Chris: And it's a Slack?

Dave: Yeah. Austin Esports group, basically. It's in Discord, and it's really noisy because it's people from Houston and Austin and Dallas and stuff - and San Antonio. People would just be like, "Hey, Austin. What are we all--?" because they're all 20 years old, right? They're all like, "Hey, are we hanging out tonight? Are we getting tacos, buddies?"

I'm like, "No, I have kids, dude, and a mortgage. I'm not doing that." Anyway.

Chris: Yeah, the noisy thing is a big deal. If you pop into a new channel and it's too noisy, I'm immediately like, "I can't. I can't hang out here." But maybe threads will help that to some degree. Largely, I'm a small fish in a big pond and I can't.

00:05:51

Dave: I'm in the 11ty channel, too. 11ty is great, obviously. They have a meet-up now, kind of an 11ty meet-up that's pretty cool.

Chris: Yeah.

Dave: They have a dev team channel, and I'm in that for some reason. I'm not on the dev ... but maybe I am. I don't know.

I really wish there was a help channel. Maybe I could ask for it if I was more involved.

Chris: How poppin' is it? I feel like I joined it for a little while and then it was deadzo in there, and I was like, "Meh."

Dave: You know it's on and off. It's kind of like when people need help, they'll hop in and ask for help. The lack of threading and stuff like that, that makes help hard, right?

Chris: Right.

Dave: You're like, "I need help about this," but then 70 messages later, there's my answer - or something like that. I'm just like, "If there was a help channel, that would be bomb." I'm big into manicuring communities, but I also feel like, with the ShopTalk Discord, we should cap it out at like 120 or something. That's max number of people ever that will ever be in there - or something.

Chris: That's a great idea! Yeah. Yeah.

Dave: Just because you don't want to deal with people. Let's not deal with people. [Laughter] People are great, but if you have too many people, it becomes too noisy. Then you're just like, "I don't know what's going on. I'm talking to 20 people at the same time."

Chris: The bigger the channel, the bigger the community, the worse it is. I think that, on a large scale, is what happened to Web design and development. Back in the day, there were less people that did it. It was a tighter-knit community. The conversation was thick. The positivity was high. Now there are millions and millions of us, it's turned toxic, and there's no turning back.

Dave: Yeah.

Chris: It's just the way it is now.

Dave: Yep.

Chris: That's a very bummery thing to say, but what can be positive then is to fracture off, to make smaller ones that are positive.

Dave: You can have a system of moderators, too, that help enforce everything. It's hard work, man.

00:07:58

Chris: Yeah. There's some that'll just be like, "I'm just going to fight the bad," but I think a good moderator is mostly because they encourage the good. They're kicking off conversations. They're grabbing people's arms and pulling them into it and making people feel welcome very aggressively. [Laughter]

Dave: Yeah. Yeah. I saw, actually, an app that does this. It's called Donut. Have you heard of that? Donut, it's for your Slacks. It basically is like a bot for a watercooler channel. I heard about it from Chris over at Netlify.

Chris: Bach?

Dave: Yeah, Chris Bach was singing praises, I guess, just saying, "Hey, this is useful," but it's a bot, and it'll set up little one-on-one groups or small groups, like coffee dates or whatever sort of thing, so just hang out and have coffee.

Chris: Yeah.

Dave: Have this cool -- it's basically like a watercooler bot, so it basically peppers in topics or conversations like, "Hey, anyone traveled anywhere cool?" or whatever. Just let people share.

I just thought that was kind of cool from a community aspect. It basically hops in and says, "Hey, anyone got any cool stories about this?" and lets people share that maybe otherwise wouldn't.

Chris: Yeah. I like that because there are just quiet people that are only quiet because it's part of their personality but it doesn't mean they don't have anything to say. Just the slightest little nudge towards saying something can work.

Dave: Yeah. It's cool and virtual. Virtual communities and virtual offices, which now that's going to be normal. [Laughter]

Chris: Yeah. Yeah. We had a sponsor like that. It's the one -- you're eight people and you walk around. You can be in your own little office, and you don't bother. But if you feel like walking over to another area, then you're in a chatroom with them, essentially. It just looks very cool.

Dave: That would be kind of weird and cool. I like it. Let's experiment in this space.

Chris: Yeah, but there's probably the perfect size for that. I bet a 20 person team would be great or up to 50, but not 4 and not 1,000. Yeah.

I used to say -- well, we should probably get to tech stuff, but I used to love conferences that were super specific for tech, right?

Dave: Mm-hmm.

00:10:32

Chris: I have this memory of going to a jQuery conference and having it just be this tremendous experience because that's the one thing everybody is talking about. Let's get into it.

There were laptops out and weird pairings of people. We're looking at each other's laptops and looking at code. There was this shared thing where it's not like I don't like other styles of conferences. Of course, I do, but they just didn't have that same vibe.

If you saw somebody in the hallway, who knows if you have anything in common (tech-wise). Sure, you could have a conversation because any people can talk to each other, but the chances are that you're working on the same stack so closely and could easily just look at each other's laptop and get anything out of it is lower, right?

I think that, now, with these little Discords (like the 11ty channel and the Astro channel and stuff) that they're so focused on that. So, if you're talking, it's about that.

Dave: It's cool. It's cool.

Chris: The topic has been decided - in a way. It is cool. Yeah, and I think the benefit goes two ways. It's kind of good for the people because you know where to ask, it's the appropriate place to talk, you all have something in common, and all that. It's super good for the community itself, like the people behind Astro, 11ty, or whatever.

They have this incredible feedback loop. You are not wondering what people are saying about your product. You're not wondering what trouble people are having. It's all there. That is freaking vital for software products to have that feedback loop.

Dave: 100% integrated with your customer base, right? Yeah.

Chris: Yeah. Yeah, in a way that's like, what did we have before? I don't know. Send a survey. Monitor the tweets.

Dave: [Laughter] Yeah. We'll just copy and paste every Tweet into this channel here. [Laughter] Yeah.

Chris: Yeah.

Dave: No, it's cool. It's interesting. Anything now can have a community attached to it: a Twitch channel, a YouTube channel. It's kind of like the old, like, everything was a brand or everything is a brand now. You know Dave Rupert LLC is a brand. Everything is a community now, sort of feels like what it is.

Chris: Right.

Dave: I don't hate it. I kind of like it.

Chris: You can get overdone, too. Then there becomes a culture of, like, which ones do you quit? I was over-slacked at one point, but now I'm just not anymore. I don't know. I just hit a level of the right number.

I'm looking now, just numbers-wise, like four or five Discords and three Slacks, and that's it. I could be in about 70, probably, not to show off. I just mean that you know when you log into Slack (because you've been logged out for a while). It's like, "Do you want to rejoin these?" and it's some conference you went to four years ago. You're like, "No, probably not that one."

Dave: Yeah and it's usually size-related. It's like I don't want to rejoin the big ones. That's tough.

For me, when it's in Slack, because I have Slack and work so associated, it very much occupies my brain, I guess, in a different way, or it has priority. It's like important stuff happens in this one, in this app, in the little whatever.

Chris: Mm-hmm.

Dave: Rainbow swastika. Important stuff happens there.

[Laughter]

Dave: But then fun stuff happens, casual stuff happens over in Discord, is sort of how it feels, but I don't know.

Chris: Yeah. All this stuff is shaking out and it feels okay.

Dave: Yeah. Yeah.

00:14:12

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. High five, Netlify. JAMstack hostess with the mostest.

You can serve all your static as a base sites on Netlify and it has this amazing developer experience for doing that. The word JAMstack really means doing more. You have access to form processing, cloud functions, and all kinds of fancy stuff that Netlify can do.

In fact, I was doing a screencast the other day with a dev evangelist from Data Stacks, which makes a cloud function based Apache Cassandra, which is the very fancy database scalable system that every big-big-big-big company, big data needs uses, like Netflix for example. Right? They have hosted Apache Cassandra that does fancy stuff like GraphQL and REST APIs and stuff that they help you with. It's a pretty cool product.

While we were doing it, we just used Netlify for everything because there was a spiritual connection between them and Netlify where it was like, Netlify, you ship up the site; you'll never have to worry about scale. You have infinite scaling the second you ship a Netlify site because it's static files on a global CDN. The thing is just going to smoke. You just don't even need to worry about it. You're scaling concerns are over as far as serving those static files.

This database structure had the same thing. It's designed to scale just forever. So, you have data needs. You put the database here. You never need to worry about it again. There's some cool synchronicity, but there was more than that. It was kind of like using Netlify dev was really satisfying because then we could spin up the whole stack and build it locally, run the functions locally, commit our secrets in our ENV file. You can just sync them right up with the Netlify CLI thing. You can build locally and then deploy to Netlify with the prod flag, meaning it deploys super, super fast because you've already verified it's working locally.

There's all kinds of trickery, and Netlify just enables all this. It's just so good. In fact, we were working on the site through GitPod, which meant we spun up a VS Code instance in a browser tab. Netlify's repo, you deploy from Netlify through the repo, so there was this connection between the database and Netlify and the repo. It was all happening in the browser. Then in the VS Code instance, you even get a little terminal, so that's where we're using Netlify CLI stuff and Netlify dev. It was so cool.

Anyway, Netlify rules. Check out everything they have to offer. Thanks. Bye. [Laughter]

[Banjo music stops]

00:17:02

Chris: Chris F. writes in. This is more of a question for Dave, so I'll just read it for your pleasure.

"Can you give me any specifics on what made working on a Windows machine versus a Mac machine or Linux machine more complicated? I'm thinking of going full PC because I enjoy the hardware, the building, the customization, the sheer power of PCs. But I just thought I'd ask if there's anything that stands out. I tried WSL in the past and it wasn't that great."

Dave: The answer for me is Puppeteer Core. Done.

Chris: Ah! Is it still that one thing?

Dave: The one thing.

Chris: Oh!

Dave: I think it gets fixed in Windows 11 and WSL 3, which is coming out, I guess, in the fall or so.

Chris: But that wasn't a last domino or anything? It was just one giant domino? [Laughter]

Dave: Yeah. from a technical perspective, yeah. There was also another issue where the email client was just busted. It wouldn't check Google accounts for two months, three months.

All the Windows help is so bogus. You go onto Microsoft forums, and you're like, "I have a problem."

They're like, "Did you try reformatting the hard drive?"

It's like, "Yeah, I did, actually, and it didn't work," and now I'm in a worse spot.

Chris: Geez!

Dave: Now I'm double mad. And so, the Windows help is just basically bots. That's what sucks about it. You're like, "Hey, I'm having a problem," so you have to find some weird IT neckbeard nerd that has some ancient knowledge [laughter] that can help you out with your problem.

Chris: Hmm.

Dave: Yeah, my problem was my email client was broke. No one in Microsoft is like, "Ooh, yeah, we really broke this. We're working on it," and that felt bad because I just was like, "I need it to work."

I didn't know. I was working with a part of Microsoft at the time. I should say that. I didn't know if it was because I had these Active Directory credentials and stuff on my computer and if that was causing the problem.

Chris: Oh!

Dave: It's even like--

Chris: You couldn't just say, "This is absolutely broken," because it could just be broken for you?

Dave: Because I have a weird config and I'm in some user group or something.

Chris: Right.

Dave: I didn't really know. I was having some problems there. Yeah. Anyway, Puppeteer Core, that's why I don't use it. If it gets fixed -- and the problem was, Puppeteer likes to spawn up a browser and then drive it, take a screenshot of it, whatever you're doing in Puppeteer, whatever you're scripting.

Chris: Yeah.

Dave: WSL or Puppeteer Core can't find Chrome, even though there's Chrome on Windows or whatever, and there should be a way to bridge to use Chrome on Windows. That should actually be fine because of how Microsoft has integrated that. I think it works in bit Puppeteer if you can specify your thing. But there's a bug or a config area in Puppeteer Core where it couldn't go and do that bridge. It was looking for a Linux version, and you couldn't get the Linux version.

Chris: Yeah.

Dave: All to say--

Chris: A lot.

00:20:22

Dave: --I think WSL 3 is getting better support for Windowed apps, so you can just run whatever Chrome, Linux Chrome, and it'll just pop up and work. It's getting an Ex Server I believe is what it's called. That's cool, and I think it's going to work, but that was the one thing.

I would honestly switch. I have a terrible time with my Macintosh. Every morning, I open it, I tap-tap-tap on the spacebar to get the screen to show up. It doesn't show up, Chris, so I have to open the laptop clam, do the login, type in on the laptop on top of my keyboard. That sucks. Then hopefully, it turns on. If it doesn't turn on, I can't just restart. I have to shut down the computer and then turn it back on.

Chris: Oh, my god.

Dave: Then my monitors decide they work. Then I can close the laptop. Then I can get in.

Chris: Yeah. I've heard closed laptops is just a perennial.

Dave: You just have it open to the side.

Chris: I don't experience it because I just never close it because I am so nervous about that. I actually use the open screen anyway.

Dave: Maybe that's the thing. Maybe that's my fault is I'm going too minimalist. That might be my issue.

Chris: Well, still. The problem with leaving it open is you can't leave it open and say, "Please don't use this monitor." If it's open, it's open.

Dave: It's running.

Chris: Yeah.

Dave: I don't know. I could maybe get a Mac Mini, I guess, is an option and give this computer to my wife.

Chris: Hmm...

Dave: You know? Maybe that's an option.

Chris: Yeah, or iMac it or Mac Pro it or something.

Dave: I've already got like 20 monitors. I don't think I can -- [laughter] go iMac, but yeah.

Chris: That's the thing. I like the idea of the iMac, especially if they made a Pro one, I'd be into it. But I have the big daddy.

Dave: Yeah.

Chris: I have a $4,999 monitor that I bought because I just was a little fed up with the monitor scene. While this is absolutely ridiculously extravagant, I thought, "You know, this is all I do."

Dave: Yeah. For the next 20 years, this is what I'm doing.

Chris: Yeah, and I mounted it on my desk. Dave, it's beautiful. It works. There are no problems. It's just been a perfect monitor, so I don't really regret it.

But then, I don't do the double. I'm sure as hell not going to spend $10,000. I don't like the idea of a weird one mounted next to it or whatever. If I went iMac, maybe those could sit next to each other, but that's almost too much screen space.

Dave: Yeah.

Chris: They're both HUGE. They're HUGE.

Dave: Well, and then it's, I guess, trite, but I'm at my desk 90% of the time, 100%, 99% of the time.

Chris: Yeah.

Dave: But about three days a year, I'm at a conference - when conferences exist.

Chris: Yeah, and that's going to change - maybe next year. Yeah, that's my thing, too. Exactly. I have this laptop. This is ridiculous, but we're just going to do it. Okay? Now we're deep into it.

Dave: We're deep. We're deep.

00:23:19

Chris: I actually have three now. I have an ancient, old laptop that I keep in the booth. I'm on it right now talking to you on it. The beauty of this thing is I have it super streamlined and it just never leaves the booth. In order to record, which I do many times because not only do I do this show, I do CodePen Radio, and then, Tuesday afternoon, I'll need a sponsor spot and got to do that.

Dave: Yeah.

Chris: All these little moments of recording, so there's a computer in here that never moves, that just is ready to do audio work, and I love it because I used to always be unplugging and plugging in and whatever.

Then there's that monitor crap like you're describing. Oh, did you check the monitor and all that?

But then I've got a more modern laptop, a couple of years newer. It's my dev machine. I do everything on it. I put at my desk, what, 18 months ago and it's never moved. [Laughter] I just leave it there, so it might as well be a desktop machine, which has got my brain thinking more desktop-y.

But then I'm like, "But I need a laptop, too."

The main reason it hasn't moved is because when the M1s came out, I got one right away because I was like, "These are cool, and it's the future of our company," because - whatever - eventually, you have to buy people new laptops. I like the speed, and my old laptop gets old. Eventually, you won't be able to buy anything but an M1, and it's partially my responsibility to make sure our software runs on M1s. The list goes on.

The thing is pretty sweet. I'm not as in love with it as the rest of the world, I think, because I'm like, "Yeah, it's a computer. Whatever." It doesn't feel that different to me, and it was a lot of work. This is all Alex who got this all going. The M1s have trouble with lots of stuff.

Dave: Yeah.

Chris: In the early days, there's all kinds of software that didn't run on it. Here's a huge one that I can't believe I don't hear this talked about as much. Sass, like Node Sass, the one a lot of people use, doesn't run. That's in C and C is a compiled language, and it doesn't have a version that compiles on M1.

Dave: Oh, really? Huh.

Chris: If that's part of your stack, that's just not happening. The thing is, it's not that big of a deal because Dart Sass is 100% compatible. You should be using Dart Sass anyway. It's just not everybody can just stop everything and make sure your entire development stack only ever uses Dart Sass.

Dave: Right. Right.

Chris: It's work and it's tricky and nuanced and whatever. But anyway, we finally get all that going. Our dev environment works great on it now, so now I have this laptop.

Even when I didn't have the dev environment on it, that came home with me. That went on vacation with me - stuff. Right? I realize I do need the laptop.

Dave: Mm-hmm. Yeah.

Chris: It's just running two dev environments isn't absolutely crazy for me. I'm in the market. I could do the iMac thing. I don't want to do a mini because something about it just feels underpowered to me even though they're probably not, but I just can't. Mini - I can't. I need mega. Where's the Mac Mega?

Dave: Where's Mega? Give me Mega.

Chris: Yeah.

Dave: Well, again, you're a professional.

Chris: Yeah.

00:26:15

Dave: For me, I work from home. In a given week, there's maybe one day where it's like, "Hey, can you come in early and watch the kids while I go to the grocery store?" or whatever, because taking kids to the grocery store during a pandemic sucks. You know? [Laughter]

Occasionally, I'll just have to roll in with my laptop and finish up work or whatever. That seems like a must-have, unfortunately. Anyway, back to--

Chris: When the new one drops, the 16-inch -- you don't have an M1 yet, do you?

Dave: I do have an M1. Yeah. I'm the Pro one.

Chris: Oh, you do?

Dave: Yeah, I think I'm still on Linux. Sorry, Intel Node. I installed from Homebrew in Intel mode, or whatever.

Chris: Yeah.

Dave: I think one of my August projects when this current project wraps up is just delete my whole environment and start over on M1 Node because I know it's faster. But I think a lot of the bugs have maybe shaken out. We'll see.

Chris: Yeah, that seems better, so we have the same machine, but I bought that almost kind of like knowing that this one in the booth is going to die.

Dave: Yeah.

Chris: Anyway, this three-laptop setup I have is so ridiculously extravagant, but I love it, so whatever. I'm sticking with it, probably.

Dave: Yeah.

Chris: But I probably then will buy the 16-inch because that's the real pro beast. It'll probably be M2 or M1x or whatever it is. Now that we have all the problems solved, that's going to be my main dev machine almost for sure. Now I have four. One of them has got to go.

Dave: Yeah.

Chris: I don't know.

Dave: Well, and you know what--?

Chris: Are you going to do it? Do you think you'll do it, get the 16-er?

Dave: I probably will just for more power or whatever, longevity.

Chris: More!

Dave: Yeah. Tim the Toolman.

Chris: Yeah.

Dave: [The Tool Man grunt] More power, but [laughter] -- I may not. As I get older, I'm less into "Gotta get the new. Gotta get the new."

Chris: Yeah. A little less satisfying over time, isn't it?

00:28:26

Dave: But I would consider it. I would think about it. Yeah, but back to this question. I think Windows is great. I think you can install all that stuff. I think he was saying he works in Vue and NPM and stuff like that.

Chris: Yeah.

Dave: Pull your projects down. Run the test. That would be what I'd say. If you can get through the test, because a lot of your tests might run Puppeteer, Cyprus, or something like that, and that may have some of the same problems, but I think if your tests work, you're gold. You can go.

The problem I had, a test didn't work on a project I was trying to work on and it was frustrating. I was in a season of frustration where a $1,200 get me out of jail card felt fine.

Chris: Yeah.

Dave: Honestly, if it was like you had to pick one, I would probably pick my PC.

Chris: Yeah. Interesting.

Dave: I would go back to my PC.

Chris: Cool. Chris is saying, "You know what? I like the G Mail Web client. That's what I use every day for my life, so that will never be a problem. I know what Puppeteer is, but I know that I will never care or ever use it for anything," you're saying then Windows is going to be dreamy for you.

Dave: Windows is a dream. It's really good. The new terminal is B A, man. It whips iTerm and Mac terminal.

Chris: Yeah.

Dave: It kicks their butt.

Chris: Do you use ZSH? Is that a thing that works?

Dave: You totally can. You can use ZSH.

Chris: Yeah.

Dave: I think I was just on a regular Ubuntu shell, so bash, vanilla.

Chris: Yeah.

Dave: But that's what's weird, too. You don't have Homebrew, and so that's another issue. Not "issue," but--

Chris: What do you have instead? Nothing?

Dave: Nothing. APT, which comes in Ubuntu, so you say, "Apt install Node," or whatever, and there can be some quality issues there, like you're not actually getting Node. You just got the Node [laughter] -- you just made your computers think it has Node, but it didn't install Node, so there are a few things like that.

But it's cool. I actually prefer that to the Mac thing where you're like, "Okay. I have to use this third-party Brew thing," and Brew, their recipes get out of whack or whatever, sometimes. I think I tried to update it the other day and just gave up because I just was like, "Well, it's taking too long, so I'm outta here."

Anyway, it's great. I wish I could be using it is what I want to say. There's a lot I like about Windows. There's great stuff about Mac but, man, every morning I start up my computer and it leaves a bad taste in my mouth. I just want to throw it out the window.

Chris: I wish you could solve that one thing because it seems like such a trivial thing that is specific to you that doesn't seem like it has to be that way. That sucks.

00:31:31

Dave: It's weird. I plug into a Thunderbolt. Here. I'll give the setup so some Internet wizards can figure it out. I plug my computer into a $300 Elgato Thunderbolt 3 Pro dock that has USBC out to the monitor. Okay? USBC.

Chris: Yes.

Dave: I plugged it into the little thing that has a picture of a monitor going out to the monitor.

Chris: That's Thunderbolt 3 as well probably.

Dave: Thunderbolt 3 display port. That's going up to the display. The display, sometimes it recognizes it. I think it recognizes it plugged in but it never mounts up the display, so that's the issue there.

Then there's a whole other system where USB out of the monitor and I use this little adapter to get display link, which is how you get two displays going on the M1. I display link over HTMI to the second monitor.

Chris: Okay. That part doesn't seem busted. What seems busted is the keyboard. Have you tried maybe the keyboard goes right to the computer rather than to the hub?

Dave: Ooh. Maybe. I could maybe do that, but I plug in the Mac to the dock, right?

Chris: Yeah.

Dave: Using the USB cable that has a lightning bolt on it. It's the correct one. [Laughter]

Chris: Does it have a lightning bolt and a number three, because I have--?

Dave: And a number three. And a number three and a lightning bolt.

Chris: It does have a number three? Yeah, okay.

Dave: My keyboard will light up.

Chris: Okay.

Dave: It says, "Oh! We've got a buddy," so it lights up.

Chris: Yeah.

Dave: So I don't know. Every morning, Chris, I wake up.

Chris: The perfect scenario is you hit the keyboard and all the monitors turn on and it's ready to go.

Dave: Yeah, and my watch logs me in.

Chris: Especially because those M1s are supposed to turn on just insta-fast.

Dave: Uh-huh. Yeah. Yeah. But instead, I have to reboot the whole computer, hard reboot.

Chris: [Groaning]

Dave: Yeah, I know.

Chris: That sucks.

Dave: Mac sucks [finger gun shots] [Laughter]

Chris: Is it the fricken' dock? I wonder if it's the dock.

Dave: Tell me, Chris, because a $300 dock, you would think that would be $300 worth of good.

Chris: Yeah, and Elgato is good stuff - usually.

Dave: It's Corsair under the hood.

Chris: CalDigit is the primary dock, though. Yeah.

Dave: CalDigit is the one, but okay. If I spent $500 on--

Chris: It's a $300 mistake. Yeah.

Dave: Yeah. If I spend $500 on the CalDigit, yeah. Shame on me for buying the wrong $300 product to connect my computer to a fuckin' monitor. Okay.

Chris: Yeah.

Dave: [Laughter] But that's Mac for you, so you did it wrong. Sorry. It doesn't work.

Okay, let's say I fix that. I fix that. What?

This isn't the only dock I bought. I bought like three or four other docks trying them out.

Chris: [Laughter] Oh, no!

Dave: I tried everything but the CalDigit, and you can't buy the CalDigit because it's sold out to like 2090.

Chris: Oh, no! Is it really? Oh, that sucks.

Dave: Maybe I'll get the big old honker CalDigit and solve my problem, but I don't think it'll solve the problem. I don't think it even--

Chris: I have a feeling that it won't either.

Dave: Yeah.

00:34:35

Chris: Because this Elgato dock is pretty sweet too. I bought the MX thing.

Dave: Okay. Oh, yeah.

Chris: The new one where you plug the XLR mics into it, which I absolutely don't need. But I thought then I could go back to my SM7B Shure at the desk.

Dave: Yeah, okay.

Chris: Because -- you know. Not that I couldn't before. I like the simplicity of it. The device is so slick. You just plug the mic thing into the back, the USBC over to the computer, and that's it. There are two cables to the whole thing, and it allows you to use your best mic. Then you also get to use the Elgato software, which is pretty slick, right?

Dave: Right.

Chris: But on my old setup, I had to use some universal audio software that was way fancier. I had to run three apps at once to get it to really connect and work right and stuff. Then I was like, "Screw all this. As deep as I am financially to this setup, it wasn't working that well, and it's just a lot of crap on my desk. It's just not that simple feeling."

Dave: Mm-hmm.

Chris: I bombed it all to go the other way because Shure makes the Shure 7B or whatever.

Dave: Yeah.

Chris: Some kind of -- I forget what it is, but it's just USB only.

Dave: Yeah. Yeah.

Chris: You rock with the Rode, right?

Dave: Love the USB.

Chris: It's USB. You don't have to think about crap. I think it sounds awesome. I think it's a great little product, but it was so inexpensive that I have my doubts that it's the same, quite the same quality as the Shure SM7B that I already have.

Dave: Mm-hmm.

Chris: I was kind of like, maybe I'll do a side-by-side test just because this is a hobby. I enjoy it. It's similar in simplicity but allows me to use any XLR mic, which is appealing to me, and I like it. So far, so good, you know.

Dave: Yep.

Chris: I bought a little stream deck, too, because I was already buying crap from Elgato.

Dave: Yeah. Yeah. If you're in the Elgato cart, you might as well just load up. I got--

Chris: Yeah. I got the arm. I got the fricken' thing that shines light in your face. You might as well just have the whole--

Dave: [Laughter] I bought the Elgato arm for my Sony cam, right?

Chris: It didn't arrive yet, did it?

Dave: It did. It did.

Chris: Mine is way back-ordered.

Dave: I snuck in.

Chris: Ah, you lucky bastard.

Dave: I snuck in mid-cycle or whatever, and I bought two because I just was like, "They are sold out!" I bought the second one purely for you know when you stand over a desk and take a photo of whatever, a piece of paper or something?

Chris: Mm-hmm.

Dave: But your shadow is in it. [Laughter] I bought it 100% to avoid my shadow being in a photo. It'll still have their shadow, but I just was like, I don't want to stand over something to take a photo, so I'm going to set up--

Chris: You're going to mount your camera to the arm?

Dave: Yeah. It has a phone camera, a phone rig, or I could do the camera mount.

Chris: This is blowing my mind. Seriously?

Dave: Just purely, 100% for taking photos of crap, like physical objects, because I do that from time to time, and I hate seeing the shadow in the photo.

Chris: Yeah.

Dave: Anyway--

Chris: Oh, my god. I love it. That's the best reason ever. I even got the green screen, which I hardly ever use, but I love it.

Dave: Oh, going big. Go big. Go big.

00:37:48

Chris: Yeah. I got it all. The stream deck, though, I thought I could make use of. I was like, there's got to be some -- because it's just fun. All it is, is a fricken' keyboard with programmable buttons on it. That's all it is. They have a little digital display, so you can program and do anything you want when you press one of those buttons.

I bought the littlest one, so it's got six buttons on it. I've got one button on there, which just opens a Web browser. It goes to CSS-Tricks.com, which is of course absolutely useless because you can do that with your fingers.

Dave: No. No. You've got to do it with the device.

Chris: [Laughter] But what else?! Then I struck out immediately because were some that were like, "Change the brightness," but it doesn't really work. I immediately was like, "Why did I buy this? I am not the audience for this. I have no other ideas for the other five buttons," and even the one button I have is useless.

Dave: I would immediately do scenes in OBS, or you could hook it up to your StreamYard or whatever. You're like, let's present the guy's thing or present the screen or do the "we're both talking" scene or whatever. You have certain scenes that you hotkey to, that would be one thing I'd do. A hang-up button, [laughter] like for Slack.

Chris: Oh, a hang-up button for Slack.

Dave: For Slack, for Zoom, or whatever.

Chris: Zoom, yeah.

Dave: Just like [bloop], I'm out.

Chris: Ooh, that's juicy.

Dave: I think that's a must-have. [Laughter] I don't even know what else. Now I'm out of ideas, but--

Chris: Still, if you use OBS, that's the main integration. That's got a million things for OBS.

Dave: Yeah, because even automating the go-live, just like, "All right. Now, run my intro pump-up hype scene and then tweet about it." You know?

"Do the start broadcast routine." Wouldn't that be cool to automate?

Chris: Mm-hmm.

Dave: How many times have you started a thing and you're like, "Oh, wait. I forgot to tweet about it," or whatever. [Laughter] You know? Now, we're actually going.

Chris: Yeah. The Twitter integration was scary to me. The default button does the tweet. It doesn't bring up a thing in which for you to tweet.

Dave: Okay.

Chris: It's API integrated. You press the button and it fricken' tweets.

Dave: It's out. It's out. Yeah.

Chris: Yeah. [Laughter] I'm like, "No! That's not good."

Dave: No, no.

Chris: Anyway, I just got it, so I'm being Negative Nellie, but don't listen to me. I'm sure I'll find interesting things.

Dave: That's not three-year-old proof, which is maybe what you want in life.

Chris: Yeah.

[Laughter]

Chris: Yeah, certainly.

Dave: Nice job, honey. Now we're both on the Internet, live, and thousands of people are watching, so good job. [Laughter]

Chris: It does a good job in making my desk look even nerdier, which was a goal.

Dave: That's always the goal.

00:40:34

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Elastic. Elastic enables the world's leading organizations to put their data to work using the power of search. Whether it's connecting people and teams with content that matters, keeping applications and infrastructure online, or protecting entire digital ecosystems, Elastic's search platform is able to surface relevant results with speed and at scale.

Learn how you can get started with Elastic's search platform for free by going to - get this - elastic.co/shoptalk.

[Banjo music stops]

00:41:26

Chris: Sam Bigelow writes in, "I've heard you talk about building a site in raw HTML, CSS, and JavaScript without any build step. This confuses me. Are people writing pure HTML with no templating language at all? I get how you could drop a CSS preprocessor build tools or JavaScript build tools or preprocessors quickly, but HTML with no templating seems so repetitive, and you can't have any dynamic data, right? What's up with that?"

Are you feeling Sam here? I always thought that, even when CSS preprocessors were coming out and they seemed newfangled, I'm like, "They're not that newfangled. We've had HTML preprocessors forever because that's the top language that needs something.

Dave: Yeah. I have totally written raw HTML and stuff like that with no build process. I wrote an app called Prompts. It's a little drawing app. I think I did that entirely with a single HTML file and a single JavaScript file. So, you can totally do it.

Now, I have a build process just because I'm using more NPM crap and stuff like that. You can do that, yeah.

Chris: Well, let's talk about it then. Isn't the thing that you'll miss the most is in the includes, right? If this is truly truly a multipage site and you have to copy and paste the navigation on multiple pages, immediately that's red alarms. Maybe I could get over it because there's such a thing as find and replace in project.

Dave: Yeah.

Chris: It's not totally crazy to assume that that's a thing. But still, no. Something about that immediately -- if I have a two-page site and it needs nav on both pages, I'm finding a way to use includes.

Dave: Right. Yeah. Yeah, I think it's like you're going to -- this is how we used to do it back in the day. We'd write raw HTML. Then you very quickly realize, okay, if I'm doing a blog and I'm going to show four posts, I don't want to have to manually type out the four posts. I want to just write one block that shows a post and then I'll go fetch that data from a database. That's how we got to databases, templating, and stuff like that. Then you'd reach for something like--back in the day--PHP. Now you have a bunch of different options that you can use.

Chris: 11ty emerging as kind of the premier tool, I think, because it can be so light. It can just be like, "I just need some HTML help." That's a way to think about 11ty, period, is just like, "I just need a little HTML help."

Then it turns out that the tool is actually pretty powerful and you can ask a lot of it if you need to. But if all you needed it to do was a couple of includes, boom, you got it. Then you have templating and collections and all this other stuff at your fingertips, but it doesn't matter. It's not like the tool is too heavy. It's not like there's too much crap in 11ty. In my opinion, there's almost too little. The fact that it doesn't help you with any kind of styling or something makes it limited in utility, for me, and I'm not the perfect audience anyway, so who cares, but I just find myself wishing that there was more blessed solutions for styling in JavaScript and stuff.

00:44:44

Dave: Asset stuff, yeah. That's my number one request for 11ty. I think that that's just it. Our portfolio for Paravel, 12 client sites or something, 5 different pages, or whatever, that's all we need. Right? That's it.

Chris: Right.

Dave: I don't need to invent some CMS. We had it on a CMS for a long time. It was a pain in the ass because you'd have to, like, "Oh, man. We want to change a thing. Let me go start a whole environment."

I couldn't just operate on code. I had to spin up a PHP and then check the database and operate on WordPress. Then I could then edit the template. It just got overcomplicated for such a simple site. 11ty ends up being more of the right tool for the right job.

Chris: Yeah.

Dave: If we have a sweeping change that we had to roll out, it would be maybe kind of rough, but less rough than editing a whole WordPress system or craft or whatever we'd be on.

I think when people talk about raw HTML, they're maybe not factoring in the templating. I think maybe templating goes into raw HTML. You know?

00:46:07

Chris: Let's talk about this. This is what I want to talk about. It doesn't seem to be -- like, what's the best thing out there for true HTML templating? Let's not talk about Web Components because that's a thing that--

Dave: Vue. It's Vue. The answer is Vue. [Laughter]

Chris: Yeah. I could see that. Maybe it's Vue because then you get imports. What I'm talking about, basically, is component usage in JavaScript frameworks like Vue but also like JSX and anything else you can think of where you create a component and a component has props. It has attributes that come in and then you use them throughout the template.

This is not like a PHP include. PHP include is like, "Just go get this file and plop it in." There's no great way (in PHP) to say, "Yes, but also send along these local variables." You could do that in ERB. Remember? You just send in locals.

Dave: Mm-hmm.

Chris: Then you can use them. That's closer to what we want, but ERB just is old and people don't like it for whatever reason. It's Ruby-based and all that, right? What's not Ruby-based, not Web Components, not Vue (because Vue just implies some JavaScript that then has to run on the client)? I'm talking about that's pre-processable that fits this bill.

I guess I think of Nunjucks, kind of, with its macro syntax. I think there's room for a big, good player here that's like, this is the HTML thing that's for components.

Dave: Yeah. No, I mean petite-vue is up there for me just because it has components. It has for loops. It has if statements all built-in, just a little bit interactivity and you're off to the races.

Chris: Yeah. It has to run on the client, doesn't it? It cannot be preprocessed.

Dave: That has to run on the client - now. Maybe in the future, you could change it.

Chris: Yeah. Doesn't this seem like -- you know Ben Holmes is in our Discord. He's got this Slinkity project. I just linked it up the other day. I don't think it's super-duper fully baked yet, but the idea is it brings JavaScript templating to 11ty, meaning no JavaScript output, meaning use these languages and produce HTML output, which means probably -- I mean Vue will work.

00:48:23

Dave: Yeah. There was a specification proposed by Apple (of all people) for template instantiation for Web Components. People have considered this and maybe it's a possibility, but I don't know what the status is. How cool would it be just to have for loops or if statements or even just the way, the native way to program that, like to create directives or whatever - whatever you want to do. It would just be nice to have that, but hopefully--

Chris: Yeah. I want a loop over a set of data. They're blog posts, so they have titles and descriptions and authors and avatars. And I want to do it in HTML.

Dave: Yeah.

Chris: I just don't because JavaScript components are so good. They're just so winning this battle. You just send them in as data to the component and it digests them and outputs the stuff. It works fricken' great. I feel like there needs to be a winner in the HTML templating market.

Dave: Yeah. Yeah but you know preprocessing JavaScript stuff too is not ideal, so it would be great if it was in HTML.

Chris: Sure, like if native HTML handled this. What?!

Dave: Yeah.

Chris: That would be amazing.

Dave: That would be cool, but you know -- one day. I don't know. When I'm retiring they'll say, "Dave, HTML imports are real."

Chris: Yeah! [Laughter]

Dave: I'll be like, "My work here is done."

Chris: Oh... [Laughter]

Dave: I'll just fade -- fade out of existence. My Twitter account will auto-close and it'll be just fricken' brilliant.

Chris: I was right!

Dave: I was right!

Chris: Yeah. [Laughter]

Dave: Where not a day goes by. Every day goes by I'm like, "Yep, that HTML imports does exactly what you're talking about. Single file components, oh, yep, HTML imports did that." We did it. We had it. We had it. We just gave up. We just gave up. Firefox, so I'm not bitter.

00:50:41

Chris: Yeah. I see. [Laughter] Let's do this last one. I think you'll enjoy it. Tyler Duprey. Tyler Duprey asks. This is about images, right?

Dave: Yeah.

Chris: HTML, CSS images, yeah. Let's say they're random, right? They could be wide. They could be tall. They could be square or anything, right?

Dave: Mm-hmm.

Chris: He sets max-width to 100%, height auto. Classic, right? How long have we been doing that? For our whole lives?

Dave: Our whole life.

Chris: That means you throw it in a container. It will never break the container. If the container gets smaller, it'll come with it. It'll maintain its aspect ratio. This is an expectation these days, an essential ingredient of responsive design.

This has changed somewhat recently. Remember that? You've got to put height and width attributes on it so it maintains space. It doesn't cause reflow. Anyway, it's still a very happy thing to do.

He says, "Horizontal images look great." I assume he means landscape style, you know, wider than it is tall.

"But then my client uploaded a vertical image," I assume he means portrait, "and is way too tall. If I could tell my client not to do that, fine, but is there another way? If I set a max height as well as max-width, I risk skewing the image, don't I? I can't set max height 100% anyway because the container doesn't have a fixed height. Is there a reliable way to accommodate horizontal and vertical images? I'd prefer a CSS-only solution if possible."

Dave: No. Do you have it? You have it.

Chris: Well, kind of. I mean what is it called, fit-something, fit content?

Dave: Oh, object-fit.

Chris: Object-fit.

Dave: Yeah. Yeah, object-fit contain. Yeah, but then you have to draw a box, right? An element that's a square. CSS aspect ratio is actually going to super help us out and it's going to be really awesome when it drops here in Safari this summer. But you draw a box and then you say, "Anything in here--" or "Contain the images in here to this height and width."

I kind of actually had to do that on a project recently because it was just weird. It had these weird-shaped images and stuff like that.

Chris: Yeah.

Dave: The client's content was book covers and videos. Guess what. Those are opposite aspect ratios.

Chris: Yeah.

Dave: All their content was either in a video (16:9) or a book, which is 2x3 or something or 3x5. Yeah, so it was just difficult enough. I was just like, "Ah, man. I think I'm--" [laughter] I don't know. It was difficult, but I got it, so you can do that.

Yeah, you just have to draw the box they're going in and then do stuff. If you're doing stuff behind the images, around, or borders or whatever, now it gets a little bit more tricky and you're in some sh--

Chris: I'd say it sounds like you don't care if they're a little bit different from each other (height-wise), right?

Dave: Yeah.

Chris: I'd say just set the maximum height. Don't use 100%. Just say max height 500 pixels, or something, something reasonable that's not crazy. Then you have your choice between object-fit contain, which is no data loss. It will fit in there and it will not skew it.

Dave: Yeah.

Chris: It won't skew it. It'll just place it in there, which is weird to think. It's a little mind-bending to know that there's a wider box that the actual IMG element is occupying, but the image is painted in a smaller portion of that, meaning straight-up transparent sides to it (in the case of a portrait image). You could even set a background on the IMG and it'll show right through on those unused sides. Or you have the option of cover, which has data loss, right? It will still occupy that whole space, but it'll chop off. In the case of a portrait image, it'll chop off the top and the bottom kind of equally, I think. I think you do have control over if you want it to chop only from the bottom or whatever. I think you do. I can't remember.

Still, you have two choices there. Do you want it to fill the space or do you want it to have no data loss? You have some options there. I think that's going to work great for you, Tyler. I think that's the answer.

Dave: Yeah. I think that will mostly work. Yeah. Does object-fit; does it have an anchor?

Chris: That's what I was just saying. I think it does. Let's find out quick.

Dave: Object-fit origin.

Chris: It doesn't look like it's part of object-fit itself. Oh, object position.

00:55:15

Dave: Object position, that's the other one.

Chris: Right.

Dave: You can be like top center. Yeah.

Chris: Yeah, so if you knew that the top center of your image is very important, you'd say object position top center. That way it'll chop off from the bottom, not the top. That's pretty important here. I think, for a picture of some flowers or whatever, just chop it off wherever.

Dave: The only killer here is if somebody -- you have your object-fit, right?

Chris: Yeah.

Dave: Your square that you're sizing the image in, and then you have JavaScript run through and do that thing where it finds the most important thing on the page.

Chris: Yeah. Oh, I've seen this. Yeah.

Dave: It's usually racist, but whatever. It goes through and finds out what's the most important thing on the page. Then it sets object position and some parameters. Then it flips from contain to cover, or something like that.

Chris: Right.

Dave: Wouldn't that be cool?

Chris: I've seen it. I've seen even steps beyond this. For example, let's say you know where the center is and you know the size of the final box. Then for something like Imgix or Cloudinary, you can alter the URL such that it returns the image from the server at the exact size it needs. That way you're not sending data across the pipe that is just going to get cut off anyway. You know what I mean? You're center it. You find the perfect place to crop the image. Then you crop it at the URL level so it's the most efficient possible way to see it.

Even beyond this, have you seen that seam carving idea?

Dave: Yeah.

Chris: Where it's like, "I need to serve a smaller version of this image," and it's hot air balloons on a blue sky. I know that I can carve out little vertical-ish lines from in between the hot air balloons, maintain the spirit of the image, but compress the size of it in a way.

00:57:14

Dave: I think there are JavaScript solutions, but could it be wazum and go really, really fast?

Chris: Oh, yeah, I mean that would be so cool. The seam carving thing, to me, is a little dangerous-ish because it's not just a crop at that point. It's like making a new image with AI.

Dave: Weird. Let's get weird.

Chris: If that thing got mad at you--

Dave: Let's get weird.

Chris: [Laughter] Sure. I saw that Anthony Bourdain movie and there's one line where they synthesized his voice reading an email, which obviously they don't have audio of him reading an email because it's an email. He didn't read it.

Dave: Yeah.

Chris: Anyway, they didn't really disclose it properly all the way, and there are all kinds of outlash. To me, it feels similar to that, like, "I didn't take this photo!"

Dave: Yeah. Yeah.

Chris: Says the photographer. You know?

Dave: Well, and I think there are people who photo chopped Princess Leia into one of the Star Wars and there is a lot of, like, "I don't think that's okay," you know, using Carrie Fisher's whatever.

Chris: I appreciate going full weird though, you know? There are right and wrong times for this stuff.

Dave: Yeah. Yeah. I think, like Tyler was saying, it wouldn't work in my situation where half of them are videos and half of them are books. That wouldn't work in my situation.

Chris: Yeah.

Dave: If you just have portrait photography from your phone, maybe it does work. Maybe you could get them all crunched down to a square. Maybe they all work.

Let's wrap it up. This was a good episode. Thanks, everyone, for writing in. We appreciate that. Be sure to star, heart, favorite it up (this episode) in your podcatcher of choice. That's how people find out about the show.

Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Head over to the Discord. Join it! Come on! It's patreon.com/shoptalkshow. Limited quantities available, apparently, so there you go.

Chris: Yeah. [Laughter]

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

Chris: Oh, ShopTalkShow.com.