Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about Web design and development. I'm Dave Rupert and with me is Chris Coyier.

Chris Coyier: Hey! Have you ever--?

Dave: Hey.

Chris: Do you ever do the dad thing where you come home with off-brands, like buy Froggie Pebbles?

Dave: The bottom shelf cereal, the bagged cereal?

[Laughter]

Dave: I wish.

Chris: No?

Dave: No.

Chris: Top shelf cereal?

Dave: My wife does the shopping.

Chris: No, neither do I.

Dave: My M.O. is, I guess if you count Trader Joes' stuff, yeah, because what is Trader Joes?

Chris: Oh, my god. It's like Taco Bell where you can just go through the drive-thru and just be like, "Just whatever. Just punch random keys. I don't even care. It's all the same."

Trader Joes is the same way. You could just go blindfolded through Trader Joes and just pull stuff off the shelves and you'd have a great shopping trip.

Dave: Yeah. You got fake Takis and--

Chris: [Laughter]

Dave: --fake orange chicken. [Laughter]

Chris: Yeah.

Dave: We call it "Panda at home."

Chris: [Laughter]

Dave: "Panda at home" is our--

Chris: Yeah.

Dave: Because my daughter--she's four years old--her favorite restaurant is Panda Express.

Chris: Good taste.

Dave: I think she's there right this minute, actually - literally.

Chris: Oh, wow.

Dave: Yeah.

Chris: Jealous.

Dave: That's my daughter. She's the most decisive person in our whole damn family. [Laughter] "Emi, are you a cat or a shark?" "Cat!" She just knows. She just knows.

Chris: Oh, that's good. Yeah. Ruby, if you give her multiple choices, for a long time, would just, no matter what, pick the last one in the list.

Dave: [Laughter] That's handy.

Chris: You could kind of -- yeah! [Laughter]

Dave: That's apparent. Wow.

Chris: You could tip the scales a little bit in your favor.

Dave: Yeah.

Chris: Yeah, those days are over.

Dave: Do you want to stay at home or go to school?

Chris: [Laughter]

Dave: Go to school.

Chris: Yeah.

Dave: Go to school. Oh, okay.

Chris: That didn't work this morning, but I just brought it up because I had an off-brand Dr. Pepper and I was like, god, these names. They're always evocative of the real brand name but different, so I just thought, you know, blanket new rule. All off-brand Dr. Pepper is Dr. Schleper.

Dave: Dr. Schleper. [Laughter] That's good. Dave Schmupert approved.

Chris: [Laughter]

Dave: Hey, Chris. One thing, can I just say?

Chris: Mm-hmm.

Dave: I've said it to you before, but one thing I love about you is your ability to just hit the publish button.

Chris: [Laughter]

Dave: I love it very much.

Chris: Yeah.

Dave: And it is very exciting whenever it happens.

Chris: Yeah, you wouldn't want to work with me for money because it's a little dangerous sometimes.

Dave: [Laughter]

Chris: I do just do that. I think what Dave is alluding to is, I just hit the publish button not so long ago on the new ShowTalk Show website, you know, knowing that there are absolutely some work still to be done on it.

Dave: Yeah.

Chris: But that's the thing about websites is you can work on them while they're live. As long as it's not broken, who cares? To some degree, you know.

The RSS feed still works. The URLs still work. You can visit the site.

Dave: Yeah.

Chris: Anyway, there's a brand new ShopTalk Show website. Pretty cool.

Dave: You may be on it right this very minute, but we should say a lot of help along the way from Dan Mall, Ophia Smith. Carrie Ryan helped out for a bit but had to kind of peel off. Derek Featherstone has been helping us with some accessibility, which is kind of crucial because it's stuff you don't even think about like with the audio player. There are a few little gotchas here. Then I guess probably the biggest feature of our whole site is all this ASCII text.

[Laughter]

Dave: We have gone back 20, 30 years here and we have a lot of ASCII text. Getting the ARIA hidden in all that stuff, the labeling, and all that right is a little tough, but it so far has just been fun. I don't know. What do you think, Chris?

Chris: Yeah, I mean I credit -- so Ophia was kind of the lead designer on it and Dan did the art direction and, under his super experienced wing, it all kind of happened, which was cool. There was a mockup early on. We should get them on to talk about this, eventually.

Dave: Yeah.

Chris: The site is live, so I feel like we have to talk about it.

One of the mockups was that dark, dark gray to black and green, like an old-school terminal.

Dave: Mm-hmm.

Chris: We were like, "Oh!" It was such a cool look. But then we were like, oh, but forever ShopTalk Show has had an orange glow to it or just straight-up use of orange on it.

It was your idea, Dave, that was like, "Some of those old terminals weren't green. They were orange."

Dave: Yeah. Yeah.

Chris: So, they rolled with that and so it's kind of cool. It's not like we 100% went down that road and the entire layout as if an old terminal can do it. It's just a little bit of a motif, you know.

Dave: Mm-hmm. Mm-hmm.

Chris: There's no text on here that's Times New Roman or Helvetica or Arial or something. It's all either an 8-bit looking font. I think that's even what the name of the font is, isn't it or Unibody 8?

Dave: Unibody 8, yeah.

Chris: Yeah, evoking 8-bit or it's quite literally ASCII text, which, like Dave says, has some challenges to it in that it doesn't exactly read from a screen reader particularly nicely, you know. Dash-dash-dash-space-dash-period.

Dave: Yeah.

Chris: You know that's--

Dave: Derek sent us a video of some ASCII text getting announced and it was like semicolon-semicolon-dash-dash-semicolon-pound sign-pound-sign. It was just like, whoops. Sorry.

Chris: It's not like we didn't think of that, though. We knew that going in. The second you see a design like that, you're like, "Oh, well, we're going to have to deal with that."

It's really not that hard. Wrapping around it needs to be an ARIA label, essentially.

Yeah. We had to figure out how to just get things to wrap correctly and then get a fallback in there as well, but there were a couple places we missed. Thanks, Derek, for giving a second set of eyes and helping us with all that.

Chris: Yeah. As we speak, I still have a checklist of things to go through that Derek keeps finding because I think he's getting a kick out of it just playing with the site and finding little things to tweak and fix.

Dave: Yeah, and he's running it by people too, like, who use screen readers and with technology.

Chris: Is that how you do testing?

Dave: Yeah.

Chris: You actually ask other people? [Laughter]

Dave: Yeah, you go to somebody and you ask them what it was like. He's doing some of that and so it's been pretty cool. Even, I guess, an accessible podcast for people, there are a lot of considerations in, specifically, a podcast domain. We should get Derek on to talk about this too. You have an audio player, so that has to be accessible and all that. It has to be clear what's happening. But then we also provide transcripts for deaf--

Chris: Right.

Dave: --I guess, viewers of the podcast or readers of the podcast. And so, you know, just even trying to, like -- does the deaf community read podcasts that often? How often do they come through and skim a podcast? I don't know. There are some cool challenges in this little project that Derek is helping us with.

That's cool, but we should talk about some of the cool new features of the site. I think the number one feature is a search bar, finally. There was always a hidden way to do search in the ShopTalk site. You could always do ?s=foobar.

Chris: Oh, yeah. Yeah.

Dave: You could always do the hack, but now we have an official WordPress powered search for titles, I guess.

