Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, summer heat edition. I'm Dave--suns out, guns out--Rupert and with me is Chris--tank top with nipple rings--Coyier. [Laughter]

Chris Coyier: Woo! Yeah.

Dave: Looking good, Chris.

Chris: Oh, thank you. Thank you. Thank you. I'm trying. I'm trying. Not very hard, but you know. Working out again when I can, how I can, safely, you know.

Just got to fix that eating thing, you know. To me, the working out is the easy part. It's the--

Dave: Can I tell you my new diet?

Chris: Yeah.

Dave: You ready for it? Sleeping. That's my new diet.

Chris: Ooh. Can't eat when you sleep, can you, buddy?

Dave: I read a book -- ah, joke is on you, appetite.

[Laughter]

Dave: Joke is on you, eating out of boredom. So, I read this book Why We Sleep. My coworker Trend read it and just talked about it so much, I just was like, okay, well, I'm going to read it. The TLDR is, anything less than eight hours of sleep is trying to kill you. That's the whole premise of the whole book. I don't think I spoiled it for anybody. But it's done by this neuroscientist who does a bunch of sleep studies and stuff.

Chris: Okay.

Dave: In some ways, it's like -- in some ways, it's kind of like this cure-all. Sleep repairs your brain. It fights cancer. It does all these things. Take it with a grain of salt, but an appropriate amount of salt. But the, I guess, core premise is, sleep is very important to the body and we are in an industry where sleep is not so much valued. We are in an American society where sleep is not so much valued. We are in a global pandemic where your brain does not let you sleep, or whatever.

It struck me pretty good in this idea that I just maybe need to sleep. As much as I love playing video games or staying up late, whatever, picking my nose watching Netflix, the idea is, sleep is where your body actually does very critical system repairs, defragging your whole brain, basically.

My new diet, I think, is I'm just going to try to sleep and get eight hours of sleep and see what that does. That's my new 2020. [Laughter]

Chris: You're going to hit that eight hours? Are you going to measure it? Have you seen the new watch? No, it's a ring. The ring, I was impressed with.

Dave: Oh, okay.

Chris: I forget what it was called.

Dave: Sleep Ring?

Chris: Well, just because, I don't know about you. Who wants to wear a watch all night long to track it?

Dave: Yeah.

Chris: Then if you do, then when do you charge it? Do you charge it during the day? Well, the day, presumably, it's doing something even more useful. I just think the ring is kind of cool. it's a little more chill and you get the data or whatever.

Dave: I think my strategy is just -- and I didn't do it last night, but in bed by 10:00, reading a book or something.

Chris: Yeah.

Dave: I fall asleep to my Kindle almost -- like I have a pavlovian response built into my brain now. [Laughter] I open the Kindle. I get 1.5 pages in and I fall asleep.

Chris: Yeah. Don't exactly make much progress on the old book, huh?

Dave: No, no but that's -- yeah. Can't read books from the library, I found out, because I sleep too much. [Laughter] So, I have to -- the three-week time limit from the library does not work out.

Chris: Mm-hmm.

Dave: So, I have to buy books.

Chris: I have a stack of five of them on my bedstand that I can't -- I can't seem to get through for the same reason. Even TV. This is, you know, a little bit not in the same category as a lot of the rest of the world because sleeping is a little bit of my superpower. I just get the right number every day no matter what. Once every six months, I might have a night where I can't sleep and I can usually point to exactly why. It's some literal life stressor or something that's just like, well, obviously.

But even TV, I've been trying to watch this show Cursed on Netflix, which is this cool--I don't know--sword in the stone remake kind of thing. I watched like five minutes of it and I'm just like [snoring]. I'm like, "Come on!" I want to watch this show. I don't even have the choice.

If I'm just like, "You know what? I'm really into this video game. I'm going to play it tonight instead of sleep," my body is like, "No you're not."

Dave: No, you're not.

Chris: Joker. [Laughter]

Dave: I'm just going to fall asleep.

Chris: I'm lucky. I'm very lucky that way. Yeah.

Dave: Yeah. Yeah, I think you got it. My wife has it, just the ability to harness sleep. Unfortunately, my brain chemistry does not allow that. My brain chemistry is like, "Let's start a project," or "Let's work out at night," or something. I don't know.

Chris: Yeah.

Dave: Which is all the terrible things you can do, or "I'll just catch up. I'll just not sleep for the whole week and then I'll catch up." Apparently, your brain doesn't do that. It just doesn't actually catch up. Anyway, it's interesting to think about.

Speaking of books, do you want--? I've read quite a few books this year.

Chris: Have you?

00:05:35

Dave: But I'm thinking my next -- what I want to do is I want to read -- and I've opened them, but I want to finish and read all my friends' books because I have a lot of friends who have written books here through Web design and stuff. I want to read all those. That's kind of my new goal, but I just need to dig into it, you know.

Chris: Mm-hmm. Mm-hmm. What do you have? What's your next? Do you have one on the stack that you haven't read yet?

Dave: Well, I want Gerry McGovern's book World Wide Waste. I want to really dig into that.

Chris: Mm-hmm.

Dave: I want to dig into that. There are a few A Book Apart books that are coming out or have come out that I want to read; like David Dylan Thomas has a new book coming out.

Chris: David Dylan Thomas. We'll get him. We'll try anyway.

Dave: Sanongo. Yeah, we'll try, but Sanongo's book, I read three-quarters of it. I just need to finish it. You know, stuff like that, so there are quite a few of those.

Chris: I chatted with Amy Butcher the other day who has a new one called Designing for Behavior Change.

Dave: Ooh!

Chris: I'm hoping to get her on this show, which is fascinating because even the name of it, I have ten questions. You know? But I have the book. I ordered it. I ordered it in paper because I'm just weird like that, but it just came today.

Dave: Okay.

Chris: So, that's mine on the stack to read.

Dave: Is it A Book Apart?

Chris: No, it's Rosen -- Rosenfeld.

