Search

647: Slash Pages vs Wikis vs Posts, RSS, Living with an ADHD Diagnosis, and M4 Upgrades

Download MP3

In this episode, we kick off the New Year with chats about battling illness over the holidays, the challenges of maintaining productivity, the differences between slash pages, wikis, and blog posts, how we use RSS, the importance of containers and context, Dave talks about living with ADHD, developing a system approach to CSS, Chris' thoughts on upgrading to an M4 MacBook Pro, and writing in Pug.

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:20 Kicking off the year with corporate sponsorships
  • 02:05 Getting sick for Xmas
  • 03:52 What's on our brain for 2025
  • 06:52 Slash pages vs wikis vs blog posts
  • 18:39 How we're RSS'ing in 2025
  • 21:05 Containers and context
  • 24:34 Dave and ADHD
  • 32:04 CSS wants to be a system
  • 44:28 M4 MacBook Pro
  • 50:05 Writing in Pug

Episode Sponsors 🧡

Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. We're into a brand new season. I’m Dave Rupert and with me is Chris Coyier. Hey, Chris! How are you doing?

Chris Coyier: Good. Thanks. Thanks, Dave.

Dave: This new season is, of course, brought to you by our friends at Mitchell McMitchell Toyota down on Miracle Mile.

Chris: [Laughter] Is that right?

Dave: Who are doing their Toyotathon.

Chris: Got a local sponsor?

Dave: Yeah.

Chris: Uh-huh.

Dave: So, you've gotta get down there. Use coupon code SHOPTALK at checkout for 10% off your brand-new Toyota Tacoma.

Chris: Yeah. Yeah. Good deal.

Dave: We might get sued if there's a real--

Chris: Ten percent.

Dave: Yeah.

Chris: Thousands of dollars.

Dave: Yep.

Chris: Yeah, pretty cool. Um... So, what's going on, man?

Dave: Working on some new brand deals. Yeah, I'm working on some new brand deals and licenses.

Chris: Yeah.

Dave: Kind of trying to get... make space for it, you know?

Chris: That'd be nice. Yeah. Prove to the people that we can do it. I was always fascinated by that social media concept where I think particularly young people were impressed by people that were sponsored.

Dave: Mm-hmm.

Chris: If you're big enough, you have sponsors. Then they would take that to their smaller channel. They'd pretend to be sponsored.

Dave: Oh, yeah.

Chris: [Laughter] That's so bizarre to me. But I kind of get it, I guess.

Dave: No, I think a Vercel sponsorship, man, how much clout would we have if we just had Vercel just saying, "Hey, guys. Here's money."

Chris: Yeah. Mm-hmm.

Dave: Then if we had--

Chris: I will admit it says kind of the opposite. We don't have no sponsors right now.

Dave: We've got community.

Chris: They ain't lining up. Just saying.

Dave: We've got friends in the D-d-d-d-discord helping us out. So, appreciate y'all.

Chris: Absolutely.

Dave: Thank you.

Chris: Our sponsors are our listeners. Thank you.

Dave: Yes.

Chris: It's like PBS of podcasts, I'd say.

Dave: Of Web development podcasts. Yeah, true that. Let's be that. I can do that.

Chris: All right.

Dave: I'm Grover. [Laughter]

Chris: [Laughter]

00:02:12

Dave: Coming in hot, man. Coming in hot for the new year. I got two weeks off. I was sick for all of it almost.

Chris: Oh, no!

Dave: I don't know. I think my body does this letdown when work is stopping. My body is like, "Cool, dude. We've been holding it together."

Chris: Mm-hmm.

Dave: And now I'm going to just be dead for a few days. That happened before Christmas. Then I think I got the norovirus right after New Year's.

Chris: Mm-hmm.

Dave: Which I do not recommend.

Chris: Holy buckets.

Dave: That one is a speed run of food poisoning, the flu, and then a cold. And it's brutal, man. I do not recommend.

Chris: I'm sorry, man. That's awful.

Dave: It is what it is.

Chris: I managed to stay healthy.

Dave: That's--

Chris: I take vitamin C, so I'm... [Laughter]

Dave: Vitamins. You go outside.

Chris: I'm sure you do, too.

Dave: Things like that. No--

Chris: I'm trying to tempt sickness. I don't know. I feel like I haven't been sick in, like, three years. I don't know if there's something wrong with me.

I remember a story that Miranda used to tell, though. I think she was in Chicago, Boston, or something at the time, and there was a big snowstorm. Everybody was forced to not come to work. Then after that, because like you said, your body gets to chill for a second. Then everybody was sick after that.

Dave: Yeah.

Chris: Legitimately, you let your body relax and then boosh.

Dave: Yeah, I believe it. I believe it. Letdown is what I call it. I don't know if that's the medical term.

Chris: Yeah.

Dave: But it's just this idea; you finally relax and, boosh, you're toast.

Chris: Boosh.

Dave: Your immune system gives up.

00:03:44

Dave: Well, Christopher, we're heading into 2025.

Chris: Mm-hmm.

Dave: A year of making websites, I guess. [Laughter] What's on your--?

Chris: For sure.

Dave: What's on your forecast agenda, year in review, new year's resolutions for Internet?

Chris: I got nothing really.

Dave: Yeah.

Chris: Just am not feeling that at all this year. Sure, I'm happy to get back at it a little bit. I'm trying to maintain the chill. I had a couple of weeks off, too, and kind of didn't do much.

I redesigned the blog. But I was kind of working on that a little bit before that and just kind of took the opportunity to push it out. But it's not work to me.

Dave: Right. Right.

Chris: That is purely recreational. I really get a kick out of it. It's in the hobby category. I no longer consider that unhealthy. I think that's just fine.

[Laughter]

Dave: It is. There's a fine line between I'm burning the same candle that does work and then, no, that's a separate hobby candle. There's a fine line, I think.

Chris: Yeah. There is. Part of the reason is that I have some other hobbies and stuff, too, and a family and stuff. So, it's like, fine, whatever.

Dave: Yeah. Yeah, yeah.

