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 front-end Web design and development. I'm Dave--on a Mac right now--and with me is Chris....

Chris Coyier: Ooh, I'm going to cross my fingers for you. Yeah, it's just getting dry, I think. A little cold here.

Yeah, welcome. I know we've talked about this for a number of episodes. You did finally blog it. If anybody subscribes, of course, via RSS to Dave's RSS club, Dave has -- you have blogged it now and you covered some stuff we didn't talk about in the show. Cool.

What I was really excited -- I wanted to hear you just dig Mac--

Dave: Yeah.

Chris: --because my day-to-day life on Mac is just fine. I don't even think about it. I have zero complaints. But of course, you would if you're gone for a long time and then came back. You're going to be annoyed by like 20 things, and you did it. You delivered.

Dave: Well, it was partly because you mentioned it on the show. You were just like, "What do you not like?" I was like, oh, wow, well, if people are interested.

Chris: The 1x text rendering, you got to dig. I don't know. I have nothing to compare it to, but I can see how you would go there.

Dave: It's not good. San Francisco as a font, not good.

Chris: [Laughter]

Dave: Bluetooth on Macs, not good. [Laughter] You know if I leave; if I pull out my earbud, my Apple earbud--

Chris: Yeah?

Dave: $100 Apple earbud--

Chris: You pull it out. Okay.

Dave: I guess each one is $50. Pull that out--

Chris: AirPods, you mean?

Dave: --to go to the bathroom, which, because I'm 40, that happens 72 times a day or whatever. I go to the bathroom, I come back, and the Mac is like, "What's a headphone?"

Chris: [Laughter]

Dave: "What do you mean, headphones?" I'm like, "Yeah, dude. It's the ones I paid $100 for." They're like, "Nah! I don't even know. I mean it's in the sound, little menu, but I don't know how to connect to it."

Chris: Gosh.

Dave: It's like, "Mac, I was just listening to headphones," and it's like, "I don't even know. I don't get it."

Chris: Yeah. I wonder if there's some Big Sur stuff going on there, too. I know on mine the show volume and menu bar just turns itself off all the time. Then it changes its icon depending on if you have headphones or not, which makes it harder for me to mentally get because it's a speaker-looking icon if you aren't using your headphones and it's a headphones icon if you are, which to some degree makes sense but it makes it hard for me to find. Sometimes, it's just not there at all, which really confuses me.

I bought some new headphones because my old Beats just broke. They literally snapped in half, so there's that.

Dave: Oh, no. Oh, no.

Chris: They were just totally unfixable. I tried to duct tape them for a while. I buy some new ones and it has this weird thing where I literally don't know the technology involved. I'll put them on and it'll decide that music should be playing then because I've put them on.

Dave: Okay.

Chris: But in my setup, I have an Apple TV in the office that's connected to a TV that has a HomePod on it. The HomePod will randomly start playing out in the other area of my office because all I did was put on some non-Apple branded Bluetooth connected headphones. It somehow sent a signal to my computer that's like, "Music should be playing elsewhere." [Laughter]

Dave: [Laughter]

Chris: It's like, that's odd. I'll be in a meeting and the meeting audio is fine but music just started playing somewhere else. That's real weird.

Anyway, of course, so this is how disconnected and just troubled of a human being I am. Then my answer to that is to buy $550 Apple headphones that they released that day and there are zero reviews on. I'm like, that'll fix my problem. But truth be told, I'm just excited about them because that connection where they just kind of work is appealing to me.

Dave: That would be cool, I think, if you buy into the ecosystem. My Surface earbuds, which aren't very popular but they work really well with a PC (other than the latency) but it just works really well with the PC. I was just so impressed by that.

Chris: That's what you were talking about with the bathroom thing, with the "What's an earbud?" thing? You were using Surface earbuds?

Dave: Surface earbuds.

Chris: Oh, cool.

Dave: I can get all the way across my house, but the Apple earbuds are like--

Chris: Six feet.

Dave: Forty-five feet max, yeah.

Chris: Oh, 45.

Dave: Yeah, like 12 feet.

Chris: That's better than I thought.

00:04:51

Dave: I don't know. It's not that far and it depends on how many walls. It's not great. I ended up buying a touchpad because my mouse and I would set the natural scrolling for my trackpad on my laptop, or that's how it came. I was like, "Ooh, I don't like this on the mouse. Let me flip it back." Then it messed up my trackpad. My trackpad went inverted, and I'm just like, "Could you imagine a world where these are different, Apple, please?"

Anyway, I just bought a trackpad because I was like, I can't deal with the mouse shifting every time I open it. Of course, people were like, "Well, you can download a third-party thing." It's like, I don't--

Chris: Hmm.

Dave: I'm trying to get out of their workarounds thing. I'm trying to get out of fixes for fixes.

Chris: That's been your keyword lately: workarounds.

Dave: Workarounds, I'm tired of workarounds. Every time I say it, I say amen because I feel that in my soul. I'm just tired of workarounds. I know a lot of the job is about workarounds. I know programming is basically workarounds.

Chris: Yeah.

Dave: You're writing workarounds to make a rock think, you know.

Chris: Mm-hmm.

Dave: But I don't want workarounds. I want systems. Does that make sense?

Chris: Sure.

Dave: I'm at an inflection point where I can start new, so I want a good system. I don't want a good workaround. I don't want a collection of workarounds. I want a system.

Chris: Yeah.

Dave: I think, from the get-go, I'm going to install Hazel. I haven't done it yet.

Chris: Woo!

Dave: I was like, oh, maybe I have an old license.

Chris: I used to use that. Yeah.

Dave: Wipeout my downloads folder every week. Organize my desktop every day, every minute, every time a file shows up. That seems like the best thing I could do for myself. I just want better systems in place, so there you go.

Chris: Love me a system. Yeah, I was thinking. I don't know why this popped to mind but as much as I can remove little customizations of how things work, I prefer it. You could argue that Hazel would be the opposite of what I'm talking about then because now you've added some dependency. The idea is to systematize it, so I get it. Remember that art--

Dave: Yeah.

Chris: Oh, yeah. Tell me.

Dave: Sorry. For me, it's like I'm adding an enhancement, not a workaround. Do those sort of differences make sense to anyone else? Hazel is like auto-file organizing. That seems like a feature. That's a very complex feature. It's not like, "Install this app so that you can get your mouse going the other way." I don't want the mouse one. I want the auto-organize my files, please. That's the distinction I'm trying to make in my head.

Chris: Yeah. It's for that task. You're not bastardizing some tool or whatever. You're using the tool for exactly what it's for. That probably factors in, too.

Dave: Yeah. I'm not trying to hack the OS.

Chris: Yeah. Yeah.

Dave: I'm trying to add sensibility to my life.

Chris: Yeah.

Dave: That's, I think, the....

Chris: I think I used it for things like if this type of file is on my desktop then actually go move it over here because that's where I really want it anyway. Please delete crap out of my downloads folder after 15 days. Little rules like that that kind of end up keeping a cleaner system.

