Search

595: MedTalk Show, Plagiarism and Code Grifting, and How We’re Testing Code

Download MP3

Blood pressure, stress, and COVID highlight the MedTalk Show portion of this episode, a new "Did You Know" segment about dev tools in Chrome, 4 hour video on plagiarism and code grifters, typography, breaking out of CSS Grid, the oldest things Chris and Dave worked on, and what the testing process is like at Luro or CodePen.

Tags:

Guests

Chris Coyier and Dave Rupert in silly sunglasses and a sign that says Shawp Tawlkk Shough DOT COM

Chris Coyier and Dave Rupert

This episode is with just Chris & Dave, ShopTalk Show's hosts. Chris is the co-founder of CodePen and creator of CSS-Tricks, and Dave is lead developer at Paravel.

Time Jump Links

  • 00:19 Got the 'vid edition
  • 01:26 MedTalk Show edition
  • 08:50 Did you know in Chrome you can copy request headers, response, etc. but also copy as fetch, copy as Node.js fetch, copy as cURL, and other cool options
  • 12:29 Sponsor: Miro
  • 13:42 Plagiarism and YouTube
  • 22:09 When are you paying homage vs being a grifter?
  • 29:45 Needing to see examples when picking typography
  • 31:49 Reading paper books
  • 34:01 Ford and Starbucks sponsor us
  • 36:08 Breaking out of CSS Grid
  • 42:54 What's the oldest web thing you have worked on?
  • 49:56 Learning about old things like base tag
  • 52:05 What's the testing like on CodePen and Luro?

Episode Sponsors 🧡

Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another COVID edition of the ShopTalk Show. I'm Dave--got the 'vid--Rupert.

Chris Coyier: Did you, seriously?

Dave: Ah, man. Yeah. With me is Chris--healthy--Coyier. Hey, Chris. How are you doing?

Chris: Yeah. Yeah.

Dave: So, if you hear me kind of nasally and gravely, that's the old purple bug.

Chris: It's because you're in fricken' quarantine?

Dave: Yeah.

Chris: Seriously?! Oh, my gosh.

Dave: Well, yeah. I'm just living a country music song over here, but yeah.

Chris: Yeah.

Dave: One night, my daughter, my blessed daughter, my beautiful baby girl, my baby girl comes into the bedroom. "Oh, I'm not feeling well. I'm not feeling well."

"Sure, honey. Lay down."

Chris: Yeah?

Dave: She's snoring so loud in my face, I literally woke up and went, "You're so loud!"

[Laughter]

Chris: Yeah, sympathy hadn't kicked in at this point. Yeah?

Dave: Didn't quite. Wasn't there. I just was mad, and then I think she had COVID. She never tested positive, but she had COVID, and then she wonderfully -- just the gift that keeps on giving -- gave it to me. So, she probably got it at school.

Chris: Wow! Yeah, well, it's still around - this damn thing. I have also never tested positive. I haven't been sick. I haven't had the sniffles in, I feel like, years.

Dave: Yeah.

Chris: I don't know what. I do take a multivitamin so, in my mind, I take the multivitamin. I take a little cocktail of stuff, which this is definitely folk wisdom garbage. But I'm like, "Whatever I do--"

Dave: Oh, no. This is welcome to Joe Rogan's podcast!

Chris: Yeah.

[Laughter]

Dave: Chris is going to tell you all his supplements.

Chris: Yeah. Follow this URL! Take the same one I do! No, hell no. I don't even have a preferred brand. I just buy the one that's at the grocery store. You know? But I take my little fish oils. You've got to have that.

Dave: Ooh, yeah. That one is the magic one.

Chris: I take a little calcium and magnesium for the bones, health, and stuff.

Dave: Hmm... That's good. That's good.

Chris: Now I'm on blood pressure medication too.

Dave: Ooh...

00:02:09

Chris: I'm sure people really give a shit. [Laughter] But it's high, so--

But the technological angle here is that I have a wi-fi scale - or whatever. I don't know how....

Dave: Yeah. Yeah.

Chris: I feel old saying that. Of course, it's wi-fi, right? I don't know. It's Internet-connected.

Dave: Are there non-wi-fi scales now? Yeah. [Laughter] Do we just call them scales? Yeah, that's a good question.

Chris: Or do you say--? Why does the connectivity method matter for the scale? I don't know. It connects to my phone. I don't know what it does. It's great.

Dave: Yeah.

Chris: So, there's an app. The app is fine. It's called Qardio, but instead of a C, it's a Q.

Dave: Ooh... Okay. All right. Yeah. Yeah.

Chris: Okay. Fine. Whatever.

Dave: I have the Withings one.

Chris: I think I've seen that. Yeah. I don't know. I didn't decide. Miranda came home with it one day.

It turns out I kind of like it. It's just a scale. I don't know. It has a little smiley face on it. It tells me I weigh too much.

Dave: Yeah.

Chris: But I have the data now, you know.

Dave: Mm-hmm. Mm-hmm.

Chris: Then I go to the doctor. "You've got high blood pressure. Every time you come in here, it's high, so maybe we should deal with it."

She's like, "You should take it at home." You know?

Dave: Mm-hmm.

Chris: I was like, "Oh, man. I've got to do that at home? That sucks." It turns out this Qardio company, they make one too. You slide it over your arm.

Dave: A little cuff? Yeah.

Chris: You press a button on the app, and it goes [buzz]. It figures out your blood pressure. I'm like, "Oh, that's technology. Good job." You know?

Dave: Yeah.

Chris: I'm not looking for a job, but I would work somewhere like that that's clearly doing something with great UX that helps people but that's just in a totally different industry or something. I don't even know how well they're doing, but it does appeal to me. I'm like, "Good job, team."

Dave: Yeah. That's great. Helping people out.

Chris: Pretty good. So, I'd give the numbers to my doctor, and they say, "Well, yes, [laughter] you have high blood pressure." I never don't.

Dave: Oh, man.

Chris: They give me a pill. I take the pill. Keep taking the blood pressure. Just nothing. Still high.

[Laughter]

Dave: It's still high. Sorry.

I have this weird thing. Whatever. We're talking about medical maladies here on the ShopTalk Show. [Laughter]

Chris: Yes. MedTalk Show.

00:04:16

Dave: MedTalk Show. Personal health information show, PPI show. [Laughter]

Or PII - whatever. I have this thing called White Coat Syndrome. Do you know what that is?

Chris: White Coat Syndrome. No, I don't know it.

Dave: It's basically this idea, if you see a doctor or somebody in a lab coat, you get stressed out.

Chris: Oh...

Dave: It causes you stress and a physiological response. So, even my dentist, you know how they give you the little cuff?

Chris: Yep.

Dave: And do a little blood test, you know.

