Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, the vacation edition. I'm Dave--in the shed - back in the shed--Rupert and with me is Chris--in the booth - just fir right now--Coyier. Chris, what's going on?

Chris Coyier: Nothin'. Hangin' out. Doin' good.

Yeah. I feel like this is our one day of overlap. We're ships passing in the night, as the metaphors go. You're back. I'm leaving next week. But we found time to do the show - because of you, dear listeners. We like you.

Dave: Dear listeners, we wanted to hang out with you. Keep shipping that consistent content. [Laughter] But, yeah, summer is hard, you know. Then it turns into fall, Chris.

Chris: Yeah.

Dave: Then fall is hard because it's like conference season, right? But who knows if we're having conference season this year.

Chris: I'm ready. I tell you what.

Dave: Really?

Chris: I just have so many memories of friends I made that ended up being pretty good. Even if they're just industry friends. I know we don't share our emotional things together, like perhaps real super close friends do. I'm not talking about me and you. I'm talking about people I've met along the way. You know?

Dave: Yeah.

Chris: But I still like them.

Dave: Me and Tim Kadlec.

Chris: They're still a part of my life.

Dave: You know? [Laughter]

Chris: T.K.!

Dave: Yeah.

Chris: I'm doing a stream with him, in a week or two.

Dave: Oh, nice.

Chris: He's got a Twitch stream. Did you know that? Not to make you jealous. I know you like--

Dave: Oh, I know. I'm fricken' jealous, dude. We can talk about my Twitch plans later. But yeah, no, he has the Webpage test stream, right?

Chris: Yeah. They just decided to go all-in on this streaming thing and do a really good job. So, right out of the gate, their streams are really high quality and a good niche because I don't know that there are a lot of other performance-specific streams out there. But theirs is real good because Tim is the man and webpage tests kicks butt. So, there you go.

Dave: It's a cool thing because it's as close as we get to a mystery here in Web development. You know?

Chris: [Laughter] Right.

Dave: You run a test and you're like, "Oh, that's weird. Why is it taking 42 seconds?"

Chris: A serious who done it.

Dave: Yeah.

Chris: Yeah.

Dave: It's a "Who done it?" right? And so, you can have a lot of fun just digging in, and it's something you kind of have to see somebody do before it all clicks. You know?

Chris: Yeah. Yeah.

Dave: Like a performance dig-in.

Chris: Yeah. Good luck on profiling just by self-learning. Pfft.

Dave: Yeah. Yeah. You don't just run webpage tests, look at that waterfall, and have instant comprehension of all your life's problems. You have to have either 400 blog posts or a guru or somebody explain it to you. And so, I think that's a great medium for that, you know, just like, "Here's how you do it. Just run it through."

Chris: Yeah and if you consistently watch it, you're basically on training for that job because it's a job these days, that perf stuff. Even if people don't recognize it internally yet, at some point somebody is going to be like, "Why is our website slow? I guess we're going to have to hire somebody to investigate," and that will be you.

00:03:22

Dave: Harry Roberts, I don't know if he's published this or not, but I saw a tweet. He was like, "I have a list of things you have to do, the order in which you have to lay out your head of your HTML." Whether that's scripts, meta, and whatever, he has an order to make it the most efficient because if you put whatever, a script before a style tag, boom, you nuked it. You know?

Chris: Yeah. Yeah. Yeah.

Dave: It could be that simple, but then there's all this minutia, you know?

Chris: Yeah. Yeah. Yeah. That stuff is hard. It's not even just reading the waterfall. It's then knowing what you can schmurf around without causing harm. It's tricky stuff.

Dave: And making people's lives worse. My thing is always like, "Oh, we need to fix images." It's like, "Well, cool. Do you want to upload all the images or do I need to do that?"

Or "Do you have to invent source set for every single image on the site or is that my job?" You know? there's all that. That stuff, I don't know. I would like to see that, people get into that, and best practices or what.

Chris: Totally. My God. You could be an image specialist - at the right company these days.

Dave: I'm not -- Christopher Coyier, [laughter] I'm not kidding. We need to get Addy Osmani on the show.

Chris: Yeah.

Dave: The wonderful folks at Smashing Magazine sent over a copy to me of the Image Optimization book by Addy Osmani.

Chris: Right.

Dave: It's thick. Man, it is (all caps) THICK, and it's just amazing. It's also just incredible, the layout and stuff that Ari Stiles did feels very good, like blog posts. It's a very comfortable read. You know?

Chris: Mm-hmm. Mm-hmm.

Dave: But it's thick and it has a lot of images in the image book. Of course, right?

Chris: I didn't know that's what Ari was doing. Book layout?