Dave: Yeah. Well, and I think that's like screenshots on your desktop. Wouldn't it be cool if they just showed up in a folder instead of all over? Then they auto-deleted after a week.

Chris: Mm-hmm.

Dave: That'd be cool.

Chris: To delete a couple of WordPress plugins lately that were kind of like doubled up. Any time I delete one, it feels good. Not because it's some arbitrary goal to have fewer of them, but it's old. I don't know if it's actively developed anymore. I like running a stock system when I can that applies to all kinds of stuff. Every time I can do that, it's great.

00:08:58

You wrote (or forked or something) this plugin called Art Direction for WordPress that I've used for over a decade.

Dave: Yeah. Nice.

Chris: All it does is add a little meta field to WordPress and you can just arbitrarily write a little chunk of code into it and it just injects it on the page. It's so simple, what it does.

Dave: Yep.

Chris: It does nothing at all. The idea, though, is you can then write scripts and styles in there. If you write a style tag and it gets injected, well, it will style just that page. It doesn't get applied all over your WordPress site. The idea is literary art direction, and I know that term has been a little bastardized to mean a blog post that has some custom styles on it but, hey, here we are. If you want a blog post with some custom styles on it, that plugin makes that tremendously easy.

I still have it in. I haven't been able to delete it, but our lead editor at CSS-Tricks, Jeff Graham, blogged yesterday. He's like, "Oh, here's a little trick on how to apply some custom styles," now that we have Gutenberg. "You make an HTML block, you write a style tag, and you put the stuff in there."

Dave: Oh!

Chris: I'm like, "Wow, Jeff! That's deliciously easy. That totally cancels Dave's decade-old plugin Art Direction."

Dave: I fully support it because it's a hack. Try to sneak it in there. WordPress didn't really have the concept of -- I don't know. It didn't really have the concept of blocks, right?

Chris: No.

Dave: You just didn't have a place for it in the CMS or whatever.

Chris: Right.

Dave: But that's cool.

Chris: Yeah, I don't know if I'd even call it a hack. It used all the right hooks and stuff. It did what it was supposed to do. I would love to delete it because I'm sure you have no plans on ever touching that piece of code again.

Dave: No.

Chris: It's been ten years, so probably not a good -- [laughter]

Dave: No.

00:10:46

Chris: But I don't know how to convert it. That's tricky, too. I've done some plugin conversion lately. We just did it on ShopTalk, actually, and I ended up hiring a company to do it because it required some MySQL trickery and stuff. Both of us have the ability to do that, but you know. Who wants to? [Laughter] Outsource it.

Dave: Who wants to? [Laughter] Who wants to but, also, I mean, we took the site down one day.

Chris: Oh, yeah.

Dave: A failed migration or whatever.

Chris: Even with help, it was tricky. The idea was to move to this plugin called Seriously Simple Podcasting, which is just much nicer, upgraded, and has development behind it. Wanted to get on that instead one that isn't actively developed, but it's work to get there. If I wanted to delete your old plugin, that Art Direction one, it's going to be tricky.

Dave: Mm-hmm.

Chris: So, I probably won't. Maybe I'll hire somebody out at some point to think about the problem and do it, but I would like to do that at some point. I wonder if there are any bored WordPress people out there that are pretty good WordPress developers, you know, custom stuff. I have some jobs I'd like to do at some point. Feel free to reach out to me if you get a kick out of that stuff. I just have some stuff that have been pages forever on CSS-Tricks that I really think should be custom post types, but I don't want to change any URLs. It's maintenance stuff like that that I just don't want to do myself that should probably be done at some point.

Dave: Yeah.

Chris: But anyway--

Dave: We should say a shoutout to Castos, the company that does Seriously Simple Podcasting who helped us with this, if you want to show them appreciation and give them money.

Chris: Specifically Jonathan over there really did a good job.

Dave: Yeah. They offer a podcast hosting service, too, that you can kind of get in on. Anyway, but no, I'm fully on board. Have I told you my--? Do you know a nanny share?

Chris: Yeah. Yeah. Yeah.

00:12:35

Dave: I told you this idea.

Chris: Well, we've dabbled, for sure. The idea is that you don't just have a nanny, which is kind of expensive. You share it with a couple of other families. Yeah?

Dave: Yeah, and so moms and dads can get days off while kids, particularly small kids, are taken care of or watched to make sure they don't put a Lego too far up their nose. With four families, you get two days a week or something like that. I've always thought it'd be great to have a handyman share. [Laughter]

Chris: Oh, my god.

Dave: You know like a maintenance worker for the neighborhood or something that I could pay.

Chris: Mm-hmm. Get them for a day a week or whatever. Oh, my god.

Dave: Yeah! He'd just--whatever--fix that weird light socket. Wouldn't that be great?

Chris: Yeah. Oh, god.

Dave: Maybe I could get all my days and--whatever--paint the baseboards or something. I would love a handyman share.

Chris: Dave!

Dave: I would absolutely sign up for it.

Chris: You're a genius.

Dave: I know. Free ideas here on ShopTalk. I'm just giving them away. Just free startups.

Chris: I've got to go to Home Depot today, which maybe I won't. Maybe I'll order it online. Sometimes in Bend, the order time for stuff is weeks and it's not great. The light went out in my closet, so it's literally pitch black in there. I have to pick out a shirt in darkness or use my phone flashlight or something. Not the end of the world, but I'd like to fix it. Get the little ladder out, take the light fixture off the thing. Of course, it's the weirdest lightbulb ever.

Dave: Mm-hmm.

Chris: It's not just a fricken' lightbulb, [groans] which should be illegal.

Dave: No, it's one of those halogen ones where if it gets fingerprint oil on it, it blows up.

Chris: Yeah.

Dave: Yeah.

Chris: It looks like a ring bologna, Dave. It's a circle halogen light.

Chris: [Laughter]

Chris: Who picked that out? And it doesn't plug in. It has this extra little wiring config that you have to do and it has this four-prong plug to plug it in. I'm like, this should be illegal in houses. What is wrong with a lightbulb, the normal kind?

Dave: [Laughter]

Chris: Oh, my god.

Dave: This is good. Yeah, so you don't want to do that. If you had a handyman--

Chris: I'm not going to replace the fixture. I'm going to go to the store and get a ring bologna light to do it. But, yeah, I wouldn't do it. I'd hire the handyman to do it in a heartbeat because it's kind of an errand, too.

Dave: Handyman share.

Chris: But that way if they're a handyman, they'll probably get the right lightbulb because I'm putting myself at like a 62% chance of coming home with the wrong lightbulb anyway even though the right one is in my hand.

Dave: Oh, I take a picture of the broken lightbulb in my hand so I know exactly how big it should be in my hand.

Chris: Yeah.

Dave: I go to Home Depot and I stand there for an hour and a half. I put every single lightbulb in my hand. That is how you find a lightbulb in the year 2020.

Chris: You're dang right. You're lucky to even have it. Anyway, I love it. That timeshare, timeshare handyman.

00:15:29

Dave: Wouldn't that be cool for websites now?

Chris: Yeah.

Dave: Handy-nanny.

Chris: Oh--