Chris: They do.

Dave: They look at the number, and they're like, "This guy is going to fucking die."

[Laughter]

Dave: Their eyes are so huge. They're like, "Um... Are you feeling okay?" They don't know what to do. It's so high.

Chris: And do they send you home?

Dave: Uh, no. I just say... I've learned to explain. There is this degree of stress and not feeling well and stuff like that. When you run your own business, you're stressed.

Chris: There is some stress.

Dave: I actually saw a doctor, and he was a bit more of a hippie guy, would never prescribe meds kind of dude.

Chris: Okay.

Dave: DDO or whatever they're called. He just was like, "You're not... [Laughter] You just need to chill out." He got the right-sized arm cuff, and he waited there for like ten minutes and then did it. Then he was like--

Chris: It was fine?

Dave: It was fine.

Chris: They always say that. Every time I go in, they're like, "Ah..." They write it off, my high blood pressure, because they're like, "I don't know. Okay, so you exercised this morning and you're sitting in a doctor's office. Yeah, it's whatever. It's just that."

Dave: Like we're not--

Chris: But it's not just that for me. It's absolutely not.

Dave: Right. It's just like a high... your prime pump. A high-running, high-octane engine.

Chris: It's the most one-to-one health thing from your job to your health. It's just amazing to me that stress... And it's not just stress for me. It's mostly overweightness. But still, stress is involved, too. That that immediately makes your blood problematic. You know? There's not a little hop, skip, and a jump there. It's just one-to-one.

Dave: Yeah. Health journey stuff, I've dropped my heart rate about ten BPM or 12 PBM just through -- and that's my Apple Watch telling me that -- just by trying to be more chill. You know?

Chris: Yeah?

Dave: Just like, "Hey, man. We're getting a little stressed out. I'm just going to take a step back." You know?

Chris: Wow!

Dave: Interrupting that stress response cycle and stuff like that.

Chris: That's your pulse is lower?

Dave: Average pulse is 12 BPMs lower. I was like running at 120%, basically.

Chris: Ooh...

Dave: Like 80 PBM [laughter] or 77 BPM.

Chris: Yeah, all the time.

Dave: You shouldn't be that all the time. That's kind of a light walk all the time.

Chris: Right.

Dave: I've lost weight. That's good. If you want to shred another five pounds, get COVID.

Chris: [Laughter]

Dave: Just throwing that out there. [Laughter] A quick way to shred another five pounds.

But no, it's like all this stuff. I'm feeling better than I ever have. But it's just like, man, it's constant work. It's not easy. It's not fun. I'm mad about food all the time.

I think the big sign was bringing my heart down. That was huge.

Chris: Nice. That's real, man. You've got some years back.

Dave: Yeah, hopefully. I'm not just running a marathon and getting fatter all the time.

[Laughter]

00:07:54

Dave: I think that stress is like my body just convert... It's like, "Oh, you're stressed?" Yeah, a bear is attacking us. Let's bucket calories. You know? I think that's how my body responds to stress.

I'm not a binge eater. I'm not an emotional eater so much. I do like to eat my feelings sometimes. But I'm not big into that. My thing is I usually forget to eat, and I make a bad decision. It's like 2 o'clock. I'm like, "Oh, yeah. I haven't eaten. I guess I'm going to Wendy's." You know? [Laughter] That's my M.O.

But I think a big thing is not being stressed has helped out my body. This is not health advice. Talk to an actual doctor. But I think my wife has noticed. It's been a huge boon for my weight and health and everything.

Chris: Well, that's excellent.

Let's do a tech one just to switch.

00:08:54

Dave: Switch back to tech? All right. Switching back to tech.

Chris: Just for a minute. We can switch back. John Ellwood writes in about... This is just a "Did you know?"

Dave: All right.

Chris: I think it's a good one. Chrome dev tools, network tab, you go to one of the network requests, which I do this every day of my life because - whatever. I'll even, like, "Where is this image on this webpage?" Boom. I go network test, and I filter by images. Then I just find the image I'm looking for in the list so I can drag it to my desktop or whatever.

Dave: That's how you do it, right?

Chris: But I don't know. It depends. That's how I'll do it if I've already tried to right-click save image as. And if anything impedes me in any way, like if there's something over it or it's a CSS background image actually, or something is stopping my ability to right-click save as, you can't stop me. I will stick your image. Your images belong to me.

Dave: Try, Instagram. Just try. I'm coming for you. [Laughter]

Chris: I'm constantly filtering by XHR, too.

Dave: Mm-hmm.

Chris: Or whatever they call that. XHR. Did I say that right? I guess I did.

I mean just a network request that happens after the original page load.

Dave: Yeah. Yeah. Yeah.

Chris: Just because that's interesting. It'll be some API usage or something. But any of those network requests, John Ellwood reminds us that you can right-click on them, get a context menu. I think that's what he's saying here.

There's a copy option with a little arrow that points to more. And if you hover over the copy item, you get different ways to copy it.

Dave: Mm-hmm.

Chris: You can copy just the headers. You can copy just the response. But also, you can copy as fetch, which is really interesting. It'll give you a little chunk of code in JavaScript fetch code.

Dave: Yeah.

Chris: You know what I mean? That's just ready to use. You could dump it in a CodePen or whatever and try it. There's copy as Node fetch, copy as cURL.

Dave: Whoa!

Chris: That's all very interesting. You know? It's just because maybe that's why you're in there at all.

Dave: Yeah.

Chris: Because you're like, "What's wrong with this request? I need to go bring it over to some other code." It helps you out.

It reminds me, in CodePen, our Pro feature of asset hosting. When you upload assets, we also have a three-dot menu, and we allow you to copy. It has all kinds of stuff.

If you upload an image, it'll be like, "Copy, but copy as an IMG tag," or "Copy as a CSS background image." We're like, "I know what you're doing with this, so can I help you?"

Dave: Mm-hmm.

Chris: Good tip, John Ellwood. Copy as, and it copies a bunch of other stuff.

I knew about that one, but I don't use it as much as I should. It's good to have a little reminder of it.

The one thing I do use all the time is the copy outer HTML - or whatever - out of the DOM.

Dave: Yeah. Yeah.

Chris: I'm like, "Give me this whole chunk of HTML." That's a good one.

00:11:40

Dave: Isn't it weird how copy is not copy. I think if you command-C it, it is copy. But it'll copy the outer HTML. Yeah. It's weird it gives you inner and outer - like I care.

[Laughter]

Dave: Copy the thing I just clicked on, please.

Chris: What it doesn't have is inner. That's the one that bothers me.

Dave: Oh, interesting.

Chris: I often do want the inner because you have to copy one node.

Dave: Oh, yeah. Yeah, yeah, yeah.