Dave: Ah, those are good. Yeah, well, so another one is Kevin Hoffman. He has a meeting design book.

00:07:12

Chris: I bought it too. I bought two books that came together, those two. Well, I'm just fascinated by that. I mean I have a bunch of meetings and the position I'm at in life is that, like it or not, I probably should have some say in how those meetings operate. You know? I'm kind of the boss. I tend to be, in the meetings that I'm in, like it or not, self.

Dave: Yeah.

Chris: If the meeting is bad, there's no one to pass the buck to. I can't point to somebody and be like, "That was a bad meeting. Why was that a bad meeting?" because the only person to point to is myself.

Dave: You know, and I'm thinking about that book and, specifically, with all the Corona, all the meetings are distributed now. There are a lot more just over Skype and stuff like that. I think, in a bad meeting over video or video chat, Slack is very bad. How do you do a good one is kind of my big thing. Happy Cog and Kevin were always very good at that process.

Chris: Yeah.

Dave: I guess they still are. They're still a company, but very good at the process of, like, let's sit around, talk, and extract the good ideas. I'm kind of curious to figure that out.

Chris: I love it too. I'm starting to be opinionated about the Zoom procedure too. One little thing I've been homing in on is that I really think that there should be kind of a Zoom leader on every Zoom call who is kind of like--

Dave: Mm-hmm.

Chris: Who is kind of like ultra-engaged and making sure it's on target and that the people in the meeting are appropriately engaged. I think it's really easy to check out on them. I don't know. Sometimes, when there is no leader, the thing just kind of falls apart. They take longer and there are weird chunks of silence that's like, "Who is going to kind of shepherd this along to the next session?" "Well, I don't know. It's nobody's meeting, so we'll just see what happens." I don't know.

Dave: Yeah. Groove Dog is not a good business strategy.

[Laughter]

Dave: Historically, Groove Dogs are not known for their business acumen, so it's kind of a hard -- it's very hard in Zoom land.

Chris: Yeah.

Dave: To let the spirit guide you, man.

Chris: Right.

Dave: We'll just get to it. We'll just Groove Dog it out and figure out what's going on. [Laughter] It doesn't work.

Chris: I got some of it from some techie things I've been in, but more so from my banjo class that I still do over Zoom where there's clearly a leader. There are even breakout rooms. Have you seen that in Zoom?

Dave: Oh, no.

Chris: It's kind of a cool concept. It's like you can have a little -- like if there are a lot of people on a call, the owner of the call can make a breakout room that's open and they assign people to it. In this case, there's a breakout room for guitar, fiddle, banjo, and stuff. We all start together. Then people bust out to their breakout room by instrument and do stuff there. Then come back to the main room.

That's probably not useful in a tiny little company call, but it's good to know that Zoom has that feature, like little mini-conferences within a conference call kind of thing. You can bust out and do a breakout room without leaving the parent call.

Chris: That's cool. I've seen that on some of these online conferences I've attended, like a JAMstack kind of conference online. I forget the name of the software they used, but they had little sessions, hallway sessions they call them, you know, where you could kind of just go and talk about whatever niche JAMstack you wanted.

Chris: Mm-hmm.

Dave: I think that's kind of critical too, especially if your company is kind of just online all day or whatever. You know?

Chris: Yeah. Yeah. Well, this other thing--

Dave: Discord has--

Chris: Oh, gosh. Hold on.

Dave: --a good setup for that.

Chris: We've got to get to the Discord thing.

Dave: Okay.

00:11:20

Chris: Oh, gosh. Now I've lost it. We might as well talk about Discord now. I have this, like, shame in that we have -- we used to -- pre-pandemic, we had a nice little JavaScript going here in Bend, Oregon, BendJS. I don't think it's dead. It's just that, like, it's a little hard to keep momentum of that stuff in the pandemic.

Dave: Oh, yeah.

Chris: It was an in-person meetup group.

Dave: The meetups are a fragile--

Chris: Yeah.

Dave: In-person meet-ups are fragile anyway.

Chris: Right, and I'm terrible, but I'm like, if we're going to do this thing over Zoom, I'm kind of not interested. I hate to say that, but I'm on Zoom all the time. I get the Zoom fatigue thing too, actually.

That's the thing I was thinking of is that I think, in a lot of calls, encouraging a more camera off thing is okay. I know some people get stressed having the camera on them. I think, whether you know it or not, there's a little extra stress for a call when you have the camera on, and I don't care.

Sometimes I care, but for the person I'm having the third call with today, just turn it off. Really, it doesn't matter to me if it's on. If it reduces your stress, I want you to have it off because then you can focus better. I don't know. Anyway, so there's that.

Dave: I could talk about that too.

Chris: [Laughter]

Dave: I had a meeting and it was like, you know, one person was like, you know, "I'm feeling a lack of connection," which is totally fine. One of the solutions was maybe we can turn on video cameras. But then I'm like, "No!" [Laughter] Just purely from my bitter spirit of, like, most of the times--

Chris: So, most of your calls are video off?

Dave: Video off, yeah. We started that at Paravel. We're remote for 10, 12 years, 13 years now.

Chris: Yeah.

Dave: And so, we've just kind of been partly for bandwidth reasons in the early days, but just more so, you know, we know what each other look like and so that's part of it. But, like, we don't depend on that, per se. It's a little weird now to have that, but I like that hybrid thing, like when everyone is filling in, you do video on.

Chris: Yeah.

Dave: Then you kind of say, like, "Okay, we're going to get started." Again, back to meeting design. "We're going to get started. Everyone, turn off your camera and we'll save bandwidth. Let's go."

Chris: Yeah. Eliminate some World Wide Web waste - whatever.

Dave: Even just like, "Okay, cool. We saw everybody. Let's focus on the one person sharing their screen," or something like that.

Chris: Yeah. Yeah.

Dave: Let's all have a filter in the meeting room thing, but then when we get there, now we're looking at one screen.

00:13:53

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Jetpack, the WordPress plugin that brings all kinds of power to your WordPress site.