Dave: For websites where you just whatever for biggish blogs. You hire somebody to chuck some hours at it. Maybe it's full-time.

Chris: All these things could have different skill levels, too. I wouldn't even mind somebody that -- like, I want to hire somebody who is super good at Mac development, but almost like not too good because sometimes the prices on that stuff are sky-ass-high.

Dave: Oh, yeah.

Chris: I'm like, "What?! No, I don't think so." It's like $5,000 to change -- you're like, no.

Dave: I would like my name on an iOS app: $40,000. [Gasp]

Chris: I'm starting to think, though, that I could make an intern pretty busy around here. I'm going to dabble in that in the new year. It's probably not safe to have -- I don't even know. But we could start virtual at first but, in the future, I'm interested in having one that comes to my office.

I think it could be -- I don't know how to structure it. Am I buying help or am I training them or both? I'm kind of interested in both. I actually want to make you useful to me in my life, but I think, by virtue of you being useful to me, that's training you, too, and we can just do JavaScript lessons too. We can just make it teaching.

it's not charity and it's not -- I don't want to get no value out of it. I want you to literally help me in my websites.

Dave: I think that's officially an apprenticeship and you have to wear leather aprons and stuff like that.

Chris: Apprenticeship. Yeah, and you have to do it for a weirdly long time before you get to be a master. It's like ten years.

Dave: Yeah, like 16 years. Yeah.

Chris: Yeah. [Laughter]

Dave: [Laughter]

Chris: Oh...

Dave: Sign up. It's ten years, no pay.

Chris: Yeah.

Dave: But you'll learn about websites.

Chris: Yeah.

Dave: It's going to be good.

Chris: At the end, your raise is like 15%.

00:17:19

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Hover. That's hover.com, which is a damn fine place to buy domain names. They have 400+ extensions, you know, .com, .net, all that, but 400 meaning all the cool ones. They have a huge portfolio of those, which is great.

It's just a damn fine place to buy a domain name, period. It's a really clean checkout process. It's a really clean admin screen for managing and dealing with your domains. I recommend it to absolutely everybody who needs to buy a domain name, whether they're brand new, which I then tell you, "You've got to get yourself a domain name. Get yourself some skin in the game. Now you have a domain name. Now learn how to point it to hosting. Now build your website and put it there." That's what makes the Web real and it can be this really great ah-ha moment.

Go to Hover. Get 10% off. Follow the link from our show notes to get that. Very generous of Hover, so do that. Awesome.

For new entrepreneurs, give yourself that skin in the game. Get the domain name. Make the idea real in your mind.

Hover has all the good stuff. They have free WhoIs protection - super nice. Thank you. That super nice UX/UI around not just searching for the domain names but, more importantly, once you own them, logging in, seeing your portfolio of domains, being able to do stuff with them, meaning like you get the email with it, so that's important.

For listeners of ShopTalk Show, we're talking about pointing your DNS to where it needs to go, changing name servers, and doing that kind of stuff that you're going to need to know how to do once in a while as a Web worker kind of person. Hover makes that awesome.

Do all that at hover.com. Thanks so much for the sponsorship.

[Banjo music stops]

00:19:11

Chris: Hey, did you fix Puppeteer? Was that satisfying?

Dave: Good news. Yeah. I mean I have -- part of the whole thing about switching to Mac was I couldn't run Puppeteer and it was frustrating. I got it running on Mac.

Chris: Puppeteer is the thing where you emulate Chrome, people. It's instructions to spin up a headless or head-full version of Chrome.

Dave: Yeah.

Chris: Yeah, and it had workarounds for workarounds (as Dave put it) in Windows land.

Dave: Yeah, workarounds for workarounds and it didn't really work, and so I put it on my Mac. I am hitting a weird timeout error. It's only 2000 milliseconds to do an accessibility audit or something and it's not working. [Laughter]

Chris: Okay. Halfway there.

Dave: But I skipped that, but I can get the tests to pass if I watch the task.

Chris: Oh.

Dave: I did the full TDD thing, Chris.

Chris: Oh, yeah?

Dave: I impressed myself. I copied--

Chris: You used an expectation library with it - or no?

Dave: Yeah, so this one, it's generic components, which is generic Web components by Pascal, I think (@thepassle on Twitter).

Chris: This seems cool.

Dave: It's just a pretty generic thing, but he's using @web/testrunner, which has web/testrunnerchrome, which has Puppeteer Core.

Chris: Okay.

Dave: Puppeteer Core tries to use whatever is on the system. It doesn't install a new Chrome.

Chris: What are these tests for? They're accessibility tests?

Dave: There is accessibility, like just a blank kind of ax audit.

Chris: Yeah.

Dave: Like, is this even HTML? But then even functionality, there are functional tests like, "If you click this, does it have this attribute? Does it have that attribute? Does it do this?"

Chris: Yeah. Integration-ish tests. Yeah.

Dave: Yeah, integration-ish tests and just, "If you click the second button, does it actually do the thing? Does it all change?" Yeah. I think it's all a flavor of Mocha.

Chris: Web component testing. It has its own little library. These look nice.

Dave: Yeah! Well, and the idea is they're completely styleable. It's just very basic components, and so that's kind of what I've been looking for.

Chris: Was one of the tests failing or something?

Dave: Well, nothing was failing, but I wrote my test first and it was failing. Then I had to go into the code. I kind of constructed a test. I copy/pasted an existing test and stuff like that.

Chris: Yeah.

Dave: But I kind of modified it. I wrote the test first and then I did the code and it failed kind of the whole way. But it was kind of cool because it was like, if it works, this is what should be happening. Then I finally got it to kind of work and then it just turned green. I was like, that was cool. That was actually fun. [Laughter]

Chris: Did you set up a watcher so, like, as you're changing code, it keeps rerunning the test?

Dave: Yeah. Yeah, as I was watching, it would just save.

Chris: Sometimes we--

Dave: Then--

Chris: These tests are written as, like, it parentheses still moves if you do this, you know, and then you write what happens, and then there's an expectation at the end of it. You can type it.only and then your watcher will only watch that one test, which is kind of satisfying, too.

Dave: Oh! Interesting.

Chris: Just for little speed reasons, you know.

Dave: Kind of work around it? Yeah. No, that's actually -- I could have used that advice. It was cool, but I got that running on the Mac. It worked. I pushed. I've committed open-source. I think it's all being reviewed as we speak, but the idea is to kind of build out a tabs element that is progressively enhanceable based on feedback from non-sighted users and stuff like that.

Chris: Nice. Yeah.

Dave: You know how in jQuery you--?

Chris: Oh, tabs wasn't done. I'm looking at the lib right now and it looks like it's -- so, that's what you were working on. There's no -- oh, it looks like there's kind of one but it's not very well documented.

00:23:32

Dave: There is. There is, yeah, but it was kind of like a group of buttons, button elements, and then a group of panels to control. That's what the ARIA wants, right? But if you're a non-sighted user and you show up, it's just like, "Button, button, button." You're like, "I don't know what that means." [Laughter]

Chris: Hmm.