Chris: If there's, for example, div class equals article and then 50 P tags in it, what I want is just the 50 P tags.

Dave: True.

Chris: But you can't get 50 P tags. You have to copy the article with the outside div as well. They should have inner. That would be better.

Dave: Hmm... hmm... Can't get 50 P tags, man. That's too bad.

Chris: Nah, I think, yeah, there's some limitation. It just allows you to pick one node, and you can copy that one.

00:12:29

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Miro. Miro is an online visual workspace for your team. It can do all kinds of stuff.

Super advanced product, like, for example, if you need to do a diagram of something, like, "Okay. We're working on this software product. It's actually a little bit complicated, and I want to draw it out for you. I want to draw our Web server here and our microservices over here and our database over here. I need to connect them because there's logic. Sometimes it splits off. Sometimes it's got to go fetch resources from this other server."

Miro is amazing at that. I can draw that out and have everybody on my team have access to it and comment on it, even listen to me talk about it right on a Miro board. That's something you can do in an infinite canvas online visual workspace.

On another board, we could be doing project management and having tickets in there that come in from another source, and we're organizing and dragging them around together as a team. Or we could have a meeting and keep meeting notes in there with sticky notes all over the place. There's all kinds of great stuff that keep people on the same page that you can do through Miro boards.

Find simplicity in your most complex projects with Miro. Your first three Miro boards are free when you sign up today at miro.com/podcast. That's three free boards at miro.com/podcast.

[Banjo music stops]

00:14:02

Chris: The YouTube video this week everybody was talking about--

Dave: Yes!

Chris: --and listening to, it's one of those ones that it goes against all philosophy of video is that they should be short and sweet. This is four hours long. Hbomberguy's Plagiarism And You(Tube), which I am about three-quarters through now. I really had to chip away at it. Really a journey.

It starts out with him kind of complaining about some people that ripped off him, I think. You're like, "Oh, my God. Is this a four-hour bitch fest?" But then it moves on to talking about other people's plagiarism.

Is it a hell of a name names takedown super drama. [Laughter] It's pretty good.

Dave: Yeah. It's phenomenal. Four hours, right? You see that number, and you're like, "Nope!" You know? Any video on the Internet, that's no way.

Chris: Yeah.

Dave: But enough people are like, "This was wild." And I think Alan in the D-d-d-d-discord was like, "Hey, I watched it at 2x, and it only took 2 hours." I was like, "Eh, I've got COVID. I could watch it." [Laughter] You know?

Chris: Yeah. Oh, you made it all the way? That's good.

Dave: I made it all the way. Well, it's one takedown would be devastating, right?

Chris: Right.

Dave: But this is like five back to back takedowns.

Chris: Right. Clearly actually researched. Although, I didn't research his research. That's what I was feeling like watching it. I'm like, "Am I making the same mistake as the people who are watching the plagiarized videos are making where you just assume everything they're saying is true?"

Dave: True, true, true.

Chris: I just watched it almost for the popcorn value of it. He is very funny. It's the first video I've ever seen. Apparently, he's already extremely popular. But I enjoyed the good takedown.

They're people that -- I don't have a cold heart, but I feel like deserved it because, in every case, what they did was they doubled down.

Dave: Never double down.

Chris: They didn't say, "Oh, man. You called me out. I really should have done a better job crediting it."

In every case, they tried to do some twisty crap to get out of it, and that's what really bugs you. You know?

Dave: Yeah. They literally would try to flip words to make it look like they said it. That's the thing about the blogs and the forums and everything they're stealing from. These have date stamps on it. [Laughter] You know? Your video, they didn't copy you. You copied them. It's very obvious and traceable.

00:16:31

Dave: It made me think a lot about tech stuff. How often are we plagiarizing each other? I'm sure I'm guilty where I did not sufficiently credit something. You know what I mean? That's the nagging feeling I have. I have publisher guilt or something going on.

Chris: In what way, though? What are you thinking of when you say that?

Dave: I'm just thinking maybe there's a talk I did or something. "Add breakpoints when things get weird, man." You know? I'm like, "Was that a Stephen Hay quote and I didn't know that and I didn't cite Stephen Hay because I didn't know that?"

Chris: I see. I see.

Dave: Or is that even a Nathan Curtis thing? Who said that first? I don't know. I think that some of that is my idiocy. I don't have enough journalism skills to go find -- or patience is probably the actual word -- to go find the source. But it's something I definitely want to do more often.

We can't always add sources, like here in ShopTalk. We're just talking. It's hard to pause the show and be like, "Let me go find out where that was actually said."

Chris: Yeah. Maybe this show is full of the same stuff. But it's not like the narrative thrust of our show, though. You know?

The examples in the Hbomberguy video, they're like... He's reading passages of a book without credit. I don't think we do that, do we?

Dave: No, we don't do that. I think we try to credit whenever possible. I think we push towards that. But it just made me realize.

I had an interesting [laughter] kind of situation where somebody took an article I did, like a CSS-Trick I did, and they did the same Trick but with variables, which CSS variables.

Chris: Mm-hmm.

Dave: I was like, "Okay." This is right after I watched this video. It was like, "Okay. Yeah." I like it. I think that's a cool rebound. But I think I was cited as "article."

Chris: Hmm...

Dave: Like "in an article" somebody wrote this. Anyway, it's been interesting.

Chris: The fact that you're worried about it goes a long way. You know? I feel like that's happened on this show a number of times when people write in. They're like, "What should I learn next?" or "Am I really good enough?" I think of moments when they write in. The fact that you're listening to a show about Web design and development, and you're actively trying to get better, you're so far ahead of the game.

Dave: Yeah.

Chris: Because of how much you already care.

Dave: Yeah. But I think it's just our job to care. It's very often I'll see people all the time, like, "I invented this CSS-Trick." It's like, "No, you didn't. That was Stephanie Eckles. Sue did that one."

00:19:35

Chris: I would remind people that it's really fun and benefits you in all ways to credit.

Dave: Oh, doesn't it? Right.

Chris: Even looking cynically at it, the chance of you giving a lot of credit with something that you say, the chances of them then helping you out by resharing it or something and the warm fuzzies they get. I'm sure there are limits or whatever to this, but if you say, "Look at this amazing thing somebody else did," that's a wonderful, positive thing.

Dave: I feel like only good things can happen. Well, like that example where that guy extended my Trick, right? Part of me was like, "Can you post about it?" I was like, "Oh, okay." [Laughter]

What would have been cool or easier -- and I would have auto-retweeted it -- is if you posted, "Hey, I saw Dave's Trick and I took it a little bit further, and it's very cool."

Chris: Right.

Dave: "And I'm using it in production." Instant retweet. You know?

Chris: Yeah.