You know I had a meeting with somebody this morning. I was kind of helping them out with their site. I didn't even know what kind of site it was. It happened to be a WordPress site. They are an entrepreneur. They have installed a ton of plugins on this site. Basically, so they could build the site with a ton of control without ever touching the code, which is a possible thing in WordPress. They picked a nice looking theme that was based on Genesis and then they added Advanced Custom Fields to it. Then they had Elementor on top of that, which is like a drag and drop page builder thing. There is a lot going on in there.

I was kind of auditing their plugins. Largely, it was kind of fine, like the end result, and they were super effective and did all the stuff they wanted to do. As much as I was like, "Wow, there's a lot going on in here," it did the trick, right? Jetpack was not in there, but I noticed a bunch of things, okay? One of them was, they had, like, 11 of them that needed an update.

I'm like, "You know what? You can update these plugins. It's fine. It's all good, so update the plugins." But, even easier, why don't you install Jetpack, turn on auto-updates for them, and just have it do it for you. Just one less thing that you have to worry about.

Two is, I looked at some of their stuff coming in from their contact form and it was full of spam and stuff. we were looking at that, but it got me nervous about security. I was like, "You know what? If we had Jetpack on there too, we can up the security level of the site and that will feel good."

Another one was, I was asking about backups. She's like, "Well, one time I did lose everything and I had to call my host crying and deal with that." I was like, "Holy cow. That's bad. Let's get backups going," so we can have Jetpack do that as well.

Then as we were going through some of her other technical stuff she wanted to do, she thought that the images were too big and too heavy on her site. I'm like, yet another thing that I really wish you didn't have to worry about that technology could just deal with for you. Of course, Jetpack has this previously called Photons. It's basically a CDN for your images. It serves them in the right format and optimized and all that. It's got that too. These are all things you just install and you just flip on - flip, flip, flip, flip, flip, flip, flip.

It just solved a ton of issues, like, immediately, you know. She had this opinion that, like, oh, Jetpack adds this bloat. I'm like, it's exactly the opposite. It's taking away a bunch of bloat from you. Anyway, it was a good use case for Jetpack, so I thought I'd share that.

[Banjo music stops]

00:16:37

Dave: But anyway, Discord.

Chris: Well, yeah. The reason I had brought up BendJS is because, originally, when we kind of like were kicking this thing off and kind of reevaluating -- you know the group existed for a while and it already had a Discord. I never used Discord. I didn't at the time.

I was like, uh -- I hate to be a whiner but, like, I don't like this as much and all of my stuff, especially stuff that has anything to do with work is already all in Slack and I like Slack and I think it has good UI for this kind of stuff. I know my own behavior and that I'm not going to have an extra app open all day long because of a very low volume, single meetup group that happens to be in Discord.

I think I influenced it toward Slack. Now, the group has moved to Slack. I think it was a positive move. But I think to myself back then and I was -- [Laughter] I shouldn't have done that, probably. I don't know. All I did was vote. It's not like I forced it down anybody's throat. Now, all of a sudden, I'm playing my video game. I have a little -- Chris's MUD update, by the way, which I think is kind of fun.

Dave: Oh, okay.

Chris: I'm still playing this game. I think it's so dang fun. But anyway, it's got a Discord. Then I'm involved. You know once you're in one video -- because Discord is like chat for video games, but not really. Right? Like it started there and I think that's a big market but, really, it's just like Slack. It's just a chat client.

Dave: Yeah, it was kind of like a hangout, like a voice app for gaming like with your little squad. Me and the boys or me and the girls but be in the same chatroom. Is it compared to, like, people would use Skype or something before but that was just kind of bad. So, like, they started Discord, but now it's kind of grown. It's still kind of gamer-y, but I don't know. It has this concept of a server, which is like a Slack room.

Chris: Kind of. Yeah.

Dave: A Slack instance. Then in the servers, you have channels. But then you have these special audio channels or video channels, like streaming channels.

Chris: Yeah, they're literally called Voice Channels. Right.

Dave: Voice channels, so everyone can hop into a voice channel for--whatever--a Monday standup and hop in. Everyone hops in Monday's standup and you're talking instantly. It's kind of -- it's different. It's not like you join a call. It's like you join a channel and that's how you join a call.

Chris: Right. Right. Right.

Dave: Which is pretty cool.

Chris: But I'd say, in the grand scheme of things, it's not that different than Slack.

Dave: One percent different.

Chris: Yeah, it's really pretty similar, and I like it. I like the UI. I think it's just super well-done. It's fast. It's just good. Now, I'm on it because of video games and, like, an odd Patreon here and there. Now I'm kind of like, oh, I almost wish more stuff was on my Discord now. So, maybe we'll have to do a ShopTalk one at some point.

Dave: ShopTalk Discord. We could. The Patreon thing is very cool because it can integrate, you know. If you're, like, community-supported, which we're not, we're ad-supported, maybe we could go community-supported. You pay $5 a month. You get into a special tier and that gets you access to certain channels like gated content, basically. Kind of the dream, like, you know, oh, you want to be a--whatever--platinum member? Cool. You get the Chris and Dave channel. It costs $100 a month or something.

Chris: [Laughter]

Dave: I don't know. I'm just throwing numbers out here.

Chris: Yeah, that's a real thing, though.

Dave: Like, we'll hang out with you in a channel for $100 a month. [Laughter] That sounds terrible.

Chris: Yeah.

Dave: But that's my own un-comfortability. If you do that, that's cool. If you pay for that, that's cool. It's my own un-comfortability there. But I have -- yeah, I have a few.

Chris: Well, we could figure out a way that's more comfortable, probably.

Dave: Yeah.

Chris: I mean we're not committing to anything right now on the show, but I'm just saying I'm into it. So, there's a guy who's really good. He knows a lot about training in this video game. It's a big deal part of this, right? As you level up in the game, you need to make decisions about how you're going to train. It's kind of not trivial to screw it up. It's possible to fix it, but it can take a long time or it can cost money because you literally have to buy a retraining if you screw it up, kind of thing.