00:05:05

Chris: That was kind of good. We're jugging along on the CodePen alpha trying to get to beta. Have pretty clear goals and objectives there, so that's fun.

Dave: Nice. Exciting! That's exciting.

Chris: Yeah. I mean no promises. We're in this position as ever were. It'll get done when it gets done.

Dave: I love that. That's a great philosophy. Just do it right not, you know. Don't rush. Do it right.

Chris: Yeah. There needs to be some kind of pressure because you can really lollygag otherwise. But it's better that way than too much pressure.

Dave: Well, and y'all are kind of now in the alpha phase where people are seeing it and reacting to it, so you're getting different feedback than you were just building.

Chris: Certainly. We're at this early stage. Have you ever had this where every single session you find like 13 things to do?

Dave: Yeah. Yeah. Yeah.

Chris: It's not one of these, like, "All right. That one was fine. Next."

Dave: Yeah.

Chris: Oop, oop, oop, oop, sorry. Oop, sorry, sorry. Oop.

Dave: They're like, "How do I open the menu?" and you're like, "Uh... I haven't thought of it."

Chris: Yeah.

[Laughter]

Chris: I don't think so.

Dave: I don't know.

Chris: Yeah, exactly. Totally. Yeah, I found one. We just somehow forgot to put a new folder command in. There was a button for it but you couldn't find it in our main thing. Then there were issues with doing it as a free user.

Dave: Yeah.

Chris: Thinking of it as a file. Ugh! Anyway, all those little bugs get mopped up, and they're quick to mop up. Then we move on. But there's some chewy stuff, too. That's fun.

Dave: Cool.

00:06:48

Chris: So, so, so, yeah, pushed the new blog out a little bit.

I was thinking about, just as a general topic, I had a page bookmarked for absolutely forever called... I think it's called slashpages.net. You ever go to that?

Dave: Yes! I saw your post on it. Yeah.

Chris: Well, I just had it bookmarked because I was like, "I think this is so cool." It's just a list, so I kind of like the design of the page because you're like... It just wants to encourage you.

Let's say you own a personal website. That /x could be a particular topic. A classic one I think of is the /uses one, which I didn't really realize was a Web Bos thing. High five, Wes. It was a cool idea. That page could represent all the stuff that you use. What's your keyboard and all your nerd stuff. What's your favorite guitar, tuner, or key ring or kitchen knife or whatever? So that you can share that. That's a page. Then if lots of people do it, it becomes this little kind of phenomenon. You know?

Dave: Mm-hmm.

Chris: I like that. Then I like the /chipotle. [Laughter]

Dave: I love that one.

Chris: It's so good.

Dave: That one kind of blew my mind because I just love it. I could do it for fricken' every restaurant.

Chris: Yeah, totally. [Laughter]

Dave: Here's every restaurant order I have. Man, I love that.

Chris: Mm-hmm.

Dave: What a way to know somebody, like Chick-fil-A.

Chris: Yeah.

Dave: Not Chick-fil-A, but their Chipotle or their - I don't know - what they get on their breakfast burrito or whatever.

Chris: Uh-huh. That's something.

Dave: I don't even need to talk to you. I can get you your favorite thing.

Do you ever do that thing where somebody is going through a hard time or something, and you're like, "I want to send a gift," right?

Chris: Mm-hmm.

Dave: But then you're like, "But what food allergies?"

Chris: But what.

Dave: Then what? Do they drink? Do they do this? You know?

Chris: Yeah.

Dave: It'd almost be cool to be like /carepackage or something.

Chris: Oh, yeah.

Dave: If you ever... If I ever enter a situation--

Chris: If I'm down and out.

Dave: Yeah.

Chris: You know what to get me.

Dave: Yeah.

Chris: That's funny.

Dave: /selfcare.

00:08:54

Chris: Another big one is /now, which is different than your about page because your about page is probably something like, "This is what I care about and a brief summary of my career," or whatever you want to put there. But /now is different because it's like, "What am I literally doing right now?" I would be like, "I am doing a podcast with Dave every week, and I am working on CodePen with all of my professional focus."

Maybe that's all I would put. Or I'm playing downtown at The Cellar on Wednesday nights.

Dave: Yeah.

Chris: You know that kind of thing, so it's /now, and that can change. And so, anyway, in a way I can scroll up and down the slash pages list and look at every single one of them and be like, "I like it."

Dave: Yeah.

Chris: Then I was like, "Um... When I get done with this, though, it just kind of sits there on the thing," so there's this one problem with it is that I don't think anybody is going to see it because it's not being syndicated.

Dave: Mm-hmm.

Chris: Because it's just kind of a page. And that's kind of the point of it. And another problem I had with it is that it's transient. I think there are ways to solve that, but it's like - I don't know - my /uses changes over time. Maybe even my /chipotle will change over time. I don't know.

Why shouldn't I just write up a blog post that talks about the things I'm using right now and then, two years from now, I'll be like, "Yeah, that was a fun idea. I'll do it again."

Dave: Mm-hmm.

Chris: Which is similar to... What is the thing that's happening right now on the Web, like all the software people? Default software - or whatever it is.

Dave: Yeah, default apps 2025.

Chris: That has, for whatever cultural reason, a blog post vibe to it.

Dave: Mm-hmm.

Chris: People are writing it as a post whereas that also easily feels like a slash page.

Dave: Yeah, yeah.

00:10:46

Chris: Anyway, I talked myself out of doing slash pages, and I'm just like, "Whatever." To me, they're just blog post ideas.

Dave: Yeah.

Chris: But I'm almost reconsidering my opinion all over again because I saw this other post. It was like a Robin Rendell post who was crediting Chris Armstrong. It's about digital gardening, which we've talked about before.

But in Robin's post he's kind of talking about could a personal website (or any website, really) evoke more of a wiki thing than a blog post thing.

Dave: Hmm...