Chris: Yeah. Well, this makes me feel weird. This is one of the things that Derek mentioned today was, like, if I go to the tag for accessibility because it's a topic on this show, there's like 30-some shows in our history for it. But if you search for it, it only shows up like 20-some. Then I was like, shoot. You know what? I was "testing" search in that it just works and that the results page shows episodes and stuff but I wasn't really considering how it's doing that search.

Dave: Mm-hmm.

Chris: Because it's just default WordPress search. I think we turned the Jetpack search on, which makes it a little smarter because it uses elastic search behind the scenes and stuff, but the access to the data that it's searching is a little limited. The reason it's limited is because we use advanced custom fields to put all that data in and I have a bad feeling that search is not looking through those custom fields, so I think we might have to teach search to look at those custom fields. The reason it's returning anything at all is because we didn't use ACF for a long time on the site and a lot of old episodes just have that block of text about the show in the content area still. We didn't delete that. You know what I mean?

Anyway, all we have to do is figure out how to go into WordPress and teach it, "Hey, please also search these custom fields too." Anyway, that's the kind of thing that you launch and they're like, "Oh, crap! What about that?"

Dave: Yeah. Yeah, well, you get into it and, for the longest time, too, if a tag existed. We paid somebody at one point to go through and tag all of our old shows.

Chris: Right.

Dave: The tags, we have a topic section of the website now. There are some on the front page, like the most popular topics and stuff like that. If you're curious to browse by topic or whatever, that exists now. That wasn't elevated, so we didn't know these problems existed before because we didn't elevate now. Now we elevated it and now we know there's a problem.

It's mostly been a lot of looking at discoverability. I think we talked here before. We're on Episode 400. This is 402, I think. If somebody is joining a podcast at Episode 400, how do you find stuff? How do you find the good stuff? How do you learn what this thing is about if you're joining at this juncture?

Chris: Right.

Dave: I think elevating things like these topics, but then we also have this concept of series now, which are pretty cool. This was kind of your brain.

Chris: Well, I don't know.

Dave: I think Ophia and Dan helped, too, kind of solidify this idea.

Chris: Well, part of it was like, when you get to the homepage, maybe even the homepage should just feature some stuff like if you're landing here for the first time. Maybe these shows are of interest to you. Certainly, the most recent shows need to be right there and easy to find. That's there, of course. It's not like, websites, you have unlimited space on. People, scroll. We can do things.

Dave: Yeah.

Chris: We did like a "Hello, World!" series, which is just a cheeky name for a group of shows that are like, "Hey, if you're new to the show, maybe listen to these." But in order to do that, I was like, let's do it programmatically. I've breached this territory before on CSS-Tricks. I have tags and categories on CSS-Tricks already, but the thing about those is, those are default, built-in taxonomies that you have some control over but it's not quite the same control as just hand-picked, hand-ordered things.

Dave: Mm-hmm.

Chris: I was like, what if I gave myself, just greenfield a new taxonomy that allows me to just say, "Hey, here's a group. Here's just an arbitrary group. I'm going to hand-pick and hand-order some shows to be attached to this." I did that on CSS-Tricks for some things so that I can send people to a URL that's like, "Look. These are my hand-picked things for this topic that I think is better, better represented than the category or the tag taxonomy."

I just ported that over to ShopTalk Show too. Only, instead of there being called guides or they're called guide collections on CSS-Tricks. We just called them series on ShopTalk Show, but it's the exact same tech. In WordPress land, it's using a plugin called Custom Meta Boxes, which is kind of like an advanced custom fields alternative, but it's just done differently and they can live together just fine so no big deal. Then a plugin for that, which basically allows you to have a meta box. You know metatags in WordPress are just like arbitrary -- not metatags but custom meta fields are just arbitrary.

Dave: Mm-hmm.

Chris: A podcast would have an arbitrary meta field of running time and it would say, "1 hour and 1 minute and 12 seconds." It's a key-value pair that's just like arbitrary data that you attach to an object. This is that but the key-value pairs are just representative of individual shows. Then it gives you a nice UI around that.

Dave: Nice.

Chris: This little chunk of a series, you can just drag and drop shows in there from a search and reorder them in any way you want. That's all it is. It's still just key-value pairs that you're attaching to the custom post type, but it's nice. It's a nice little UI.

Dave: It's kind of relational, a little relational.

Chris: It's a little relational.

Dave: No, it's cool.

Chris: You know we did that series "How to Think Like a Front-End Developer." Now that's a series and we can create that as a series, drag and drop the proper episodes into it, order them in the right way, and then have a nice looking URL with a special template that displays that.

They're so easy to make. There's no reason. We could have done that by just hand-crafting that page with HTML and CSS.

Dave: Yeah.

Chris: No reason you can't do that. But sometimes taking a step back and doing it programmatically in a repeatable way is cool because it means the next one we do will take five minutes.

Dave: No. Yeah, because we had -- we created a "Hello, World!" series, which is like if you're new to the ShopTalk, like, "Here are some sort of best of the best," looking at some stats or even just out of memory. These were some popular ones.

Chris: Right.

Dave: Then we did a "What's happening in JavaScript in 2019" last year, kind of the beginning of the year. Henry Zu from Babble, Laurie Voss with NPM, not there anymore, but that kind of got into the great divide. Jason Miller from Preact. There's Svelte from Rich Harris. Oh, man.

So many good maintainers came onto the show but you wouldn't know that because who is going to go sift through the chronological archive? That's really tough. And we skipped some episodes because, of course, we have conferences, life, and everything. What's cool about these series pages is we can kind of create series as they go.

Chris: Right.

Dave: They don't have to be sequential blocks.

Chris: I think it will allow us to think in series, too, because we've been wanting to do that. I think ShopTalk Show, at its best, is when we have an idea for a large topic to hit and then don't just do it one show but do it across a series of shows. That means that we can -- I don't know. We should do that more, so we're going to do that more.

Dave: Get different perspectives, too. People don't know this but a limitation with podcasts is you can really only have about four people on a podcast. If you go over four, it's just going to fall apart or, oftentimes, it just starts falling apart after four. It's hard to manage as a host. It's hard to kind of feel like guests get enough time to talk as a guest.

Chris: Right.

Dave: Sometimes, some topics take more than one show to figure out. You have to talk to different people and get their points of view. I think it's cool.

Chris: Mm-hmm.

Dave: Yeah, we have a few series ideas here, so looking forward to those.

Chris: Yeah, that was fun to build. This wasn't just a visual-only redesign. It did some of that stuff. It cleaned up some URLs. That was important. We have a contact page now, which I think is important because, otherwise, it was just a question asking form, which did double duty as contact and asking, which I didn't love.

I don't know. Stuff like that. The navigation is clearer. The responsive design is clearer. The whole design was just bad, so that helps that it's there too.

Anyway, there's a lot of stuff to do even down to like the branding level. Let's make it a little more exciting when you land here. We used to have that great -- you know Reagan did our logo before, the super cool wrench and all that. Some of that is a little lost in this, but that's not to say it can't come back.

Dave: Yeah, we can. It's a website. It's just pixels. We can work on it. I think it'll be fun to see. We have a better base, too, just better AI data to kind of mess with now, so it's going to be fun. I think we have more stuff.

Chris: Yeah.

Dave: In this ASCII vibe, I am vibing it for sure.

Chris: Uh-huh. Uh-huh. Me too.