Dave: Yeah, yeah, kind of helping with Smashing Books. Anyway, it's a book. Literally, it's a 400-page book on image optimization. That's it.

Chris: Wow. Wow. Wow. So, it's image optimization meaning the final answer to what images can be like on your website. It doesn't just mean throw it through Tiny PNG or whatever. [Laughter]

Dave: Yeah.

Chris: There's that, all that stuff, which is very, very complicated into its own right, but also, of course, all the responsive images stuff, lazy loading, all the other attributes you've got to put on it. What's practical and what's not? When do you use source set versus picture? I'm sure all that is in there. It's the most complicated thing ever.

Sometimes I think of how positively people feel about machinery that does it for you. I know a lot of praise gets thrown at 11ty Image because it's the one that checks every single box you can check as far as image usage.

Dave: Mm-hmm.

Chris: There are a lot of checkboxes to check. Gatsby Image gets some praise, too, because it does some cool stuff.

I see that. You know I happen to be in the Astro Discord. I'm all hot on that Astro framework lately. They've been working on it, too, because I think they see that in the water that you might choose a framework because, if nothing else, just for the image handling because it does so much.

Dave: Component.

Chris: I love the idea of, as a user, what I do is I take a big, gnarly screenshot on my stupid Mac that makes every screenshot 18 megabytes big because it just could care less about performance, and that's what I upload. That's what I use. I don't even care. Then computers do everything else: resize it, optimize it, lazyload it, do all the CPU crap, whatever.

Dave: Definitely the future-proof way because old Dave Rupert got a 4K monitor and I regret some decisions, but you know.

Chris: [Laughter]

Dave: I don't know. It's what it -- you know. The Web is a time capsule, so there are going to be old, bad-looking stuff, so I don't really care.

Chris: Yeah.

Dave: Yeah. Literally, the best strategy is, I am just going to hotlink to a 29-megabyte image. Figure it out, computers. That's the best strategy, I feel like. You know?

Chris: I agree. I agree. You've got to outsource this stuff these days. There's too much to get wrong.

00:07:57

Dave: Well, I was reading a Jake Archibald post about image optimization.

Chris: Uh-huh.

Dave: He posted the other day. He was like, "Did you know resize observer and intersection observer don't self-destroy? You have to manually clean it up." I was like, "What?!" because I've absolutely caused some memory leaks there. But I think it's getting patched and fixed in different browsers and stuff like that now. But it was such a surprise.

But anyway, I'm on his blog, like, "I need to find more information." But he kind of was--

Chris: You know the reason I knew that is because I used -- I needed--

Okay, so you have a div and you put resize both on it in CSS, right?

Dave: Mm-hmm.

Chris: Do you think you get on resize events with that or not? Yes or no?

Dave: Say that one more time. You have a div.

Chris: Yeah, and you put overflow hidden because you have to have that as a prerequisite. Then you put resize both, so like a text area. You get the little jigger in the bottom right corner.

Dave: Yeah, you don't resize it then. You don't get nothing.

Chris: Yeah. You get nothing. Unlike the browser window, which you get on resize, at least. You do not get that on a div. Guess what you use. Resize observer, right?

Dave: Mm-hmm.

Chris: And so, I was looking up just nice ways to do it in React. Somebody, of course, published their React hook in resize observer or user resize or use resize observer - or something.

Dave: Mm-hmm.

Chris: I was looking at the code and it's pretty clean. It was pretty good.

In it, they clean up after themselves, like on an unmount, essentially. They use a use effect kind of thing. They remove the intersection observer, which I was like, "Really?!" You know?

Why bother? Why don't you just let it get ripped out of the DOM? Who cares. You know? But like you said, it's because it's a memory leak otherwise.

Dave: Yeah. It's so wild to me. There's so much....

Chris: What did Jake really say, though? What did...?

Dave: Oh, sorry. Well, so he was talking about images or he had a post on images or something. Somebody accused him, but it's half the size of images by optimizing for high-density displays. But he basically is kind of doing like--

Chris: Isn't it the old Dave Rupert 1.5x and screw it technique?

Dave: It's basically that.

Chris: [Laughter]

Dave: I made that in 2011.

Chris: [Laughter]

Dave: Um... [Laughter] But anyway, it's 2x quality at like 44 was sort of what he was saying. But I think heavily leveraging stuff like AVIF, which is a really good format. Anyway, it just got me thinking about images again and just how to load them.

Chris: Right.

Dave: Because I'm very much in the, like, "I want the easiest free way to load images." [Laughter]

Chris: Mm-hmm.

Dave: And I don't want to write sizes and source set. Bless the people who came up with that stuff, but it's not my favorite.