Dave: Oh, wow.

Chris: But anyway, he just happens to know and he's a nice guy, so you join his Patreon. He's got his own server. I'm literally paying the guy $20 a month just to be in the Discord because I might have questions about training. Then he has -- it's not, like, forced, like he must answer those questions, but I think he gets a kick out of it anyway, so you generally get the answers you're looking for out of the Discord. I think that's cool.

Dave: Well, in some ways, that's like a guitar lesson. You're paying $5 a week for a guitar lesson, like having access to a guitar teacher or something. It just seems -- that economy seems so very cool to me.

Chris: Yeah.

Dave: Just like, hey, hop in here. We'll help you. This is what I talk about. If you like that, pay money and that helps me talk about it more, and so that's cool. Yeah.

Chris: So, now I'm all onto Discord. [Laughter]

Dave: Now you're into Discord, man. Well--

Chris: Yeah. Yeah.

Dave: Well, shoot. [Laughter]

Chris: Yeah. [Laughter]

Dave: It's good. I know the Vue core team uses it, like quite a few.

Chris: Yeah, right, right.

Dave: Open source projects are pivoting over to it.

Chris: Yeah, everything about it is cool, pretty much. Okay, so I'm playing the game. I know nobody cares, so I'm going to try to relate this to tech as much as I can. This is a tech story anyway.

Dave: Are you kidding? This is the hottest topic on the podcast.

[Laughter]

00:22:26

Dave: This era will be known as Chris Goes Ruby MUD.

Chris: [Laughter] Yeah! Well, it's just really fun, still. Anyway, so the game connects over, like, HTTP. You know, like it's just tech space, so there's just information streaming over networks. Remember, I mentioned, like, oh, my god. I would love to make an app for this because the clients that exist for it now are just gnarly. They're just old. They look stupid and gross. You know they just have some momentum because they're old and they're kind of company supported. But there have been plenty of open-source movements to make cooler ones.

I think I mentioned that Ruby-based one that turns your terminal into a client or whatever. That's pretty neat and stuff. But I was like, oh, maybe I'll do it in some other way where I can leverage my existing skills a little better because I'm kind of a CSS guy. Wouldn't it be cool to make a Web one?

Dave: Mm-hmm.

Chris: But then I was like, oh, maybe I'll try Flutter because it's so cross-platform. Anyway, I'm just thinking more and more about it. What I do is I just mind map it all. I write down all my thoughts, like, what would a good client be? What do these other clients do that are their strengths and weaknesses, yadda-yadda? I'm a little too into it.

Then I'm looking around and starting to ask people. I'm like, what's the appetite for this, amongst the player base? Are people hungry for another client? If I could show you what a cool client could be, would you be into it? It's mediocre in that respect, but there is enough interest that I was like, oh, maybe. That led me to find another guy.

Dave: Whoa!

Chris: It happened to be a guy--it could be anybody--who already kind of was working on it. Then I know this other guy, too, who was into the command-line stuff. He's a Mac guy, so we talk once in a while because most people that play this game aren't Mac people for whatever reason, you know. I think the Windows client traditionally was so much better that we got that going. He had already kicked off making an app and he chose for it Electron to do it.

Dave: Okay.

Chris: Which I thought was an interesting choice. I've never made an Electron app, but I'm aware of it because it's a way to basically wrap your Web app. You just use HTML, CSS, and JavaScript. Then you get a native app out of it.

It's still a hybrid app. It's still an app that you double click on your Windows machine, your Mac machine, or your Linux machine. It opens up and it looks like an app but the guts of it is just a Web view. It's literally divs and CSS and stuff. That's different from, obviously, a native app. But even Flutter, it compiles to native-native. There are no divs in there.

Dave: Right.

00:25:04

Chris: Electron is still that and Electron gets crapped on a lot. Do you remember why exactly? I think some of it is, well, it doesn't look like a native button because it's not a native button.

Dave: Yeah. You know Apple snobs, John Grubbers of the world, feel like it's not native. There are some performance things. It's a Chrome shell, basically. It's an instance of Chrome that is memory intensive. With all the problems that Chrome has from eating memory, now you have basically a sandbox environment where, I guess, it's in its own instance but you can do terrible stuff with JavaScript inside. [Laughter] I think that's it. You can do terrible stuff with JavaScript and make a bad performing Web app. Anyone can do that.

Chris: Yeah. Yeah, you can. You know there are some memory issues. Right.

Dave: We have Slack and Teams and VS Code and all of those are -- and Notion. All those are basically electron apps, right? I mean they're all kind of Web apps, I think, under the hood. All of those, you're using your computer. Your fans just start spinning up. My coworkers are on, like, five-year-old iMacs and they're looking to replace those because they're just like, "Man, I can't even do my job without my computer screaming at me?"

Chris: Yeah, so it's a thing. But you still have some control over it. I don't know. I think Slack is famously in it. I don't know. Maybe they've rewritten since then but, to some degree, the UI consistency of it is a good thing, to me. If you're not doing anything particularly intense, it seems like an extra good choice. I'm kind of hot on Electron at the moment. I'm like, this is cool. It's my first project I've hopped to in Electron and I'm like, this is highly efficient, or at least it's a good choice for what we're doing with it, I think.

Dave: Yeah. I think it's great and it keeps you in your wheelhouse, you know.

Chris: Oh, god. Big time. Especially -- so, he's a Linux guy and he made this choice, so now he's on Linux and I'm on Mac and it's irrelevant. It's the same UI where it's the same deal. I'm picking up -- and so I'm now, like -- this concept was to kind of make it more like a VS Code-like experience for this game where it's highly command-line driven. The game is command-line driven anyway, so why not make the command-line have extra commands in it for changing themes, doing macros, and highlighting particular lines of text. It's all these commands that are additional to it.

