453: Streaming Hardware, Babel Thoughts, Power Washing Websites, and a Desk Update
Dave's got YouTube dreams, a conversation about Babel, trying to generate a goldilocks level of source code a la Backbone and Underscore, power washing WordPress websites as a career, and an update on Dave's desk.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
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--in the shed. [laughter] You thought it would never happen--Rupert. With me is Chris--beautiful ombre, in the booth--Coyier. Hey, Chris. How are you?
Chris Coyier: I'm doing just fine. I'm looking at you. I know that this is not a video show. Sometimes, we kill our video if we're having bandwidth trouble, but you've got the fiber and my Internet is okay here. Sometimes, we leave the cameras on.
Dave: Mm-hmm.
Chris: You're probably in Zooms all day, too, like the rest of us - pandemic life. Are you thinking of going above and beyond the webcam?
Dave: Well, yeah. Now that I have the space, right?
Chris: Yeah.
Dave: Now. Now the monitor is just wandering.
Chris: Your hobby is going to turn into 50 more hobbies.
Dave: Yeah.
Chris: Yeah.
Dave: Yeah, yeah, so now my brain, you know. Okay, this whole episode is Dave's fricken' brain and its problems; the problems Dave's brain creates for itself. I have the space, right?
Chris: Yeah.
Dave: I'm like, well, I might as well gussy it up, get a new desk mat.
Chris: Yeah.
Dave: Get new plants, a little--
Chris: I'm looking behind you and you've got a space heater, maybe. No, that can't be a heater in Texas. It's just a fan?
Dave: It's just an air filter, yeah.
Chris: Then a poster you thumbed up on the wall. That's it. You've got a lot of--.
Dave: Yeah, yeah, well, that's actually a window.
Chris: Oh!
Dave: It looks like a poster.
Chris: It's a little fogged up.
Dave: Yeah, but anyway--
Chris: It's time. It's time to gussy it up. What are you going to do?
Dave: I'm gussying it up.
Chris: You can only do one thing at once, right? Otherwise, your bank account is just a goner, right? You can't be like, "I've got to deal with this."
Dave: Oh, Chris, we are emptying the bank.
[Laughter]
Dave: We are just -- you get one shot. This is it. But anyway, I'm like, so now that I have the space, my mind is like, "Oh, no kids!" Chris, no kids! I could finally start that streaming channel I wanted to start two years ago. I could start doing that.
Chris: Right.
Dave: Oh, if I'm going to stream, I've got to get the better camera. You know what I mean? Because you're doing the better camera with streaming.
Chris: Oh, you have to. You have to. You can't use this camera.
Dave: You have to.
Chris: Nah, I mean you don't have to, but you kind of have to. Nobody watches a stream with that, with your low-res crap you're rocking right now. It's not happening.
Dave: Yeah, I mean I have thought about getting a VTuber, like I'm an anime girl [laughter] doing the streaming.
Chris: Oh! There you go! Like Dan Cederholm just decided he's a puppet now.
Dave: Yeah.
Chris: Yeah.
Dave: That's actually hella clever because now he's fixed his on-camera appearance for the rest of his life by buying one puppet.
Chris: Yeah. [Laughter]
Dave: It's genius, really.
Chris: Very clever.
Dave: Never has to put makeup on.
Chris: Chances are, you're going to get a camera, right? Just be yourself.
Dave: I'll probably get a camera, but that's because you get into YouTube, right, like YouTubing. You need the over-cam, right? Then you need B-roll.
Chris: What's the over-cam? It looks down at you instead of--?
Dave: Yeah, it looks down on your hands like while you're typing.
Chris: Oh...
Dave: Or drawing on an iPad or reviewing a product or whatever. You know?
Chris: Okay. Okay, yeah. I don't have that.
Dave: Now I'm like, now I need the five, ten products from Elgato to make all this happen.
Chris: Uh-huh.
Dave: It just keeps going up.
Chris: Is it like doing a self-two-camera shoot? Do you get a straight-on shot and an up and the side shot?
Dave: Yeah, you could go both, I guess. But I don't know how you do that.
Chris: I don't know.
Dave: I guess you have the OBS all stitched out together or something. I don't know. But anyway, I'm just kind of like, "Oh, man. Now--"
Chris: Well, I did it, but not here in the booth. I have the DSLR on a little Elgato mount behind my desk. Honestly, it really wasn't that hard to wire up. I just put the DSLR on there and made sure it was a DSLR camera that had clean HDMI.
You put the HDMI into the little Elgato cam-link or whatever it's called, and there are cheaper alternatives to that. That's the thing that goes from HDMI to USB, essentially.
Dave: Yeah.
Chris: Our Macs don't have HDMI inputs on them. They just don't.
Dave: Nope.
Chris: You know?
Dave: Yeah.
Chris: You do that and then, by some hardware magic in there, it gets recognized as a camera just like any other webcam you plug in. Then you just select it and it just works. Technologically, it was not a reach.
Last night, in the Discord, our Patreon Discord, I was roping people into seeing what's the deal with programmatic remote controls for my TV.
Dave: Mm-hmm. Mm-hmm.
Chris: Somehow, unbelievably, audience, I got roped into buying basically a proprietary remote, which I didn't know at the time. In order for them to change one little setting on my remote, they've got to send out a person--
Dave: Oh!
Chris: --a human being to my house to reprogram my remote control, which of course now that I know that makes me want to throw it into a volcano. That's just insane.
Dave: [Laughter]
Chris: Why can't you just--? When you hooked me up, why didn't you just use a Logitech one and set that up or whatever?
Dave: Yeah.
Chris: I feel like I was even clear about that, too. When the guy was installing it, he was like, "Yeah, there's just some software." I was thinking, "Ah, whatever. When it comes time to reprogram it, I'll just download the software and do it." You know?
Dave: Yeah.
Chris: But no! It's vendor-locked software. You have to be an approved vendor of this stupid remote control. Anyway, I can't remember how I got off going on that.
Dave: Yeah.
Chris: The camera situation is easy.
Dave: Never upgrade anything.
Chris: Yeah.
Dave: Yeah. If you ever add anything, you're toast, right?
Chris: Yeah. Just a joke. Just a joke. If you do it, you could go DSLR, but there are lots of good options, too. It seems like most people end up with what looks like--
Remember when you used to buy a camera to bring with you?
Dave: Yeah.
Chris: Like if you were going to go to Japan or whatever, you'd just bring a phone-sized camera with you.
Dave: Yeah, a little point and shoot.
Chris: A point and shoot, that's what they called it. I think some of these are a little above and beyond point and shoot because they're not straight-up single-lens reflex with a big, detachable lens or anything. But they still look really good and a little smaller.
Dave: Yeah.
Chris: So then, that's an option, too.
Dave: That's kind of what I'm looking for, maybe, the more -- not the DSLR with the Canon.
Chris: Yeah.
Dave: [Laughter] 20-foot Canon lens, you know.
Chris: Yeah, that's what I'm doing just because I already had it.
Dave: Right, right, right.
Chris: You showed a box of crap you were going to get rid of the other day on Twitter, I think. Why can't you repurpose one--?
Dave: Oh, this box of crap here?
Chris: [Laughter] Yeah, the box of crap. One of those things has got a camera on it, doesn't it? You could do that.
Dave: Oh, yeah, I guess so. Yeah, I have seen the iPhone trick, right?
Chris: Yeah.
Dave: People just use their iPhone.
Chris: You just can't use your actual iPhone because then if somebody calls you, you're like, "Well, hold on. Let me detach my webcam."
Dave: Yeah, you know I could do that.
Chris: I don't know.
Dave: That's actually--
Chris: I'm just throwing ideas at you.
Dave: No, that's not a bad idea, especially if I am due for upgrades or whatever and stuff like that.
Chris: Yeah.
Dave: Maybe I get a new phone and then I have just a nice iPhone camera.
Chris: Yeah.
Dave: That might be. I need to try that.
Chris: Dave's going to put it on the company card. Deal with it.
Dave: Put it on the company card. There you go.
Chris: [Laughter]
Dave: Sorry. Had to have it. That's what they get for making me social chair. I have to buy a camera.
Chris: That's true. Okay, well, I'm excited to see what you do because it is a little bit of a rabbit hole, you know. I hate to say it because you're like, "Well, I got that, but now I need the nice mount for it. Now I need to hide the cable that goes down from the pole, so I need that thing. Then, ooh, it's a little echoey in here. I need to buy some acoustic paneling for the back."
Dave: Mm-hmm.
Chris: Then like, ooh, but a green screen would be cool because the window behind you is nice and all, but if you're going to full-on YouTube, you should probably green screen it.
Dave: Yeah.
Chris: Then you might as well get the nice one that mounts to the ceiling so you can just pull it down and push it right away.
Dave: Yeah, totally.
Chris: Then you're deep. You're deep.
Dave: Now I'm three grand into my hobby of, "I want to make a YouTube." Yeah.
Chris: This is my favorite Dave thing. Before the show, we were joking a little bit about then you do a video. New Dave YouTuber Rupert does 30 minutes. Shows you how to do auth and Rails or whatever you're going to do. I don't know. That'd be boring, but I'm sure you'll do something interesting.
Then you did it. Good job. Now you've got the rest of the week to polish that thing up. It's like you did 30 minutes of actual work and now you're about to do about 790 minutes of whizbang YouTubery.
Dave: Yeah. Well, that's just it. I feel like it takes -- to be a successful YouTuber, you A) have to only do one thing. We already talked about the algorithm stuff. You have to have a wheelhouse. Don't diverge or you have to start another channel. I don't have that. My brain doesn't work that way. It would cool if it did, but it doesn't work that way. I am too much of a generalist.
But the second thing is, I feel like, be a skilled YouTuber, you take a 30-minute (one hour) task and you turn it into a weeklong video - it took you a week to make. I'm going to organize my bookshelf. One-hour task. Took you a week to set up the cameras, get the right angles, storyboard it out a little bit, write a little bit of a script, get some goofs and gags, you know, in there at the right exact cutie-pie moment.
Chris: Right.
Dave: Then you go over. Then you edit for, like, three days. You know? And get the right royalty-free music in there with the beats and the record scratch when you do a goof face, you know?
Chris: Yeah. [Laughter] Yeah, you're right because it does make for more engaging content. I watch that crap sometimes.
Dave: Well, and there's such a formula.
Chris: Yeah.
Dave: Then there are people who phone it in and they still get views. That's what kills me. There is one guy who does tech reviews and I watch him because it's just short and, like, "Oh, well. That was kind of interesting." He just talks about whatever."
Chris: Yeah. Really basic.
Dave: Some $30 gizmo he bought on Amazon and he turns it into--
Chris: Yeah.
Dave: Five minutes and then he does 2 of those and that's the 11-minute mark.
Chris: God bless him too, though. You know? And everybody else who has ever made a video where I'm like, "I can't get my snowblower started. I'll just basically put that into YouTube," and there's like five videos that'll be like, "Today, we're going to start a snowblower that hasn't been started in a year." They're screaming over the wind, and I'm like, "You're perfect. You're exactly what I need. Never change." You know?
Dave: Never change. No, the best ones, for me, are the low grade, phone grade.
Chris: Yeah.
Dave: Just contractors like, "All right. I'm going to show you how to fix a drywall hole. Here we go." You know? [Laughter]
Chris: Mm-hmm. Then there are whizbang ones too, and they'll probably do better, but you never know.
Dave: Yeah.
Chris: This is a fun thing.
Dave: I watch very fancy Japanese joinery videos, and that's going to be very expensive when I get into that hobby.
Chris: We're dabbling at CodePen because Shaw does it for Keyframers. It wasn't just that, but I kind of took over the podcast this year for CodePen Radio from Marie, just to switch it up a little bit.
Dave: Mm-hmm.
Chris: I've been just arbitrarily shipping, right in our podcast feed, by the way. I don't necessarily recommend this to people because we've gotten mostly confused feedback about it. In XML for an RSS feed (#rsstricks) it doesn't have to be an MP3. It can be an MP4.
Dave: Oh, yeah. Yeah.
Chris: A lot of podcast players will just play it. They'll just be like, oh, it's a video one. Cool. This used to be really weirdly common on iTunes back in the day.
Dave: Yeah.
Chris: That's how video shows -- it was very common to have a video podcast. Then it just fell out of favor or whatever. But most podcast players are set up to handle it. Even my pocket cast, it'll just play the video.
Dave: Wow. Yeah.
Chris: It's fine. It's a big shift because all of a sudden one of your podcasts, which used to be 62 megabytes or something, is now like 900 megabytes or 1.2 gigabytes or something. You're like, "Uh!" People are like, "That's a little wild."
Dave: Yeah. I think--
Chris: Your bandwidth bill is a little whacked for that, too.
Dave: Bandwidth goes weird, but I don't know.
Chris: YouTube won't give you a direct URL that you can put--
Dave: A source, yeah.
Chris: Right, so you're on your own, bandwidth-wise, which means it's in an S3 bucket, which means it's not the world's cheapest thing to do.
Dave: Mm-hmm.
Chris: Put Cloudflare in front of it. I don't know. That'll help a little.
Dave: Cloudinary. I don't know.
Chris: Yeah. Cloudinary is even bandwidth-based. Okay, so there's that. We're dabbling and I'd buy the green screen. I'm a little ahead of you in the "got a new space and emptied the bank account" problem. You know?
Dave: Yeah.
Chris: But I did it. I wired up the green screen on the ceiling. I pull it down. I change my desk because that's the organization. My desk is at an angle and I need to turn it to face the green screen.
Then I have three Elgato products, at least. Four, I guess, on my desk. My gosh. What a company, huh? I have the key light, which shines on my face. I have the mount for the camera. I have the cam link that plugs it in, and the green screen behind me. Four Elgato products, my gosh.
It's so beautiful. When you shoot your camera with the Elgato, then, what I use is a thing called ScreenFlow that gets all the things and allows me to do the staging later. That's the whole part of this conversation. I really wish I could do the staging as I'm recording. I don't know how YouTubers do this, but they do. Then they're pointing at stuff on their screen.
Dave: Mm-hmm.
Chris: How the hell do you do that?! Anyway, I just -- I don't know.
Dave: Oh, yeah. [Laughter] Every time somebody is like, "Click this link," or whatever and they point up, I'm like, how did you know the link was going to go there? [Laughter]
Chris: I know!
Dave: I guess they just know, but they just know.
Chris: If you could pre-compose before you hit record and then you're looking at yourself somehow as you're recording, that would be magic. I have not figured that out yet. But I just record. Then in ScreenFlow, I just hit Chroma key on the video and it just wipes out the green screen. There's no knowledge needed to do it.
Now, I've got me and Shaw. He's got a green screen too, already, because he had it for keyframers. Now I'm on the bottom left corner and he's on the bottom right corner.
Dave: Okay.
Chris: We've got CodePen behind us.
Dave: Just floating heads?
Chris: Yeah.
Dave: Nice. Nice.
Chris: It's fun! The time of it, because I'm obsessed about not spending all week editing this video. I don't have time for that. I technically run this company, to some degree. I like to have fun and it's kind of a hobby-based thing, but I cannot spend eight hours editing this video.
Dave: No, you have a very big blog you manage.
Chris: Right.
Dave: You have a company you manage. You have a podcast that you do a lot of the behind-the-scenes work here.
Chris: Right. We've done 400+. This is, what, 453, I think we're recording now.
Dave: Mm-hmm.
Chris: That's a lot of podcasts. I attribute that long-term-ness to the fact that we are always looking for little ways to make what we do easier, in a way. I think if you're going to start a new YouTube, you can spend the time. It's a hobby. Do the polish, but have your eye on the prize of, like, how can I streamline this? How can I make this process easy so that I can just record the thing and publish it?
Dave: So many YouTubers, like every single one, has an "I'm burnt out" video. I think that shipping content every week, that's a lot of burnout.
Chris: Right. Right, especially if you haven't cracked it. If you're making $1,000 a video, somehow, you're probably not burnt out because that's your job then, to some degree.
Dave: Yeah. Yeah, that's probably worth it. It hits the worth it bucket.
Chris: Yeah. Then if it goes up from there, then it gets super more worth it. Maybe we should talk about websites. [Laughter]
Dave: All right. Yeah, websites instead of my theoretical YouTube and Twitch empire.
Chris: [Laughter]
Dave: But whatever. We'll get there.
Chris: You will get there. I'm going to bug you about it forever.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by the makers of axe DevTools. Literally, it's like a DevTools plugin you add to your browser so that when you open the native DevTools, there's an axe tab there and you can run tests. It's really good. I just did a video with Pretty (from there) on CSS-Tricks, so go watch that if you haven't because we really dig into all the possibilities there. Pretty amazing.
They just launched axe DevTools Pro. You can try it for free for 14 days. Otherwise, try it 20% off with promo code shoptalk.
What it unlocks for you is it makes that plugin way better. It has these things in it called Intelligent Guided Tests, which you have to see. They're amazing accessibility things that you can test, but it has to walk you through some stuff because it has to ask you some questions and gain some insight to what's happening on your page, which is stuff that a purely automated test isn't going to catch but is super vital for the accessibility of a website.
You probably didn't set out to build an app that was purposefully inaccessible, like none of us do that where, like, "I'm going to make a crappy, inaccessible site." But you probably did, you know? I run it on my site and I'm like, "Whoa! There are some problems here. Oops, I best guess I better fix those."
You didn't set out for problems, but you still need to fix them. The axe DevTools Pro browser extension helps you find them. You don't have to be an expert at all about accessibility. It's that helpful. Start catching and squashing these accessibility issues as you code.
Friends don't let friends ship inaccessible code. Follow the link in the show notes or just go find axe DevTools Pro and use the code shoptalk to get it.
[Banjo music stops]
Chris: I was talking with somebody else about this and I feel like I'm changing my mind on it a little bit, so I need a Dave gut check.
Dave: Hey, hit me.
Chris: Well, especially because it's related to some of this Babel stuff we've been talking about. Everybody knows what Babel is. Babel is just future JavaScript, right? You turn it on and then you just use whatever you want in JavaScript.
Dave: It attempts to Polyfill or let you use these speculative or stage 1, 2, 3, 4, I think is what they are.
Chris: Mm-hmm.
Dave: ECMA script features. Then it figures out a way to make that somewhat compatible to real life.
Chris: Yeah, and it's like DX delivered (developer experience). Now, I can be like, oh, a spread operator. How neat is that? That really fits my mental model. It makes my code much more readable. I love spread operators. If Babel is a big part of my thing, I never have to think about browser support.
Dave: Mm-hmm.
Chris: It will just make it work. It's not that you never have to think about anything because a lot of people are doing the split bundles and serving it to different browsers, yadda-yadda. But let's not go there. I'm just thinking of what Babel does for you. It allows you to use future syntax without worrying that much about it, if at all.
Dave: Mm-hmm.
Chris: Just use it. I know we're starting to -- I would like to think that we're moving away from it (-ish) as an industry.
Dave: Babel?
Chris: Yeah. Yeah, Babel (a little bit) because some of the best stuff that it Polyfills is already shipped.
Dave: That's true. Like the critical needs, most browsers have caught up to, for example, const, let, or symbol.
Chris: Right.
Dave: Or integrators. For, of, and stuff like that.
Chris: JavaScript has maybe slowed down a little bit. If they shipped a bunch of stuff tomorrow that was like, "Wow! How great!" and that stuff was -- what do you call it when it's not--? You're not really Pollyfilling it because you don't have to -- but you are Pollyifilling it, but you can just do it by just changing the code a little bit, not by literally loading a 30K library.
Dave: Yeah, like shim, a Prollyfill sort of thing. I don't know.
Chris: I'm just thinking of, like, in CSS, some things -- this is where I'm headed with this, by the way, because I want to talk about doing the same kind of thing in CSS.
If you wanted a Polyfill, for example, like the is selector or something, like article is expanded, or something, then you can comma separate that the "is" is this colon selector. What do you call those? [Laughter]
Why is my brain broken?
A pseudo-class selector.
Dave: Pseudo class, yeah, like cover whatever.
Chris: That has a one-to-one mapping to just an alternate expanded way to write that. If you were going to "Polyfill it," you could just look at that syntax and just change it to the one that doesn't use "is." That's just an expanded way of writing that. You didn't have to load up any JavaScript or whatever. You just were able to change the code and now you're essentially supporting that feature. That's possible to do, but there are certain things that just aren't, like you cannot, just by changing up the code, make CSS custom properties work like CSS custom properties. It's not possible. It's not a thing that you can do.
Some things are like that and some aren't. I think JavaScript is in that bucket too. Sometimes, like a spread operator, there is just another way to express that by writing a little bit more expanded code. But it's not impossible to Polyfill, unlike some JavaScript API. If it doesn't exist, it just doesn't exist. You can't use it then.
Dave: Mm-hmm.
Chris: I don't know. I feel like there are different categories of these kind of things.
Chris: Okay, so all that said, if you love the idea of Babel, and are like, "I just want to write future JavaScript stuff and not think about it," which I admit is kind of a nice place to be as a JavaScript author, the spiritual version of that in CSS is PostCSS plus their plugin PostCSS Preset Env, which is very Babel-esque. Babel's plugin for doing this is Preset Env, Babel Preset Env.
Dave: Mm-hmm.
Chris: It means just like preset environment, and I think the idea is that it looks at some kind of browser target list and is like, I will Polyfill things according to that list of browsers you intend to target. If that list includes IE11 in it and I'm going to do different things than if that list doesn't and have IE11 in it and that kind of thing.
My question is, to see where I'm at about it, for a long time I just rejected this idea. It's just like, I don't like it. There are so many things, like CSS custom properties, that I don't like the idea of propagating to the world that you can Polyfill these because you can't. It's not something you can just make work in IE11. It's not happening.
Did IE11 have them? I don't think they do, actually.
Dave: Yeah, because the idea is, in JavaScript, if you want to use a feature that doesn't exist, you just add more code to make that feature exist, more or less, or you modify your code a little bit, right?
Chris: Right. Right.
Dave: But it still functions the same.
Chris: You can't make geolocation API work, but you can make a spread operator work.
Dave: Yeah. Yeah.
Chris: There is a lot of stuff you can. Babel won't tell you that it can make an API work that doesn't, but it's mostly about syntactic features of the language.
Dave: Mm-hmm.
Chris: Babel is widely regarded as good. Thank god we have this.
Dave: Right.
Chris: Let's put it in every pipeline ever.
Dave: Mm-hmm.
Chris: Let's even give it more jobs, like JSX and stuff. Whatever you think about it, mostly people think of Babel as this big success and a big, very cool project that the world has.
Does this CSS project then deserve that same kind of love and should everyone be using this too? Should it fill that same place? For a long time, my brain rejected it. I feel like I'm coming around a little bit. I'm like, why is this so different than JavaScript? There are a few things that are different but, as I look at this project more and look at its blessed list -- because it's not one project that does this. Basically, this thing is a set of plugins that it chooses that it thinks fits spiritually, this concept.
Dave: Mm-hmm.
Chris: You go up and down them and you're like, "Yeah, yeah, yeah, I see what they're doing there. That looks pretty good." Stuff like nesting is kind of like a no-brainer because it's like, "Yeah, just nest." That's easy to un-nest in a compilation.
This is why I'm coming around is, even I looked at the custom properties plugin, which in my brain I'm like, "People, no. You cannot Polyfill custom properties. It's not a thing. It's DOM-dependent. JavaScript interacts with them. You can't just compile these away."
It doesn't really claim to compile them away. What it does is it just makes them not fail in an older browser. It just sets up a basic color and then it leaves your CSS custom properties in place for modern browsers. They're all still there in your code. It's just puts a fallback in behind it so that it doesn't die.
I'm like, okay, that's cool. It's not pretending to Polyfill them. It's just making them no break in older browsers. I'm like, that's acceptable to me.
I don't know if I'm completely sold on it yet. For some reason, I don't embrace it as much as I embrace Babel, but I'm starting to come around that this is kind of like a good idea.
Dave: The plugin is postcss-preset-env, right?
Chris: That's right.
Dave: That's the--
Chris: You've got to use PostCSS to use it. That's the idea.
Dave: Because you write CSS, your version of it, and it comes by, it does an after-pass. It post-processes this into something, which everything is kind of post.
Chris: Right. The same thing as autoprefixer. It looks at your CSS. It transforms it. Some CSS spits out the other side.
Dave: I think -- this is me being -- I have two takes. Grumpy old man take is, I think I get frustrated when the input and the output are different, like, "I wrote this and now the output is very different." I know there is probably a source map in the way, so I could figure it out and debug it in the browser.
Chris: Mm-hmm.
Chris: But when the input and output are different, I get a little frustrated. The same thing happened literally yesterday with me and Tailwind. I had to write some custom CSS because passing styling a Web component with Tailwind is not the best experience in the world. I will say that. [Laughter] Because you literally can't just add classes, Chris.
Anyway, I figured that out. Yeah, but the output was not working, so I had to go back in and whitelist stuff. It's not a good feeling to me. But if you told me, like this PostCSS Preset Env could give me flex-gap or something like that--
Chris: Hmm.
Dave: Oh-ho-ho, I am in because--
Chris: That's a great example, Dave. It cannot do that.
Dave: It can't? Well, then I'm out.
Chris: Maybe -- no, I don't think so. I don't think it can.
Dave: Then that's where I get confused. That's where, back to my whole grumpy old take. My expectation is, okay, cool. I can just write future stuff. But then the output doesn't match what I thought the output would probably be.
Chris: Yeah.
Dave: Or some way to figure it out. That's where I get frustrated. But that said, there are some cool features that says it does, like all initial and stuff like that, if you've ever had to bail out of styles. That's actually pretty cool. Focus visible--
Chris: Yeah, you've really got to look and see what it's choosing to do.
Dave: Color functions would be bad, like if you could do lab in LCH and stuff, and gray and alpha.
Chris: But what a weird promise, right? Some literal browsers just -- you need to leave that code alone in the output in order to take advantage of the best of what those things have to offer. If this thing just Polyfills LCH down to RGBA, you're getting now advantage of using that color space.
Dave: Yeah.
Chris: Okay, that's cool that you were able to write it that way, but anything that LCH could do that RGBA cannot, done; you got wiped out in the conversion process. That's what I don't like about this.
Dave: Yeah. Yeah. I mean I don't know. Maybe it had--
Chris: Here's what it does, though. What it probably does is it leaves the LCH in there and puts an RGBA behind it. You know what I mean?
Dave: Above it or whatever.
Chris: Yeah, above it, meaning that if LCH is supported, it's there and if it's not, the RGBA is behind it. That's okay to me. You know what I mean? That's what I guess I had wrong in my head is that I thought that it would try to totally compile it away, gone. But it doesn't always do that. I don't know about the LCH plugin specifically because you've kind of got to look at each one to see what its approach is.
Dave: Mm-hmm. Mm-hmm. Yeah, they have a pretty good demo on it. This is, again, like arrow functions, right?
Chris: Yeah.
Dave: That's one thing I use Babel for - or did. Now I don't really need to.
Chris: Right. That seems easy enough to transform away, right? It's just a little syntactic sugar. You just make it a function instead. Then you have a little bit of this manipulation to smurf with to make sure it's correct.
Dave: Yeah, so if one of these CSS things had -- if one of these CSS post processors had that level of ease and, like, I want this. I'm going to write this and if you can automatically make it better for other browsers, then I'll probably put you in my pipeline if it's just going to go smooth. Then, again, you're introducing an abstraction. You're now one step removed from the output.
Chris: Right.
Dave: Is that one line of code or 10,000 lines of code?
Chris: Do you feel the same way about Sass because it's just different than what you wrote, kind of thing?
Dave: I feel the same way about Sass. Honestly, I'm less this year than previous years, if you've been listening to the podcast. I'm trying to move away from build tools, in general. Whatever build tool I can shed, I want to ditch.
Chris: Okay. Yeah. That's been your vibe for a long time, to be fair.
Dave: It's been my vibe for a long time, but then all of a sudden I'm just like, "Whatever. I use Nuxt now."
[laughter]
Chris: Yeah. Yeah.
Dave: Which is great, you know, but I think that's the tweak, right? I use one build process in Nuxt. It type Nuxt and then it adds all the CSS, the Sass, the TypeScript, or whatever.
Chris: Yeah. It's almost good that it's abstracted from you. At least it feels simpler even if it's not.
Dave: Yeah, if the tool comes with abstractions and can--I'll call it--auto-flavor my CSS, then that's great.
Chris: Another consideration here is with Babel and with PostCSS Preset ENV. We should call it Babel Preset ENV, too, because you could probably get really weird with your Babel and have all kinds of transformations that are nonstandard. Preset ENV, I think the spirit of it is, these are things in process, in the standards process, and that's what's going in here, so nothing weird or that's not even standards tracked. This stuff is all standards tracked.
Maybe at some point, your output is the same as your input because it's based on this browser list of stuff, right? If you said, "I want the most modern browsers," it'll start doing less and less and less and less and less because it's not changing anything. It says, "Oh, this browser already supports any link. This browser already supports focus visible. I don't need to do anything."
Dave: Mm-hmm.
Chris: Then it's the same. It's designed to make itself obsolete in a way that Sass isn't. Sass is just Sass forever.
Dave: Yeah. Yeah. Oh, man. The more I dig into this, the more I'm going to be a grump.
Chris: Grump it. Do it.
Dave: Well, like system UI. Right? It says, "Oh, type body font-family system UI. We'll figure out the rest."
Chris: Right. I use it every day. Yeah.
Chris: I could just type system UI. Chris, I can also write some commas and type Arial Helvetica. That's really easy for Dave Rupert to type. You know what I mean?
Chris: Yeah, and it's hidden to me where, in Sass, if you made a variable and said, "My system UI font is a variable that represents this," and then use that, that's obvious what's happening because you can just go look.
Dave: Yeah.
Chris: Whereas with this, it's hidden to you. It looks just like CSS but it's not. It's going to get--blah--transmorgrified into--
Dave: In the CSS-Tricks I want, like aspect ratio gap, they're not in here and that is--
Chris: Yeah.
Dave: Color functions, I can just write the color I know works and the color I hope works.
Chris: Yeah. Sure.
Dave: That's very familiar to me in CSS. Maybe it's not familiar to people, and so I don't want to get yuck your yum. Maybe that's actually helpful. I have a bit of a brain on what might fail. I guess the nice thing is they take care of it for you based on browser stats.
Chris: That's idea is that you just don't have to think about it. If you just let the overlords take over your body, Dave, and just said, "You know what? I'm not going to worry about browser support. I'm just going to use the new modern syntax because I like it and I'll let the machine."
Dave: Well, now I'm back kind of on it--I don't know--because you just write minimal modern.
Chris: Just a lot of trust.
Dave: It figures out the delta. Yeah, that's the trust. When the input and output delta or that--
Chris: Right.
Dave: --that change is too big, that's where I get frustrated.
Chris: Mm-hmm.
Dave: And I'd be back on the no side. But I could see, just purely for that, a little convenience of, like, I'm going to write minimal modern and it's going to figure it out. That's maybe cool.
Chris: That's why each one of these, I have a little mental hurdle on every single one of them. Focus within: have you seen this CSS selector? It's tremendous.
Dave: Yes.
Chris: It's awesome. It means that I can select a parent when any child of it is within focus. That's great for things like menus in CSS that you're trying to make keyboard accessible because you're tabbing through and the focused element changes and goes up and down the menu. But I can still select the parent and make it display block (or whatever) so that it's visible.
Dave: Yes.
Chris: Tremendously useful, but it's useful for all kinds of stuff, too. Imagine you tab into a form and the whole form highlights itself saying, "This is where you are right now on the page." Great. Knowing what's in focus is not something -- like if a browser just doesn't support focus within, what? You know?
Dave: Yeah. Yeah. What's it try to do?
Chris: What's it try to do? I think the answer is probably to inject some JavaScript, too, to help you.
Dave: Okay.
Chris: Some of these do that and that's just weird.
Dave: Yeah.
Chris: Now you really need to know what's going on.
Dave: Yeah.
Chris: If you want to bundle that JavaScript, you've got to know how that's happening and whatever. You know?
Dave: Yeah.
Chris: That's just not something you can--
Dave: I'm going to try it. Form, focus within, background pink. Then I'm going to see if it gives me something back, but I don't know if the REPL is working, so that could change. That could not do anything for me.
Chris: Oh, look. It's on CodePen.
Dave: Yeah, it's kind of using CodePen to generate Code Pens.
Chris: That's good or bad.
Dave: I don't know.
Chris: Anyway, that's just something you really need to know, but I'm almost there. Almost. Spiritually, I feel like I sort of need to get over it a little bit.
Dave: Okay. It changes. It's using a data attribute.
Chris: Yeah, but where does it get the data attribute?
Dave: Well, yeah. It must run some JavaScript to Polyfill focus within. That's how JS focus visible works, too.
Chris: Right.
Dave: It adds a JS....
Chris: Maybe it says for you. Maybe it doesn't inject JavaScript and just says you should, though. If you want this to work, then you need to--
Dave: Oh, yeah.
Chris: --write some JavaScript to put that data attribute on there when something inside isn't focused, but that's non-trivial.
Dave: Mm-hmm. Mm-hmm. Yeah, that's funny. I didn't see -- like, you had to use this JavaScript, too, but in the initial docs. But yeah, no.
Chris: Look at blank. Look at colon blank. That's another one. If the browser isn't telling you if the input is blank or not, how would you possibly know? Well look. It injects fricken' -- it says, "Oh, yeah. You also need to load the script off on package."
Dave: I like their approach, though. I like the data attribute kind of approach because it's not data-prefix, but it's basically what the standard is. I'm going to give it a B-. I like it. I like it.
Chris: I don't hate it. I just don't think that it's training you. You're not used to that in CSS. You're like, oh, it just makes it work. It just does magic and makes it work. You're like, yeah, but that magic is injecting JavaScript. From where?! Shouldn't I bundle it? What are the perf concerns? It's a little too much magic, sometimes.
Dave: Yeah. I would say I do not see where the JavaScript is. I'm just skimming the docs, but I don't see where it included the JavaScript. [Laughter] I guess maybe PostCSS does it.
Chris: I don't think it can. It definitely needs to ask you to do it. PostCSS by itself can't be like, "Oh, I will find your HTML document. I will find you, and I will put a script tag in it!" No, that's not going to work. Okay. All right.
Dave: Forking the pen. Tell me your secrets.
Chris: I forced you to talk about that, too.
Dave: Tell me your secrets. Tell me your secrets.
Chris: Yeah, that pen, I know the history of it. It's very complexicated.
Dave: Hmm.
Chris: Jonathan Neal has a post on how you can get CodePen to support any PostCSS plugin and it's tricky bears news. It is a non-trivial setup, but it's cool.
Dave: Okay, so it uses CSS tools, GitHub IO, PostCSS, Preset ENV, CodePen.bundle6.js.
Chris: [Laughter] What's in there? Good luck.
Dave: All right. Well, I'm -- yes and no.
Chris: Back and forth.
Dave: I'm in the yes and no camp. I wouldn't be pissed ... projects.
Chris: You are with Babel too, right?
Dave: Yeah, that's it. If something is doing it well for me, and I don't inherit the burden, if that makes sense. But if the burden starts falling on me, then I'm just like, no.
Chris: [Laughter]
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by CodePen, my company. Heck, yeah! Of course, it's mandatory to upgrade to Pro if you listen to this podcast. It's just the way it is.
You get a lot once you do it. Some of the cool things you can do is upload files. It's a really pretty nice file host that serves it from a global CDN. You can resize images on the fly, and they're super well cached and all kinds of cool stuff. Sure, asset hosting.
There are all kinds of little features, too. One of them is, let's say you make a Pen on CodePen and you want to test it with no crap around it, no iframe, no UI, nothing, just the code that you wrote only, untouched. That's what we call debug view on CodePen. It doesn't actually directly give you advice about debugging problems in your code, but it's just your code so that you can debug it more easily. You open that. You open DevTools and the consoles in the right context and all that stuff.
If you're Pro, you can just use it on your Pen, on any Pen. Rock and roll. Just use it, [laughter] which is nice. The thing is, you've got to be Pro. You have to be logged in to use it. But if you're pro, you don't have to be logged in, meaning you can send it to your phone or open it in another browser that you're not logged into CodePen in, and just use it because you're doing some cross-browser testing or whatever. Just that little feature alone, I think, is a useful one for Pro.
There is also stuff like presentation mode. I don't know if you've ever opened that change view button. When you're in the Pen editor in CodePen, there are a bunch of views in there. Professor mode, collab mode, we're not even going to talk about those. One of them towards the bottom is presentation mode, which you'll see the header go away and the footer changes to have view controls.
The purpose of it is, let's say you're screencasting or overhead projecting or sharing on full screen on Zoom, your browser window, or something, and you just need as much room as you can get for just the code. That's what it's for. But you might be like, "Oh, it turns out that I like coding in a dark theme but it's actually easier for people to see while I'm presenting in a light theme." Well, you just change it in the footer because there's a little dropdown to change the syntax highlighting there.
Just a little feature that you just might need real quick on CodePen. Upgrade to Pro. You've got presentation mode. Now you can use it. Hopefully, that's helpful. Thanks. Bye.
[Banjo music stops]
Chris: This is a good one because I want to admit to something here. Matt Kurling says, "I first learned JavaScript backbone. One of the ways to dig in was to look at the annotated source code," like if you wanted to learn a little JavaScript, you can read a little backbone source code if you want to.
"These days, even in the projects I'm working on myself, there isn't a great way to follow the flow of an application by reading the code. The source is too fragmented. Too many files imports, exports, and the distributed code is uglified and de-commented and all that. I know that the main cause of this is the lack of good documentation, but I wonder if there are some programmatic ways to generate a goldilocks level of source code a la backbone and underscore."
I get what Matt is saying. It's hard to jump into an app and get the whole lay of the land. I don't know. I feel like, on some React projects I'm on, it's kind of not true. You can look at the index.js, maybe see the router, see what's going on. You can right-click and say, "Show me the component this came from," and kind of follow the crumbs relatively easily, I'd like to say.
Next and Nuxt have that kind of the folders are the router structure going on, so that's pretty easy to look around. I'm not saying the world is perfect right now, but I don't feel it being terrible.
Dave: Yeah. That's if you get access to the source code. If you don't have the repo, it's maybe question marks. A lot of this has moved to DevTools, right? Like Vue DevTools and React DevTools, that's actually how you start seeing things come together. Like, oh, so it's storing these pieces of data into state. That's cool.
I think there is some definite -- it changes a bit. You know? But I think also, right, there's no documentation, like code comments and stuff like that, because we've all been trained. You minify, uglify, and strip out--
Chris: Yeah.
Dave: --every ounce of human-readable sense that you can. Now, we depend on source maps to exist to map it back to the original code. Do source maps work? Sometimes.
Chris: Yeah. Yeah.
Dave: That's the problem.
Chris: If they're working great on a project, you're like, "Holy niceness! This is nice." But if they break--
Dave: Sometimes I forget what it's like because you're like, "Oh! Oh, it's not line 137 of BundleJS, or whatever."
Chris: Yeah. Yeah.
Dave: Which is 9,000 characters long. It's to the exact line in the exact file. Sometimes you're just like, "Oh, yeah. I forgot it could be like this. This is amazing."
Chris: Yeah. Yeah. I don't even know what the modern take is. If I was going to get them going on a project, I'd just try to read the docs and just be like, "I don't know. This is how you do it."
I just failed the other day. I tried to get them going on a pretty simple project, I thought. DevTools just wasn't seeing them. I just had no idea. I just gave up. It's like, forget it.
Dave: No, well, back to, "I want less tooling." I think that's part of the problem, right? You have five different code mods--Web packers, code mods, bundles, whatever--in the pipeline. The fidelity at which they can--
Chris: Yeah.
Dave: --retro or trace the steps of that line of code goes down, I think.
Chris: Here are two problems that could happen with the source map. One of them is, does the DevTools even see it? I think, to see it, it's a one-liner, right? It's at the very bottom of the bundle. There's a line that says --@something - whatever.
First, how do you know that that's for sure right? Has it ever changed over time? Are there docs for that kind of thing - whatever? Then if it finds it, is there some green checkmark or something, like, "I have found source map. All is well"?
Just finding the source map and making sure it's in the right format and you've loaded it correctly, that's one thing that could go wrong. Another thing that could go wrong is, like, was the source map generated correctly, or is there syntax errors or something in it?
Dave: Mm-hmm.
Chris: I don't think DevTools tells you either one of those. How would you even start to troubleshoot that?
Dave: I don't even know if it shows up in the network inspector, right?
Chris: Yeah, like loaded source map. I doubt it.
Dave: It might.
Chris: It might.
Dave: The only thing -- the only clue I would have is open the inspector panel and see if I get a line. You know?
Chris: Yeah, exactly.
Dave: If it says line one or any number greater than one, then I'm in business. [Laughter]
Chris: Yeah, exactly. If it's not, then what? It doesn't show you an error. It just shows you that it probably doesn't have the source map.
Dave: Mm-hmm. Yeah.
Chris: Or is it broken in this version of the browser I'm using? I don't even know where to start.
Dave: Well, yeah. I've worked on client projects and it was literally the CSS was too much and it just exploded. The thing was just like, "I don't load."
Chris: Oh!
Dave: What do you do?
Chris: Your source map is too big? That could be it.
Dave: Yeah.
Chris: Oh, my god.
Dave: It's like a two-meg file or something like that, and you're just like, berp, "Don't work."
Chris: This is what I wanted to say, though, about....
Dave: Well, they only load if you have DevTools open. That's a DevTools initiated call, I believe.
Chris: Yeah.
Dave: Not a server-initiated call.
Chris: True. But still, I could see it showing up in the network tab. I don't know. I don't think I've ever seen one in there, but maybe.
Dave: Yeah.
Chris: What I wanted to say about Matt's thing is that he was talking about how Backbone kind of helped you understand what was going on in a project. I never once used it. I don't even know what Backbone does. I have no idea. I remember. I know it's like a Jeremy Ashkenas thing. It had its whole heyday. But, at the time, I remember being totally embarrassed by it because I'm like, "I don't understand. I don't get it. I have no idea. What is this?"
Dave: Yeah. I can't really say I understand it either. I know I used it, but I can't really say I understand it.
Chris: Was it a router?
Dave: Yeah, it's like a primitive router, but then your functions and templates were together.
Chris: Hmm. So, it had some opinions about how you structure your JavaScript?
Dave: Yeah ... I believe. Yeah.
Chris: Oh, it did templating too?
Dave: Well, I think you had to BYO.
Chris: Oh, my gosh.
Dave: If I recall.
Chris: It was a framework, like you would use it instead of--
Dave: Yeah.
Chris: You would use it in a way you use React today, kind of?
Dave: Yeah, kind of more--
Chris: Or like 11ty.
Dave: Like Rails-y.
Chris: Oh.
Dave: Yeah. You're just like, "Okay, go to this route, this controller, and render this method," kind of thing, I believe.
Chris: That's cool.
Dave: Yeah, again, I'm not....
Chris: I'm sure there are plenty of Backbone projects out there still in the world. That's how technology is. You give people technology and they build stuff with it. Then it lives forever.
Dave: Because old Dave Rupert -- Dave Rupert is going to start learning React today. In five years when everyone wants to redo their whole axe site.
Chris: [Laughter]
Dave: Guess who is making the money?
Chris: Yeah, Dave Rupert.
Dave: It's your boy. It's your boy.
Chris: I've been taking banjo lessons, right?
Dave: Mm-hmm.
Chris: Of course, you don't know how this happens, but you immediately get roped into being the website person for the person who makes the....
Dave: Never had that experience in my whole life. Yep.
Chris: Yeah, but I'm like, whatever. We'll trade professional experience for professional experience here.
Dave: Yeah.
Chris: But I kind of love it. It's this ancient, ancient WordPress site that somebody just hacked up like in 2014 or something. It's never been touched since then. It's on Bluehost.
Dave: Mm-hmm.
Chris: So, I'm Zooming with the banjo lady trying to get access to the Bluehost thing. Finding the FTP login stuff, getting in there, and the first thing I do is just--
Dave: She's got it written on a scrap of paper....
Chris: Yeah. No, she didn't even have that. We had to reset the password.
Dave: Yeah? Okay. [Laughter]
Chris: Yeah.
Dave: Yeah.
Chris: But the first thing I do is, "Do not touch it." The thing, to me, feels fragile as a glass menagerie, Dave. Just do not. If you hit "Upgrade WordPress" on that thing, that's the last day that thing is going to work, for sure.
Dave: Yeah.
Chris: That's too many years.
Dave: If you sneeze--
Chris: Yeah.
Dave: --it falls apart. Yeah, yeah.
Chris: That's what it feels like. It may not be true, but it's like that's too old. It's too many years old to just be clicking buttons in there, for sure.
Dave: Mm-hmm.
Chris: The first thing I do is just yank it all. Just pull it down to FTP, which I did, and then I used WP Migrate DB Pro, which ran on it, miraculously.
Dave: Whoa. Yeah.
Chris: Pull the DB, even though some of the database tables were in weird formats and stuff. It was able to kind of repair itself when I got it locally. I'm thinking, if I can spin it up locally, then I can get it somewhere live. If that's the Bluehost thing again, cool. But otherwise, I'll put it somewhere that I know, just for muscle memory or whatever. But I pulled down the whole thing locally and spin it up, upgrade all the plugins, upgrade WordPress, look through the theme, get rid of junk and stuff, and I found it very cathartic. It was nice. It was like a Marie Kondo'ing some WordPress. I felt very satisfied doing this work.
Dave: That's nice. What is the equivalent? Is this like when somebody is like, "Ah, man. I need my brakes changed," or whatever, "and they're like, bring it over to my house," or something? You know?
Chris: Yeah.
Dave: It comes into your garage and you just go to work on it a little bit.
Chris: Yeah. They get to, like, scrape away the sludge in there or something and they're like, "Oh, yeah! It feels good. Love scraping sludge."
Dave: Power washing websites.
Chris: Yeah. [Laughter]
Dave: That's what this is. Right?
Chris: Yeah. Oh, my god. Every -- I get to just highlight one, line one through 900 of CSS that's just some crap they pasted in there that does nothing and I know it and I just get to hit "delete" and just feel that power washer go.
Dave: Oh, that's a business. See, this is it. This is what a Twitch stream should be.
Chris: Oh! [Laughter]
Dave: Power washing websites.
Chris: Just feel it. [Grunting]
Dave: Give me your old website. We're just going to rehab it.
Chris: What she wanted to do was just change the look a little bit. There is a very old picture of her on there. "Remove the old picture. The fonts look weird. Let's just clean it up. It's not responsive."
I could probably do that work by not power washing it but just going in there and just jacking a few things around. You know? But I was like, "No, no, no. I'm going to power wash it."
Dave: Yeah. There's -- oh, keep going. Yeah, keep going.
Chris: Well, she wanted a new theme. She's like, "I'll just click 'new theme' because there are all kinds of beautiful themes." It's a pretty simple site, so it should be fine. The problem is it has one little piece of advanced functionality on the site. It is that you can log in to the site from the outside of it. You don't go to wp-admin. You log in from the outside. Then it takes you to a special page and you see your student resources or whatever. It was baked right into a template file.
Dave: Ah!
Chris: As soon as you hit "new theme" it's gone.
Dave: Sure, sure, sure, sure. Yeah, so that ruins it. Right.
Chris: I've got to mess with the old theme. Fortunately, that's my specialty.
Dave: Yeah. Nah, I saw. I went to a website for a restaurant here in Austin. It's a very good Japanese restaurant. You know?
Chris: Yeah.
Dave: But it was not responsive. It was very old. Even used Web 2.0 icons and stuff. You know?
Chris: Mm-hmm.
Dave: I just was like, can I adopt a website? I would just trade this for food.
Chris: [Laughter]
Dave: For like $200 in sushi, I'd trade. I'd do a trade.
Chris: Yeah. Yeah. Yeah.
Dave: Anyway, I don't know. Maybe one day that'll be my life.
Chris: Yeah. The economics of it aren't great because you're like $200 in sushi is a wonderful thing to have, but your professional rate at this point is probably going to be more like 6 to 8 hours and then that's probably more like $1,000 or more.
Dave: Yeah, the economics does not work out, but it feels good. It feels good.
Chris: Yeah, if you're already rich, who cares. You know?
Dave: It feels good.
Chris: [Laughter] We'll see. Let's get rich.
Dave: Well, I was. I was doing really well until this office and now I've got--
Chris: Yeah.
Dave: Now I've got a walnut laptop stand.
Chris: [Laughter]
Dave: Why?!
Chris: Yeah. I know. I know. I'll tell you what it is. Did your new desk come yet? Did you get the L?
Dave: Oh, it's coming.
Chris: It's coming.
Dave: Update on the desk: I came into the office space once it was made, and I have two desks. I have a little Ikea desk -- two Ikea desks. One is just a table with some legs, you know, and one is the Ikea standing desk. I started prototyping desk layouts, like, okay, if I put my L desk here, how does this feel? Right? I didn't like it, Chris. I just was like -- and then Jessie came in and she was like, "So, I'm just going to see the computer on the L desk?"
Chris: Yeah.
Dave: I was like, "Oh, no! Maybe I'll try it by the wall. Then put the L desk on the walls, you know.
Chris: Mm-hmm.
Dave: I was walls only.
Chris: Okay.
Dave: Literal jump scare. Jessie came in and I went [screamed].
Chris: [Laughter]
Dave: [Laughter] Literal freak out, and so I just was like, yep, that one is out of the equation. I was on Twitter joking about this. Trent was like, "Put it in the middle of your room facing the door." I did that. All I see is monitor. I don't get to see the fancy outside I have. I just see monitors, so that's not going to work.
I did a switch and I'm going to go with an 80-inch wide mega-desk, one desk, two computers, Mac and PC, running on it. I might have to buy new monitors to make it all work, like with switches and stuff like that. But I'm going to do one big, big desk.
Then because I was--whatever--just like, let's just spend money, I got a walnut desk. Now I have a big walnut desk coming and that should be here pretty soon.
Chris: Beautiful. I can't wait to see it. Yeah.
Dave: I just was like, if I'm getting a big desk, let's just get a big nice one, right? This is the last desk, you know?
Chris: Yeah.
Dave: This is it, so.
Chris: That should be your first YouTube video.
Dave: I'm going to--
Chris: The last desk.
Dave: I might do it. I've got a few YouTube videos. One is where I try to figure out how many linear feet of book shelving I need--
[Laughter]
Dave: --because I have so many comic books and crap. Then I think I have--whatever--boxes of books in the fricken' garage, too. I've got to go through that. Maria Kondo it. Get rid of it.
Chris: It'll help that go. Books are awesome at that in offices. Not that it's bad, but still good.
Dave: Yeah. No, no. You can hear it. Yeah, we should wrap up. Sorry. Too much Dave this episode.
Chris: Oh, come on! Never!
Dave: We'll tone that down.
Chris: Never.
Dave: Hey, hey, hey. But 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.
Head over to our Discord. Go to the Patreon. Click the donate button. Then go into our Discord because it's popping off. It's really fun. That's patreon.com/shoptalkshow.
Chris, do you have anything else you'd like to say?
Chris: ShopTalkShow.com.