Chris: No, I mean WordPress just gives it to you out of the box. You just upload it. It does all the source set sizing stuff. Blasts it all on there and then you turn Jetpack on.

Dave: [Indiscernible]

00:10:59

Chris: Then it CDN hosts them, too. But even then it's a little tricky. You know one of the things that complicates the crap out of this? I wonder if it's even in Addy's book is that what's tempting to do is say, like, "Okay, take this image and make five sizes of it. Here are the five sizes that I think are right."

That is not the most optimal thing you can do. Really, computers get super involved in the creation of those sizes and make tons of different ones and analyze how well that image is compressing and what different sizes make the most sense. Depending on the content of the image, all the different sizes that it makes and the different breakpoints that ultimately then belong in source set are different on every single image that you upload. That sucks, you know? [Laughter] It's good because that's just the nature of technology or whatever, but that means that even your best automation techniques are probably not as good as they could be.

Dave: Yeah. Well for me, I'm just like, I'm going to punt and I'm going back to mobile tablet desktop sizes. [Laughter]

Chris: Yeah. That's pretty good. it's more than 90% of the Web.

Dave: Yeah. I cut the mustard there and then I guess I can optimize later. But, man, unless I have a very cool aspect ratio flip that needs to happen--

Chris: Yeah.

Dave: --that's probably the best place to start.

Chris: That's cool.

Dave: I don't know.

Chris: The reality is, there are shortcuts that must be taken in order to just get your job done and that's the deal.

00:12:34

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Gather. Gather is so cool. It's a really innovative, interesting way to bring social experiences to remote experiences.

It looks like a video game. It's like a top-down thing. You have an avatar. You use the arrow keys to literally walk around, and there are different layouts like a cozy office or a bigger office. Even the onboarding, you start on little desert island. It's so cute.

The point is, you can walk up to other people, and then you're talking to them as if you're literally videoconferencing with them, which you are. Then if you're done with that, you walk away. Maybe you go to your desk, and you hang out at your desk, which is then private.

It's a way to kick off meetings and do the conferencing you need to do with people, which God knows I do all day every day, but have it just be more fun and more casual. I think you'll find that the conversations then can become more organic. If somebody is hanging out in the breakroom, it's just a clear way of signaling, like, "Hey, come hang out with me." Why not? That's an organic thing to happen that just happens that wouldn't happen any other way.

It's not like you're on Slack and you're like, "I am eating lunch now. Please join this Slack with me." I just find that that stuff doesn't happen so much, but it would in this world where you're basically in this little cute video game all day. It's fun, but it's real too.

This is actually for communicating with actual people. Probably the primary use case being work. You have people that you work with. This is the way to talk to each other and do real work, but also bring that in real-life spirit to not actually being in real life, which would be awesome for remote teams. I think this is incredibly cool.

It's free up to 25 people, so it's like you have plenty of opportunity to check this out and try it with a fairly large team anyway, which is cool. I think it's great that it's for work. I think that makes sense as a primary use case, but it could be anything. It could be people use it for your happy hours, for game nights with friends, and literal conferences can be fun with this. Can you imagine going to a virtual conference? This is totally the way I would want to do it. Amazing!

Gather.town/shoptalk or follow the link in our show notes to check out Gather. You've got to see it.

[Banjo music stops]

00:15:05

Chris: Gosh, we got to Addy from the thing. I'm trying to go backward in time because we lose the plot sometimes on how we get to places. We were talking about streaming with Tim.

Dave: Yes.

Chris: I also did -- I haven't even done it yet. I'll let you know how it goes. I did a screencast with Chris Sev. Remember? He's scotch.io.

Dave: Oh, yeah.

Chris: Scotch got snapped up by Digital Ocean, so he's at Digital Ocean right now. We do this screencast together about app platform on Digital Ocean, which is pretty cool. It's like deploy from Git action, but for your Python site or for back-end languages as well as JAMstack-y stuff. It's pretty cool.

Then you make a project. Then you can just slap a database on it, too, as a company, which is like, "Holy crap!" You know? Now we have these static sites with a Node server, if you need one, and a database server if you need one - and stuff. It's a pretty compelling little thing.

We put together this quick little website that is static except for that each post has a like button on it, and so the like button needs to be data-backed. There needs to be a database for that. We throw that together and we use Prisma. Have you ever used it?

Dave: I am using it. Yeah, I like it quite a bit. I could talk a whole lot about it.

Chris: Yeah, we can skip it.

Dave: Yeah. Yeah.

Chris: It's not -- to me, it was like a new -- I don't know. I hadn't really used it before. It's not your database. The database was still (in this case) on Digital Ocean. It's just like a way to talk to that database, kind of like Rails active record - or whatever.