I'm like, this has really come along a far way. I'm adding in features to it and I'm making themes that are really cool-looking and all this. It really is in the wheelhouse because the JavaScript -- it uses this project called Electron Forge, which deals with the Babblization or whatever of the JavaScript. There's just little stuff to do. We don't have hot modular reloading yet, but it's an open ticket. Somebody will just get to it and fix it, so you can play the game while you're working on the game, which is really fun to me, without it refreshing on you. It's beautiful.

Dave: Yeah.

Chris: Really, all of a sudden, I go from, "Uh, how am I possibly going to do this?" to having a pretty much working version of this. Now we're many, many weeks of development into it looking at a release candidate early. I'm so excited about it. It's so cool.

Dave: Wow.

00:28:45

Chris: It uses some technology, not only Electron but, for the rendering engine, it uses Mithril. That was a choice that he had--

Dave: Mithril?

Chris: Have you ever--?

Dave: I have no idea what that does.

Chris: I think it's like -- I'm trying to get a sense of how maintained it is anymore but it looks kind of good. It looks kind of like you're writing React but you don't use JSX. You have to define the components in another way. Here's the API, for everybody listening.

Dave: Okay.

Chris: It's M(), essentially. Now, there are other APIs, but the main one he uses is M, you know, for Mithril. Then you give it div.dave and that makes -- that will create a div of class Dave. You use querySelectorAll type selectors to create the element.

Then the second thing that you pass it is attributes, like an object of attributes. Then the last thing is some text. Then you can optionally -- you know, these are all optional, I think, except for like the first one. Then you pass it an array of children, so there are a lot of M() open stuff happening. There's like M, M, M, M, M, all over instead of JSX.

Dave: Mm-hmm.

Chris: But I think it has this really strict API and it's like React in that if you change any data, it just re-renders as minimal amount of the UI as possible. The whole point of it is it's really small and it does state-based re-rendering for high-efficiency UIs.

Dave: Okay. Okay.

Chris: But I wonder if it was before React. I don't have a good sense of, like, where this sits in the--

Dave: The chronology.

Chris: I think it does compare itself to React, Vue, and Angular. It has better benchmarks. I think the point of it is, like, super high-performance nerds, but is that still true? I don't know.

Dave: Well, hey, what's most important is the name is correct. You know what I mean? Mithril is the one you want for your D&D MUD, you know?

Chris: Oh, I know. Mithril is a magical metal in the game, too. It's like the lowest level magical metal, which I think is rad. But it's weird.

Dave: That's….

Chris: It's weird to write a bunch of JavaScript with a framework you've never used before and it just does nothing but the UI layer for it. You even got to kind of re-render sometimes yourself. It's just funny for me to--you know -- I don't know--playing with it. I'd be interested in getting JSX going for it, though, because JSX is not specific to React, necessarily. It's just a syntax that then can have a thing that ports it to whatever framework style of writing.

Dave: Mm-hmm.

Chris: I haven't got that going yet either, but I was like, can we get Sass going here? I think there's enough value that Sass would be useful and then I'm designing themes for it, but the themes are highly -- like we're morphing the themes to be CSS custom property driven because I think that makes good sense when you say, "Hey, you can theme this UI. Just change these variables," is a more palatable way to theme. Do you think that's--? What do you think about that? If you said, "Hey, here's an app and you can theme it," do you want--? We're giving you CSS control. Do you want to just be on your own and just do whatever you want or do you like the idea of having custom property hooks for lots of stuff?

00:32:17

Dave: Yeah, like the app design standpoint. Yeah, I mean this is confusing. I have mixed emotions here. You have something like Bootstrap. Have you ever used Bootstrap lately? You open the variables.scss.

Chris: Right.

Dave: There are a thousand, literally a thousand global variables.

Chris: Mm-hmm.

Dave: It's like, "Hey, you can change all these." It's like, I don't want to. This is too many. I just want colors or whatever to change it.

Chris: Yeah, it could be overdone. Right.

Dave: Those are at the top so, yeah, it can be overdone and I think it builds sort of technical debt too, you know. You just allow all this configuration.

On my site, what I've done, experiments with theming. You're like, "Oh, I'll just do primary, secondary, and button color," or whatever, you know, "and that'll solve it." And it never does. Every single thing needs a little bit different, like your button color didn't work as your border color in this situation, or something like that, or your link color or something. There are times where it just doesn't work, so that's where it's tough. But with maybe a dozen properties or a few dozen properties, you could kind of come up with something good, though.

Chris: That's my thinking is that, at 100, I think, is too far, and it's not worth doing if there are only 3, so there's probably a hot spot of configurable variables that feels right.

Dave: Yeah.

Chris: Yeah, it's tricky. A thousand is obviously too many. Come on.

Dave: It's just out of control. Some of that, I'd like it to just move to the component level because, when you're working on the tabs, you just want all the tab stuff there. But, you know, I think you could do pretty good work with a few and I like how VS Code does it. I don't know if you're going full into the VS Code analogy, but just JSON is kind of cool. The new Windows terminal app, you skin it all through JSON and it's pretty cool. You can specify all your colors through JSON.

Chris: Yeah.

Dave: That's kind of powerful, you know.

Chris: Yeah.

Dave: It maybe not the UI that people want but you could build a little one-pager that generates the JSON.

Chris: I think where I want to go with this, too, is to have maybe have a little bit more than you'd use. Every time I declare a variable is to have the fallback there too, if not multiple fallbacks. Do the chaining thing a little bit.

Dave: Mm-hmm. Mm-hmm.

Chris: Instead of just giving you a new theme, having it have all the variables at the top, have more like documentation of what the variables are, and then kind of leave it to you to choose which ones you want to set because you don't have to set any. In fact, a theme where you set main color to red instead of green should be a dramatic change. Now you have a red theme instead and you've set one variable and it's made smart choices for you based on that one variable. But there are 50 things you could set if you wanted to. Like there's a border between the different areas of the UI. You could set border width to one and now they're really thin borders, or border with the three and now they're thick borders between, or you could set nothing at all and it'll default to two pixels or something. You don't have to do anything. But if you want to, you kind of have the hook. I think that's kind of an interesting idea.