Dave: Boom. I'm doing it.

Chris: But what? What happened instead?

Dave: I'll probably post about it, but it's fine. But I just was like, I'm in a weird place where it's like, "Hey, I took your thing, and now can you post about it?" [Laughter] It was like, "Oh, um... I don't know what to do. Yeah, I'll get back to it. I have COVID."

Chris: Oh, I see. It was like a weird request rather than--

Dave: Yeah.

Chris: Yeah, I see.

Dave: Yeah. You know when somebody is like, "Can you talk about my thing on your podcast?" [Laughter] You know? I'm sure we've had a few of those a week. But it's just like, "Oh, well, I mean, yeah."

Chris: Yeah, maybe.

Dave: You should also talk about it.

00:21:15

Chris: Yeah. Don't you think of, like, we both read Kottke and stuff when he's like, "Oh, this is... Here's the coolest wildlife photographer awards are out for the year." He'll put four of them in there, but clearly there are a lot more posted, so you should probably go look at those.

But me as somebody who is like, "I appreciate that, but I'm busy, and you probably picked the four coolest ones anyway, so I feel like now I've seen some amazing wildlife photos." I'm not going to click over.

It's not plagiarism. I would never accuse... Jason is a standup absolute guy who credits everything. Amazing at it. But there is some weird line.

What if he posted all of the winners? Now what? Are you... Is that--?

Dave: You just cloned the... You put that website on your website is what it sounds like.

Chris: Yeah.

Dave: Yeah.

Chris: Is that the big P word on that one? How do you talk about that?

Dave: I think Kottke is probably... He's been doing it long enough, right?

Chris: He just knows the line.

Dave: And boing-boing, he's probably figured out the line. You know? Not like maliciously, like he's A/B testing how much he can steal.

Chris: Trying to run the line.

Dave: Yeah.

Chris: Yeah. No.

Dave: But I think he's just like, "That's enough. I did the rule of threes or something like that."

Chris: Yeah.

Dave: I'll do three of the best ones or five of the best ones or something.

Chris: It's not like he's like, "I just want the clicks." He's not doing anything malicious. He's trying to show you how cool it is.

Dave: I don't need to know how he makes money, man. [Laughter]

Chris: Well, there's membership, but the membership doesn't unlock a whole hell of a lot.

Dave: Okay.

00:22:46

Chris: Here's one for you, though. Let's say... I've always stopped short of this. I feel like I'm being defensive before I even tell you what it is.

Dave: Oh, that's a sign.

Chris: I know. I know.

Dave: That's a sign you did it wrong. You committed the sin. Go ahead. [Laughter]

Chris: I know it is.

Dave: [Laughter]

Chris: You're in this Web design position where you're like, "I need to style a blog post, and I really care about the typography." I'm envious of so many other websites that just have paragraphs and separators and lists and stuff within the blog post that just look great!

Dave: Yeah. To where it's like line-height 1.3 and 1.4 look wrong.

Chris: Right.

Dave: Like 1.4 is wrong.

Chris: I need 1.3478, right? So, here's what I'm going to do. I think Ethan Marcotte does... Oh, I love Ethan. His site is so beautiful.

I'm not going to copy his site, but the type on his blog posts... ooh, nelly! It is good-looking! So, I'm going to take the exact font, the exact size, the exact line height.

Dave: Mm-hmm. Mm-hmm. Mm-hmm.

Chris: Okay. Have I crossed the P line yet? Am I allowed to have that font and that size and that line-height?

Maybe not. You know? It feels a little... It's starting to get there - to me.

Dave: If you're using Tailwind, yeah, totally.

[Laughter]

Chris: But then what if you picked the same purple background; you just color sample his purple?

Dave: Mm-hmm.

Chris: And you use that, too. I feel that maybe pushes it over. Then it looks white, but on Ethan's site it's not white. It's a little tiny, tiny, tiny, tiny bit gray. What if you copy that, too?

I feel like now that is kind of weird theft. But that's just my line. I don't think that's everybody's line.

Dave: Reverse ship of Theseus - or whatever. How much do you have to steal from Ethan's site to make it a theft?

Chris: Yeah.

Dave: It's tough, man. I don't know. I don't know the answer. There's probably some paying homage. Obviously, you should give credit in some kind of blog post. "I was so inspired by Ethan's setup, I started with this."

Chris: Yeah. Does that all of a sudden make it okay then just because you did that in some kind of like redesign credit blog post or something?

Dave: Maybe not.

Chris: Maybe it does then.

Dave: Maybe not, though. Maybe somebody stole the thing entirely.

Chris: Yeah.

00:25:17

Dave: We had an agency early days, like in our old Paravel amigos stage where we had our drawings on the website. An agency in Pakistan stole our whole entire website verbatim, word-for-word and then put Nintendo NES instead of our custom illustration. It looked a little different.

Chris: Hmm...

Dave: But it was just like, "Ooh, you, like, stole the whole thing. You hot-linked the background images even." That's how we found out about it. [Laughter] It was just like, okay.

I don't know. Yeah. I wonder if there's an intent thing behind it, too. Are you grifting? Are you a CSS grifter?

Chris: Yeah.

Dave: Is that the intent? Are you just trying to grift some money out of people?

Chris: I listened to a podcast define grift the other day or be clear about it.

Dave: Ooh...

Chris: And I really appreciated it. I wish I wrote it down because I think it's on my "to blog" list to look up. But the point was that the spirit of what you're doing isn't to help or teach. The spirit of what you're doing is personally motivated: sell something, grow yourself, grow your brand. That's the purpose of it.

That's why I think that word really works with a lot of social media, new media stuff with people. You know how I was complaining about trying to search CSS on TikTok and just see the garbage that comes up. It has that feeling of, "You're not trying to teach me something. You're trying to be like, 'You like this, right? I give you this. Press like.'"

Dave: Mm-hmm.

Chris: "I want to grow myself!"

Dave: These are the keywords you like.

Chris: Yes.

Dave: Hulk give you keywords.

[Laughter]

Dave: Yeah.

Chris: Yeah, that's what it feels like, anyway. Regardless of your intention or not, when it feels like that to me, then I'm not shy at calling grift.

Dave: Man, we should have Ethan send in an audio, like, "At what point would you be upset if we stole--? How much of your site could we steal, and what would you be upset about?"

Chris: Yeah, before you said something. I picked Ethan on purpose because I thought, of all the people you should never do that to, it's something as nice and generous as Ethan is. You know?

Dave: Yeah.

Chris: But I wonder because he is principled, too. At what point would he say something? Is his personality such that he would never say something because he's like, "I can't. I'm not going to involve myself in drama. I don't care anymore"? You know? Or would he be like, "I need to say something," to kind of protect the industry of design?