Dave: All the ARIA shows up, but let's say the JavaScript didn't fire and you just showed up and it was like, "Button, button, button." It wouldn't mean anything to you.

Chris: So, you need to do an ARIA role of tabs?

Dave: Yeah, so you have ARIA role of tab list around the buttons and then tab on the button and then tab panel on the panel content. That needs to be linked up via ARIA controls. It's pretty sophisticated and not something you want to write yourself.

Chris: No. That's the point of this, right? Don't write it yourself. Use this.

Dave: Yeah, and so jQuery UI used to do it with a UL. They would do an unordered list of links that linked to content and that was pretty good but then the feedback was sort of like -- I don't know. It's just meaningless to hit a navigation in the middle of the page. You're just like, you don't expect it to be there - or whatever. The design work we're working on -- and this has Brian Kardell involved, Jonathan Neal, and quite a few other people are all kind of involved in this design (and Leonie Watson). It's going to be, basically, you write headings, so H2, some content, H2, some content - or whatever.

Chris: Yeah.

Dave: Then we convert--

Chris: These are the panels.

Dave: Yeah, H2 then panel content, H2 then panel content, just like you were writing a straight document. Then if you wrap it in the generic tabs, it'll roll up into a tab interface.

Chris: No way! Cool.

Dave: Your heading becomes the button and the label and everything for the panel.

Chris: Yeah.

Dave: [Loud exhale] We'll see how it goes. I'm sure there's a lot of work ahead, but that's sort of the first draft. From talking to Leonie, I think her opinion was, like, if I disable JavaScript or it gets disabled by some bad script, it would be more useful to have a proper document outline working that gets auto-converted into a tabs thing or something. That's kind of the design we're working on. We'll see how it goes.

Chris: That's clever.

Dave: Hopefully. Yeah. No, it's interesting.

00:26:14

Chris: It is. I remember. I think it was the Heydon Pickering post about tabs that got me mind screwed on it again because it's not just the semantics that you apply to it. There's JavaScript involved because of the, what is your expectation of how you traverse between the tabs, like the actual buttons, and then how you get back and forth between the content and back to the button that you were just on.

Dave: Yeah.

Chris: It's kind of like, what's the return button do? Does it activate the tab and then move your focus or does it not move your focus? Then how do you get back and forth between the buttons? Is it arrow keys or tabs? Tabbed does what you don't think it's going to do, right? I think tab is supposed to take you to the content, not to the next tab over.

Dave: Yeah. Tab will take you to the next focusable item in the content, actually. You need to make sure the panel is focusable so that it goes straight to the panel or the H1 or the whatever that's in the panel.

Chris: Right. In my mind, tab would take you to the next button over, but it's not supposed to do that.

Dave: The next tab.

Chris: Yeah, that's what arrow keys do, I think.

Dave: No, because once you're in the -- yeah, once you're in the tab list, that's where arrow keys come in: left, right, and then up, down should kind of do the same thing.

Chris: Kind of like radio buttons.

Dave: Like radio buttons. Then home and end actually come into play, so home will take you to the first one. End will take you to the last one. Then cycling through if you go over, over, over 15 times. It'll loop back to the first one and kind of cycle you through.

Chris: Yeah. It's like a fundamental problem.

Dave: Actually, I don't know if that's -- maybe actually that's not the behavior. I'll have to re- -- I'm going to scratch that statement.

Chris: Okay.

Dave: Because I think it's just kind of like -- you should maybe hit the end and then have to work back, but it should maybe stop you, like keyboard trap you.

Chris: [Loud groan]

Dave: Yeah.

Chris: Yet another complication there. If you were to just write -- if I had to write -- I could write tabs in literally five minutes. I'd go link, link, link, link, link. The hashtag for those links would link to the ID of a div that's sitting below it. I would display none and display block the tabs below that. I could write it in generic vanilla JavaScript in five minutes and it would be super wrong.

Dave: Yeah.

Chris: But I would think I did a good job because I've written it with somewhat semantic HTML. The links link to the right places. The tabs that aren't active right now are display none, which makes some sense to me. It's not active right now. If you want to activate it, then go to the link and link to it. Then it will be active. It would seem right but it would miss about 15 things on this list of the ways the tabs should behave.

Dave: Yeah. Yeah. No, when you dig into it, you realize, oh, there's actually quite a bit to it that I didn't realize. You know you didn't do a possibly terrible job. It's insufficient. People can skip to the content and reveal the content and disclose the content just like how you have it set up, but then people maybe, when you're browsing through listening orally, if you're doing audio browsing, you don't know it's a tab list. You just hear, "List of five links," and you're like, "Is that important?" [Laughter]

Chris: Yeah.

Dave: You need the -- when you use role tab list or whatever, you get a bit more information, a bit more context about what you're interacting with.

Chris: Mm-hmm.

Dave: Yeah.

00:29:55

Chris: Makes sense to me. Cool. It's funny, all that Puppeteer funniness. I think there was a little drama there. I don't know all the details, but Puppeteer is a Google project and there was a bunch of people who worked on it.

Dave: Yeah.

Chris: Some of those people were also connected with dev tools for some reason, and there was a bit of an exodus over to Microsoft as part of it, like not just one person but a bunch of people. Then Microsoft, all of a sudden, is like, "We have a thing, too. It's called Playwright and it's open-source and it's a way to control browsers." Also, Chrome because there is no Edge anymore. There is, but it's Chromium.

Dave: Yeah.

Chris: So that it takes the same instructions, but Playwright can also control Firefox at least, too, and some other browsers, which is definitely a limitation of Puppeteer, although I'm sure they have their eyes set on that. Then the drama was that some people pointed at Playwright and said, "Listen. You say that you can do those things but it requires these extreme patches to those browsers that are not ever going to land in those browsers," so it's like you're controlling some bastardized version of that browser. Then other people were like, "No, that's not. That's all not true."

I don't know all the drama, but there is some of that. I know -- I see Playwright used more and more. I wonder if that would have ran more smoothly on your PC, just coming from Microsoft.

Dave: No, and that was the question my friend Charlie asked. They were like, "Did you try Playwright?" I just was like, "I don't know what I'm using," because I see Playwright written in the documentation somewhere but it doesn't tell me Playwright. It just says Puppeteer Core can't connect.

Chris: Hmm.

Dave: That was -- it would be great if I could switch it over to Playwright. But again, I'm on an open-source project, third-tier dependency. I don't control that. I'm just trying to vibe in the setup and I don't control the third-party dependency. I can't walk into a project and be like, "We're doing it this way, everybody."

Chris: No, not if there's this much code written, too, that's working well for everyone else.

Dave: Yeah, and that's the bummer part is like, I basically had to buy a Mac to work on this thing. [Laughter] There, of course, is other stuff. There's a lot of other stuff, but I had to buy a Mac to work on this project and then my own little projects that are going to use Puppeteer and stuff like that.