Dave: Yeah, it's tough to add theming to stuff. I mean people -- it's tough because you can -- it's a poison. It's like the ultimate, like, hey, you can customize this but then it's the ultimate technical debt because, hey, now you have to support all these customizations.

Chris: I had a dream, early, when I was fantasizing about this. I opened up Figma and I designed with Figma what I thought the perfect client would be like without knowing the codebase or anything. This is before that.

Then I get my hands on this. The first thing I do is build that theme by forcing the existing HTML and CSS and stuff that was there and having my CSS override it all from my theme. I got it done and it was so cool. I'm like, "Look at how cool this is?" Then I get more involved in the project and I'm like, "Well, we need to reevaluate this. We need to change this up. We're going to have this bar over here." Now we're changing the HTML and I'm trying not to be like, "Well, that's going to mess up my theme. You can't do that."

Dave: Right.

Chris: You need to make changes that are based on the good of the project and then the theme follows along. Little by little, I've been whittling away my theme such that it doesn't do as much custom stuff, that it just kind of sucks in the variables and does as little as possible. I was thinking a project like this with themes, ideally very little dramatic overrides of what it's doing. If it is overriding something, it's doing it in kind of like a blessed way.

Dave: Mm-hmm.

Chris: It's like, "We expect themes to take charge of this if it wants to." Anyway.

Dave: Yeah. It might be worth looking at how VS Code does it.

Chris: Yeah.

Dave: With their workbench.foo sort of stuff, you know.

Chris: They do everything right. I'm so jealous. It's such a good project.

Dave: Lots of brains there.

Chris: [Laughter]

00:37:57

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Yay! Netlify is the best!

You know a lot of people use Netlify for free? You know there's like an unlimited number of sites you can put on there and the traffic and build minutes and stuff they give you is pretty good, especially for our personal site like mine. It's not that highly trafficked. It'll just be fine on the free plan.

But there's all kinds of stuff that makes sense to pay for Netlify for. For me, always a key moment there was when you need to invite somebody else onto the team, have a team membership kind of thing of Netlify - invite multiple people on there. The pricing for that was a pretty big jump and they just announced, just recently, that it's dropped a ton, which is like, yay! Another high five for Netlify. It's down less than half, I think, to $19 per member for that. All of a sudden, then you get three concurrent builds instead of one and you get 4X the bandwidth and three times the build minutes. All kinds of stuff jump way up as soon as you have Pro. Then, of course, there's another team member, too, working with you there, so they have the same level of access to all that Netlify stuff that you do.

It just got a lot cheaper, if you need the Pro stuff. I have a bunch of Pro plans on Netlify because they're awesome and I just like the whole feature set that they offer. [Laughter] It's tempting to just launch into the whole feature set, but we don't have time for that now. If you need that, listen to the previous shows or just go to their website, which is a beautiful website and explains beautifully everything that they do.

It is the modern Web for modern Web builders like us. That's for sure. Thanks so much, Netlify. Bye-bye.

[Banjo music stops]

Chris: All right. What should we do now?

Dave: Have you seen these new Windows devices with the fold-y screens in the middle?

Chris: Ooh!

Dave: With the little seam in the middle?

Chris: I don't know about the seam.

Dave: The other day, I downloaded -- yeah, well, so, there are foldables where you open it and there's one LED, OLED screen that kind of fills the gap, you know, but Microsoft announced these new devices where there's a gap in the middle of the page, kind of like a seam, basically. It's actually two panels that are sandwiched together that form kind of one device. The idea there is you can flip one over and just use it like a newspaper.

Chris: Yeah.

Dave: Flip it on its side and you have two screens. Anyway, I am interested in these purely -- somewhat of the PC fanboy stuff, but then also I bought an iPad Pro last year and it's good but it's not great, is sort of like my feelings. The device is very charming, sleek, and good hand feel, but it's kind of heavy, and typing still is bad, so I'm sort of on the lookout for a solution there. But I'm interested in these kind of dual-screen thingies.

Chris: Yeah?

Dave: I have no idea, but anyway, so Microsoft has proposed two new CSS features to help with these, and there's the CSS spanning media query, so you can say @media(spanning: and then they're like three options: single fold horizontal, single fold vertical, like the line goes vertical. The fold is vertical or the fold is horizontal. Then the default is none. You can write a media query that responds to these, like, basically does -- is there a fold in the middle of the screen?

Chris: Yeah. Right.

Dave: It's weird but very cool. Then they have some environment variables now that kind of help that are basically the width of the gap in the device and stuff like that, the visual width.

Chris: I think you have to do that. I would be mad because I remember thinking about this before. I remember we had an episode where I had a dream about foldables. It was weird.

Dave: Oh, really? Okay.

[Laughter]

Dave: I don't remember that.

Chris: I think we talked to Jen about it and I was like, isn't it weird that the CSS people are working on multiple panel media queries when, where is our container queries kind of thing? She made this good point that's like, these aren't the same people. That's not how priorities work. These things need to get done too. In fact, it's very responsible of a company to not just roll out new hardware and not have thought about the CSS implications of it. The fact that these things exist and even have polyfills before the hardware is even in people's hands is actually pretty cool. [Laughter]

Dave: Yeah. No, it's kind of miraculous. I'm using a Windows emulator right now to pull up my site.

Chris: Yeah.

Dave: Actually, my site looks terrible on it because I have a seven-column grid and that doesn't split over two screens very well. My content column is in the middle of the screen. It's kind of messed up. I think there are a lot of, like, oh -- at least in my brain, I think Windows has to figure out how this is going to work, or the Surface team, because not everything really works in a double-screen mode.

But I do have that drawing app I made, Prompts. It's like an Inktober-y kind of drawing app. It's on a subdomain, prompts.daverupert.com.

Chris: Mm-hmm.