Dave: Yeah.

Chris: It doesn't even care what kind of database it is. You just write these helper methods, and it just makes sure all the SQL gets written correctly or whatever else.

Dave: Yep. Yep.

00:16:50

Chris: Pretty compelling. We used Next.js on the front-end and stuff. But what I wanted to say is that, to record the video, we used StreamYard.

As Dave and I talk right now, we've used different technology over the years. We're in Riverside.fm. It's pretty cool.

Dave: Yeah.

Chris: StreamYard is in the same kind of category, and I just found it to be really compelling software. It's incredible how little user interface there is in the app. It's like nothing. It's like the most minimal app I've ever seen. Then you spin up a little studio, like you do in Riverside here, get your streaming person in there. As you share screens and stuff, it composes the screen for you in a way that you'd expect to see on something like Twitch. You know?

Dave: Mm-hmm. Mm-hmm.

Chris: Which is compelling to me because sometimes at the end of doing a shared screencast you're like, "Okay. Now I have to edit, and that's going to take all day because I need to do all my screen composition stuff then." This is like pre-composed streams.

It's called StreamYard. We didn't use it for stream. We just recorded the video just because I'm going to put it on YouTube and whatever. You can use it that way. But of course, I think most people use it literally for Twitch, YouTube Live, or whatever because two clicks and you got the dang thing connected to Twitch. Now, all of a sudden, you're a fricken' streamer.

Dave: You're shooting it out there. Yeah.

Chris: And it's not as complicated. What's the really complicated local software?

Dave: OBS.

Chris: Yeah.

Dave: Yeah. Yeah, and one thing it kind of does -- I've looked at all this stuff quite a bit. OBS is cool and you can switch between streams or "scenes" is what they call them.

Chris: Mm-hmm.

Dave: Like maybe it's one where it's just my face just chatting, the scene, and then, oh, there's me coding, and so then it's my face next to a text editor or maybe it's a whole desktop because I want to share a browser and a code editor. Then maybe there's a gaming one where it's just the game screen. You know?

Chris: Right. Right. Right.

Dave: Not my face. It doesn't go to the side. It overlays or something like that. Anyway, these are cool because it'll do that but it can also transition and you can have other people in real easy and other people's desktops and stuff like that. You could be side-by-side desktop with heads in the corners and you could be like--whatever--code challenging or something like that. I don't know.

It's a cool space. Anyway, that's what I want to say. Riverside.fm is pretty cool here, too. It feels like a dependable recording studio, if that makes sense.

Chris: Yeah.

Dave: It's maybe less streamy bells and whistles, but you know. It's cool.

00:19:40

Chris: Did they add composition? If not, it's coming soon to video. It really seems like this company -- because we used it from early-days-ish, we watch all the features. They've been really responsive to what people actually need in the thing and they build it and it's gotten a lot more professional over time and the design has gotten a lot better.

I had a moment where I almost got really mad at them because we recorded one of these and my upload didn't finish. I left it there overnight and it still wasn't finished. I was like, "This is obviously broken and you've literally ruined a podcast." It's like the one thing that you can't screw up, you know?

Dave: Yeah.

Chris: I had to close the tab and -- whatever -- I guess we'll suffer the consequences. I was kind of waiting for their support and trying to hit them up on Twitter. I ultimately found on their site. I'm not sure I ever did hear back, which is a little bit of a strike, actually, now that I think of it.

I found they build this tool. It's kind of like a recover your crap URL on Riverside.fm. What it does is it scours through your local storage and stuff. I'm not sure where this data goes, but it is temporarily stored in browser-accessible storage. It's like, "Oh, here! I found one that didn't fully upload." [Beeps] Done!

Dave: Wow.

Chris: Apparently, problems can happen but they built componentry (you know, part of their software) to recover from problems that works pretty well, which definitely came from customers being like, "Where is my stuff? I know you're keeping it locally. Why can't I get it?"

I was in there in Chrome dev tools trying to dig around in storage to see if I could find it myself because, you know, it's worth that kind of trouble-shooting. I'll be damned if I'm going to invite people back on the show to be like, "Oh, we lost your stuff."

Dave: Yeah, and you can't redo magic. You know what I mean?

Chris: Right.

Dave: That's sort of the bummer about these online tools. I've used Zencaster and I've recorded getting close to maybe 100 episodes of Aside Quest in Zencaster, but we've lost two or three.

Chris: Blah.

Dave: You just don't know. Or had to panic download MP3s and stitch it together myself. You know?

Chris: Yeah. Yeah. Worst case is you did it over Zoom and you got the backup there and the quality sounds like you're in a tin can.