Chris: Which to me was like... I don't know if it's a lightbulb but a little bit because I'm not sure I'm ready to move on it or anything. But of course, it had me thinking about my CSS-Tricks days and all that and how we would write about a topic over and over and over and over, especially over a long period of time. It made me think what if instead of nine blog posts that dance around a subject or approach it in different ways, there was one page, like a wiki--

Dave: Mm-hmm.

Chris: --with all of that information combined? Wouldn't that one page be much more valuable than nine pages?

Dave: Yeah.

Chris: Even though they happened over time.

Dave: Yeah. But I think there's a "What's the latest?" A lot of tech is like, "What's the latest?" Right? Wikipedia has that. But one other way to do it is to publish new stuff, and that is the latest stuff.

You're not like, "Dude, what are the top five latest Wikipedia that showed up?" You know? No one is thinking that.

Chris: Yeah.

Dave: But I am thinking, like, what's the top five or last five Chris Coyier posts? I am thinking that.

Chris: Yeah. Yeah, exactly. There's not... My thinking is not complete on it. I could see bringing that to somewhere, like I was in charge of Web.dev or something. IS there a way to make topic-based pages not this afterthought? Because that's what they tend to be.

Dave: Mm-hmm.

Chris: They often be like, "Oh, yeah." It's like the homepage of a tag. Nobody goes to those. They don't care.

Dave: Yeah.

Chris: But to have the true entry point for something be just more valuable than it is because I've kind of proven that. If somebody thinks of CSS-Tricks, what they're really thinking about is the Flexbox guide, and it's because it was this big post that covered all the stuff about Flexbox. That's what people like, and we proved that over and over. That was not just a one-off.

When we did a huge, big guide, it tended to be worth more than the sum of its parts. But that's the success of a publication. What does that mean for something more like a personal blog post? Not sure. But certainly, I used to write about working in public a lot. Where is a good entry point for that? I don't know anymore.

Dave: Mm-hmm.

Chris: I don't have a good single URL to share, so now it feels like the information is scattered and confusing rather than together.

00:13:41

Dave: I wish... I still have a dream, and I've kind of started it, but not really, to blow out my tag pages, like to literally every tag I use or the core 20 or whatever.

Chris: Mm-hmm.

Dave: Blow them out, like, this is a topic I write about and care about. I have WordPress as a tag.

Chris: Yeah.

Dave: This is a topic I'm not an expert in anymore, so I wouldn't even consider these. But for historical context, this is stuff I've written about.

Chris: Yeah.

Dave: I would love to have big, blown-out, almost art-directed pages for tags. But that's again time versus me sort of situation. [Laughter] I don't know.

Chris: I love that idea, by the way. I think you're right on about that. I have this... This is little secret dream at CodePen that I'd like to do is have... at one time... I don't think this name is going to stick or anything, but it's stuck in my brain for now is called blessed tags.

Dave: Mm-hmm.

Chris: Where there are certain tags that are just more important than others.

Dave: Mm-hmm.

Chris: That would be an opportunity for us, I think, is to use the same URL as a tag but some of the tags... Because already we have tag pages on CodePen and they just say what the tag is and then they list all content that has that tag below it. Very simple, but there is some value to those pages because they can be sorted and searched and stuff in different ways. You're looking at a taxonomy of stuff.

Dave: Yeah.

Chris: Then it's like, what if you took a really important one like view?

Dave: Mm-hmm.

Chris: That tag means more than rainbow does.

Dave: Right.

Chris: I like the rainbow tag, too, but view is kind of a big deal. What if when you got to that page it showed you a lot more information about view and its usage on CodePen? It showed you templates. It gave you information. It showcased some handpicked ones.

Dave: Last five videos or something. Yeah. The Sarah Drasner article.

Chris: Yeah. I'm not sure what we would do but I can think of about 20 things to do. So, it's not a limit. It'd be like, what is the best thing we could do on a particular tag page like that while benefiting from what a tag page already is and how users think of them?

Dave: Mm-hmm. Yeah.

Chris: Yeah. Yeah.

Dave: Yeah. No, it'd be... I'd love to - I don't know - make webpages, man. I like this slash pages just generally, just going back to that. If you don't know what to write, here's literally 20 pages you could make to your website. [Laughter]

Chris: Mm-hmm.

Dave: You could just add this right now. I have a few of these, actually.

Chris: Yeah.

Dave: I have the /about. I have /uses. I have /links, but I don't think that was one. Oh, they do have /links. Ha-ha! Which is like my saves from Feedbin.

Chris: Yeah. You have all these already, or you have some of them?

Dave: Some. Some.

Chris: Yeah. Fun! See. How would I know that, though?

Dave: Yeah.

Chris: Do you hook them up?

Dave: I need a better footer, probably, is the answer.

Chris: Oh, yeah, you do. Man, blow it out. I love footers. Get nasty.

Dave: It's kind of tucked in my about section right now.

Chris: Oh, I see. At least there's something. Oh, yeah. I see. Yeah, it's like a little subnav thing.

Dave: Yeah.

00:17:02

Chris: Yeah, that's fun. Yeah, I always feel weird. I like blog rolls, too. But I feel weird about - I don't know - putting stuff in there that everybody is like, "Oh, you read Kotke? Wow. Neat." You know?

Dave: [Laughter]

Chris: So does everybody? He's amazing.

Dave: Right. Right, right.

Chris: Then leaving other people out or whatever. I don't know. I just feel weird about it.

Dave: People ask me. When I talk about RSS, they ask me, like, "Oh, do you have a list of feeds?" I'm like, ew, I don't know that my list of feeds is super helpful for you. [Laughter]

Chris: Yeah.

Dave: Okay, here's some.

Chris: Yeah. Yeah, I've notably shared mine. But it took me a while to do it because I went through and cleaned up all kinds of embarrassing, weird crap in there - or who knows.

Dave: Yeah.

Chris: Random GitHub issues I was subscribed to or who knows. Even then, I don't know.

Dave: Shamimi Vitas [phonetic] has a list of, like, 10,000 developer blogs--

Chris: Oh, my gosh.

Dave: --that is actually super worth perusing. You know what I mean?

Chris: Yeah.