Yeah, that's frustrating to me from an open-Web perspective. The Web should work for everyone and there shouldn't be a buy-in, like you have to buy a Macintosh if you want to contribute to open-source. That's a bummer and no-fault to these libraries. They're just getting by. No fault to people on the Windows side who are working hard to fix this. No-fault to Mac users. It's just when we don't have diversity, we don't have ubiquity and we unintentionally block people out. That's a bummer.

Chris: Yeah, I'll say.

Dave: Sorry. No bummers on this podcast. It's the Holiday Season. We're cruising into 2021. All problems disappear. [Laughter] Oh, go ahead. Do a bummer.

00:33:20

Chris: I was going to do a podcast recommendation. I just randomly put it on, but now I'm feeling out of my mind a little bit.

Dave: No, do a--

Chris: Have you listened to Shankar Vedantam who does the Hidden Brain Podcast? I think he does multiple podcasts.

Dave: No.

Chris: He's like the best podcast host ever.

Dave: Okay.

Chris: Really? Hidden Brain. Nothing? Okay, well, you should listen to it.

Dave: Nothing. No. Now I want to. J

Chris: I was just listening to one yesterday and I think it was called "Outrage." Now I'm like, maybe it's this really old episode because--I don't know--now I'm not finding it. I'll have to send it to you later.

I remember the gist of it because I just listened to it yesterday and it was that you know when you're outraged, generally, but this was kind of about social media, so like when somebody is like, "I'm mad!" on social media, which is, these days, honestly, most-ish of social media. It's like wild how much that's the norm on somewhere like Twitter.

Dave: Mm-hmm. You complain on Twitter to get stuff done. That's a fact, Jack. [Laughter]

Chris: Yeah. You know what? It kind of works, too. I have a funny story about that. That's probably not suited for the podcast, but whatever.

Sometimes it works. I hate that, but I write to support. Get nothing. Complain on Twitter. A developer sees it and fixes the problem. Wow.

There are moments when -- I think there's lots of evidence of outrage happening on Twitter and then deeper context evolving and then being like, "Ooh, that was actually wrong." You know? There are some things pointed to that.

This podcast went into the idea that there is some science that outrage is rewarded in your brain--

Dave: Oh, good.

Chris: --which I guess I didn't know.

Dave: Oh, no!

Chris: Yeah. [Laughter]

Dave: [Laughter] No.

Chris: That when you're really mad and you slap somebody's wrists or you just let that rage happen because you're correcting somebody else, somebody else did something wrong and I'm making sure they know it, you know it, everybody knows it. You get that little -- I don't think it's dopamine, but that's the word used with gaming and stuff, right?

Dave: Yeah.

Chris: You get that little hit of, like, I did a good.

Dave: I did a good. I told them. I said my fries were too cold and they went and got me new french-fries.

Chris: Right. They were saying the evolution has made a bet on this and that, historically, good has come from being able to correct people. Times change a little bit. Now it's like, "Oh, my gosh. Everybody and anybody is doing it."

Dave: Oh, yeah.

Chris: Think of all the danger of all that. Then, like a good, researched podcast, point to some actual instances of this, of tons of outrage happening. The danger then being that if more evidence comes up and the thing that you were outraged about -- maybe there's even an entire role reversal and the outrage should almost go in the other direction because you were wrong. This video didn't have enough information in it or you got the facts wrong or something. Unfortunately, people's desire to then correct themselves is much lower.

Dave: Yeah.

Chris: You don't then slap your own wrist and say, "Oh, I should not have jumped to that." You don't. You either double-down or you kind of walk away from it, which is just scary.

Dave: Yeah. We have a whole -- our brains actively work to convince us we're correct in every situation to prevent us from emotional trauma or whatever. [Laughter]

David Dylan Thomas's book brought that up. It's just like, "Are our brains working against us?" Sometimes. I don't know. What do you do? How do you reprogram a brain?

00:36:53

Chris: It's the doubling-down. We've seen that, certainly, over the last couple of years, but probably forever. I don't mean to make everything as a 2020 problem, but you see people that you get called out for something. The temptation then is to be like, "I know I was a little wrong before, but [laughter] you just wait. Now I'm going to triple my opinion strength on this."

Dave: Oh, man.

Chris: It never ends well.

Dave: I didn't think we were talking about J.K. Rowling on the podcast, but I guess we are.

[laughter]

Chris: I did think of that, but this podcast didn't mention her. There are some other good examples. I think the example they used was some kids who were MAGA hat kind of thing and looked like they were getting in the face of some Native American people, which was very strange.

Dave: Yeah.

Chris: Then a longer video revealed that there was way more nuance to that story. But then showed some great examples of another step removed beyond that where people then there was this woman--I should be quoting her by name, but I just listened to the podcast yesterday. I didn't expect us to be talking about it this much--did reverse her opinion and said, "I was wrong about my opinion on the video," and published it in the Atlantic. Then pundits latched onto that article and were like, "Look at her! She was a nutjob!" missing all the context and nuance of her story.

Dave: Right.

Chris: It's like they did the same thing she was doing. It's just--

Dave: Well, and then she's doing the right thing by saying, "I was wrong," and then people out there -- do you watch Phineas and Ferb?

Chris: I don't know that one.

Dave: Your daughter is probably not old enough. Phineas and Ferb is great.

Chris: Oh, I know what you're talking about.

Dave: These two brothers who have this older sister that's always trying to bust them, so somebody says, "I am wrong. I'll admit that." Then people, just Candice come out and they're just like, "See! I busted you, dude. Look. You're uncredible because you're changing your opinion." It's like, no. In a good world, changing opinions happens. Hopefully, we are changing/modifying our opinions towards a global truth of some kind.

Chris: Yeah.

Dave: I don't know.

Chris: Don't you like that classic "Strong opinions loosely held" thing where you're like, you don't want to go around with too much gray.

Dave: Mm-hmm.

Chris: I'm bad about that. I'm always like, "I can see both sides, so I guess I won't weigh in." You're not that useful of a human being if you just never have any opinion about anything, but you should be willing to change your opinion based on any evidence that comes your way.

00:39:34

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by WooCommerce, which is the e-commerce plugin for WordPress. It's what powers all the e-commerce on WordPress.com, so you know just like WordPress and WordPress multisite, the open-source projects are basically what WordPress.com runs on. But WordPress.com is at this amazing scale, so you know this software better work and it sure does.

WooCommerce specifically is what we're talking about here. Just an amazingly powerful e-commerce software. I use it. I've used it many times to sell stuff online.

It's free and open-source and it can do a lot right there. Then WooCommerce, the business, makes money by you needing this specialized plugin that does this specialized thing. Well, you pay for that. Usually by the year kind of thing, and you usually are like, "Well, thank you, WooCommerce. I really needed that exact functionality. I need it to work really well, and I need to know that it's supported." It's always there for you. That's what I love about WooCommerce.

Today, let me point you to woocommerce.com/mobile. They have native mobile apps for iOS and Android, so you get that on the Apple app store or the Google Play Store. They're just super nice apps.

It's everything that you'd ever want to do with WooCommerce on your site, even if it's your self-hosted site or whatever, which it is for me. It works great. I can open up the native app; see all my sales; see charts; see what happened today, what happened this week, and this month; look things up; and know what's going on with my store. Crucially, I can add products, too. They were saying that was absolutely the number one most requested feature of this app that you couldn't do before but you can do now, so a big, nice release there.