Dave: Right.

Chris: I can't have people in my position just not saying anything because that doesn't send the right message to people following in my footsteps - or whatever. I don't know what he would say. It's complicated.

Dave: I'm messing with his headlines. If it's line-height 1.1 and if you set it to 1.2, it's wrong. You know what I mean?

Chris: Yeah.

00:28:22

Dave: That's where that's design, and maybe here's what I'll say I think it's okay to take Ethan's type setup, but I think you've... Not you specifically, Chris. But I would say this about myself.

It's like you've now put yourself in a situation where you're kind of a phony, like you have played yourself in a way, like you've put your typography skills a little bit higher than what you actually can do. And so, you're presenting yourself as a little bit higher than what you're capable of.

Chris: I could see that, but how do you ever get any better then? Can you not emulate somebody to level yourself up over time? Are you just stuck in time?

Dave: You should, but I guess it's like when I start writing a book on typography. I probably am not the... [Laughter] You know? I'm not the expert. That's where the plagiarism has gone too far.

If every single website where I'm setting up for somebody I'm going and stealing somebody's type setup. But then if you go to a website where they're like, "Hey, steal this type setup," [laughter] is that... Did you do it wrong?

I think, for a long time, Jason Santa Maria offered type pairings over on the Typekit blog - and stuff like that for a long time.

Chris: Hmm... I like that. That's my favorite. Speaking of typography specifically, I have to see examples because when I read about typography, it's so vague. It's so easy to slip into just - I don't know - overly thinking stuff. I'm just like, "I'm not getting anything out of this."

Anything I've learned about typography, which is limited, let's say, it's because I'm seeing "Do this; don't do this," example.

Dave: Mm-hmm.

Chris: I'm like, "Yes, I can see it. I clearly see how one is better than the other, and I now know that forever." [Laughter]

Dave: Can I type the right things to make it not be wrong? No.

I think I have Graphic Design referenced and The Anatomy of Type up there. I haven't read them, so.

[Laughter]

Chris: Haven't read them. I just put them in the back of my videos.

Dave: Just to look good.

Chris: Look smarter.

Dave: I've also got plastic robots, and that's always awkward when people ask about them.

Chris: [Laughter]

Dave: Those are my toys.

[Laughter]

Dave: Yes, those are my toys.

Chris: I should curate. I should have a better-curated selection of books behind me.

Dave: Oh, yeah.

Chris: That make me seem really--

Dave: You've got to have the stack of yearbooks, Chris, the SVG for everybody.

Chris: Yeah.

Dave: You've got to have the stack of yearbooks.

Chris: I don't mind this one. I have this one I've also never read, Built to Last: Successful Habits of Visionary Companies.

Dave: Yeah. Yeah.

Chris: That's a good one to have back there because it makes me think that--

Dave: Yeah.

Chris: But does it also signal that you don't know how to build a visionary company and that you had to buy a book to help you do it?

Dave: Ooh... That's how I felt about my stepmom growing up. She always read parenting books, and I was like, "Do you just not know how to parent?"

[Laughter]

Chris: Why do you need so much help with this?

Dave: Why do you need a book? Isn't it somewhat biological?

[Laughter]

Dave: Anyway, no. I got these books here like the engineering management one, that really cool one by Will Larson, and a bunch of these fancy ones. But never read them because paper books are hard for me. It's like when am I just that bored I'm going to read a paper book? Maybe one day.

Chris: Really? Oh, I'm so into paper books right now.

Dave: I am ebooks, ebooks, audiobooks, ebooks, audiobooks.

00:32:11

Chris: It's good. Everybody is different. I heard from a local bookstore guy just down the street here from me that, for his business here in Bend, Oregon, the pandemic, amazing. Just doubled or more his business. And they were largely... you know... whatever.

He's the bookstore owner. He says it was young women. It was high school girls. They'd come in here, and they just wanted to buy paper books. I was like, that is unbelievable to me.

Dave: Yeah.

Chris: And good for you, man. Way to crush it. I'd love to see your bookstore. We have four bookstores in Bend.

Dave: Holy cow!

Chris: One of them is Barnes & Noble. They do fine - whatever. Then the other three are pretty small. And it's not like shop at them just because they're small, but they do have just a more warm vibe to them, and I go to all of them. They're just nice. It's a nice place to work sometimes.

Dave: Oh, that'd be good. Our Barnes & Noble has a weird vibe. You know Barnes & Noble tend to be big, like tall ceilings and stuff like that.

Chris: Yeah.

Dave: This has that but only in half the store. It's a weird vibe.

Chris: That's how ours back in Wisconsin used to be, too. There are two floors, but only in the back area.

Dave: Yeah. Yeah. And so, it just creates this... And then there's a little Starbucks in there, and I see people there. I'm just like, "Why'd you come to this one?"

Chris: Yeah.

Dave: Of all the places in Austin, cool city, we've got coffee shops, baby. Why did you come to this one?

Chris: Yeah. Weird vibes, but people like different stuff. I go back and forth, too.

Dave: People like different stuff.

Chris: For years after moving here, we have so much good coffee here, too, that I was like, "Why would you go to--?" We have a couple of Starbucks. Why did you ever go to those? We have good ones. Now I'm like, "Man, I like Starbucks."

Dave: [Laughter]

Chris: This is great. [Laughter]

Dave: Starbucks... This episode is brought to you by Starbucks. Starbucks!

Chris: Yeah.

Dave: Get a cup of joe! Get caffeine in your system. Starbucks. Starbucks.

Chris: [Laughter] I would love to... That would be a great sponsor, I think.

Dave: Why don't food companies sponsor tech podcasts? We have fricken' money, man.

Chris: I told our advertising company. I had a meeting with them this week, and I said, "I know you place industry stuff on our sites. That's what you're known for. That's where your contacts are. I get it. I'm not begging you to put an ad for a Ford F150 on my website. But let me just tell you really clearly, 'Don't say no to Ford.'"

Dave: Yeah.

Chris: If they come calling, don't say no on my behalf. People, developers, they buy all kinds of stuff. The ad industry sucks so hard right now that I'm like, "If we could recoup some chunk of that because we have an electric car ad or something on CodePen, just let's do it."

Dave: Just serve Jimmy John's ads at 11 o'clock, ya dummies.

Chris: [Laughter]

Dave: It's not fricken' rocket science, dude.

Chris: We should get into advertising.

Dave: Hit them with a Jimmy John's sandwich ad at 11 o'clock. That's all you've got to do.

Chris: Unbelievable.

00:35:25

Chris: One thing I was going to mention about the four-hour Hbomberguy video, one is, that's amazing that it's four hours. He has built up some trust. But clearly, with us that have never heard of him before, we still watched it. I think that's just amazing that you can always break the mold and that there's always this conventional thinking of, like, "Always target this amount of time," or something.