Dave: If you're like, am I missing somebody? Anyway.

Chris: Yeah, perusing is probably the right way to do it. To suck them all in at once, I would be very worried that people would just become immediately overwhelmed and bail on RSS and that the real value of it, unfortunately, comes over time and curation. Sorry. This is kind of the nature of the beast.

Dave: People, a lot of people, I was like, "Dude, I'm following you!" Then it's like they talk about Java, and I'm like, "Blah!"

Chris: Yeah.

Dave: That's like, "Okay."

Chris: No shame, dude.

Dave: It's cool you do that but I'm out. I appreciate you. [Laughter]

00:18:39

Chris: I’m pretty happy with my setup at the moment. In fact, I'm trying a new one. By new one I mean I always use Feedbin because, to me, it's weird not to.

Dave: Mm-hmm.

Chris: Because of how long it's been around and the fact that such good API support it has. I've never met a new RSS reader that I wanted to try that didn't support synching with Feedbin. For now, I've been... Actually, maybe that's not true. Isn't Reeder... Isn't r-e-e-d-e-r (on the iPhone) really some new, weird version of a reader?

Dave: Oh...

Chris: And that had no sync with anything. I was like, "Oh, well, then I'm out."

Dave: Did they? I didn't--

Chris: Maybe it was something else.

Dave: But they do.

Chris: It was like a yellow one.

Dave: Reeder, when they release a new one, it's like a whole new cut - or whatever.

Chris: I'm happy. So, the new one I'm trying... I'm very happy to just use the Feedbin website, but there's some part of me that I just like trying new stuff. Give me a new app!

Dave: Yeah.

Chris: Just very fickle that way. I'll always end up back on their website, probably. But I used NetNewsWire for a while. As a Mac guy, it's Mac-y - or whatever - so I liked using that okay. But I think I like this one that's just called Unread--

Dave: Oh...

Chris: --a little bit better. I think the design of it is really nice, and it has this feature where, like... Because sometimes I read RSS like... I don't know... Kind of maybe it's not healthy but in between tasks or something. My brain just needs a break, so I click the Unread thing and it opens up. It shows me a list of posts. I click on a few of them and just see what it has to say and star it or sent it somewhere or just move on.

Dave: JJJSSS.

Chris: Yeah, sure. Then I close it. Then if I click to open it again, those ones I already read are gone. That tiny little piece of behavior I really like. It feels like I'm kind of chugging through it and none of the other ones really quite work that way.

Dave: And the neat thing about Feedbin is you can actually go back in and be like, "Oh, actually, show me all the ones that I just read," or "Actually, show me all the articles because I actually wanted to star one I accidentally skipped."

Chris: Mm-hmm. That "All" tab.

Dave: Yeah.

Chris: Yeah, those can be quite useful.

Dave: It's nice. Yeah. No regrets on Feedbin.

Chris: Yeah. It's still a good one.

Dave: Still the best one.

Chris: I get people have their own preferences, though. Rock-n-roll.

00:21:06

Chris: What was I going to say? Do I have an interesting one? Yeah, just to say something about the [laughter] old Internet.

I knew this in the back of my head somewhere but it took Stephie Eckles repointing it out to me that there was this resolution in the CSS world where container queries, you have to use that container property or container type and container name.

Dave: Mm-hmm. Yeah, yeah.

Chris: When you do that that they loosened the restrictions. That used to force a new formatting context, which has all sorts of implications.

Dave: Okay.

Chris: Now it doesn't. They said it doesn't have to do that anymore, so it just doesn't by nature. But that change is like a little dramatic.

Dave: Oh...

Chris: It just changes stuff and you can't test for it because it's just this internal thing.

Dave: Under the hood, kind of.

Chris: Yeah.

Dave: Yeah.

Chris: And so, Safari right now still does force a formatting context but Chrome and Firefox do not. I just think that's an interesting place for the Web to be that there are these cross-browser differences but nobody is really at fault. There's nothing to complain about other than that it's obnoxious. But you can't write code around it. It's just a messy little spot to be, and we've just got to deal with it.

Dave: Yeah. I think my problems are few but then sometimes I'm like... Who was I looking at the other day? Anchor positioning, you know, I forget who said it but it was maybe Igalia, somebody at Igalia was saying, "Anchor positioning in Chrome is now. Anchor positioning in Safari 2025. Firefox, question mark, maybe 2026."

I just was like, "Dang it, man!"

Chris: Hmm... A little rogue speculation from a source like that is scary.

Dave: Yeah.

Chris: You've got to assume they're probably right because of their deep experience with working with browsers. Yeah, when you see 2026, you're like, "Um... Cry!"

Dave: Yeah.

Chris: For something like that, that is sooo... we are so looking forward to.

Dave: Yeah.

Chris: I'll never forget because we're sitting here in this app called Riverside to record this. When you pointed out to me that there are - I don't know - 25 anchor position things on this very app.

Dave: Yeah.

Chris: And it's not that unusual of an app. I'm like, yeah... That's a lot. [Laughter]

Dave: Yeah. For years, we've just been like, "Oh, people can figure it out," and they have but it's through gallons of JavaScript.

Chris: Yes or DOM that you're forced to do in such a way. You're like, "Oh, this tool tip needs to be there, so I'm going to just jack this thing right next to it in the DOM because I have to, so that's what I'm doing to do."

I don't think people think of it any differently. Most developers are like, "Oh, it has to be here because that will solve the positioning problem? Then I'll put it there."

Dave: Yeah.

Chris: End of thought.

Dave: Imagine you have your nav buttons, and then you have just a hidden div, basically, [laughter] that's just called flyout menus. Then they just live independently. [Laughter]

Chris: Mm-hmm.

Dave: They're not even related. You just wire them up. What a world. What a world we live in.

00:24:34

Chris: Yeah. Well, you had... I don't think you've talked about your diagnosis much, but you've been pretty public about it generally. Is that something you are thinking about?

Dave: Yeah, I've been... I got the ADHD, Chris. Brad Frost really scooped my story, but that's fine. [Laughter] Love Brad.