Dave: I went through and I made that work on dual-screens, so it's now a full dual-screen app and it's kind of cool. It's just sort of like -- I mean it was very simple, like ten lines of CSS or something. But it now works on two screens. It's a PWA, so there you go. I made it work and what's cool is, if you have CSS Grid working underneath the hood, all it is, is slide of hand. You just make a grid basically look -- you have Grid but then the gap in your grid just happens to line up with the gap of the device. That's all you do.

Chris: I love that. Yep. Exactly. That's CSS finally coming together. Oh, it feels good, doesn't it, when these features actually fuel each other in a good way?

Dave: Yeah. Then, of course, you want container queries because now I don't care about the viewport. I care about which viewport. I only care about the parent size. I don't care about the whole viewport size because the whole viewport size has a big seam in the middle. I don't care about that. I only care about the parent context, so hopefully, it's some fuel to get container queries shipped eventually.

Chris: Yeah. Yeah.

Dave: Anyway.

Chris: I don't know what to say about that. That's such a fascinating saga to follow. At least for once, the browsers are like, "We know, but shh."

Dave: [Laughter] Yeah. Yes.

Chris: At least we acknowledge it, you know, the desired need for this kind of thing. I'm still confident that it'll happen, but there was one little moment of hope where that was the syntax where, on a per property basis, you can kind of change the value of it. That kind of got a little further because the implementer people saw it and were like, "Yeah, that looks doable," which was a very kind of positive thing, but maybe not as cool as what we want because what's nice to set is a whole block of properties based on a particular breakpoint, not just one. But oh well. We can polyfill that away. That seems possible. But then the vibe at the time was like, "Just wait. This is one possibility and there's another one coming from David Beren. Just wait and see that and then we'll kind of compare and address." I don't think we ever got that second one to look at.

Dave: Not officially. I think it was leaked or semi-leaked from--whatever--the annals--

[Laughter]

Dave: The dark Web of GitHub issues, or whatever.

Chris: Yeah. It's probably a Discord. [Laughter]

Dave: I don't think it's out-out. It's on a Discord or whatever - discourse. That's what they use over at the Web incubator community.

Chris: Oh, do they? Interesting.

Dave: The forum software. Anyway, so I'm experimenting with this. I'll have a post here actually today, so it's kind of just dumb fun, but it's -- yeah, I don't know. Two-part post: One part is going to be just making my little app, you know, writing 11 lines of code. Then the next post is going to just be all big thoughts about this whole dual-screen stuff.

Chris: Yeah. It depends on how big it is. Let's say it's a long-form article. Could you put the table of contents over there? Does that make sense? Is it like that's too much space for something like that or what?

Dave: Yeah, that would be cool, or you pull up cnn.com. They put that big masthead ad at the top. You know what I mean?

Chris: Mm-hmm.

Dave: Have you been to -- maybe you have an ad blocker so you're fine. But it's like Polygon Verge does this too. It's like 800 pixels of thing and then you scroll and the screen jitters and the video disappears to the bottom. It's just a cluster mess of problems. But I'm just like, if you had a dual-screen, sure, make one page an ad and then make the other side the content. I don't care. I don't care about--

Chris: Yeah.

Dave: If the whole point is to get an eyeball, just chuck it on that whole screen and make the rest of the page work fine. That's all I care about.

Chris: If it's a podcast app, we could put the podcast player on one side and the time jump links and then the content on the other side.

Dave: Yeah!

Chris: That'd be cool.

Dave: And the content on the other side. There are lots of just stuff you could do. It adds a whole new dimension of how you might split your information hierarchy.

The one bummer is they're equal. You know they're equal hierarchies, like the same size screen. You have to think about that too, you know. How do you make something two-screen, or how do you have hierarchy when--?

Chris: Yeah, that's what I meant about the table of contents. Is that too little for one side?

Dave: Yeah, it might be, but it also might be perfect for navigating. You know what I mean? Where am I? how long is this post? But I'm scrolling and that keeps highlighting, so I feel pretty good, you know. That might be cool, so I don't know. That's something I'm experimenting with.

Chris: Nice. Yeah, yeah, yeah. Grid is great for it. They're a match made in heaven. Speaking of Grid, Code Swanson writes in here, "What's the deal with Masonry layout and pure CSS Grid? Is it possible or does it require calculating with JavaScript or do you need class names from the server-side to really do it right or what?"

He's looking at Unsplash and trying to figure out their Masonry layout. Masonry does often look nice with grids of photos, doesn't it? The staggered, different dimensions of photos kind of look cool that way.

Dave: Yeah. You need good graphics because it has to be scannable, right? If you do text, text-heavy stuff, your eyeballs are going all over the place and it's probably going to be exhausting. But yeah, with good images, I think it'd be great.

What I know right now, you can use David DeSandro's awesome Masonry plugins.

Chris: Yeah, and he's got three of them, so careful, you know. There's like the new one and then the old one and then the old powerful one.

Dave: He's good at JavaScript and stuff, so definitely I would outsource that. Don't roll your own, per se. [Laughter] You know what I mean? You could, in theory, do it but I probably wouldn't roll your own. I would just use David's.

But there are sort of like two futures here. There was a proof of concept in Houdini. I don't know if you saw that. It's like 50 lines of JavaScript in Houdini code, which CSS Houdini is like the ability to control the layout of CSS and they basically recreated Masonry in, like, 50 lines of JavaScript that comes down with your code. You may get a little bit of a flash of un-Masonry content, you know, just because all that stuff runs later, but that would be how I would approach it. But then just before she left Firefox, I think Jen Simmons was working on Display Masonry. They had a proof of concept of Masonry in CSS.

Chris: I think it was Display Grid. It was Display Grid and then Grid template columns Masonry or something like that.

Dave: Okay. Okay.

Chris: The Masonry keyword was applied to a Grid layout, which was interesting. Then there was some negative sentiment towards it, like even Rachel Andrew was kind of like, "Um, I think that's a weird mixing of concepts. That's fine that it exists, but it probably shouldn't be mingled with Grid."

Dave: Right. I think there are accessibility problems too, which would be my only pushback for why it maybe shouldn't show up in CSS itself.