Dave: Yeah, so these tools are very, very cool, but the risk is so tough. We all know how easy it is to close a browser window and how easy it is to -- I don't know -- exit out of something.

Chris: Right.

Dave: Anyway, I'm rambling, but I think it's a cool area, especially the stuff like -- oh, I'm blanking -- with StreamYard. I think you can do some cool stuff. I have long wanted it to do online meetups or something. Maybe that's a space ShopTalk here goes into, or something like that.

Chris: Maybe.

Dave: We do meetups, just 2 people, 30-minute talks, and then we say goodbye to everybody. That would be kind of cool. I don't know. I'd be kind of curious if there's demand for that. Maybe there was in the pandemic but, I'll be honest, I was literally just getting by. [Laughter] I want to say, "Let me start up a whole new venture here." Anyway, cool stuff.

00:23:09

Chris: Yeah. Okay, questions. Thomas Michael Semler writes in. It was a little sad, I think, about the state of the industry and stuff. I think maybe -- sorry to Tailwind people. Tailwind maybe pushed them over the edge a little bit. He says he doesn't want to throw oil onto the Tailwind fire but he mainly just writes HTML, CSS, and presentational JavaScript. Feels good at that skill set.

But nowadays, organizations just aren't looking for that anymore. How often do you see a job that just says, "Looking for CSS person"? Not really a thing.

Dave: [Laughter] Yeah. Yeah. Yeah.

Chris: They're looking for JavaScript developers, essentially. That's big. And I'll even see a job posting that's like, "JavaScript developer with Tailwind."

Me and you were talking about this. They're kind of looking for a two-for. You know? [Laughter] They're looking for people that kind of--

Dave: Yeah. They think they figured out the magic spell, the set of words that gets them a two-for-one.

Chris: Yeah. Front of the front-end, we've used that term a bunch. Kind of being consumed in a way by back of the front-end. There's just more of them or that's more in demand or whatever.

Thomas essentially feels betrayed. Let's say your skill set is HTML, CSS, and presentational JavaScript. He's like, "Maybe we should stop telling people that's enough because it's not enough.

Dave: Yeah.

Chris: I don't know. I kind of feel ya. I think that kind of sucks, too, because of the people that I feel like are actually truly wonderfully great at those things, I like them. You know? I'm like, "You are a valuable person," and I don't want to tell you that you're not. But I also can't promise you that if that's all you have on your resume or that's all you talk about in interviews that you're going to actually get that job because, you know, there's a decent chance you don't. Sorry.

00:25:01

Dave: Yeah. Thomas has a lot of anger directed towards Tailwind. I think listeners of the show know I've used Tailwind. I have Tailwind projects. It's not my favorite, but as far as utility CSS libraries go, it's pretty good, and the ability to clean out the utilities you're not using is actually super good.

I think what we're seeing is either a shift or an overcorrection or an overreliance on some piece of technology. I don't know. When I saw this question come in, I had a billion thoughts. I think I understand it from, "It feels like my whatever decades of CSS knowledge are just getting wiped out by this framework." I understand that. It's not because there are going to be good and bad Tailwind people and the good Tailwind probably know how CSS works. [Laughter] It's just CSS classes, basically, CSS properties in class names.

Chris: Right.

Dave: That said -- man, so many thoughts. But the other thought I had was, our industry does this. It's just like, "Oh, Facebook uses React. React is cool. Cool. Everyone is using React. Everyone, you need React!" There are big shifts here and it feels like if it's not your thing, if it's not your cup of tea, if it's not what you like or don't use or never got the time to learn or use, you can feel left behind. I've felt that before, for sure.

I think, though, you have to understand your stuff has value. It's just the value is changing kind of in context. You may need one more tool in your toolbox or shed that kind of gets you somewhere - a little bit closer. I would say HTML, CSS, and presentational JavaScript is enough, especially if you get into these things like -- whatchamacallit -- Astro and stuff like that.

Chris: Mm-hmm.

Dave: That I think is totally enough. But I think I would add one more thing to this list is you have to know how to wire a template.

Chris: Mm-hmm. Mm-hmm.

Dave: If you can't wire up a template (JavaScript, Vue, React, or whatever) maybe you don't know how all the React stuff works, but you have to work in the template.

Chris: Yeah.

Dave: I think that's kind of bare stakes or whatever.

Chris: Yeah.

Dave: The brass tacks right now.

Chris: Yeah. Yeah.

Dave: All these things are going to spit out HTML somewhere, so you need to know how to do that. There's probably going to be some dumb big toolchain in front of it and you're going to have to figure out how to work with or around or install dumb big toolchains. But it's like figure out dumb big toolchains, learn how to change a template in that, and that's how your skills remain valuable.