Dave: Yeah.

Chris: But it's just not true. If you do a great job, people will watch whatever. I think Kevin does a great job, Kevin Powell on YouTube. His video times are all over the place.

Dave: Yeah. Yeah.

Chris: And people watch him because he's saying something interesting that people like. Our whole Discord was watching one of Kevin's the other day. Remember that?

Dave: The grid one?

Chris: Yeah.

Dave: You basically set up a bleed, a breakout of the container grid. You'd basically set up a grid, and then you have these breakpoints inside of it. But the trick is you name those breakpoints. You use the name function.

You do bracket bracket content start and bracket bracket content end.

Chris: Content end. You know I never do this. That's why it was so interesting.

Dave: Never do it!

Chris: Never.

Dave: Then you can just say grid row content - or whatever - grid column content.

Chris: Yeah.

Dave: Then it'll just show up there. I was like, "BS, dude."

Chris: What?!

Dave: What in--?

Chris: I know what named grid areas are, but they are different when you sprinkle them into the syntax of grid template rows and grid template columns in the square brackets.

Dave: Mm-hmm.

Chris: Those square brackets, they make it look really verbose and complicated. Me, I'm like, "Eh, I'll just break out my thing elsewhere or something." But no, he really makes a strong point that that's really useful.

But the trickiest tricky trick-trick part was that, okay, now I have, for example, a full-width class. I apply the full-width class, and it just goes edge to edge in the browser. That's not that complicated.

You do have to swallow the red pill of I'm going to put all of my content, even just vertically stacked content, on a grid. To me, I still have a hard time with that because I'm like, "Oh, man. I'm so used to just putting paragraphs as a grid element. But I'm over it. I'll take it. Okay."

00:37:42

Dave: Well, I don't think it actually works out that way in real life. I just think you have article tags, semantic things, like articles and header and things like that. It doesn't always work out that way. Anyway, yeah.

Chris: Well, if you have three paragraphs on top of each other, they are now grid items and you are no longer using margin to push them away. You're using the grid-gap. To me, somehow I'm just too old or something. It weirded me out. But that's what I'm starting to get over.

But then, okay, now you have one grid item that's edge-to-edge instead of constrained to the middle of the browser. All the content in it is edge-to-edge also. I'm like, "Well, that sucks because now you need an inner wrapper to push the content back in," because all you're trying to do is maybe make a big blue stripe or something across the middle. Now what are you going to do?

The trick is you just apply the same grid as you just did to the entire page to that element again and the content just immediately just slaps back into the middle. You're like, "Oh, my God!" [Laughter] That's amazing!

Dave: It just went back to the content. Yeah.

Chris: Then you're like, "Oh, yeah. It would, wouldn't it, because the width of the entire page is now the same width of that full-width container." It's fricken' genius. I loved it. That's such a good trick.

Dave: It was a good trick. I think that was built on some other people, too, who he cites in the video.

Chris: Exactly. He credited people. How interesting.

Dave: Yeah.

Chris: Good job. Not plagiarism.

Dave: Good job.

Chris: Although, that's tricky, too. Not to drag this out forever, but I can't imagine -- and I've heard this sentiment from women in the industry too that are like, "Yeah, they have a great idea. That's nice to be credited by somebody." But then people watch the popular guy crediting you, and then that's where the chain of credit stops.

Dave: Right. Right. Right. Right.

Chris: Now everybody that knows the trick thinks of it as the dude's trick.

Dave: Kevin's trick, yeah, not Stephanie's trick.

Chris: Even though he credited it nicely, now it's Kevin's trick not Jen's or whatever.

Dave: Yeah. Yeah.

Chris: Not saying that's happening right here and in this case or whatever, but that's a thing.

Dave: That can happen. Yeah.

Chris: I lived that because I wanted to be a source of CSS information at CSS-Tricks and showcase people and credit people and do all that. Fortunately, I don't know that there was ever... I don't think there's any particular CSS technique that was every like, "That's the CSS-Tricks technique."

Dave: Yeah.

Chris: Which is good because I don't want credit if I didn't do it.

00:40:17

Dave: Flexbox. CSS-Tricks invented Flexbox.

Chris: Those days are starting to be over. Now I hear people, like, "Where'd you learn Flexbox?" Flexbox Froggy. Remember that?

Dave: Oh, yeah.

Chris: That had a day in the sun there. Now the two guides from Josh are now the big dog guides. I think he's got a new grid guide and not less new but still newer Flexbox guide, and they're highly interactive.

Dave: That's a good one.

Chris: Now you're like, "Oh, what's the thing to push all the items to the bottom right?" Oh, you've got to do justify content and align items. You're learning that because it's interactive, which just activates a different part of your brain, I think.

Dave: Right.

Chris: That's why Flexbox Froggy was so effective is that you had to do work.

Dave: Yeah. You had to play, solve a game, a puzzle.

Chris: Yeah.

Chris: No.

Chris: Unlike Josh's, you had to write code in Flexbox Froggy to do it.

Dave: Yeah.

Chris: By the time you've written code, it somehow turns into a better brain nugget.

Dave: I think it helped me understand flex-basis. I was using flex-basis, but I didn't understand how it worked. There's value even if you think you know it.

Chris: I still don't. I don't get it. [Laughter]

Dave: Imagine, if you will, this thing is 25% big. [Laughter] And it's sort of just a... It's very in the browser suggestion realm.

Chris: No, I get it. But how does it--? Do you definitely understand how everything else plays with it?

Dave: No!

Chris: Which one wins, width of flex-basis, and under what circumstances? I'm almost sure that you don't know because it is weird city.

Dave: Yeah.

Chris: Then min-width and max-width can factor into it, too. Does it win against those? Then there's shorthand that affect it that you might not be aware is affecting it.

Dave: Flex 1.01.1 - or whatever crap.

Chris: Yeah. Or you just say flex 25%. What is that exactly doing? You know?

Dave: Yeah.

Chris: It is doing something specific. Yeah, the Flexbox API, more people know and use Flexbox just because it's older.

Dave: Mm-hmm.

Chris: And it was so good at the time. But as an API, not my favorite - personally.

Dave: Yeah. Yeah. Grid is good. Grid is great. Loving Grid.

Chris: Yeah. No qualms with Grid.

Dave: Subgrid is out. Right? Firefox got Subgrid this month.

Chris: Yeah.

Dave: We're--

Chris: This month?

Dave: I think this month, so.

Chris: Oh, that's right. I thought it was a little earlier. But yeah.

Dave: Maybe it was last month.

Chris: Subgrid your way to success, I say.

Dave: Still haven't done it.

00:42:54