No, it's funny. A diagnosis is something that you're like... It changes very little because I already knew [laughter] it wasn't a great situation. It wasn't... I wasn't the most focused person.

Chris: Mm-hmm.

Dave: But then... But a diagnosis is helpful because it's kind of like I can be like, "Cool. Now I understand why I feel this way or I'm having trouble focusing or I'm hyper-focusing on something." Something like that.

Chris: Does it feel pretty textbook then when you read the symptoms? You're like, "That'd be me."

Dave: Yeah. I mean they have it down to like a six-question questionnaire, basically, and I was five out of six.

Chris: Hmm...

Dave: That's a B. [Laughter]

Chris: [Laughter]

Dave: But anyway, that was kind of like... I think it's sort of like to say what can you--? Now I'm in a position where I can get tools to help.

Chris: Yeah.

Dave: And so, I was taking a medication called Qelbree. It's a non-stimulant. Most Adderall and Ritalin, those are stimulants.

Chris: Yeah.

Dave: Those have an instant effect. They're... Not to get too... Whatever. They're basically speed, and that's why they're regulated or whatever.

Chris: Mm-hmm.

Dave: But they're an amphetamine-base, but they have an instant effect. In ADHD brains, they kind of don't trigger the classic methamphetamine sort of response. They trigger sort of like a feeling of focus. You would think, don't give the hyperactive brain the speed.

Chris: Yeah.

Dave: But it works opposite than what you'd think.

Chris: Yeah, I always thought that was really funny that that drug is particularly popular if you don't need it.

Dave: Yeah. Yeah, right. [Laughter] Yeah. Then I had neighbors who were like... I guess they probably had ADHD now that I'm looking back, but they would just be like, "Dude, we need to clean our house so we just took Adderall, and we cleaned our house." And I was like, that's an interesting approach, man. That's how you do Saturday? That's interesting. [Laughter]

Chris: Yeah. It sounds like a pretty nice little Saturday to me, not that I'm encouraging too much drug use because that can be a real problem for people. But yeah, I remember college. I would do that crap once in a while, and I felt pretty okay about it. Look at me now.

Dave: Look at me. I'm doing things. But anyway, I was taking... I was prescribed a non-stimulant called Qelbree, which is slower acting.

Chris: Yeah.

Dave: And so, that was okay. I definitely felt something different. I felt like it was kind of like if I walked in the house and there's just crap everywhere because my daughter decided to turn all her ChapSticks into one big ChapStick - or something like that--

Chris: Mm-hmm.

Dave: --that didn't trigger me on the Qelbree whereas, previously, I would have been like--

Chris: Ooh...

Dave: --I'm going to lay down. [Laughter]

Chris: [Laughter]

Dave: I have to close my eyes. That's the only way to escape this situation. And then another thing; it was sort of like if there was a job that needed to be done, it was easier to pick up and do. I think a common ADHD symptom is kind of overwhelm. You're kind of like, "Uh... If I start doing that, then I'm going to have to start redoing my room." If I clean my room, I'll have to start redoing it. Then I'll have to--" The change the lightbulb, change the....

Chris: Right.

Dave: Go to the hardware store to get a screwdriver sort of thing. Anyway, that was a net positive. However, the sad thing was one of the side effects was insomnia.

Chris: Oh, gosh.

Dave: I got hit real bad with that, but I read a bunch of sci-fi, so that's a positive. [Laughter]

Chris: Yeah. Oh, it was so--? I always think, not that reading is the ultimate solution, but I don't know. There's a great Sheng Wang big about this where you're like, "I don't have insomnia because I have a book." You know?

[Laughter]

Chris: That works for me. I'm like, "I'm going to read this book," and then Frodo said to Gandalf... [snoring].

Dave: No. Sometimes that--

Chris: [Laughter]

Dave: Sometimes that was the trick.

Chris: Yeah.

Dave: But I also read 600 pages of sci-fi.

Chris: Yeah.

Dave: So, you know, maybe a lot. You know?

Chris: [Laughter] Yeah.

Dave: But you know it's okay. I think we're going to adjust the meds and try to get back on track. But some people, on the stimulants, have a very night and day, like, "Okay, yeah. This is different."

Chris: Uh-huh.

Dave: I'm activated.

Chris: You've got to sleep though, man. That sucks that there's... Why are there always tradeoffs? What is this, Web development?

Dave: There's got to be tradeoffs, dude. I don't know. Anyway, that's kind of the feel. It's interesting. Brains are fun. Brains are unique. If you have a unique brain, I would go get it checked out. Go talk to somebody. Or feel you have one, it's worth talking to somebody.

Chris: Amen!

Dave: It's just... You know. I don't know. It's that thing where you're just like, "This is maybe harder than it should be," or I don't think most people sit around and just overthink this situation. They don't have to walk away from their computer five times for a PR review - or something like that.

[Laughter]

Dave: You're like, "I bet most people don't do this. They could just read a whole PR review."

Chris: Interesting.

Dave: Yeah.

Chris: So, you think... Yeah, you're going to come out better probably and be on pills for the rest of your life?

Dave: I don't know. I mean it's kind of like I've gotten this far and I feel okay. But it's just kind of this... And maybe it's work pressure. Maybe it's the fact that I have good healthcare. It's kind of like, "Could I see the other side of the coin? What does a medicated brain do to me?" Does that make sense? How does that change the equation? Do I feel better?

Chris: Well, if you knew, then you could choose.

Dave: Yeah. I've had years of coping and masking skills that I've built up, like productivity. I have a Kanban for my blog, Chris.

[Laughter]

Dave: You know?

Chris: Yeah. Yeah.

Dave: I have a lot of coping skills built up over the years, tons, probably too many even. But what would a medicated brain do? Would it help? Would it be--? Would I be able to be better in the evenings with my time or something like that? Stuff like that. Not be so wiped out from whatever kind of brain engagement I've been doing.

Chris: [Laughter] Brought to you by the Toyotathon.

Dave: Yeah. Thank you, Mitchell McMitchell over on the Miracle Mile.