Dave: It's very cool.

Chris: I love that a lot.

[Banjo music starts]

Chris: Hey, hey. This show is brought to you in part by Netlify. Netlify is awesome. I see they just took a big round of Series C funding. That's great for them. Congratulations. Bigger. Happier. Healthier. Kicking butt.

All this JAMstack stuff, you know you've heard us say the word JAMstack, right? It's kind of a way of building websites that is based on static files because it's, yeah, prerender everything. Ship it out to a static host. Serve it via CDN. It'll be super-fast, super-secure. Ah, yes!

Then not limit yourself to just what static files can do. You're still running client-side JavaScript, talking to APIs, doing auth, doing form processing, and all the fancy stuff any modern website would need to do, but it doesn't mean you can't do it with a base of static files. That's what JAMstack is.

Netlify makes that process amazing. Their developer experience is amazing. The way that they -- just even the deployment process, how it's hooked into your GitHub workflow and that pull requests have these previews that you can look at. It's like, that doesn't work with my WordPress setup, that's for sure. I don't work on a feature branch and then make an MR to master and then have that pull request be this special URL that I can go look at and see the changes on. Sure, that'll be possible someday, but Netlify is forging way ahead and making that possible today with every merge request on your repo, automatically, because that's just how cool they are and how living in the future they are - in the year 3000. But you can have it today.

Host on Netlify and you get all this other stuff for free, too. It's not just this great hosting but they are the ones that will process your forms. They're the ones that will run your serverless functions for you, which is at the heart of doing all kinds of other fancy stuff. They'll do your A/B testing. They'll host your huge, large media files. They'll do auth for you. They'll be your analytics solution.

It's just incredible what they do. You've got to check it out, Netlify.com.

[Banjo music stops]

Chris: The ASCII text is there. We did it. It's not one-off either. It's not like we went to some ASCII tool and, on certain pages, we just hard-coded some ASCII in there. It's arbitrarily built. That stuff comes out programmatically based on an alphabet of ASCII letters that we have in the website system. If you change the title of something that has an ASCII title, it'll, on the fly, update the ASCII art on that page. It does it letter-by-letter.

Dave: Yeah.

Chris: And word-by-word. We did it letter-by-letter at first and then we realized we needed span wrappers around the words so that it would break nicely and stuff. Yeah, it breaks apart the string letter-by-letter and does a little PHP include on the fly to build it together. Fortunately, the site is cached, so it's not hampering the server too badly with all those includes.

Dave: Yeah, it was cool. Yeah, it basically--

Chris: Here's a challenge for the audience.

Dave: I rebuilt lettering in PHP, so that was fun.

[Laughter]

Dave: A blast from the past there.

Chris: Right now, when you use a screen reader, it reads just fine. But if there's a title and you want to select the title, a lot of titles on the site -- if it's a title of an actual show, that's not an ASCII art. It's in that Unibody 8. That should select just fine. But like I say, on the episode's page, there is a big ASCII thing that says, "Episodes." I don't know why you'd need to copy the word "episodes," but I'm sensitive to selecting text because any time it's obnoxious on a website, I'm really sensitive to that. Maybe it's because I am a blogger or whatever, so I'm copying text all the time from other websites. You can't copy the word "episodes." You copy it in ASCII.

Dave: Ooh.

Chris: That's a little unfortunate. I think even Derek maybe had this idea of maybe there's a world in which we text user select none or pointer-events none or something on the letters.

Dave: Yeah.

Chris: But then position the letters over the ASCII letter such that if you do select it, it's opacity zero, but you could still get the text somehow.

Dave: Okay.

Chris: I tried one technique and I failed at it. If anybody has got a clever idea.

Dave: Oh, now I'm fascinated.

Chris: [Laughter]

Dave: Anyway, yeah, that would be interesting.

Chris: Some fun techie stuff. Some of the stuff is just like, oh, there's a cool border. It's just border two picks dashed orange, you know, like not that interesting.

Dave: [Laughter]

Chris: Some of the borders are interesting like how they do it in an old terminal. If they really needed to draw a box, they would surround it with little stars or equal signs or dashes or something. We wanted that to be a possibility, but how hard is that? On the Web, things stretch, they're flexible, and they're of different heights and stuff. Pulling that off on the Web is just not easy. [Laughter]

Dave: I've done it with background-repeat but then you resize the browser five pixels and you wrecked the effect because you get a half star on the end.

Chris: Yeah.

Dave: You--

Chris: Yeah, well that's -- yeah. [Laughter]

Dave: Because you own CSS, the Twitter handle, knew about--

[Laughter]

Dave: What is it, background?

Chris: I think it's background-repeat round?

Dave: Around? Repeat around? It'll split the dif. It'll be like, "Ah! I'll just add a little space," or something.

Chris: Yeah, like I'm willing -- like the background-size is ten pixels. It's happy to stretch that up to like 14 or whatever. You know what I mean. It will only resize.

Dave: Yeah. Yeah.

Chris: Because it knows the intrinsic size of the image inside, it will only add another one when there's room for a full one to fit. Otherwise, it'll stretch just a little bit to make sure that it's still filling that area.

Dave: Yeah. Well, yeah. Four pixels of butter, basically, on each side. There you go.

Chris: But that just -- so, we have this little tiny star graphic that we fill the entire area with like that. But to make it look like it's just one on the outside, it's not using border-image, which maybe we could have pulled this off with border-image, but I don't know because I think it's a little trickier.

Dave: My luck, success rate with boarder image is zero, so. [Laughter]

Chris: Yeah, I would submit that it's maybe the hardest to understand spec in all of CSS. You think Grid is hard? Try border-image. Oh, my god.

Dave: Yeah.

Chris: Nine-slice scaling, fine. There is something intuitive about nine-slice once you wrap your mind around that. But it's not just that. It's how they stretch and how you choose to repeat it and stuff. It's very unintuitive.

Anyway, because we're using a noise texture, which is cool because I'm like, "High-five, Paravel," like captains of noise.

Dave: [Laughter] It is a good callback to it.

Chris: [Laughter]

Dave: Dirty screen of -- Paravel's dirty screen motif.

Chris: You don't have to be very clever about how you cut out and how a noise texture touches another noise texture because noise is just noise. It doesn't matter.

Dave: It's just noise. Yeah.

Chris: There's just a div class inside that basically just fills the inside of these divs with noise again.

Dave: Except for ten pixels.

Chris: Except for ten pixels around the outside. I think you had a way to do it without that that used pseudo-elements.

Dave: I did an inner or a pseudo, yeah. It was okay but, yeah, I think this works for that.

Chris: Because we come from an era where it's like, "Ooh, and extra div! We don't need that! I will jump through extreme hoops to not have that one div."

[Laughter]

Dave: One. Hold my beer.

Chris: Yeah.

Dave: Yeah, I think I was thinking if the noise was a problem. I don't know. If it looked like you had noise or whatever, background one overlaid background two. You could think of a situation where it's a transparent background or something like that. You'd maybe want a transparent solution. This doesn't allow for transparency because there's stars behind all the text, basically, or background image stars. Anyway, yeah, it was clever.