Chris: Speaking of old stuff, I think this question slots in nicely for us, Dave. It's from Sam....

Dave: Sure.

Chris: What's the oldest thing you have worked on, the oldest Web thing? You know? Can you remember back?

I feel like - I don't know - what other caveats? Sam is asking how was it, what surprised you, what did you learn in the process? Sam's guess for you is that it was Microsoft's homepage, and his guess for me was CSS-Tricks. Those are definitely not the oldest things that we worked on. I'm sure we go--

Unless Sam is asking what's a big, major... the oldest, big, major thing you were paid to work on. That's a different question than the first thing you ever did. I'm more interested in the first thing you ever did.

Dave: Yeah. Let's see. The first thing I ever did, it was a lot of build my own stuff, like little PHP sites. Made a site with Microsoft front page that I remember building that and had some interactive stuff that I didn't really get. Glo was kind of cool.

A lot of stuff. But professional work, the first site I went in to work on... I'm trying to think. I really don't have a strong memory.

The Microsoft one was wild because it was this... I had to buy a laptop from BestBuy, a Windows PC so I could get into their corporate network. Then I got in their corporate network, and I installed Visual Studio.

Chris: Whoa!

Dave: Not even Visual Studio code, Visual Studio, and pulled down their site, cloned it, and had to work on it. And it was rough, but it was all asp.net, and it was all this stuff. I barely understood it, but I could template in it, and so that was good enough.

Chris: Wow!

Dave: Learned how to build it. I'd hit save. it took eight minutes because I bought a very ultra-lite PC - or whatever, a laptop. And so, that was very... Should have bought a big rig, but that's okay.

But then... Yeah, it was... I think that was kind of a big one. ASP was pretty shocking to see, and everything goes through thousands of XML files to get out. That was the most shocking thing. Just like, "Wow!"

Chris: Wow! Interesting. Interesting. I didn't have any ins like that. I can't even remember why. The Web existed, and I was just like, "That'd be cool to have a website."

Dave: Mm-hmm.

Chris: It was definitely the very earliest was band and personal site and maybe I'll make a joke site. All WordPress.

I think maybe I had a site that was just an HTML file and CSS. But something about WordPress, it seemed even actually easier because it's this--

Dave: Mm-hmm.

Chris: I knew it's a more complicated tool, but it seemed like there was a path that was like, "This is what you do to get your website working." It's somehow more complicated or less clear that you can buy hosting and put an HTML file at some... Where, for example? Where do you put it if you bought some Web hosting? Whereas WordPress is like, "You put the files here."

Dave: Vpower.net. [Laughter]

Chris: Yeah. [Laughter]

Dave: Ipower.net. That was it. Yeah.

Chris: Yeah. It seems like just an HTML file is simpler, but I don't think so (to a real beginner). I think a more complicated tool that has more clear instructions on exactly what to do is simpler.

Dave: Yeah.

Chris: Then I have all the help in the world. I've got plugins. I've got themes. I've got FTP to mess with files directly. Yeah, so it was WordPress for me.

00:46:56

Dave: Yeah. I started actually on... What did I use before? I think I had a Blogger, like blogger.com Blogger. Then it was like, "Well, I'm going to get off Blogger because it's bad, obviously," and I installed Movable Type, which was kind of in the Movable Type 2 days.

Then I upgraded to Movable Type multi-user instance and got my friends on it. We had a phpBB, I think. We didn't do phpBB, it was called Forem.

Chris: Something like that.

Dave: It was called F-o-r-e-m, or something like that.

Chris: O-R-E-M - or something?

Dave: E-M, or something like that -- U-M, but we had a PHP forum. Then we switched over to Vanilla Forums, which was pretty great.

Chris: I remember that. They had a very smooth kind of... I don't want to overuse sexy, but that's what word came to mind. But it just looked better.

Dave: Ajax, dude.

Chris: Yeah.

Dave: It had Ajax. It had a little post that would turn yellow when you added them. It was very scriptaculous.

Chris: Vanilla. Yeah.

Dave: That's where I cut my teeth was doing these movable type things. That's written in Pearl. That was rough. [Laughter]

Chris: yeah.

Dave: You know? You get into there, and they're like, "Just set up your CGI bin." It's like, "Huh? Sorry. There has to be a special folder?" [Laughter] Yes, you have to name a special folder called CGI bin." And don't put it on the public Web. That's on the private side. [Laughter] You'll find that out.

00:48:30

Chris: We have bin folders all over CodePen. I still don't really super know what does bin even mean, really. I know that's where we put our scripts and stuff. If I'm going to run a shell script, it's probably in one of our bin folders. But I didn't live that life early on, so I don't have that, like, "Oh, yeah." Does it have to be in a bin folder or did one of us make a bin folder because that's just what you do?

Dave: I think it's what you do.

Chris: It's just a naming convention or does it have to be bin, the shell?

Dave: Yeah. I think it means binary.

Chris: Does it really?!

Dave: There's usually one in a Unix environment by default. But your NPM will actually... Your node modules folder probably has a bin folder inside of it. Yeah, it's weird. It's weird.

Chris: I have lots of blind spots, let's just say.

Dave: Well, yeah, I think it's just this weird... There are these tunnels created in the ancient times by all these neckbeard - whatever - dwarves that lived in the mountains. And they carved these ancient tunnels, and it's very Dungeons & Dragons.

Chris: Yeah.

Dave: Now we have shortcuts.

00:49:51

Chris: Occasionally, you learn something new that is actually something old. I was listening to the latest Igalia podcast from our buds Eric and Brian. They mentioned the base tag. Eric saw it somewhere on the Internet. Somebody posted something about how the base tag works.

Dave: Yeah.

Chris: There was apparently just a million comments of people being mind-blown about it. It apparently was in HTML 1.

Dave: Yeah.

Chris: It's like the oldest thing ever in HTML. But I also was like, "I know why people don't know and understand what it is because A) It's not that useful and B) it's a huge foot gun and C) it's just--" Yeah, foot gun, I guess, covers it. But it's just very dangerous.

Just don't use it. You shouldn't use it because it's not a good plan.

Dave: Right.

Chris: I'm sure it has some pretty specific stuff, but you are going to regret it if you think you're saving some characters or something by using the base tag. It affects every HTML request, all of them, on your entire page. [Laughter]

I'm glad people don't know about it. Don't use that. I'm not glad about ignorance, but you know what I mean.

Dave: Yeah. Yeah. It's like if you opt into this, you have hijacked how the browser works. And so, now, are you prepared to suffer the consequences? [Laughter]

Chris: Put it in a Pen on CodePen and see what happens. It's not going to be good.

Dave: It's not a good one. Yeah.