Chris: If you do and have done that, it's like you're a hop, skip and -- you might as well just fudge it on the resume and be like, "Yeah, I know React."

Dave: Yeah. Honestly, I would hire you.

Chris: Yeah. Cool. You can find in project and find where that particular div is and change the stuff. Cool. You know that framework then. [Laughter]

Dave: I would hire you to do that for me because I do that a lot and I've got other fish to fry. It's just like these skills are valuable. You just have to figure out how your skillset fits in the new meta, we'll call it.

This is a video game concept. There's meta. There are cool heroes or characters in a video game. Attacks or something like that. You have to figure out how your skills fit in the new meta and then do it. You can be an old dog and use the off-brand or off-meta skills in the new meta, but you just have to kind of be either really good or just figure out a way to keep up.

Chris: Hmm.

Dave: I'm going to say I think having the ability to wire a template, whether it's in any framework, and you feel really good about that like, "I can wire a template in any language or framework you want to throw at me," I think that's important. I think that's 90% of the job, to be honest.

00:29:38

Chris: I'm hiring at CodePen. I'd like a Node.js specific-developer, please - a very good one. You can listen to this show and that'd be cool. Although, this show is so front-end focused, we're hiring really specifically for back-end work. You know?

Dave: Yep. Yeah.

Chris: That's fine if you know React or something like that. That's not going to hurt against you in any way, but the job is going to be back-end and I want you to like the back-end and that would be okay that your whole day is dealing with back-end stuff.

This show probably isn't the perfect fit for an audience in that way but looking for a Node.js developer. Posted on a bunch of job boards and tweeted it and shared it in private circles like our Discord and stuff. I don't think we've found the perfect person. Obviously, we haven't. We haven't hired anybody yet.

I will say, just for the people out there, at the risk of sounding like a complete dick, people are really super bad at applying for jobs. We've gotten lots of--

Dave: [Laughter]

Chris: We've gotten a lot of applicants and their ability to just follow really simple bullet point instructions on how to apply is like [pfft] 2% or something like, "Did you even read it? Wow!"

Dave: Yeah.

Chris: Unbelievable how bad that is going. Then do you know who we are? Can you write an email that doesn't sound terrible? Do you have no excitement at all about who we are and what the job is and why you might want it? Just none.

I think there's a bit of a labor shortage in that way in that the applicants are just weirdly bad.

Sorry. If you're one of the people that applied, I apologize. I'm being a dick to your face but I guess I'm telling you that you're bad at applying for a job because you are. Just wow.

Dave: What would you want to see? Do you want that Dan Maul thing where somebody makes a webpage specifically for why CodePen should hire Dave Rupert?

Chris: Pfft. If somebody did that, you'd almost be immediately hired.

Dave: Really? Wow.

Chris: I cannot promise you that, of course, you know, so I'm sure somebody will do that and then I'll have to be an even bigger dick and not hire you. But I just think it would be incredible. It would go an incredibly long way.

The average response now is just like, "Hello. I am developer. Here is a list of things I know: Angular."

Dave: React.

Chris: React, yeah.

Dave: Tailwind. [Laughter]

Chris: "I do work. Here is my resume," and the resume just - whatever. They're not terrible, but they're just really bland.

I'm hiring a back-end developer here. I don't need a magical, beautiful-looking resume, but just a little bit of taste. If you just opened up a template on most apps, they look better than what you get. You know? Like, where did you even find such a horrible template to use?

Dave: [Laughter]

Chris: Just your average template is fine.

00:32:48

Dave: My wife is not very career-minded. That's a positive way to spin on that, but [laughter] for the longest time she's like, "Oh, I don't have the skills that somebody is looking for," but I was just like, I wish you could shake up the game and just put at the top of a resume or something, "Here's why you should hire me." You know?

Chris: Right!

Dave: For my wife, it's like, "I remember everybody's name. It's a weird thing I have. So, if you have anyone that comes into your office or your whatever, I'll remember their name. It's what I do, and I'll make them feel welcome. That's my superpower."

Chris: Mm-hmm.

Dave: Boom. Done.

What if that's for whatever tech? You know, "Hi. I'm Dave Rupert. I can wire the hell out of a template. I put on some chill tunes, some low-fi beats, and I make your website. That's what I do, and it's pixel perfect and beautiful." Just say that. That's great. Hey.

Chris: That would be amazing. That would be better than any applicant we've gotten so far.

How can you not do that? How can it not even occur to you to write something human-sounding? Ugh. It just blows my mind.

Dave: I think the game sucks. I think the rules, you know, and what you learned in college, like, "Please prepare your curriculum vitae." You know? Whatever.