Chris: It was. I love that sort of back and forth of how things work and we were fleshing that one out in CodePen after some of the first meetings about this redesign, like, "Ooh, that looks hard. Let's dig into it," you know. And, like, "Ooh, ASCII numbers. How are we going to do that?" To this day, right now in production, the ASCII numbers are SVG includes because that was my first idea for how to pull those off. Really, they should be ASCII text like all the rest of the titles. I think they render a little nicer, even, than SVG does.

Dave: SVG gets thin when it resizes down, which we could control with stroke.

Chris: Yeah.

Dave: But then it's just hard.

Chris: What is that SVG property? There's one where the stroke doesn't change when you resize the SVG.

Dave: Oh…

Chris: Maybe we should try that. It's called, like -- oh, shucks. I don't know.

Dave: I don't even know. I write a lot of SVG but I do not remember the--

Chris: (Indiscernible) I learned about it when I wrote this article based on somebody else's idea. Maxim on Twitter, or whatever. He's a design dude on Twitter, made SVG marching ants, you know like in Photoshop when you select something and it has the little marching ants. That needs to go over an arbitrary section. That's the deal with marching ants is its arbitrary, the size.

Dave: Oh, yeah. Yeah.

Chris: If you're changing the size of the SVG all the time, the stroke size comes with it, you know. You have to turn preserve aspect ratio off on the SVG because that will make sure that you can resize it without--

Okay. Here it is. I found it. Vector-effect="non-scaling-stroke" and both vector-effect and non-scaling-stroke are dash-separated.

Dave: It just rolls off the tongue. I'm surprised that I didn't remember it.

Chris: Yeah.

[Laughter]

Chris: How often do you use vector-effect in your CSS? Not often.

Dave: Oh, man. Well, we could try that and see if that fixes it. Here, I can Web inspect that and see if it (indiscernible).

Chris: We could but, you know, to have two different systems for your ASCII letters is like, meh. It's a little technical debt. Why don't we--?

Dave: Kind of hack. Kind of hack.

Chris: Why don't we just smash it into the ASCII? The problem with the ASCII text is, SVG rescales a hell of a lot nicer than text does. In the places where you did all the resizing of the ASCII letters, it does it by just media queries and font size, essentially, doesn't it?

Dave: Yeah, I kind of hack the media query and font size, just like you do a title.

Chris: Right.

Dave: But now--

Chris: We could use fluid type kind of something or something, but SVG obviously is just way cleaner in how it--

Dave: Yeah, it seems. I mean I'm not seeing the -- I guess, yeah, I am seeing the benefit of vector-effect. It's working. It's technically working. All right. Ship it. Ship it. [Laughter] Maybe that's MVP. No, cool stuff, though. This was fun to do, so thanks, Ophia and Dan.

Chris: Yeah.

Dave: For bringing us along on this journey.

Chris: It was fun. I get to rewrite the job board with WordPress transients. Now I'm just poking around for interesting things to say. We'll do another show on it with the actual people involved at some point. We just wanted to mention it because it was fun and it's live. Let us know.

You know one thing we didn't -- I'd like to just have you mention just real quick and then we'll get into some more interesting questions was, how did you even do the audio player? I don't even get it?

Dave: Oh! Ohh… Okay.

Chris: [Laughter]

Dave: It is sort of a critical part of a podcast site. It is a Web component. It's a LitElement. You can probably Web inspect, dear listener, and steal it for your podcast. It's just a JavaScript file. I think I'm using unpackage or something like that. It's quite literally a stolen little thing.

Chris: There's an audio element in native HTML. Do you wrap it?

Dave: Yeah, so I wrap it, so it's like podcast-player and inside that the child is an audio with a source. That's a fallback, which actually helped us out because we launched the site and we had CDN issues.

Chris: [Laughter] Right.

Dave: The JavaScript didn't load. Then we had a fallback audio player.

Chris: It worked fine.

Dave: Ta-da!

Chris: Yeah.

Dave: Progressive enhancement, y'all. It works. [Laughter]

Chris: Yeah. Yeah.

Dave: But then -- I had this code. It's up on my GitHub but then I've repurposed it and added some accessibility stuff on the ShopTalk site. I'll try to upstream it. Now it's like a LitElement, which is pretty cool because you get some properties like the current time, the current speed index, which is just because you can program your speed and the duration. Then there's just some CSS in there, so we can program some CSS. You could actually move all that CSS out and style it on your own if you wanted, like in a SaaS file. I'm using some host features to flip buttons on and off.

Chris: Oh, that's confusing. I'm sure if I got in the code and looked around, I could figure it out. I like the division of labor here, you know.

Dave: I could use JavaScript to add the hidden attribute or something like that. Then it just has a few functions like changing the speed, muting, playing, rewinding, fast-forwarding by 30 seconds each, seeking, which is kind of like if you drag the--

Chris: Is there a native browser API for all that stuff?

Dave: For the audio element itself, so there's the HTML media element.

Chris: Yeah.

Dave: That is the same API for audio and video, basically. You get--

Chris: That audio element is still doing the work of playing.

Dave: It's doing all the work.

Chris: But you're controlling it. It's hidden. It's just display none or something.

Dave: It's hidden and all these buttons are just controlling the audio element. Yeah, and it doesn't have a controls attribute. That's how you disappear the audio element.

Chris: Oh, yeah. You don't even have to display none. It just doesn't have controls. That gets me on video sometimes.

Dave: Yeah.

Chris: You'd think you do video source and it would just show up. Not if it doesn't have controls.

Dave: Yeah.

Chris: Then it does not.

Dave: Yeah. Surprise! Yeah, and so it's just some buttons with ARIA labels and stuff like that, like appropriate stuff. Derek suggested, when you're going through it and you just hear, "Zero zero colon zero zero," you're like, "What was that?" He's like, "Put maybe current time and duration on there. That might help."

You don't actually get the duration until you download the metadata. But to save our server and bandwidth from getting hammered, I don't preload the thing. I think we do preload none on our audio.

Chris: Yeah, we do.

Dave: For me, that's important, just like, "Save the world, save the bandwidth," or whatever, because it is a 40-meg file, usually.

Chris: We'd probably juice our statistics. That one attribute would make us look like we had more listeners.

Dave: We should do that. Maybe I should flip that.

Chris: No.

[Laughter]

Dave: I'm just kidding. There's actually a "podcasters beware" or use some growth hacks here. There's a little plugin called Soundwave, which will give you a cool waveform of your podcast, almost like Soundcloud. That will double download too. If you wanted to juice your stats, there you go.

Chris: Yeah. Anything cool with audio, you kind of need the audio first or you need to do some cloud thing that is doing the cool parts of it in the sky.

Dave: Pre-processes, yeah. I had this audio player as just a normal audio player, but I kind of shoehorned in the time jump library I maintain as well. You can go #t=12345 and it will go to the 1,245th second of the podcast or whatever, or you can do a timestamp as well and it'll go straight to that podcast. It looks like there's a bug in the time jump links, but we're figuring it out right now. I'm seeing the quick jump links, but we'll figure that out. It could be a content authoring issue on one of the posts, but anyway.

Chris: Oh… You've got to log that. I find bugs all the time. [Laughter]

Dave: It's fine. We'll figure it out.

Chris: Okay.

Dave: That's it. You do it after the fact. We'll do it live. But yeah, if you want to inspect, you can go to the podcast player JS and that's kind of the Web component that powers the audio player.

Chris: How many lines is it?

Dave: 397 altogether and that's with 100, 200 lines of CSS.