00:32:05

Chris: Well, you had another good blog post that I said I was quite jealous because I am because I've never heard anybody say it so succinctly, but it was called CSS Wants To Be a System, which his one of those blog posts that it's very interesting to read and also those six words are pretty freakin' meaningful.

Dave: Yeah.

Chris: To have this technology that's so important that exists that people write tons of that's so unopinionated, you're right, man. It's just begging you to come up with your own thoughts.

Dave: Yeah. I don't know where it came from. It was probably just tokens. I've been in a big token project. But you know it's just like we're defining the tokens up here, and then these tokens consume those tokens and they produce this output. Or we have a series of fallback tokens.

Chris: Mm-hmm.

Dave: Like this optional token that could show up in this default token. Even that in itself is just this little system. It's like this cascade of styles. Even just the idea of a whole cascade is like I'm going to say something up here but, at the bottom of the file, it could be totally different.

The only system in CSS is the weird power ranking algorithm, the selector power rank. [Laughter] You know?

Chris: Yeah.

Dave: But you know. And so, that creates its own sort of, like, now that's the only rule almost of the system. And the other rule is if the browser doesn't understand it, it won't show it. Now you have to figure out, how do I build this system to where this works? But then not only does it work and solve the design but how does it work across different browsers? How does it work on a phone?

Chris: Mm-hmm. Yeah, you have to roll in with some philosophies about stuff like that. It also gives you this ability to arbitrarily name things, which is also, in my opinion, just begging you to please have a system for that.

Dave: Yeah. Yeah.

Chris: But I don't care what it is. But just have one is what it's saying. It's what the tool pushes you towards.

Dave: Yeah. At a certain point, you're going to have... Either you're going to repeat yourself or you're going to need to divert from a class that you've used, like your font way bold and now somebody wants semibold. It's sort of like, what do you do?

Chris: Yeah.

Dave: It sounds silly, but that came up yesterday. It was like, "Oh, what if I needed to have bold text here? Could we do that?" It's like, we could maybe support that. Of course you can, but the B-tag is awesome for that.

Chris: Does it work ... system? Yeah.

Dave: [Laughter] But does it work in the system?

00:35:10

Chris: I like what it says about human psychology, too, in that if you come into this highly unopinionated world and you tame it and you feel like you've done that and it works--you've thought of a naming system, you've thought of general philosophies, you have this--this system could be very different than mine or yours but it works for you. That there's a certain kind of person in the world that raises their sword and says, "I have done it!"

Dave: Yeah.

Chris: "Listen to me!"

Dave: Mm-hmm.

Chris: "I am going to tell you the system. This is the system." And there are other people that might have just as... If there's a way to measure them, just as good of a system or something, who just doesn't feel that way. They're like, "This feels messy to me, and maybe it works for me but I'm sure as hell not going to write a blog post about it." That kind of thing. That those are like the outcome can be the same and the people can be different.

Dave: Yeah. It's just different flavors. I think we talked a few shows ago about CSS resets, different ones.

Chris: Mm-hmm.

Dave: Like Jake Lazaroff had one. Andy Bell has one. Richard Rutter had one. And so... Oh, Eric Myers, of course.

Chris: Right.

Dave: But what's interesting is I can read these and I can react to them. That's just resets.

Chris: I absolutely love it. It's so fun.

Dave: But I can read it and be like, "Ooh... Do I like that? Ooh... Is that interesting? Ooh... Will that create a problem down the road? Maybe. What's this system built on?"

Chris: Right because they're always opinionated. I'm using that word very clearly here because they do. They have stuff in them that goes above and beyond the word "reset."

I think Eric Myer tried to, at the time, be like, "I am only going to undo things." Now his had problems - whatever. But it was probably the most famous one. But it had its own philosophy.

The only one I think that really held true to absolutely not having an opinion was normalize. Then I think that got forked or something into another one. I can't even remember all the details right at this second. I've written it many times.

But it had this philosophy that it's like, "It is not going in here unless there's a cross-browser difference and that we can document that cross-browser difference." That's what the point of this style sheet is to fix those cross-browser differences. If there isn't one, it's not in here. Whereas every reset I see recently in just 95% of them have stuff in there that's like, "Yeah, but you should just do this other thing, too."

00:38:06

Dave: Yeah, like margin top zero on all your headings.

Chris: Yeah. Sure.

Dave: That's a stupid one.

[Laughter]

Dave: But some people are like, "Ah! Margin top only," and I'm like, "What?!" And I don't hire those people. Just kidding. [Laughter]

Chris: Dude, I can't.

Dave: Yeah.

Chris: I'm not a margin top guy myself.

Dave: Margin top people. Margin top people drive like this. Beep-boop, beep-boop.

[Laughter]

Chris: It just gets me every single time you have a card. You have a card. You have a wrapper around it. It pushes the header down too far from the card. I'm like, I hate it.

Dave: Yep. Yep.

Chris: I just can't even.

Dave: That's a lot.

Chris: Margin trim, though, to the rescue. I'm definitely going to put that on my CSS 2025 kind of wish list.

Dave: Oh, my gosh.

Chris: It already exists in Safari.

Dave: In Safari?

Chris: The wish is not that it exists. That it's just cross-browser dealt with. But it's really quite beautiful in that way. If you said on your card, you said margin trim or block start, I guess, or top, that it would slice off that margin that pushes it away from the top because it's just not necessary there.

That's what margin trim does. A really cool feature, I think, because... I hate to admit, but it benefits you, margin top people, in that particular way. And for the rest of us, it slices off that bottom margin that we're forever selecting the last child - or whatever - and trying to pull that off when things are in a container. Great little feature.

Dave: Yeah. I was going to say is can I use text margin trim. Is that what it is, trim? Trim?

Chris: Well, the trim one is the one where it cuts off the weird unknowable space in character sets.

Dave: Yeah.

Chris: Yeah.

Dave: Okay, so that one, yeah.

Chris: Also great and related.

Dave: That's what I was thinking. Sorry, that's what I was thinking of.