Chris: Right.

Dave: I feel like that should be opt-in -- [Laughter] opt-in bad accessibility.

Chris: Let me go on my rant for two seconds with this.

Dave: Sure.

Chris: Because accessibility is part of it. When you think Masonry, what you often are thinking of is ragged bottoms, not ragged middle edges. Ragged bottoms are the hard part. What I mean by that is that there is no horizontal slices through your content. There are vertical slices through your content. Hopefully, you can picture that. That makes it harder.

I want to point that out because if you're okay with different widths all equaling perfectly the same width rows and having no vertical slides down your code, it also looks like a brick wall and I'd argue it looks more like a brick wall because brick walls are staggered horizontally. Picture a brick wall. There are horizontal lines you can run your finger down but no vertical lines, right? they're staggered in that way. That's a lot easier to do.

If you like that look, and that would be okay for your photo gallery or whatever, which I would argue is probably fine, you can do that with Flexbox. In fact, look at the Tim Van Damme post on CSS-Tricks. It covers how to do that really, really nice with just a couple of lines of CSS. That's a great approach.

Let's say you're like, "No, no. I want the ragged bottoms instead." That's the more traditional Masonry look and that's what's so hard to do. That's a lot harder to pull off.

Then you've got to ask yourself, "Do I care about source order?" because if you don't really care about source order, then you can use CSS columns, which is also just a handful of lines of CSS and very easy to do. That would mean, though, that if you're in a normal RTL kind of layout that on the upper left is number one and then below it is number two. Then below that is number three. Then there's a column break, so maybe, in column number two, all of a sudden you're at five or six.

Now, the tabbing order of this thing goes up and down and then over a column and then up and down and over. Maybe that doesn't matter. Maybe that's fine.

Dave: Mm-hmm.

Chris: What Masonry tries to solve, though, is ragged bottoms, the hard one, but with a loosely left to right source order still. You want the ragged bottoms but you want one, two, three across, left to right. Then when it breaks, what's the next number? Well, it just feels logically like it should be. It's the next tallest one up the stack.

As you go down, it just starts to get a little funky. If you want left to right tabbing in a ragged bottom Masonry layout, it's going to be weird. There's no perfect way to handle left to right with staggered blocks. But it attempts to do it.

Dave: Mm-hmm.

Chris: All these things, even the Houdini one that Dave mentioned, it's still going to be a little weird, tabbing wise. It's going to try to generally get left to right, but the ragged bottoms just ruin it.

Dave: Yeah.

Chris: There's no perfect way to do it anyway, so I'm just saying--I don't know--look at the options. If you say, just Masonry, it doesn't just have one meaning. It could be ragged bottom, ragged left, ragged right.

Dave: Yeah.

Chris: There's only one hard one, which is the ragged bottom with LTR source order. If you absolutely need that, then you're in the JavaScript weirdness territory of trying to find a solution to it. There are some interesting CSS Grid-based ones. If you Google CSS Masonry Layout, you probably will find an article on CSS-Tricks and there is one in there that has a couple of that hard combo I've mentioned ideas. One of them is it lays them out with rows with arbitrary heights and then uses -- it calculates what kind of negative margin each one needs to suck it back up from the row that it's currently on to make it look like it has a ragged bottom. It's pretty clever, you know. It is lighter weight than using a full flown David DeSandro library is. You could look at something like that.

What's cool about David DeSandro is it's got the resizing built-in, so you resize and they'll magically float to their new location and all that fancy stuff that a little lightweight solution won't have. But, you know, it does a pretty good job. I'd say the last demo on that page does a pretty good job with Masonry. Actually, I don't know. A whole bunch of them do, really, so it's worth checking out.

Dave: I was going to say, if you have a fixed number of photos, I mean it depends on your photo site. If you have a fixed number of photos, I would just do the CSS columns one because it gets the effect pretty cheaply. If you have infinite, it might get kind of wild.

Chris: That's a good point. Yeah.

Dave: You know, infinite scroll-wise. But that's just me, but I think, too, you could do some really cool stuff with Grid and Object Fit, like CSS Grid because you could almost JavaScript randomize, let's say, a 12-column grid. The cells could either be spanning 2, spanning 3, or spanning 4. You just kind of like mess with that and do CSS Grid. Maybe people have to click through to see the whole photo because they would anyway in a Masonry thing.

Chris: Mm-hmm.

Dave: There are a lot of cool tools you can experiment with and mainly Grid and Object Fit. You can make some pretty cool stuff if you were to work with that.

Chris: Yeah. Yeah. Yeah. Yeah. Yeah. I like that thinking. I'm just going to say it one more time because if you care about this and are listening to this, there are a lot of Masonry-looking things, choices that aren't easy to pull off, and only a couple of lines of code and not a big deal. There's only one combination of Masonry that's hard, which is the ragged bottoms with left to right source order. If you just don't -- I think a lot of Masonry thinking is based around that. There are a lot of reasons why you don't need that, so I don't know. So, don't pin all your thinking about Masonry on the hardest possible one. Consider what the other options are, too. Then only if you need that very hard combination, then look at the libraries.

Dave: Chris, I feel like you just applied all your ceramics degree. [Laughter] You really just masterclass--

Chris: Thank you.

Dave: Like ceramics here.

Chris: Thank you.

Dave: You don't even need it.

Chris: People talk about Masonry as if it's one thing and it's not.

Dave: Yeah.

Chris: All right. All right, well, how much time have we got? None.

Dave: I think we have negative minutes.

[Laughter]

Dave: So, we should power it down. Hey, it's good to be back. We did kind of just a small break, but I think we're back here and kind of, you know, summer travels in Corona times, those are kind of winding down here. Hopefully, we'll settle back into the groove here of the show.

Thank you, always, dear listener, for listening. We appreciate it. Download this in your podcatcher of choice. Star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

If you want to get a new job, go to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you - even in this economy, hopefully.

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

Chris: Nah -- ShopTalkShow.com.