Chris: For absolutely custom and, not only is it cooler, it's just more robust than an audio player is.

Dave: Yeah.

Chris: You get the control, but it's got speed controls and the jump links. Oh, we should adjust those, by the way. [Laughter]

Dave: Oh, yeah, yeah. We have a bug.

Chris: When the numbers are the same, I feel like it doesn't give you as much control. But if they were like 45 forward and 15 back or something, then you can jump a little too far and then fine-grain how far you go back.

Dave: Oh, okay. Okay.

Chris: You know what I mean?

Dave: Okay, I can do that. Yeah. I'll fix it. I'll push it. Yeah, it's really configurable up to you. I think I'd like to evolve the Web component to where you could pass props, like what's your rewind speed, what's your forward speed. The only thing I'm kind of wary about and one thing that Derek suggested was, I had this as a progress meter that you clicked, the like progress meter. But now it's an input type equals range, which is kind of weird.

Chris: Yeah. That's so cool, though.

Dave: Because it has the thumb, the grabber, that's a little easier for people with motor disabilities or whatever to grab and move around.

Chris: I figured out what's wrong with this episode. We just pasted the time jumps and the links into the wrong--

Dave: Oh, whoopsie-doodle there. That's fine. Hey.

Chris: I'm just going to fix it. I'm just going to fix it. Do you guys want to watch me code, watch me deal with this--?

Dave: On audio?

Chris: …audio? A really good show.

Dave: [Laughter]

Chris: Oh, fun! Really fun.

Dave: Hey, we did get some sweet reviews recently, so I'm sure this is right up there with that.

[Banjo music starts]

Chris: Hey, ShopTalk Show listeners. This show is brought to you in part by WooCommerce. WooCommerce is an e-commerce plugin for your WordPress site. That's huge! They have a massive swath of the e-commerce market and for good reason. It's really nice e-commerce software. They have all kinds of news. They're working hard on all kinds of stuff.

For one thing, WooCommerce payments is almost here. You can request an invite as I'm recording this here. It's like a payment processor that's WooCommerce, so instead of different other payment processors, you can try WooCommerce payments. Then your WooCommerce dashboard is just all the better for it because it's just super integrated and highly appealing to me.

But here's another thing. WooCommerce has been talking about how you can sell CBD online with WooCommerce. Now, CBD is like part of the marijuana industry but it's not like marijuana, right? THC is the psychoactive substance in that. CBD is the other stuff that still has health benefits of that world - possibly. Now, even that claim is not FDC verified, but you see the CBD stuff everywhere. I live in Bend, Oregon, which is just -- [Laughter] -- it's everywhere here, marijuana stuff, and it tends to travel in the same industries, kind of. It's in drinks, creams, oils, foods, and all kinds of stuff.

But you have to be careful. If you're going to start selling it and get in on this new wave, you have to be careful online. For one thing, just to deal with it within the United States, it's a highly controlled substance, so you have to be careful with that. You can do it through your WooCommerce store. Even there, there are considerations to take care of like you should use Square as your payment processor because they're aware of this. That's the official partner of it, so you don't have to worry about--I don't know--something bad happening like your payment processor not being happy that you're selling CBD online and making that not work for you. If you use Square, then the legality of that is all squared up.

You can use other automatic plugins like Jetpack and stuff that we also swear by because that makes it super good. You have to be aware of all the laws and all that stuff. Even your Web host, you have to be careful. Clear it with them too because you're running self-hosted WordPress and using WooCommerce on it that's hosted somewhere. Check with your host too. You wouldn't want to get kicked off there. This stuff is all changing. This is going to be, hopefully, laughable in a couple years. For now, you really have to be really careful about this stuff. Please do that and know that you can totally run your CBD store with WordPress and WooCommerce.

[Banjo music stops]

Dave: Chris, I just got back from VueConf.

Chris: Oh, did you go to that? You were there at it?

Dave: Yeah, VueConf.

Chris: Oh, that's awesome.

Dave: It was in Austin.

Chris: Did they play the documentary on stage or whatever? I'm sure they did.

Dave: They did not.

Chris: Oh, really?

Dave: No, they did not.

Chris: That's weird.

Dave: But that would have been a good lunchbreak kind of thing. The documentary was pretty good, but it was neat. A good time to be in Vue. Vue 3 is going to come out, you know, eventually. [Laughter] I think it's in sort of like the next version of React.

Chris: I've been told it's eminent - eminent.

Dave: Oh, really? Oh…

Chris: But what does eminent mean? Next year? [Laughter] I don't know.

Dave: I was not getting eminent vibes.

Chris: No?

Dave: Yeah, I was getting like six months out vibes, but that's totally--

Chris: Oh, okay.

Dave: It's totally possible. I think it's finally at the point where it's almost like the features are there. That thing is done. Now we need to do the docs. We need to do the cleanup. We need to fix the CLI. It's sort of that.

Chris: I just happen to know because I just know things because I'm an industry insider, some of that stuff that's going on.

Dave: Uh-huh. You…

Chris: I'm doing some secret stuff with them. What?!

Dave: Oh, nice. Nice.

Chris: Even you don't know about it, I don't think.

Dave: I don't know.

Chris: I could show you, though.

Dave: You should.

Chris: I just can't do it on the podcast. It's a little too early.

Dave: You're getting free mice and industry secrets.

Chris: I did get a free mouse!

Dave: Secret tips. [Laughter]

Chris: I shouldn't have mentioned it, though, because now I'm -- I didn't realize how many people that follow me on Twitter care about equipment like that. To me, it was an off-brand tweet. A keyboard, a little bit, but the rest of computer peripherals, I'm like, "Why does anybody care what I use?" I don't know.

Dave: Mm-hmm.

Chris: But they do. There was a lot of activity on that one and people have really nuanced opinions because it's the Logitech MX Master 3 or something. They're not sponsoring this podcast but whatever. I think it's a darn nice mouse, honestly.

Dave: It's a good mouse and a lot of designers like it because it just has a good feel. It's kind of ergonomic. It's not quite the vertical ergonomic one--

Chris: No, I have that one too, and I don't like it.

Dave: --that I'm currently using.

Chris: Oh, you like that one?

Dave: I like it, but I'm also Mr. Hand Cramps.

Chris: It's like straight vertical. It's weird.

Dave: Yeah. [Laughter]

Chris: Yeah.

Dave: Yeah but it's got a good weight. I use the Anchor $15 one, but I just would knock it over all the time. That was frustrating. This has a good base. It's a good weight and base.

Chris: I have the MX Master 1 or whatever and I thought it was a fricken' masterpiece. To some degree, it's just a mouse. I'm not that picky about this stuff. In fact, I can switch back and forth between a trackpad too. A trackpad is perfectly fine to me and I can use a ball mouse. I long was a ball mouse user, weirdly enough, like a big ball mouse one.

Dave: Oh, wow.

Chris: Like a Pacman ball, you know.

Dave: Yeah. Yeah.

Chris: Yeah, I used that because it was--

Dave: A fricken' top golfer. [Laughter] No, it's a Golden T?

Chris: Yeah, it's like a Golden T.

[Laughter]

Chris: I did it for a very specific reason. At the place where I worked, everybody had one because we had an in-house photo studio. We had tons of photos coming in. It was like a Best Buy Plus. It was a Best Buy knockoff, only we sold furniture and stuff too, so it was all kinds of stuff. We had an in-house photo studio that would take pictures of all this electronics, furniture, and all this stuff.