Chris: No, it's going to affect all of the stuff that we need to do to make your Pen work because now it can't hit CodePen anymore. It's hitting wherever your base thing is going - at least for the relative tags.

Yeah. Anyway, I don't know why... I think I just listened to it this morning on my drive to the office, so it was top of mind.

Dave: No, it's kind of funny. Yeah. There's some stuff that's good. It's like sushi, right? Eating raw fish, that's awful. But then you do it, and it's great.

But you don't eat... You can eat blowfish, but most people don't because it could kill you. [Laughter] Only eat it if it's been prepared a certain way. Not everything we don't use is cool by default.

00:52:05

Chris: Well, let's break a record here and do three questions.

Dave: Hey!

Chris: We've got to do one from Simi de Klerk. He's the number one question writer inner, I'd say.

Dave: Probably the number one question asker here on the ShopTalk Show.

Chris: We appreciate you, of course. What are your thoughts on testing? What's testing like on CodePen, Luro, and large pizza company websites and stuff like that?

We don't have an hour to get into this, but I thought I could give you a quick overview of some of the ways we think of testing. Now, this is a little cliché but bear with me.

There tends to be a triangle of testing where the wide base of the triangle (wherever you think of it as the top of the bottom) is unit tests, which are like, "Call this function with these parameters. Did the number three spit out like I think it should? Good." Those are pretty darn important and they're pretty easy to write. And you probably should have a ton of them. And we have an absolute ton of them at CodePen.

It could be for your Ruby code or your Python code or your JavaScript code or whatever. Can't really do that with front-end code, though. You can't say, "Does this--?" I don't know. I guess you kind of can, but people don't really think of that like, "Open this HTML file and is there an H1 in here that says, 'Dave then true'?" That's not really a test that you see that often.

Usually when you're thinking of testing the front end, you've automatically left unit testing land and are now into integration testing land because the website needs to spin up. You spin up the website and check for actual behavior in there.

Now what's confusing sometimes about this is you can still write a test that has assertions that kind of look like a unit test assertations. But they are different in nature.

I like a good integration test because the fact that your website has to spin up for it to pass means that there's a bunch of implied testing. If the website doesn't spin up, well, then your test isn't going to pass and now you have an implied test that your website spins up, and that's pretty good.

They also tend to be slow and flaky, which means don't have tons and tons and tons of them. That usually puts integration tests at the tip of the pyramid. Less of them is good.

But it's integration tests, but it's also kind of... What are they called? What are they called, real-world tests - or whatever? End to end?

Dave: End to end, yeah.

Chris: That's almost what you'd call that at the tip. Integration tests test just more than one thing. So, if you were testing three functions, that's kind of like an integration test because you're not just testing the small, tiny, little unit of something. You're testing how things integrate with each other, and I think of APIs as heavily in this territory.

You're testing a function and that function calls an API. Then that's an integration test because you're testing how systems interact with each other.

At CodePen, we have all three of these kinds of tests. But I think the most valuable ones are probably those ones in the middle, the integration tests. We just had so much trouble with end-to-end tests over the years that we kind of go on and off of having them. I do like them. I do encourage them. These are tools like Cypress or using Playwright or Puppeteer and stuff like that and having an expectation library on top of them.

They're cool. It's just, man, you've got to... Somebody has really got to care about and maintain those things because they will degrade, and they will cause problems. Less so, I find, than integration and unit tests that are a little more deterministic. They're going to return the same value if you run it a thousand times.

I know that was pretty vague, but that's the classic pyramid answer.

00:55:43

Dave: Yeah. No, I mean we end up doing most of the same stuff. We could probably use more end-to-end. We really don't have much.

Chris: Can you log in? Can you sign up for Pro? Can you--? Those are pretty... That's the classics.

Dave: We usually do that through... It's different when you are... You need to make sure that a user can do that, right? You can do some of it, like in a unit test where your login endpoint calls a function called login, and you test login.

I think of it as inputs and outputs. The verbiage in test frameworks is pretty great. It's usually like if I give this a bad string, I expect it to give me a 404 or a 403 or something like that. You say, "If I give it this input, I expect this output."

Chris: Yeah.

Dave: I feel like that's a pretty great way to think about testing. If you have an if statement in your code, that's a great place for a test, man. If I give this input with this weird category that I'm doing something about, I expect this output.

Chris: Yeah.

Dave: I do not get into snapshot testing where you spit out DOM and then you try to mash the DOM and stuff like that. I know people like to do that. We don't do that. I feel like that's a foot gun, personally.

Chris: It can be because then you're less critical of what comes out. If it fails, you're like, "Well, then just update the test." Oh, it's passing again. Oh, good.

Dave: I fixed it.

Chris: You weren't that critical of why it failed to begin with. Although, I don't know. I have little nuanced thoughts on it a little bit.

We do a little bit of snapshot testing in not the DOM so much as what did a processor do because we have a lot of processing of code that happens on CodePen.

Dave: Right.

Chris: So, we might have a very complex set of inputs that we run through processing and then deep test the output. So, the assortation then isn't simple. The assortation isn't, "Did the number three come out?" The assortation is, "Did thousands of lines of code identically match thousands of other lines of code?"

Dave: Yeah.

Chris: That's a really baller test that you cannot hand maintain and, thus, you need some kind of snapshot to deal with it.

Dave: I like that. If I had a thing that was like, "Spit out a CSV," or something, I would want it to be snapshotted against the CSV snapshot I already have.

Chris: Right.

Dave: Then I expect Vue to have snapshots for V4 to make sure that when I run V4, it always spits out a for loop of every item in my V4. You know?

Chris: Yep.

Dave: That's what I would expect the higher level of abstraction that I'm using to have a snapshot. But for me, always, not always.

Chris: I like it. I do like to... I think of this regularly. Alex Fimion's (from the old Discord) thoughts on testing. I think he's got a blog post about this we could put somewhere--

Dave: Yeah.

Chris: --about how it's not so much, "Don't think of your tests so much like these are unit, these are integration, these are end to end," or any other category. Think of them intentionally, like, "Why are you writing this test? What is the intention of what it's testing?"

Who cares what category it's in. You need to care about why you're writing the test and then use whatever tool you need to do to test it. It's almost like intentionality buckets rather than some kind of category of tests. Worry less about that and more about what you're trying to do.

I always like that thinking at least. It's not always how it plays out in every company, but it's a cool thought.

I think we did it, Dave.

Dave: Yep. Here, I put the link here in the show notes, alex.party "Thoughts on Testing." There it is. Good post. Good post.

Well, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up, and visit our sponsors. What?! Starbucks.com!

Chris: [Laughter]

Dave: Then head over to Mastodon. You can follow us there. Then head over to the ShopTalk Discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Oh... ShopTalkShow.com.