00:40:05

Chris: Oh, that's wonderful. No, margin trim is different. It's that, let's say you had--

Dave: It's the "don't do it on the top of this one," right?

Chris: Yeah. You set the direction and say, "Cut off any margin in this container that's pushing against that side."

Dave: Yeah. Oh, that's beautiful.

Chris: Because you have five paragraphs inside of a container. That last one is going to push a little too far away from the bottom of that container.

Dave: Yeah.

Chris: So, you have to select it and remove it.

Dave: Right. Right.

Chris: Margin trim, you don't have to select it anymore. You do it on the parent. So, it doesn't matter what element is down there doing that pushing because the temptation then is P last child.

Dave: Yeah.

Chris: It's just some kind of selector that is more brittle than you might want it to be.

Dave: It's just noisy, too, right? But it's better in all circumstances if you can add things at the parent. Yeah.

Chris: Add things at the parent. Yeah, that was my thinking was if you have padding in a direction, you should set margin trim in that direction, too, as a general rule.

Dave: Sorry. Blog post idea. You're going to get scooped, though. You'd have to move fast.

Chris: I blogged that like a year ago.

Dave: All properties that control children. Cascade is kind of one thing, but specifically stuff like this that try to control the children.

Chris: Mm-hmm. That's what made Flexbox hard and Grid better, if you ask me, is there was so much stuff on the children in Flexbox.

Dave: Yeah. Flex shrink, flex grow, flex basis, flex one.

Chris: Yeah. Just literally impossible.

Dave: What flex one does... [Laughter]

Chris: Yeah.

Dave: Still don't know.

Chris: It's ... but it's the one you want to use.

Dave: Flex 001 and Flex 1.

Chris: My memory around that one is there was a Tab and Elika thing where they were like, "You really want to use the shorthand."

Dave: Yeah, yeah, yeah.

Chris: If you didn't, there was some stuff that didn't get set--

Dave: Oh, no!

Chris: --that was wrong.

00:41:58

Dave: Yeah, I was going to say Chrome 133 is going to have that text box trim that I was talking about that slices the top and bottoms of a line of text.

Chris: Yes.

Dave: The extra line height. The phantom line height sort of stuff.

Chris: Yeah, that's pretty hard to mouth blog, but this one is equally a big deal for alignment reasons.

Dave: Yeah. If anyone has ever set a button, you have a button, you type text, and you say padding top or padding block, let's say, six pixels. Right? You have five pixels on one side and seven on the other.

Chris: Yeah.

Dave: You're like, "Why did that happen?"

[Laughter]

Dave: "How do I fix this?" And you don't care. You just push it out. Then your designers start showing up with their little monocles and magnifying glasses. They're like, "Clearly this is wrong."

Chris: Dude, I'm a monocle guy. Yeah.

Dave: Yeah.

Chris: I'm guilty of the top minus one pixel alignment strategy.

Dave: But you're like, "I don't know how to fix this so I'm just going to do line height 0.9 and bingo-bango.

Chris: Sure.

Dave: It doesn't work. It still doesn't work. [Laughter]

Chris: Yeah, with that gut wrenching feeling that you're only fixing it for you in your browser.

Dave: Then there's this big Sass thing like cap size where you put the font and the line height into a machine. Then you shoom-shoom-shoom and do some negative margin stuff.

00:43:22

Chris: How does that even work? I've always felt those numbers were baked into the font information itself. How does it dig in there and even know what to do?

Dave: I don't know. I don't know how it measures. Well, there's a whole font metrics API - or something like that - now. But I think that's part of it is now you will be able to get values like a cap height and an X height from the font metrics.

Chris: Yeah, maybe that's all it needs. Maybe it's simpler than I'm making it out to be. That's cool.

Dave: Yeah. But anyway, it's very cool. It really changes how we've been doing things.

Chris: You do wonder, though. There are all kinds of exotic fonts out there that have a J that goes five lines down with a curlicue on it.

Dave: Yeah.

Chris: What does it do to that?

Dave: Oh, dude. Yeah. There you go.

Chris: [Laughter]

Dave: Textbox Trimming Bleeding Cowboys, an essay by Dave Rupert.

[Laughter]

Chris: Now that's a hit blog post. Yeah.

[Laughter]

Dave: All right. I'll get on it. Shoot!

Chris: Oh, my gosh. That's great.

Dave: That's good. Put it on Boost. Boost! Get ready.

00:44:28

Chris: Well, I had an M1. I still am speaking into an M1. Not laptop. I have a Mac Studio. That's how I roll at work, the little cube.

Dave: Stu-stu-studio.

Chris: Yeah. No regrets still.

Dave: You have to say it like that every time.

Chris: Oh, yeah.

[Laughter]

Chris: That's brand awareness right there. Stu-stu-studio. Don't hate it. It's nice. But I have a laptop as well because I need to be mobile and work at coffee shops and travel and all that, so kind of like two main machines.

Dave: Mm-hmm.

Chris: It doesn't give me a super-power really, but I do like that it forces good hygiene of files and Git and everything because I really almost equally work on the two machines.

Dave: Yeah, yeah.

Chris: It keeps my dev environments really clean and all that, so goo hygiene that way. That was M1, too, and I replaced it.

Dave: Ooh...

Chris: I got the M4 Pro.

Dave: Whoa!

Chris: I didn't go max. I notched it on because a lot of times I have a bad habit of buying a little too much computer than I need, and it's really true. I just don't need a huge GPU. I will play zero games on this thing.

Dave: [Laughter] Yeah.

Chris: So, I notched it down to kind of a much more affordable zone because I feel like the difference between a really spec'd out laptop. If you pick the highest GPUs and CPUs and stuff, it really blows out the price for a somewhat trivial increase.

Dave: Yeah, or a machine that it doesn't need to be super powerful. Or if you have the Studio, especially, right? This doesn't need to be your Bitcoin miner.

Chris: Yeah. Yeah. I do export video once in a while. Sure. Do I want that to be fast? Yeah, but it's just not paramount.