You'd get tons of these photos every day. There was a whole room set up with a fern, a couch, TV, a coffee table, and all this stuff. It was our job to take the PSD of that image and draw clipping paths around all the interesting objects in there so that when a designer grabbed it and they wanted just the couch or remove the tree or something, there were these clipping paths already in there that they could just use for stuff.

Maybe one month we're making a flyer for the newspaper that just shows the whole image, whole hog. But next week, the motif of the flyer is like, everything is on white instead because that just fits the theme that month better or something. Then you'd just activate the clipping paths, remove the backgrounds from these photos, and show them on white or show them on some other background or something.

There were a lot of clipping paths. I cut hundreds of clipping paths a day. It was like half my day, a lot of times. When you're doing that, you have this huge image and you're scrolling around the image because you have to be pretty zoomed in on the image to cut a nice one.

Dave: Mm-hmm.

Chris: You're not zoomed out. You're really in there seeing the pixels. You don't ever want to lift up your stupid mouse because it would screw you all up.

The thing with the trackball mouse is, you never have to move it. It's just there. I think you have a little tighter control. I think you'll find, even as a mouse user, it's not a big deal but you end up picking up your mouse a decent amount.

Dave: No. No, I do, for sure. Yeah. This was very -- yeah, I guess I could see the value in that. Just scroll a half ball over and click and then you go up a little.

Chris: Yeah. You can really whip it if you need to and go -- get somewhere fast.

Dave: Oh, yeah.

Chris: So, they send me three, which is maybe the first time that's happened to me in a while like, "We'd love to send you some free things." Deal. Here's my address. Especially because they wanted nothing in return. Hence the tweet or whatever.

Dave: Cool.

Chris: The three, it's narrower and I wouldn't have even noticed. I don't think I would have even noticed if I didn't tweet it and somebody was just like, "Ew. I don't like how it's," you know. It's like one centimeter narrower, which now it feels significant to me, but I don't know that I would have noticed otherwise.

I was like, "Oh, that's too bad. I almost like the beefier one. Oh, well.

Dave: Yeah, that's too bad. Yeah. No, it looks -- it's a good mouse. They have a good, new ergo keyboard too, so if they want to send -- Logitech, if you're listening, you want to send me that, I'll check it out.

Chris: They send me a keyboard but it wasn't ergo, so useless to me. I'm going to give it away.

Dave: Oh. Eh. Blah.

Chris: Blah.

Dave: No. Ergo or die. I might actually buy a new mechanical keyboard. Don't tell my wife. I'm okay.

Chris: Are the options pretty okay for ergo plus mechanical?

Dave: It's mostly the ErgoDox is sort of your one or the Kinesis, which is kind of big.

Chris: Yeah.

Dave: Weird board.

Chris: I have that one and I don't like it.

Dave: Yeah, I have the ErgoDox. It's okay, but there are some funky tradeoffs on it. I don't know. I'm just kind of like, I think here's maybe my new theory. I think with ergonomics or whatever, variety is sort of a key factor. Maybe I'm just making stuff up to spend some money, but I think if you are so repetitive on--

Chris: Well, if you use one for a few weeks, you should switch to another keyboard just for the sake of your hands?

Dave: Yeah.

Chris: Oh.

Dave: Yeah, or even sit/stand desk. If you're sitting all day, that's bad. If you're standing all day, that can have other problems, so it's doing both, having some both stuff.

I think ergonomics are kind of like, you just have to mix it up occasionally and try to get some different things. I don't know. There is something to be said about keyboards, specifically. They're sort of a muscle memory, brain thing. Yeah, I use that Microsoft Sculpt for a really long time. I liked that, or the new Ergo Microsoft one.

Chris: Yeah.

Dave: But I'm back on my ErgoDox, which is a big, dumb thing, but I like it.

Chris: I'll check it out.

Dave: Yeah.

Chris: I'm on the very, very latest Microsoft ergo and I think it's good.

Two announcements: It's been Dave and I for a while here. It just was how the end of the year and the new year panned out, but now it's March, so it's time for us to start booking some guests. We have a whole bunch of ideas so, starting now, the next whole bunch of shows, I think, are going to have guests in them, so look forward to that. I think there's just a lot of interesting new voices out there that we're going to hear from.

Honestly, our question jar is a little light. There's still plenty of stuff in there, but I'd love to hear more, newer, fresher questions. The new website is up. There's a link that says, "Ask Us," in the header. Please click that and type in a question and it doesn't necessarily really have to be a question. it can kind of be a topic or just something you're thinking about, something like that. It's nice to hear from you, so fill up our jar again, please. That would be cool.

Dave: I was going to say, too, sometimes people will suggest, like, "Oh, you need to have so-and-so on the show," or something like that. We don't hate those suggestions. We put them in a bucket.

Chris: Mm-hmm.

Dave: If you're a podcast booker PR person, we do kind of hate those suggestions. [Laughter] But if you're like, "I want to hear," or "So-and-so gave a great talk at blah-blah-blah," it helps us if we can see a talk that somebody has done online, not just some total stranger. If there's somebody you think should be on and they have talks online and stuff like that or doing cool stuff and they haven't crossed our periphery or whatever, you can always DM us or message or at message us on Twitter. That's cool. We keep a list of people just of ideas and we're very sincere about that. It may sound like I'm just like, "Oh, I'll put you on the list," and never call you. We actually have a list of people we want to talk to. I just wanted to throw that out too.

Chris: Yeah.

Dave: Yeah, so if you suggested somebody and we hadn't figured it out, I apologize but we actually do take the time to try to find good and new voices for the show, so we appreciate it.

Chris: Heck yeah, we do. How much time do we have? We have a quarter of the show left here.

Dave: Sure.

Chris: Let's dip into our bucket a little bit, should we?

Dave: Yeah.

Chris: This one is about billing, so it's more client-based for you than me, but I do find -- I always find this stuff fascinating. It's about billing and let's say you're going to bill hourly, which is, I think, not how you do it, but still maybe, you know.

Dave: Well, you might be surprised.

Chris: [Laughter] Okay.

Dave: All right.

Chris: When you do bill hourly, Mike is asking, is it just the same rate all the time or do you have different rates depending on the thing that you're doing? Let's say you're straight up heads down coding, you're brainstorming and wireframing, or you're in a meeting, literally, like lawyers bill that way.

Dave: Yeah.

Chris: Or you're doing maintenance afterward. Do you just have a flat rate or is it a rate per task?

Dave: We have a flat rate that we generally bill. Sometimes, it'll be like a varied rate based on whatever the task or the person or whatever but, more or less, it's the same thing. For us, we actually do. We think of it as selling our time or, maybe more accurately, our attention, if that makes sense. You have my attention. That's what I can sell. [Laughter] I feel like mostly it's the same rate. I think you could be a bit more per--

Chris: Would you go crazy if you had to be like, "Oh, on January 14th from 4:30 to 7:15, which task was that again?" I'd be like, "Oh, my god."

Dave: Well, yeah. Then would you rather--? [Laughter] I mean I don't know. For meeting rates, would I want to charge double? Yeah, maybe.

[Laughter]