Chris: Yeah. Maybe if they did that, they'd be auto-rejected from bigger companies looking to hire them, so they don't. It's not their fault the game sucks, like you said. That seems fair.

Just know, if you happen to be listening to this, that that's not the case here. I don't have a pre-sorter machine that automates resume stuff and rejects them without looking at them. I am rejecting some without a response that are so bad.

Alex and I were laughing that some of these seem like catphishing. They seem like you're not even a real person. You're just trying to see if you can somehow wiggle into the system and start getting a paycheck even though you're a bot or something.

[Laughter]

Dave: I saw this Reddit thread. It was like....

Chris: They had like 15 tech jobs at once or whatever? Yeah.

Dave: Yeah! It must have been in the [techno voice] Discord.

[Laughter]

Dave: He was like, "I currently have 12 jobs right now."

Chris: [Laughter]

Dave: "I stay for like two weeks and then they eventually figure out I don't know anything."

I just was like, one, good job. Pog champ. That's great. [Laughter] But two, wow, ethical problems. Gees. But you know, again, some people don't get it. I don't know.

I don't know. I think there's -- yeah. I wonder, too, if it's like knowing the company culture or even just the size or the vibe of the place you're applying. I don't know. I don't know.

Chris: Hmm.

Dave: I think the game sucks too, though. That's what I'll say.

Chris: Yeah. Yeah. I don't mean to just blame everybody, but--

Dave: I just looked at my LinkedIn.

Chris: But I'd love to see some candidates that actually have an interest in working at CodePen and building something really cool, being part of a small team with equity, and fricken' have a chance to do something really cool with us, I hope. I mean I would think that's appealing to some people out there even though there is what seems like a labor shortage.

Dave: Well, I wonder if there's -- you know as much as we're like, "Oh, you've got -- everyone is full stack now," I wonder if true Node developers are very few. You know?

Chris: Maybe.

Dave: Or they're up to their armpits in work.

Chris: I mean we thought it'd be really hard to find a GO developer, and it's not like we were overwhelmed, but we had a handful of candidates that we thought were pretty good and hired the best of them.

Dave: Mm-hmm.

Chris: That was earlier. That was more pandemic-y. I thought that would be harder because it's just a little bit rarer of a language. There are just more Node developers, you'd think.

Dave: You'd think, but maybe not.

Chris: Maybe not.

Dave: Maybe people who are Node developers actually work on Node. [Laughter]

Chris: Maybe.

Dave: Or are - whatever - CTOs of startups.

Chris: But like Deno was cool. Maybe we should have mentioned that. I don't know that that's going to be perfect for us, but you'd think there's some excitement around that at least.

Dave: I bet there's one dork out there who is like, "Oh, an opportunity to write in Deno? Oh!"

Chris: Yeah.

Dave: "I will do that." But the same diff to you all. I'm sure you don't care. Interesting. Well, I'll take your leftovers if you have a good candidate camp. [Laughter]

Chris: Oh, yeah? That's cool. We'll give you the scraps. There are not even scraps yet. Sorry.

Dave: Well, okay. We'll get there. We'll get there.

Chris: We'll get there.

00:37:19

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by DebugBear. That's debugbear.com/shoptalk. Get a free trial if you go there.

It's performance monitoring for your website in which that you install nothing, so the setup time for this is pretty darn fast. I've had it set up on CSS-Tricks. It's so good. I really like it.

It's one thing to just hit your website, look, see what's going on with it, get a bunch of performance information, and then it's another thing to set that up on a schedule, to be continually doing it. That way you can graph it over time and see how you're doing.

Set up alerts that's like, "If this drops below this or above this, that's a problem and I want to be notified of it." That's vital stuff. That's grown-up stuff on the Web doing what's right for your website because you're monitoring it. This is stuff like Lighthouse scores, Web Core vitals, your load times, tracking errors in production, and all this kind of stuff.

I got an alert when I had an HTML problem, like an unclosed tag kind of thing. That's wonderful! DebugBear is super cool for this and I'm really compelled by how easy it is to use. It's pretty darn nice. Thanks, DebugBear, for the sponsorship.

[Banjo music stops]

00:38:50

Dave: Hey! I've got another question here. What do you think? One more question?

Chris: Sure. Meredith.

Dave: Meredith Grubs writes in, "Hi, Chris and Dave. I've been really enjoying the show. Self-taught and have a couple freelancing projects under my belt. I'm definitely learning--"

Chris: Cool!

Dave: "--and starting to feel like I've gone from fully understanding what you're talking about 10% to 20% of the time to 40% to 50%."

Chris: Woo!