Yeah, I didn't go super-weak or anything, but much more notched it down than I normally do. I was kind of curious. How does it affect Web development work, which, let's be real; it just doesn't.

Dave: Really?

Chris: Barely. Yeah, I mean whatever. JavaScript single thread and all that stuff.

Dave: Yeah.

00:46:31

Chris: It depends on your behavior. Are you a 900-tabs open kind of person? Do you never quit your apps? There are all kinds of usage questions that might come up.

But I did pit it against our dev environment because it's a little... CodePen is decently beefy. There's - I don't know - ten-ish dockers in there. It's tmux, so there are 15-ish panes split across stuff running. That stuff is kind of multithreaded. Each docker is a thread, certainly, right?

There are things that can take advantage of the chip. It is noticeable. I think I got about 20-25% more speed in spinning up the dev environment for us on the two machines.

Dave: All right. Nice.

Chris: Okay. Yeah?

Dave: Yeah.

Chris: Is it absolutely amazing? No, but... I don't know. Was it an absolutely mandatory update and I'm blown away? No, but it's a work budget so you use it.

Dave: That's awesome. I think I... It's the black one, right?

Chris: I went black. Hell yeah, I went black.

Dave: Yeah. Yeah, yeah. That's cool. That's cool. 14, 16? 16, 16?

Chris: Nanotexture.

Dave: I'm a 16 kind of guy, I'm afraid.

Dave: 16, yeah.

Chris: Yeah.

00:47:48

Dave: So, I have two laptops. I have the work one, which is an M3, and I'm desperately trying to keep it a work machine. You know?

Chris: Uh-huh.

Dave: I want my church and state separate, right?

Chris: Sure. Sure.

Dave: And so, I am trying to keep that very work machine. And then I have an M2, I think is what it is, MacBook.

Chris: Cool.

Dave: That I use for Luro and stuff like that.

Chris: Yeah.

Dave: And it's great, too. It is... I think I'm starting to see the age on it, like the battery is going faster. The health monitor says it's at like 85.

Chris: Yeah.

Dave: But boy it just slurps the battery down pretty fast, so I'm trying to be like, "Do I need to upgrade that?" because I do like to have a separate machine. But I don't need two machines. Stuff like that.

Chris: Yeah, it's hard to think about.

Dave: Yeah. We'll see.

Chris: We used to have one in the booth, a real old little MacBook Air that's just still sitting around here. That's how I know I like a 16 because that thing is so little that once in a while I'll grab it. I keep that sucker updated, too, and run to the coffee shop with that. And I like that it's small. But then I try to do stuff on it and I just find myself immediately frustrated by the screen size.

Dave: Oh, so I'm probably... I kind of dislike the 16. It's too big.

Chris: Too big.

Dave: And the 14 is just personal. It feels zesty. It feels fresh and zesty.

Chris: [Laughter]

Dave: I love it. I'm like, "You're my little pal, and we're going to write little blog posts. And we're going to be happy. We're happy."

It's like the old plastic clamshell iMac or MacBooks. You know?

Chris: [Laughter] Yeah. I don't think I ever had one of those, but I remember them clearly.

Dave: They were like the white MacBooks. Oh, those were... I don't know.

Chris: Quite the era.

Dave: Yeah. Giving me some texture sensations, actually, thinking about--

[Laughter]

Dave: --because it had some more sort of like... I don't know.

Chris: Yeah.

Dave: But it's round from the exhaust fans of the Intel CPU just burning through the plastic. Anyway... Good times. Good times.

00:50:04

Chris: Hmm... Well, we're coming up on the end, but I might as well just do my last note. I was working on a little CodePen the other day and writing in Pug. I don't think Pug is particularly popular in the world anymore. But it's a little bit popular on CodePen because having an HTML templating language is just kind of nice sometimes, particularly when people are like, "I need 30 divs." Yeah, you can use Emit and you can type div times 30 tab and you get 30 divs. Cool. But it's not very adjustable then. Now you need 22 and you've got to count 8 of them and delete them - or something.

Dave: Yeah.

Chris: Whereas Pug is kind of nice. In the language of Pug, which gets processed in Node, if you just put a dash, that means, "All right. You're writing Node now." So, you just type dash space const divs equals 22. Now you have a variable that's 22 that you just have now in the context of when it's going to process. It will do nothing by itself, but now you can use it.

On the very next line, you do another dash. You can say four or I equals one. You know? Just write a for loop.

Dave: Yeah, yeah. Mm-hmm.

Chris: Then under the for loop you just type div because that's how Pug works. It's like H1 makes an H1 tag. Div makes a div tag, and all that. It'll just produce 22 divs then.

But that number is now controllable via variable, so that's nice. It doesn't come up that much in ultra-real-world Web development, I think, but it does sometimes. And you know then you can do stuff with that. You can set view transition names or something because you have a loop now. Yay!

Dave: Oh, yeah. Yeah.

Chris: It's not JSX, but it's whatever. It's producing HTML. Well, now you have set that variable. You can also say just script, and now you're writing an inline script. And in that script you could say window.size equals interpolate the variable size that I just set.

Dave: Okay.

Chris: That's 22 now. You can also write document.document-element.set-property--size equals interpolate the variable size. I always think that's interesting that all of a sudden now you have one variable in one place and it's available producing your HTML. It's available to your JavaScript. And it's available to your CSS as well. There's just something a little heartwarming about it.

Dave: Yeah.

Chris: It's like, "Oh... One place for a variable. How nice."

Dave: Imagine a world where we all just did that. [Laughter] Where all our variables just did that.

Chris: Yeah. Tokens. Whatever.

Dave: One day. Param, object param. [Laughter] No! Don't do it.

Chris: It sounds like a new podcast.

Dave: Yeah. All right. Well, let's wrap it up here. Thank you, dear listener, for joining us on this 2025 (season 14 or something this is) voyage. We really appreciate it.

Chris: Something.

Dave: Thank you for downloading this in your podcatcher of choice. Be sure to shart it up. And join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: [Lip trill] ♪ ShopTalkShow.com ♪