Dave: You know what I mean? Meetings aren't fun. I should charge more for the not-fun work. You know what I mean? It's not hard work but it's not fun work.

Chris: Yeah. The coding is the cheapest thing.

Dave: I think it's confusing, too. Just in whatever experience, you have cost centers and stuff like that. We try to keep it as simple, billing as simple as possible. It's not unheard of to have multiple rates. Yeah, I don't think that's absurd for whatever senior, junior designer, or something like that.

What would be another thing we do in our industry? Maybe if it's logo, branding. We usually just, too, pitch buckets of hours. You want to do a logo refresh or something. We think it'll take -- I'm plucking numbers. I don't know -- 20 hours or something just to kind of tune-up your logo, your type, and stuff like that. That can be a lot cheaper if you go faster. We're just kind of pitching that. It could be a lot more expensive if you suddenly get wrapped up in font choices.

That's how we approach it. It's worked for us. That's what I should say. I think other people have different things and different clients, too.

We probably missed some jobs just because we don't have the strict billing structure or hourly counting. I know some agencies that do that pretty darn well and they're pretty zoned into it.

I saw somebody was like, oh, you have to report hours as either CapEx or whatever is the other X sort of spending, you know. That's different stuff too.

Chris: Yeah. This is probably like--I don't know--if I was in a different situation in life, I could probably just deal with it. But there's something so viscerally awful feeling about having to track hours for something that I think I would make major life decisions to avoid it.

They'd be like, "Oh, here's your dream job, Chris. You can have, everything you'd ever want. All you have to do is click a button every time you start to work and click another button when you're doing working." I'd be like, "Nope. I'm going to go live in this hovel over here."

Dave: [Laughter] No, that's fair.

Chris: [Laughter]

Dave: It's to some degree because, too, I think if you work on one project and you're one team, maybe you can actually do that. Maybe just setting big blocks in your calendar like, oh, three hours for working on this in the morning. You know? That's my productivity hours. Sort of a deep work mentality, if you've heard of that book or whatever. Maybe you could do that and then you look at your calendar at the end and say, "Yeah, I did that," or adjust hours based on how much you actually worked or something like that. I think leaving a paper trail for yourself isn't a bad deal.

Chris: Yeah.

Dave: But one thing I've been experimenting with is this physical clock timer thing.

Chris: Oh, yeah?

Dave: Which is kind of a neat thing because it's like, "Okay. I'm going to work on this for like one hour." I'm going to twist a knob, budget this one hour of time, and then it counts down. I don't hear the ding because I have headphones on or whatever.

Visually allotting time to something helps too, then it's pretty easy to be like, "Oh, yeah. I twisted the clock three times for that."

Chris: It's the pushback on that like, okay, you've got an hour. You're 30 minutes into it and you're nowhere. Do you just struggle through the next half an hour or do you just say, "Screw it. This is not going anywhere"? or you're hauling butt and--

Dave: Go watch YouTube. [Laughter]

Chris: You're at the end of an hour and you're like, "I actually almost have this." Do you then still stop at an hour because of the … timer?

Dave: No, I'll just keep working. I'll keep working over. But, yeah, if it doesn't--

Chris: It's like, why have a clock at all? You know? I don't know.

Dave: Right, right, but for me, it's like this mental trigger of, like, okay. I'm going to try to focus for this long and, after that long, I can go watch YouTube.

Chris: Okay. I see. I see.

Dave: Whatever neo-smoke break, if you will. [Laughter] Just sort of like indulge my vices, the Twitter, the YouTube, or whatever. Then get back to it again.

Chris: Oh, I see. It's kind of like while that timer is running and you are actually getting something done, just leave the vices alone, please.

Dave: Yeah. Yeah.

Chris: I see.

Dave: It's a bit of mental training for me. I don't know. It's working out pretty positive. I've had some pretty productive weeks, but I don't want to be like Mr. Productive Capitalist. That's not where I'm trying to go.

Chris: No.

Dave: I'm trying to make my time more productive.

Chris: Work better? Yeah. Yeah.

Dave: Yeah, like my quality….

Chris: Sometimes I'm terrible. I'll write two lines of code and then open a Twitter client and then come back and write two more and then answer an email. Somehow, it feels good. I've trained by brain that I'm like, "Well, I don't know. I was getting multiple things done at the same time."

Sometimes, coding isn't just -- I'm not bored of it. I just need a minute to simmer on the next thing to do. If I'm answering an email during that time, that can be kind of like the mental break I need to write that next few lines of code. You know? I might be just unique in that. I'm not trying to say other people should do that too, but I'm often multitasking a lot of stuff.

Dave: Yeah. Yeah, there is one book I read. It was about a tweet or it was about one tweet takes, whatever, 30 seconds to fart out.

Chris: Yeah.

Dave: It takes 30 seconds to fart a tweet. But then you spend the next 23 or 30 minutes or something after that thinking about that tweet like, "Oh, did that tweet get likes? I better go check."

Chris: Yeah.

Dave: Yeah.

Chris: There's definitely a difference in tweeting something and just looking at some tweets.

Dave: Right. There's a little bit of different vibe there. Even for me, looking at tweets, it's like, "Oh, man. Now I'm upset about politics."

Chris: Right.

Dave: "Oh, crud," or, like, "Oh, what? Some weird post?" I read a post on rehydration. It was a great post, but it was a very long post, you know, about React rehydration.

Chris: Yep. You got pulled away.

Dave: I don't use React.

Chris: [Laughter]

Dave: I just get sniped, you know?

Chris: Yeah. Sniped! [Laughter]

Dave: Yeah. You know I think there are situations like that. It brings in distractions. I'm trying the attitude of, like, "Okay, let's just barrel through on this thing for 30 minutes." You put on some music that you can focus, Zen into, whatever that is for you. For me it's Chiptune from video games or whatever.

Chris: Mm-hmm.

Dave: You just zone in and just power. Yeah.

Chris: Fascinating. All right.

Dave: Anyway. That was one question.

[Laughter]

Chris: Yeah. We'll just do a real quickie, I guess. It's the same kind of vibe with the Steve Bennet one. "How do you still find the strength to still have fun coding after a long day of work, which is also coding?" You know?

Dave: Mm-hmm.

Chris: "My situation might be a little specific. I'm a front-end manager of a growing agency. I find my days in front of the computer are growing. I always seem to have great ideas for side projects or fun little CodePens or whatever, but I'm starting to feel drained at the end of each day." You need them billable hours.

"Do I first force myself to turn off work at a certain point each day? How do you do this when you have people that depend on you?" You know it's just a classic, like, "How do I run my life?" thing, which I'm never totally comfortable being like, "You should do this with your life. I don't know.

Dave: I have perfected my life.

Chris: [Laughter]

Dave: I am the Dalai Lama of Web design.

Chris: Yeah.

Dave: I think everyone could agree on that.

Chris: I think so, too.

Dave: Self-proclaimed Dalai Lama of Web design. I think, listen to your body, is the number one thing, especially after my back going out last year.

Chris: Yeah.

Dave: Listen to your body. If your body is like, "I'm too tired to code at night," you're too tired to code at night - straight up.

Chris: There you go.

Dave: Put the computer down.

Chris: Yeah.

Dave: Take a fricken' nap. You know what I mean? What Netflix. Play a video game. If you're too tired, you're too tired, so listen to your body.