I'm just imagining this almost romantic story in my mind of an artist opening up their kiln and pulling out this beautiful platter and the kiln firing turned out perfectly. They have this new platter that has this swirly, beautiful design on it. You're like, "You know what? That's $175 platter right there. That's going on my store for sale that I already have set up to sell my wares. I'll add shipping in for it that's appropriate. I'll take photos of it. I'll lay it on a cool stump that's next to my kiln and take beautiful photos of it and put it up in my store."

You can do all that right from your phone. You don't have to be like, "Uh, I guess I'll take some photos now and then, later, when I remember, I'll go back to my computer and post this thing for sale." Nope. You can do it right from the phone. Super cool.

Thanks, WooCommerce.

[Banjo music stops]

00:42:31

Dave: Bringing it back to work or websites, Cap Watkins, who is a VP of design character--

Chris: I only think of him as the "sliding scale of giving an F" guy.

Dave: Yeah, "The Sliding Scale of Giving an F," and so you say the button should be blue. That's a strong opinion. But then you say, "I'm two out of ten on the F scale."

Chris: Oh, yeah.

Dave: That's the curse word. I only give two Fs on how much this means to me. If somebody is like, "It should be purple. I'm like a ten Fs on this."

Chris: Right.

Dave: All right, well, cool. Now we have [laughter] some measurements.

Chris: Right.

Dave: It maybe just helps. I don't know. Somebody could also exploit that and just always be a ten, but then I think there's some trust.

Chris: You could. It doesn't work if you're not honest. Yeah. I've used it. I use it probably every week, and twice in the last couple of months, highly effectively.

Dave: Really? Interesting.

Chris: If you're a zero, I don't even think you should say what your opinion is because you're so low.

Dave: [Laughter]

Chris: If you're just really low, you should just blast your opinion but make it low. A five is really interesting because you're like [groan] so, you know, like this is tricky. I don't know. I can't even. You're having trouble even querying your own brain about it.

Dave: Mm-hmm.

Chris: Then the eights, nines, and tens are super interesting, too. I think people should really respect you when you come at something with an eight, nine, or ten. I had to do it in the context of a cofounder relationship kind of thing. It didn't lead to any fights. I didn't want to have a meeting about it and be like, "Hey, what do you think of this?" When you're an eight, nine, or ten, I think it's your responsibility to open with that. Say, "I'm going to show you something and I feel really strongly about this. I'm at an eight, nine, or ten about it, so I want you to know that that's where my brain is at. I don't want to risk having this meeting and then coming out of it and having you just be like, 'I don't care that much.' I need you to respect how much I care about it."

Dave: And hadn't thought of it. Yeah.

Chris: Yeah.

Dave: Yeah. [Laughter] Yeah. No, I think that's great. I mean we had a situation, a pull request with a poorly named variable or prop. I was like a one, you know.

I just was like, "I'm just adding a note because I don't know if this is the best name but I can't think of a better one. We can always change it later, but I'm just adding a note. I'm vocalizing this."

I'm very much communicating, "I'm just a one here, but I think there's a better name. I just can't think of it." You know?

Chris: Okay. Yep.

Dave: That's just a situation, and we came up with a little -- you know, nudged it a bit and get it in a little better shape. That was literally this week.

Chris: Cool.

Dave: I think it helps to just not be so absolute. You can have an opinion, but contextualize how heavy it is, how strongly held it is, or whatever.

Chris: Wonderful stuff. Yeah.

Dave: I'm going to subscribe to this podcast. It looks pretty good.

Chris: Yeah. It's one of my favs, for sure.

00:45:43

Chris: Over on CSS-Tricks, we launched the end of year series. Actually, this podcast will be the last ShopTalk Show for 2020, so that's appropriate.

Dave: Hey!

Chris: We'll see you in January.

Dave: You did it, listener. You listened to all the episodes. [Laughter] Maybe not.

Chris: Yeah.

Dave: Good job. We'll be back.

Chris: We'll be back. Absolutely. We'll see how inspired we are over the Christmas break, too. Sometimes I do projects that just sound kind of fun but I would never have time for otherwise. I'm just sitting on the couch watching kids' shows anyway, or something, and poke around at design.

This was a fun diversion, I think, this weird two-color pixel font thing on ShopTalk Show, but I cannot get it out of my mind that I think we should go back to something a little more normal. [Laughter]

Dave: Yeah.

Chris: Normal and palatable.

Dave: It was fun. Aufia and Dan knocked it out of the park just in terms of fun-itude or whatever. But yeah, I'm kind of with you. Maybe we need to dial it back just a smidge-a-roonie.

Chris: Yeah. I could see landing here and being a little overwhelmed to the point of it where you're like, "I don't know how to engage with this," as strongly. You know?

Dave: Sure.

Chris: Anyway, it was all to our specs, so yeah, I agree, it was a fun thing. I almost feel like one of those redesign moments where you're almost just like, "Install a default theme," and just be like that was the forcing function for me to get to it.

Dave: Okay.

Chris: I don't think we quite can do that because ShopTalk Show has gotten a little weird over time. We invested in custom post types of series, so we can link to a series. I love that. I would never get rid of that.

Dave: mm-hmm. Mm-hmm.

Chris: Anyway--

Dave: Yeah.

Chris: That doesn't work. Any given theme off the shelf will have no idea about your custom post types.

Dave: Right. Right, unless we wrote some script to siphon those into the content or whatever in WordPress. We'll have to figure it out. No, I think it'd be fun.

00:47:45

Dave: I think my holiday project is going to be -- we made this app called Day Trip. It's like a go find places -- how to leave your house on the weekend at a moment's notice.

Chris: Mm-hmm.

Dave: It's the Austin area only. Just as we've progressed with client work and now we're working on something else, I'm now getting server notices, like, "Your server is going to be taken offline," like Heroku upgraded sort of things or whatever.

Chris: Oh, no.

Dave: Then send grid is like, "Your API keys are going to expire. You need to redo them all." I'm just like, you know, my project is going to be to take this thing offline. Decommission the app into a little Nuxt app on Netlify that goes and fetches the data from the database but then we cut the Web server off of Heroku, so you can't log in. You can't sign up. It's just purely the functionality.

Chris: Yeah, but you're going to leave the database on. You're not going to static it out.

Dave: I may steal it, the pieces I need, but I just was kind of like, you know, I've been messing with this tool called Prisma.

Chris: Oh, yeah.

Dave: It's like an ORM, almost like Active Record in JavaScript. It compiles out this go client that's really efficient at interfacing with Postgress or any database.

Chris: Did you have to scaffold out the data? You do, right? You have to write your own schema and stuff with Prisma. Yeah?

Dave: You write your own schema and you're just like, "Here's what--" It can also introspect, which is a fancy word. It can introspect for data, so I'm going to just introspect the database. Then I should be able to clone it into a little Nuxt app pretty easily, but that's just sort of like a project. You know? It's like, oh, man.