Dave: Awesome. Level up, Meredith.

Chris: I'm only at like 70%, so--

Dave: Yeah. Yeah. I'm riding high. [Laughter] If I hit 70%, I'm doing good.

"I have questions about billing clients. Recently, one of my clients had an error pop up on her site that needed resolving. The error was in an area I was pretty unfamiliar with; server Cloudflare hosting, etc. So, I spent a lot of time researching and fixing the problem. I spent about four hours total on the error but I only billed her for an hour because the rest of the time was me learning something I would have known how to do if I was more experienced. My thinking was it's not appropriate to bill a client for something the average freelancer would know how to do. Future me won't spend four hours on that problem. It's not fair to pass that cost off on the client. My client, however, who is really amazing, sent me an email saying she knew I spent more than an hour on the problem and was sure I didn't want to bill her more - question mark."

Chris: That's a pretty good client, I guess.

Dave: "Interested to hear your thoughts on this. It feels like I'm trying to pick and choose what's appropriate to bill."

Chris: It seems like you're fretting over something very small, and that's okay. It's not like you shouldn't, but just like you're early in a lot of the other sub-journeys that you're trying to take. You're probably a little early in this one too. I don't know. Stuff is going to be -- I think you should worry more about where you spent 40 hours than 4 - kind of thing.

I would probably have billed for the four hours because I think everybody does. There's always some degree of learning that happens. Learning about the client themselves and their needs is the same kind of learning that researching a Cloudflare issue is. I would say that the average freelancer definitely doesn't know every Cloudflare issue there is and how to fix it, so those four hours were billable.

But I'd say the answer on whether you should or shouldn't bill for it is more complicated than, "Did I have to learn or not?" I think there's more of, "Am I going to piss off this client or not?" There are more factors than just, "Was it fair or not?" If it was just fairness, bill for all four hours, for sure.

00:41:48

Dave: You know I think there are a few ways you could go about it. I think one is, as a freelancer, you're going to have to factor in learning time into your costs. The chances of your hours being 100% billable, like 40 billable hours a week, is probably pretty low. So, you're going to want to - whatever - have that cost factored in. Either your rate is raised to where, if you lose three hours, you're researching, it doesn't hurt you that much. Or you could take the hit and say, "That's a learning experience. Now I know. That's great."

You could [laughter] -- I think if you're going to recommend the server Cloudflare, whatever the problem was, to other clients, I think it's worth you knowing, learning, and eating that cost. But another thing you could do is maybe try to upsell. That sounds gross or whatever but, "Hey, I fixed this. It took about an hour. Sorry for the delay but is there anything else I can do for you?" Roll that sunk cost into more business or something like that to where it'll kind of average out in time or something like that. It doesn't feel like you just lost half a day to learn how the flush cache button works or whatever.

I think there are different ways you can recoup the costs if you decide to just lose the hours. That said, they're paying for your time and your time was four hours, so you could totally bill for four hours. If you feel guilty about that or whatever, you could say two or three. Split the difference or something like that.

Chris: Yeah. Yeah.

Dave: That's really -- I don't know. But don't go cheap on yourself. That's why I'm saying either try to turn it into other business or build it into your cost. Build research or learning stuff into your costs or now just use Cloudflare or whatever the same hosting setup for something else.

But if it was a problem with email, 100% I'm billing all four hours. It's like, "Oh, my email did a weird." Oh, cool. That's four hours. I don't know how email works. So, that's what I would say. Hopefully, that helps, Meredith. I'm sorry I'm not helpful. I don't have any....

00:44:29

Chris: I would say that part of me says that it worked against you a little bit here, the fact that they had to write you back and say, "We know that it took you longer than that. Why didn't you bill more?" is them -- it feels like they're patting your head a little bit, and that's not a great place to be. They want to look up to you as a real source, as somebody who really knows what they're doing. Instead, they're having to hold your hand a little bit. That's not the whole story, but it feels like that a little bit. I don't think that's a place you want to be.

Dave: Yeah. Yeah, you maybe want -- you're not in the alpha seat right now. [Laughter] You know? Maybe, yeah, just be like, "Oh, no, no. I don't bill for educational hours." You could just say that or something like that.

Chris: Mm-hmm.

Dave: Or research. That shouldn't be on y'all. Don't worry about it. You know? You just -- I don't know -- make it sound like it's something you do [laughter] over and over and over. You know? I don't know.

Chris: Yeah, totally. Okay, well, should we wrap it up, Dave?

Dave: Yeah, we can wrap it up. Hey, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Join us over in the [techno voice] Discord, patreon.com/shoptalkshow.

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

Chris: ShopTalkShow.com.