Dave: Are you being lazy? Yeah, maybe.

Chris: If you open that laptop anyway and try to do something, you're going to do bad work.

Dave: Yeah, exactly. I do a lot of talk planning, blogging, and little side project work at night but I've also balanced that with hanging out with my wife, watching shows.

Chris: Yeah.

Dave: Playing video games. I don't expect 100% success -- 100% hustle. I do stuff because I like it. I open the Notion to blog a big and if it's just not coming out, just close it.

Chris: Right.

Dave: Stop.

Chris: There you go.

Dave: Don't do it.

Chris: I love that advice.

Dave: That's what I would say there. I think it's always good. Again, not to be a giant capitalist over here, but don't give your job more than you have to. After the work hours end, that's your time.

As a front-end engineering manager, one of my neighbors was an engineering manager and he had to spend his weekends learning React and stuff like that just to feel caught up and that's hard because you have to take time from something to do something.

Chris: Right.

Dave: He's doing good now or feels caught up, I think, now, but you also may be time box it. Say for the next month, I'm going to buckle on this project or I'm going to buckle on something. I think, for the ShopTalk site, we were like, "We're going to buckle on this for a month here or through February and launch it," and we did. I think that's stuff you can do. You just time box it. Say, "I'm going to do it for this long." That helps.

Chris: Yeah, and hopefully -- I feel like a lot of tasks, there are always different ways that you can be useful on it that match your mood in some way. I think that's what you were alluding at it.

Dave: That's a good -- yeah. Keep going. Keep going.

Chris: You know how I was talking about how I viscerally hated the idea of time tracking. There's a thing that I viscerally like, too, the opposite of that, which is having the freedom to, at any given moment, kind of choose what I work on. Not any given moment, but a lot of moments throughout the day, including right when I get in, in the morning.

Right when I get in, in the morning, is usually pretty early. I almost never have anything booked. My mood at that moment is very all over the place.

Dave: Mm-hmm.

Chris: On any given morning I might be like, "You know what? I'm going to knock out some emails. It just feels like an email-y kind of morning, this morning." Or I might be like, "I have this blog post that's swirling in my head. I'm going to just focus on that." Or I'm going to get some social strategy ready to go, or I'm just going to live in Notion for a minute and clean house in here. I'm in a spring cleaning kind of mood, so I'm going to do that.

I very often just let my mood take me. At some point in the day, I just have meetings and stuff, so I don't get to pick what's happening at that moment of the day. It's like that thing is happening that day. As the day goes on, more of those moments get stolen away from me but I have that freedom a lot.

Dave: Yeah.

Chris: That's why I'd be nervous to be like, "I'm going to start a sandwich shop," or something because I feel like, as much as I think that's cool and dreamy and an interesting life, too, you don't get that. In the morning, then, you have to fill the mustard jar because you just have to because that's the job that day. I like having a life that tech affords. A lot of them are still just sitting at your computer, so there's that but, to me, the tasks feel so different and varied that I love that. I can home in on that mood whenever.

That's true after work, too. Like you were saying. I love that when you're like, I'm going to try a blog post. But if it doesn't feel good, just close it. Sometimes you pick wrong in your little moments. You have the freedom to pick what you want, but you didn't pick quite the right thing. You've got to listen to not only your body, but your mind too. What does it want to do right now?

Dave: Yeah.

Chris: For me, sometimes, it's like, I'm going to play my banjo because that just feels good right now. But some days I don't. Some days, as much as it's a perfect moment to play my banjo, it still sometimes isn't right mentally. I don't know. I'm just not that excited about it right this minute, so I'm going to do something else instead.

Dave: Yeah. When I have a blog post cooking, it's very evident that's what I should be doing because that's just all I'm thinking about. It's like, "Oh, I've got to do that blog post," but the HTML things. It's like, "Ah! I've got to do it." I think that's figuring out what your -- if you're into side projects. Usually, there's a little obsession that's kind of poking you.

Chris: Yeah.

Dave: All day. You're just like, "Ah, man. If I could just--" Who was it? Eli is making -- Eli Finch, Fitch? Eli Fitch is making a Gameboy game in his spare time. I'm just like, I don't have the motivation for that, but that's cool. He has things that's just like, "Oh, I want this. I want this. I'm going to do this, so I'm doing it." I think that's cool.

I think if you can come up with little, like, figure out what is annoying you. I created a side project board in Notion for myself recently.

Chris: Mm-hmm.

Dave: That lists every dumb idea I have and it's cool because you can, again, match your mood. One of my side projects is my grandpa was a POW in WWII. I have his memoir. It's just in like a PDF, so I'm typing it out into Notion. I'll get a Markdown file. I might put it up on the Web, you know, add some graphics to give it context or something. I might or I might not, but I'm just reading my grandpa's memoir and transcribing it into accessible text. That's a fun project.

Chris: That's awesome, but you probably only feel like that sometimes, you know.

Dave: Oh, yes.

Chris: Even Eli working on his Gameboy game. I'm sure there are still moments where he's like, "You know what I actually feel like doing? Just putting on a record and making some chili," or something. Then do that.

Dave: Driving my Corvette.

Chris: Yeah.

Dave: Just driving a Corvette.

Chris: That's funny.

Dave: I think that stuff, figure out what you want to do. I think listening to your body, not to be too new wave spiritual on you.

Chris: Yeah.

Dave: That's really the best thing you can do.

Chris: If you never feel like working on this little side project, then it's not really a side project anymore. Side projects are there because your brain can't stop thinking about them. They shouldn't be little guilt trips.

Dave: The flipside of that is, you've got to say no to people who want you to be their side project implementer, like my son who wants me to make the video game Cat World and we have another game called Cooking with Cats and Dogs.

[Laughter]

Dave: There's a theme for my son. He wants to be a veterinarian.

Chris: Aw!!

Dave: He'll do it. He'll be a manager of a veterinary.

Chris: There you go.

Dave: All right. We should wrap it up. Thank you, dear listener, for asking questions. Thank you for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Again, thank you for listening to 400-something episodes. This feels great. New website. Thank you. Go ahead. Check it out at ShopTalkShow.com. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

If you hate your job, head over to the brand new job board that should load pretty dang fast for you now because it's using WordPress transients. Head over to ShopTalkShow.com/jobs. People want to hire people like you, maybe like this company.

Chris: Hey, ShopTalk folks. Are you sick of living in the U.S. - or whatever country you live in? Move to Canada! There's a great job there in Vancouver, British Columbia. Absolutely beautiful place, by the way. At a really great shop called We the Collective.

They are looking for a front-end developer, an experienced front-end developer. You need to be, in the hierarchy of skills, really good at, an expert at HTML, semantic, well-formed HTML, and modular CSS. Nice. Then you should also be pretty good at JavaScript and then, you know, have some skill with Sass, Pug, Gulp, NPM, and stuff, and Git as well, and then design tools and then design, UX, and stuff like that. The full package, but I love that the pyramid starts at HTML and CSS.

If you're a listener to this show, you're probably perfect for this job already. Go show them what you've got. Move jobs. Change your life. Have it be awesome. They have competitive salary. It's a casual studio kind of place. Lifestyle benefits. It's going to be great.

At least go look at the job description, look at Vancouver, look at We the Collective, and make the choice. Go get it, peeps.

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

Chris: [Tongue roll] ShopTalkShow.com.