Chris: What does that mean exactly? If you had an existing database without schema, it can look at it and see what's up?

Dave: Yeah. Yeah, it's basically like -- I think there's a describe function in MySQL query that you just say, "Describe this table," or "Give me a list of all the tables and then describe each table." Then it'll infer all the fields and all the types and everything and then generate a schema based on that.

Chris: Oh, that's nice. Yeah. Yeah. That's cool.

Dave: That's the hope.

Chris: I think of that stuff because I don't know that I ever have--ever in my history of tech--written a schema for data, ever. But I'm also not -- I feel like that's a weird thing to be afraid of because I've used lots of data modeling tools in my life.

For example, even on ShopTalk. We're like, you know what? This post should have additional fields. It should have a podcast field and a running time and stuff. We don't quite do that because that's handled by a plugin, but we do have custom fields, like what are the advertisers for this show? Who are the guests and stuff?

We modeled that out through Advanced Custom Fields, I think. I've used other tools in the past, too, but that is a really good one for WordPress.

You're modeling data. That's literally what you're doing. Every person who has ever done that has modeled data.

Dave: You're totally modeling data.

Chris: That shouldn't be so far away from the real nerdy, like, writing a schema kind of thing. I was kind of -- they've been sponsors. What I'm talking right now is not sponsored is that AWS Amplify has gotten into this a little bit with visuals building.

Dave: Yeah.

Chris: One of the reasons people use Advanced Custom Fields in WordPress is because you just do it all visually. You're like, "I need this field. It is an email field. It is a file upload field. It is a name field," or whatever. You just drag them around and attach them to things and do that stuff visually. I need that. That's why I'd use Contentful or something. Maybe Sanity Studio because I maybe am irrationally scared of database schema generation.

Dave: Mm-hmm.

Chris: If I was going to use some tool that didn't have that, I'd be too scared. What a cool release from AWS Amplify to kind of expect that there's coded schemas but help you scaffold them with a GUI.

Dave: Oh, that's--

Chris: It ends up being a GraphQL output kind of thing. I'm like, oh, that is super cool.

Dave: Oh, really? Danger. That's cool. No. Yeah, I was digging into Amplify this week. I just was like, "Is this the easiest way to use AWS?" [Laughter] I was like, "Oh, maybe this is it for me."

00:52:28

Chris: Maybe it is. I've heard glowing things about it from somebody else. Somebody sent me this article the other day. I'll have to put it in the show notes. Again, I can't quote anybody, which makes me this terrible radio host.

It was something about the glue of the developer experience gap. They were praising Amplify in that way for, like, AWS -- traditionally, Amazon is not very good at the overall experience. They make some of the absolutely unquestioned best developer tools, but the way in sometimes is not great. There are ecosystems around that helping you with the way in. They were praising Amplify for being like, that's the one team over there that seems to be getting it right.

Dave: Yeah.

Chris: For even somebody like Dave Rupert, apparently, you need not hand-holding, but something that's not so obtuse.

Dave: I don't want to spend a day setting up an S3 bucket, and that's where it's at now. [Laughter] It's just like, "Oh, you want me to -- oh, gosh. What's my ISAM? Okay. What's an ISAM?" You know? You're just like, "Golly," but they're like, "Drop down. Use this one or this one or this one."

Anyway, not to give free advertising, but there are other tools.

Chris: Yeah, a whole ecosystem out there.

Dave: But that's just such a big piece. It's a very serious infrastructure, enterprise-grade infrastructure, whatever. But if it's hard to use. Again, Dave Rupert, a team of three people, that's my job. That sucks. I don't want it to be hard. If it's too hard, I don't want to use it.

Chris: Mm-hmm.

Dave: Because all of that falls on my shoulders. There's not a DevOps team. There's not a principle engineer who gets paid 70 times what I make. There's nothing like that. It's just me. Well, me and my friend Julien. Yeah.

00:54:29

Chris: I started to talk about this. On CSS-Tricks, we're doing this end of year series, inviting people to answer the question, "What is one thing you learned about building websites this year?" That's been interesting. I would encourage you to check that out. I think people are kind of in the mood for that end of year wrap-up kind of vibe and that's what all these guy writers have done, including writing that's saying nothing or I don't want to talk about that because I want to talk about something else because this year was so wild. There's some of that in there, too, along with some stuff like logical properties and TypeScript and some very technological ones too. That's very much on purpose. That's what I asked of people, like, you can take either one of those angles and I think they'll flow together nicely. I'll put that link in the show notes as well.

Dave: Yeah. I've really enjoyed these. Very high quality and it's so good. Natalya Shelburne's was just like, "2020 was not a good year for learning. I learned a lot, sure. Yeah. But tell you what. In this year, I just literally had to have fun. You have to do that," as somebody who my new hobby is playing solitaire and watching YouTube. [Laughter] Whatever. 2020, man.

Chris: Mm-hmm.

Dave: Just get a deck of cards and play some solitaire. That's what we've been doing. My wife started it.

Chris: I hate to say it because the point of that is to not worry about your productivity because that's what you have to let go. You have to worry that this time is -- because I have that real bad, that kind of like, every second, I should be doing something valuable to myself, for the world, or the website, or this project, or that project, or something. If you can just not do that, just be like, "Oh, that's interesting. I'm just going to chase this down." Even if it's code related or something, if you can remove productivity from the equation, I think that's kind of what she was getting at, like, "Screw it. I'm just chasing this down because I think it's fricken' interesting. That's where my mind is leading me right now."

Then the great irony of that is that the more you do that and let your brain kind of rest and not feel guilty about what it's doing that you end up kind of better for it anyway. It ends up kind of being good for your productivity because your mind is in better health.

Dave: Yeah, I saw somebody tweet, "The best debugging tool is eight hours of sleep." [Laughter] I just was like, "Ooof. You jerk. Okay. Sure."

Chris: [Awkward laughter] I'd probably be a stressed-out mess, but that's my superpower. No matter what's going on, my brain, it just closes its eyes and it wakes up eight hours later.

Dave: Oh, man. I'm not that. Mine is like, "All right, brain. We've got some time. Let's start a side project and play some video games. We'll go to bed about--I don't know--1:00. Then what time do the kids wake up? Oh, shoot. 6:30. Yeah, that's going to be hard but, guess what, we've got coffee. Let's do it."

[Laughter]

Dave: That's my whole life, dude.

Chris: When I woke up early today, that was one of the first articles I read was one that said that some people who do that -- I'm not saying this is you, but -- do it because -- this is probably the opposite of you -- don't have control over what they do in a day. It was about a lot of people that work in China that overwork. Because you don't have control over the rest of your day that you seize that control at night. You're like, I don't care what the consequences of this are. I'm going to do whatever the heck I want to at night because at least I have control of that. It was very cool.

Dave: No, that's fair. I could actually see that. I can see that definitely in the lives of people I play video games with because they're just absolute -- well, not -- well, sometimes the people in my chat, in my Discord. [Laughter]

The people, like randos I team up with, they're just full tilted. They're angry. They're screaming about nonsense. It's like, "You just want some control in your life. You just want to control everybody in this video game. I understand it, but you're being a rude dude." Yeah. No, that's interesting.

Chris: I am going to take all these questions that you wrote in and I promise you we are going to answer them in 2021, because there are some good questions in here. We don't have any time right now. We can do one, though. Let's do one, huh?

00:58:54

Dave: We're doing one question.

Chris: Classic. Classic here. I guess this one, Magna Scara wrote in. He linked us to a Reddit thread. I totally subscribe to a couple of Web dev things on Reddit because you get good stuff. One of these days, I swear to god, I'll answer one of the questions. There are all these interesting questions that pop up and then I never say anything.

Dave: You've got send me. Is it just our Web dev? Yeah. Okay. Our Web dev.

Chris: Well, that one, but the CSS one is okay, too. Because I think that it's welcoming-ish. I shouldn't say that because I can't actually vouch for that, but the questions are very wholesome in the CSS one. They're like, "How do I do this thing?" It's a very legit question, I think, and I'd like to try to answer them. Sometimes they're not asked perfectly and sometimes they're a little out of scope and stuff. I think that's kind of what makes them wholesome sometimes.

Anyway, this one is not a question. Well, it's kind of a question. It's like, "How do you round a number down in CSS?" Let's say you had 3.02 and you just want 2, 3, or whatever. You want to round to the nearest whole number there. Can you do that?

My answer is no. Of course, you can't do that in CSS. JavaScript would be happy to do that for you. Maybe you could do it with a custom property or whatever and then do it in JavaScript and kick it back over to the custom property.

There definitely is no round function in CSS or anything like that. But Magnus pointed to this post of a stack overflow answer, of course, that's wild of showing you how you can do it. Of course, you use the calc function in CSS with this astronomically large, scientific notation number where you do multiplication, division, and stuff. The end result is it works. It rounds the number.

Dave: It's 4.940656-blah-blah-blah-blah-blah E to the negative 322nd power.

[Laughter]

Dave: Or like negative 322 decimals left or whatever. Yeah. Wow. Okay, so it's a very negative number.

Chris: So, I'll read it to you.

Dave: Yeah.

Chris: It multiplies the value to be rounded by a really small value that underflows the value starting at the third decimal point. Then it divides the truncated value back, resulting in a rounded version of the value. This assumes that all browsers you support use the 64-bit floating-point values. If they don't, not only will this be wrong; it might return zero when using smaller floating-point data types, completely breaking your page.

That's a heck of a caveat. Even if it does work in the browsers that you're supporting, wow. That's not a good plan, I think, for understandability of your code and all that kind of stuff, not to mention, why are you trying to round numbers in your CSS at all? Doesn't it come from some external source? If it comes from an external source, that means JavaScript is probably involved anyway where you can do the rounding.

I can't even think of a use case here. I should be careful there because I hate it when people swoop and poop and be like, "I can't think of a use case off the top of my head, so your idea is dumb." You know? I can't in this case, but that doesn't mean that there's no use cases for this. I just can't think of one.

Dave: But Magnus asked, how do you deal with CSS pixel rounding? Assuming that that Reddit thread is bad, how do you deal with especially relative units like Ms and REMs and FIRs and percentages? I've had CSS grids break in certain browsers like IE. A border disappearing, CSS shapes lining up on certain devices. But I wouldn't wish it upon any developer to deal with strange magic rounding number functions like that. Do you encounter these kind of half-pixel issue kind of things or anything like that? No?

Chris: No. [Laughter]

Dave: I've hit it before. One trick -- this is extreme. Don't hard code odd numbers and you're going to be in better shape.

Chris: Whoa!

Dave: Yeah, like IE specifically.

Chris: The point is even numbers just divide better.

Dave: They divide by two way better, and four. [Laughter]

Chris: Yeah.

Dave: Odd numbers tend to have a problem, so try not to do that. Also, I always do that responsive thing where you just chuck as many decimal points as you want. I know people are like, "This is stupid. Don't do this. It's only three max or something like that."

I don't know. I'm just in the -- let's just give browsers the most information they can have and they can figure it out. If they don't like it, I'll move it one tiny number. [Laughter]

Chris: That dividing thing does make sense to me. Right? You have a number, 13, and you need to divide it in 2, which is 6.5.

Dave: Mm-hmm.

Chris: But isn't that okay? Can't you just let it be 6.5? You're saying if it's 6.5, sometimes you get -- whatever. You're between two-pixel lines and it gets fuzzy or something. It would have been healthier if it was six or seven.

Dave: Mm-hmm, six or seven. But I would say since border-box, like box-sizing border-box hit, I have a lot less problems with needing this even number hack and stuff like that. A lot of times it was like borders factored in there, so they'd add a pixel. Then if your padding was an odd number of pixels, they would add. With border-box, everything is slurped into one go.

01:04:49

Chris: All right, well, I think we did it. I think our weekly therapy session is over here.

Dave: Yeah.

Chris: There was a tweet I put in the show notes that was very popular on Twitter that says, "Why do men start podcasts instead of going to therapy?" Uh, I'm in that tweet and I don't like it.

Dave: I am in that tweet, but I have an answer. Because I'm a podcaster and a male, of course, I do have an answer.

Chris: You do?

Dave: I'll put it on my blog. I went to a retirement seminar. It's a weird thing. [Laughter] I've heard a lot of men -- and you can break out of the gender binary -- they are task-based in their relationships and stuff like that. A lot of their relationships are task-based in work or doing a podcast or something like that. A lot of men will convert any kind of relationship into a job or something where it's some sort of task. Maybe that's why. I don't know. I'm just throwing that out there.

Chris: Kind of good, though. You're saying that because this is a weekly thing for us that we can treat it -- I don't know -- or it feels more work-like, but why doesn't putting on your calendar, "I have a therapy session at 2:00 p.m. on Tuesday," not feel like work? That doesn't quality?

Dave: Yeah, I guess not. I don't know.

Chris: Yeah, maybe.

Dave: I don't know.

Chris: It wouldn't for me. It would feel like an errand. I hate errands.

Dave: That's maybe true. Yeah. Ugh. Again, handy-nanny. [Laughter] You need a handy-nanny.

Chris: Yeah. I love that idea. Let's end with that. Yeah.

Dave: All right.

Chris: All right.

Dave: 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.

This time, be sure to subscribe. Don't unsubscribe over the holidays because then you won't get it when it comes back, right? If you get a new phone over the holidays, make sure to resubscribe. That's how we stay in your podcatcher.

Follow us on Twitter, @ShopTalkShow. Let us know if you're working on any cool weekend projects and stuff like that. Let us know if we need to cover something in 2021, anything like that. This is the time for ideas or whatever. We'll take whatever. Then we may experiment a bit in the next year, but we haven't really talked about it.

Yeah. if you hate your job, 2021 is a year to get a brand new one because people want to hire people like you. Head over to ShopTalkShow.com/jobs and get a brand new one.

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

Chris: I like that -- what was I going to say -- oh, I lost it -- ShopTalkShow.com.