643: Social Capital, Easter Eggs in Apps, & CSS Parts
How do you like your turkey at Thanksgiving, building social capital with the neighbors, a brief SportsTalk Show segment, noticing easter eggs in apps and the web, what is a component anyway, CSS parts follow up, and questions about Alpine.JS and ESLint.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Episode Sponsors 🧡
Transcript
Dave Rupert: Let's pause one second. My dogs are barking. One second. Literally.
[Banjo music]
MANTRA: Just Build Websites!
Dave: Gobble. Gobble. You're listening to another episode of the ShopTalk Show, a podcast all about Thanksgiving dinners.
Chris Coyier: Ha-ha!
Dave: I'm Dave--in the tryptophan--Rupert and with me is Chris--cranberry sauce--Coyier. Hey, Chris, how are you doing?
Chris: Oh, yeah. I'll take it because of the alliteration, so I appreciate that. But cranberry sauce, I'm not anti but it's not on my list. I'm a just straight down the road traditionalist.
I like a turkey. I don't care how it's prepared. You can just put it in the oven if you want to. You know? I'll take a smoked kind of thing if you want. Maybe don't go too heavy on the smoke. If you want to deep fry it so it's - whatever. Is it extra juicy that way? I don't know. Fine. I'll take it.
I'll even participate. I'll even try to cook one myself. I don't know if you want to experience that, but I like the turkey thing.
I know a lot of people a like, "Nah," you know "I'm over it. Why don't we just do steaks?" or whatever. Fine. That's you. I want my turkey once a year. You know? Maybe twice. Maybe twice.
Dave: My wife got into spatchcocking. Do you know what spatchcocking is? [Laughter]
Chris: Yeah. Yeah, it's gruesome to me.
Dave: Yeah.
Chris: Don't you rip the carcass of it in half, essentially, and lay it out flat?
Dave: Splay it out, and then you have to break the sternum.
Chris: Yeah.
Dave: Anyway. That's pretty violent. Sorry if you're a vegan and listening to this, but.
Chris: Ha! Yeah. Sorry. I take the point though, right?
Dave: Yeah.
Chris: Because what always confuses me, though, is they say, "Oh, well, the breast cooks so fast." Then it's left for the big legs on the side aren't done as much. You're like, "That doesn't jive with physics in my brain." You see how thick those breasts are? They're thick as hell. You'd think those would be the things that aren't done. Not to mention it's in the middle and the legs are thinner and on the outside. And those are the things that don't get done?
I'm sure there's a very rational thing. It's just my brain goes, like, "Why are those the things that take longer?" It doesn't make sense to me.
Dave: Yeah. No, I don't. Yeah.
Chris: Spatchcock it up and then it somehow fixes the problem.
Dave: Yeah, if you splatten it, it all cooks evenly, I guess.
Chris: Yeah.
Dave: I don't know why we do it, but anyway, it's this, like--
Chris: That's the deal.
Dave: It makes Thanksgiving kind of violent for me because [laughter] you have to--
Chris: Yeah.
Dave: Yeah.
Chris: It's a lot.
Dave: Yeah.
Chris: Maybe they'll start selling them that way. It does seem like it's become more popular and stuff. You also need a pretty... You need an oven, for sure.
Dave: Yeah.
Chris: I don't know if you need an extra wide oven, but it kind of seems like it.
Dave: I think this year, man, I think we're doing a precooked deal.
Chris: Oh, yeah?
Dave: Which is kind of like--
Chris: Going to go to Whole Foods and get the setup?
Dave: Yeah, basically you pay $100 and you get a whole family of four thing.
Chris: Yep.
Dave: I'm like, "Why haven't we been doing this?" I don't know. It's great to home-cook a meal. It for sure is. But it is also hours and hours of effort.
Chris: You should do it if you enjoy it. You should do it if it's part of your tradition and you're extracting some value out of it. Yeah, for sure.
Dave: Yeah. But it's--
Chris: I'm not allowed. I like to cook, but I don't think I'll be invited to be preparing the entire thing.
Dave: You're not the chef?
Chris: We're doing kind of the Friendsgiving thing.
Dave: Cool.
Chris: That's what we've done a number of years. We already had one. That was real nice. It was a family from our school.
Dave: Mm-hmm.
Chris: There were about - I don't know - 30 adults and then the kids.
Dave: Whoa!
Chris: It was massive. It all came together. They were like, "We'll do the turkeys." And everybody else really chipped in big with bringing huge bowls of mashed potatoes and stuff. Miranda made a cornbread souffle that was excellent.
Dave: Mmm...
Chris: So, that was good.
Dave: How do people have the mentality that they're just going to throw a party for like the kindergarten or the first grade or whatever grade Ruby is in?
Chris: Yeah. Yeah.
Dave: Just an extra party in the year, you know. Don't have much going on. Just birthday parties every weekend.
Chris: I know, but it's just their personality. They have a big house that was well suited for it.
Dave: Yeah.
Chris: A big TV on the wall for football and stuff. And they didn't seem terribly stressed about it. I've been to their house before for parties. I think they make it part of their life is that this is important to them to have these large-scale parties and stuff, and people really appreciate it.
I think there's a part of me that wants to throw those parties, too.
Dave: Right. Right.
Chris: But the trick is, "Hey, Dave. We're married and there's compromise."
Dave: Yeah.
Chris: If I said I want 60 people to come to our house, I might meet a little resistance, possibly.
Dave: I need 60 steaks by the end of the day.
Chris: Yeah.
[Laughter]
Chris: Yeah.
Dave: I want everyone to eat steak. It's really important to me. Yeah.
Chris: I think it's surprising. It's surprising to me that it wasn't... It didn't seem to be like the world's biggest operation in that it was big, but there are so many hands at it that it made for light work - or whatever you call it.
Dave: Yeah.
Chris: In the end, everybody leaving was helping clean and getting rid of stuff. We were some of the last people out, and the house looked back to normal practically. I mean maybe not seeing the details, but--
Dave: We used to do some big parties with friends or whatever. Just like camping buddies or whatever would come over.
Chris: Yeah.
Dave: And it was always the house was thrashed, but it is easier if everyone kind of commits to, "Hey, you bring something people could put in their mouth and people can eat."
Chris: And paper plates and red Solo cups goes a long way.
Dave: And then paper plates. Yeah.
Chris: Schedule the cleaner the next day if, you know, you can.
Dave: It's a big deal. Yeah, yeah.
Chris: Then you're good to go.
Dave: I think you build muscle for it, is kind of what I ultimately think.
Chris: Yeah.
Dave: You don't do it for a while and then having 30 people over seems like a nightmare. But if you're in a situation--whether it's school stuff, birthday parties, church kind of thing--and you just end up with 30 people at your house on a weekend and that's normal, then I think you just get used to it.
Chris: Yeah.
Dave: I feel like we were talking to somebody in our Discord who was like... or maybe it was somebody at work. But it was like built a TV room, like a man cave kind of deal, with five TVs for football and stuff.
Chris: Yeah.
Dave: Boom-boom-boom-boom. Apparently, the whole neighborhood comes over every weekend. [Laughter]
Chris: Yeah.
Dave: It's just what happens. I was just like, "Man, that's kind of cool."
Chris: Yeah. I like the idea it really is building your social capital, too.
Dave: Yeah.
Chris: If you - whatever - are out of town and you need somebody to shovel your driveway or pick up the mail, you are not going to have any trouble finding that kind of thing.
Dave: Yeah.
Chris: Want somebody to watch your dog? You need somebody to pick up your kid from school? You have prepaid in full.
Dave: Isn't that--? That's an interesting thing, too. You fed people whatever, steaks, we're giving everybody steak and alcohol.
Chris: Yeah.
Dave: And now, suddenly, you have somebody to watch your dog. That's a pretty good--
Chris: Not that this is transactional in that way, but that's what community is in a way.
Dave: Yeah. Yeah, it's like the tangential benefits. I wish I watched football. Is my problem I don't watch football?
Chris: Maybe.
Dave: I wonder if it's because I don't watch football, Chris. That's it! From this point on, I'm going to start watching football.
Chris: What do you like? You like a little soccer, right? That kind of football.
Dave: I like going to soccer in person.
Chris: Yeah.
Dave: I like going to the games. That's fun.
Chris: Mm-hmm.
Dave: Then I... Yeah. No, I got into Esports for a while, but that's overwhelming, so not for everybody.
Chris: Is a bit, and it's a little harder to share. You know?
Dave: Yeah.
Chris: I admit that I like that. I don't... I have no emotional investment. It does not matter to me when teams win or lose, really.
Dave: Right.
Chris: I don't become sad. I just absolutely baseline about it.
Dave: I find myself rooting for who is losing, and that seems wrong, too. [Laughter]
Chris: Oh, no.
Dave: Yeah.
Chris: I do, and I'm happy to go fair-weather. It's happened to me a bunch this year. My wife's college... I know this is the worst ShopTalk Show ever. Sorry, everybody.
Dave: Sports Talk Show!
Chris: We're having fun. Yeah.
Dave: Welcome to the Sports Talk.
Chris: She went to Miami where the Miami Hurricanes--
Dave: That's a big deal.
Chris: Good college football. That's what I like to watch. They were undefeated this year until one big loss. But it was fun to root for them. If they were 5-5 or whatever, I probably could care less. But when the team is undefeated, you're like, "Woo! Go Canes! Yeah!"
Dave: Yeah.
Chris: You know? [Laughter]
Dave: Yeah.
Chris: Now this year, Oregon is the number one team as I talk, and they're undefeated too. You better believe I bought me a Duck sweatshirt at the Costco the other night.
Dave: Ooh... okay. You're a Ducks fan now.
Chris: Duck sweatshirt and hotdog.
Dave: Nice.
Chris: It's my first Costco hotdog this weekend. Never gotten that before.
Dave: Whoa! Whoa! New life.
Chris: Really tasty, I thought. Then they played the Badgers, and that was at the Thanksgiving party, so that's my kind of alma mater-ish. I went to Whitewater, which is a smaller school, but it's still the University of Wisconsin, so it was kind of like my two teams playing each other.
Dave: Ooh...
Chris: Kind of fun.
Dave: Nice. Nice.
Chris: It was just amazing how many dads there you can connect with about this.
Dave: Did you leave during offenses and change your shirt and come back?
[Laughter]
Dave: Like, "Let's go Badgers!" Leave and come back. "Go Ducks!"
Chris: That's funny. It does occur to you to go take a pee and then Google something really quick and be like, "Did you know that the last coach of the Badgers actually had the highest win rate?" or whatever.
Dave: Uh...
Chris: Just trying to connect, guys. No, I know enough that I don't need to do that.
Dave: This is most yards since Johnny Romano in 1979. Right, guys?
Chris: Yeah.
[Laughter]
Chris: Right, guys?
Dave: Right, guys?
Chris: Yeah.
Dave: I'm the worst because my dad is actually a two-time college football national champion for the Nebraska Cornhuskers in 1970 and '71.
Chris: Yeah.
Dave: So, he has Orange Bowl rings and national championship rings.
Chris: Oh, my gosh.
Dave: One day I'll inherit those, but I don't like football, Chris. I'm the worst.
Chris: That's probably why you don't.
Dave: Well--
Chris: You know? Like it was too much earlier.
Dave: Big expectations.
Chris: My family doesn't really care. There just was a moment where I had a friend who was really into the Wisconsin Badgers football. And in fact, it was his friend that was really, really into it. And I just kind of got sucks along. And they would throw the best tailgate, in-person, real, honest to God tailgating. The kind where they're up at 5:30 in the morning with the car loaded going over to the lot to get the best spot in the parking lot so they could throw an epic tailgate, and they'd bring the grill, and they'd bring games, and there's a massive cooler full of Miller Lite.
They're like, "Come whenever." You know? If you really wanted to, you get... I'm not going to go at 5:30, but you're there at 8:00 in the morning for a noon game. Everybody is excited. Everybody is wearing red. Just incredible fun.
Then it comes closer to the game, and you got a good buzz on. Then not just you start walking to the stadium, but everybody around you marches to the stadium. They send the band out. The official Badgers band was out there playing trumpets and banging on drums. And it's a feeling. It's a big, good feeling.
This is not to take this too far but I listened to a good podcast about this with this Jewish rabbi guy. The way that he experiences God was not through football, but he was saying, "I get it sometimes when I'm surfing with my friends." He's into EDM music when he's out on the dance floor with his buds. He feels the most connected to the oneness of God in that.
I wouldn't doubt that a lot of people that maybe wouldn't say it that way but were having those big, happy feelings when they're with all their people marching into a stadium to all root for the same team. Have a kind of almost spiritual moment doing that.
Dave: Yeah. I think it's kind of metaphysical in the connections. But it is weird. It exploits sort of this us versus them, too. That's kind of like--
Chris: Ah, yeah, well.
Dave: But--
Chris: Right. The best of them, though, when you see somebody wearing Michigan blue - or whatever - you give them a slap on the back and you both laugh.
Dave: Right. A little razzing. Some razzing.
Chris: A little razzing, but everybody has got a smile on their face. Now, you will hear stories of, like, "Oh, my God. I went to the other stadium and my car got keyed," or something. Of course there are bad, awful, stupid stories like that. I do find it to be not the norm.
Dave: I've literally seen people decked outside Dodger Stadium.
Chris: Well, there you go.
Dave: Yeah. [Laughter] So, I've seen it.
Chris: Yeah. I'm sure Boston is afraid for that.
Dave: Less than ideal.
Chris: That kind of thing, absolutely.
Dave: Yeah.
Chris: But in my more small scale experience, it's a little bit more like almost cool. Like, "Hey, thanks for coming."
Dave: Yeah. Yeah.
Chris: I don't want this to be all one color. That's boring.
Dave: I did go to football games occasionally during college and it was great. It was fun. It's a lot of fun just to yell nonsense.
Chris: Yeah, sure.
Dave: And for hours.
Chris: Go D!
Dave: That's it.
Chris: Whatever.
Dave: Yeah, it's good. But it is... Yeah. It's ritualistic, I guess, back to the spirituality thing.
Chris: Yeah.
Dave: But it is kind of... Yeah, I don't know.
Chris: And if you're watching live, it cannot be spoiled. It's a form of drama that you do not know what's going to happen.
Dave: Right. Right.
Chris: It's kind of cool. You know?
Dave: Yeah, that is. It's exciting. It is kind of like how many things in your life are totally unscripted?
Chris: Yeah.
Dave: There are probabilities in play, but it's not. But an unscripted just event. You know that is interesting. It's also interesting [laughter] -- I don't know -- how gambling is also parlayed into that whole experience just because it is unscripted.
Chris: It is indeed. All right, well, we had a question come in. They put their name Tiny Detail, which is of course not it.
Dave: Mm-hmm.
Chris: But they write, "I get unreasonably excited when I find easter eggs or tiny details on websites or Web apps, something where the developer didn't have to implement something but they did anyway. Stuff like how a UI element reacts to the time of day or the action that you're doing. My Outlook calendar adds a different icon to the meeting based on the title of the event, e.g. a doctor's appointment and vacation have different icons automatically. Have you found anything like this recently? Thoughts or opinions? Do you think it's tacky or cool?"
Dave: Um... hmm... hmm... I think it's... I like when there are surprises. I think it's hard to do. Does that make sense? Because you're like, "I'm going to do something that might have minimal effect, so wish me luck."
Chris: Right, right.
Dave: But I think that's the whole idea behind surprise and delight. I see places where it's overdone. Not to bust on somebody, but we're currently in Notion. They have the little AI guy in the corner who is moving around, bouncing around. AI Clippy, are you down there? [Laughter]
Chris: Hmm... Yeah.
Dave: Kind of watching me move.
Chris: That is a good example.
Dave: It doesn't have the effect for me.
Chris: Yeah.
Dave: It doesn't. Right? It didn't hit.
Chris: Yeah, you're coming in with some preconceived notions about AI and that type of thing, and it's not... The thing is it's not an easter egg.
Dave: No.
Chris: You don't have to find it. They're actually trying to get your attention.
Dave: It's a "Look at me!" Yeah.
Chris: It's a "Look at me!" not "Ooh... What is that?!" You know? I mostly think of animations in this category are the ones, as Tiny Details says, of the way that the UI interacts with you doing something. If there's a really pleasant animation with something that you did, that's just cool. You didn't have to make that animation so nice but you did and I kind of like that.
To me, that's not quite in the technical debt category. That's the other problem with some of this type of thing is that you went so above and beyond with this secret easter egg thing that it becomes work then. It's something that needs to be maintained and that type of thing that's like, "Ugh."
I can almost see a boss being anti tuff like this because you're like, "This doesn't move the needle at all and it's become a bunch of work. Meh."
But to argue against that, almost the opposite, almost that these things are not optional. These things are almost critical to do some of them. There needs to be some personality to what's going on in your app. Now, it doesn't have to be a Konomi code. It doesn't have to be something, but it needs to be something that people can connect with in your digital product to feel some kind of way about it. If you do absolutely nothing and it's just - whatever - bootstrapped (to use an old metaphor), meh. It's just not going to... I don't know. There's nothing to care about.
Dave: Yeah. Yeah. In video games, I have this idea of juiciness.
Chris: Oh, really? I hadn't heard that metaphor before - or whatever it is.
Dave: It's just kind of like little things like screen shake or when you get hit, kind of make you feel it. Or little things like explosions being bigger than they should be. Just like you shoot a trashcan and it explodes huge. Right? Something like that.
I think juiciness goes a long way. But if you overplay that hand -- and I think that's always the trick is if you overplay that hand -- it becomes really--
Chris: Hmm...
Dave: It loses the effect.
Chris: Sure.
Dave: One thing my coworkers kind of were surprised by recently -- I knew about it, but you know when you wiggle your mouse on Mac and it gets huge because you--
Chris: Yeah.
Dave: Something like that is rad. It's kind of like, "Where is my stinkin' mouse?" Then it's like, "Boom-boom-boom. Here it is!" It's real big.
Chris: Right. I know that one. That's a good one.
Dave: That one is a good one.
Chris: One I think about is on websites when you right click their logo, when it does the little thing where it's like, "Looking for our logo?"
Dave: Oh, yeah. Yeah.
Chris: Because there's a chance that a developer is trying to find the SVG or right click download the image to use in a PowerPoint or something. Instead, there's a link that takes you to a branding page with lots more options and nicer downloads and stuff. That became a little trendy, but it's a surprise. You're like, "Oh, thanks for thinking of me. That is what I was looking for, actually." I think it's kind of classy, actually.
I dropped this in the Discord. It didn't get too many, but Andrew shared one where when you go to halflife.com, which I wonder why he was there. I think there was a documentary about Half-Life that just came out. I don't know enough about video games, but I do know what Half-Life is. But was it really revolutionary at the time? I think it was, right?
Dave: Yeah, I think so. I think it was--
Chris: It had real characters and felt real.
Dave: A first-person shooter that had a storyline, basically.
Chris: Right.
Dave: A full kind of, you know, made you think the characters were funny kind of. You know there was comedy. It wasn't just like doom.
Chris: Yeah, bang-bang. I suppose, in that way, it probably was pretty... If it was the first one that did that, probably pretty transformative to the industry.
Anyway, you scroll all the way to the bottom and there's some tool thing. It must be important in the game. I never played. It looks like a claw that you hold with handles kind of.
You scroll. You roll over it and there's sound. I guess we could put sound in the category of kind of surprising, particularly on websites because it's so not used that much. But then you click it, and it becomes this - I don't know - like a machine that just can help you destroy the website.
Dave: Oh, really?
Chris: Anything you click on then gets detached from the website and falls down to the bottom in a big pile. I'm sure Half-Life people would know what it means, but it's fun even for people that don't know the game.
A little bit like Safari's new thing. I don't know if you've seen that.
Dave: What's that? What's--? Oh, the zapper? The ad zapper?
Chris: Yeah! You go to a website in Safari and there's a little machine to remove things that you don't want to see on that page. Probably mostly designed for ads. I'm not super sure how I feel about it only because it's like, just block ads then if that's what it's for. It doesn't do a perfect job of remembering what you zapped exactly.
Dave: Mm-hmm.
Chris: You're like, "What is this for exactly?" [Laughter]
Dave: Well, yeah. I mean I think there's a possibility, too, you zap something you forgot, like the form element or something. [Laughter]
Chris: Well, there's that too.
Dave: Yeah. No, I mean Arc kind of had that idea, too, with their boost, which ended up not being super secure. Did you hear that story? [Laughter] It was like public.
But anyway, the idea there is awesome. I think people should have power over websites. I think we just know it's probably just getting a CSS selector, and it's probably just deleting display none-ing that CSS selector. [Laughter] We all know the challenges of that. It's just going to be bad over time. The website is going to change and that element will be named something different or moved somewhere else. And so, then it'll not work anymore.
Chris: Yeah. Yep. Yep, yep, yep. All right, so any other easter egg things that you can think of that you think were actually kind of worth it?
Discord does a decent job of it with their, like, "We rolled out a fancy new reaction," or something that does something cooler than you think it's going to do.
Dave: Yeah. I do think Discord is pretty good. But you know they kind of use these quests or something that it's like, "Ooh, what's that?" It looks special, and then you click it and you're like, "That's just an ad." You know?
Chris: Trying to sell me something from the store or whatever.
Dave: Yeah, they have a license deal with DUNE Prophecy, the TV show.
Chris: Yeah.
Dave: Then, yeah, I do like, also... I like when websites do takeovers and art direction. There have been a couple of Verge articles that kind of do this whole entire art direction. I just think it's great. I think, if it's an important story to tell, take some extra time to make it a really interesting story (visually as well as text wise).
Chris: Yeah.
Dave: And amplify the text, I guess, with that. Then even when a website could do an 8-bit day - or something like that - and just go full retro for no reason. There are Internet holidays like April 1st that we do that sort of thing for, or talk like a pirate day, or something that you might do that for. But just for no reason. You're just like, "We're 8-bit today," or something. I think those are fun. I think that's a way to get attention, too. People would be like, "Oh, that's fun. Look what they did."
Chris: Yep. That's just kind of in the fun bucket that it feels different to me than an easter egg because everybody sees it is the thing.
Dave: Yeah. Yeah, the Google Doogle is kind of there.
Chris: But that's what Tiny Details was saying, too. The icon for a calendar. It's true. He mentioned Outlook. It's the same true on my MacOS busy cal icon. The icon in my doc is today's date. Nice. Thanks.
Dave: Yeah. Nice. Yeah. Yeah. I don't get the... I have Outlook. I'm not getting the doctor's office thing, but I wish I did.
Chris: Yeah. [Laughter] I saw one in... What was it? Astro did something cool with their favicon recently. The idea was that you can even have light mode and dark mode favicons because an SVG can be a favicon. Now it depends on the browser a little bit because I think Safari still does... They support it but only in this mono-color kind of way. But that SVG can have CSS in it because SVG supports style tags within it and CSS can have @media queries in it, which can react to light and dark. I think that's just very cool that they can do that kind of thing.
But it also means that you could do other kinds of things. You can hide and show things with media queries. You could even dynamically because a favicon can just be sitting in the HTML of your website. Have you seen websites that put notifications (like a red dot or something) in the favicon?
Dave: Oh, yeah. Yeah.
Chris: That's probably a little bit like--
Dave: Dark pattern.
Chris: Yeah. You know.
Dave: Yeah.
Chris: Yeah. A little bit because it's kind of like exploiting something that isn't normally used for notifications for notifications, so it becomes... If it became a real thing, it kind of becomes an arm's race of, "Well, they're doing it. Facebook is doing it, so doesn't that mean we have to do it? Why do they get to be the only people that notify people?" Anyway. Obnoxious.
Dave: Right. Right.
Chris: I hope it doesn't become a thing.
Dave: Yeah.
Chris: Maybe we talked about that enough. [Laughter]
Dave: All right.
Chris: [Laughter]
Dave: Drove it into the ground there. No.
Dave: FND writes in. "Since you mentioned you're looking for any kind of topic, I'll throw this in there. What's a component anyway? Clearly, it's an overloaded term, especially in front-end these days. In my experience, that results in a lot of miscommunication and understandings. Examples include people understandably having unfortunate expectations of Web components and confusion in Markup versus CSS versus behavioral components or even just concepts that only exist in static design tools. What do you think?"
Chris: Huh... I don't know. Is it a problematic word? I'm kind of a fan of it, generally, as just a term that just means it's a thing with some level of encapsulation. Not necessarily Web platform level encapsulation, but code and team thinking level encapsulation.
It could be tiny like a button. It could be huge like a page. But they're both still components. The component is a file. [Laughter]
Dave: Yeah.
Chris: A file has the job of being a component. I don't find it terribly problematic.
Dave: Yeah. In the Web component stink-up a few weeks ago, there was just a lot of confusion. They're like, "Web components aren't components." There was somebody that filed this issue and went on a big thing, like, "Web components aren't components. You should call them something else." It was really difficult to be like--
Chris: Not feeling it.
Dave: "What do you mean?" because in my mind a component is, "I type this thing. I get this packaged set of either markup, styles, and behaviors." Right?
Chris: Yeah. It's extra component-y.
Dave: I type a thing; I get these things. Sometimes you have--
Chris: It's like the perfect name, really.
Dave: Yeah, and sometimes you have renderless components. What did they call them in this...? I just want to use the right terminology here. [Laughter] Don't want to--
Behavioral component, okay, where, in React, a context provider, right? You write that; it doesn't inject markup, Chris. It just adds a state context to that group of elements.
Chris: Mm-hmm.
Dave: You type a thing and you get a behavior. I wonder if that's not a component. That is just, "I am declaratively hooking up some behaviors to this portion of DOM."
Chris: Right.
Dave: I wonder if that's not a component.
Chris: Yeah, we have one called the "click outside detector" in our thing that we use. I think it actually does insert a div, so maybe that's gray area already. But the whole point of it is that it does very little to the markup. It has very little opinions. It's just behavioral concern.
Dave: Yeah, and so maybe those aren't components. Maybe we should call those behaviors and be real specific about that.
Chris: Ooh... A behavior? [Laughter]
Dave: These are behaviors for the page.
Chris: The problem is it manifests as angle brackets at some point in some way. So, if angle brackets then component?
Dave: But what if it's a data attribute?
Chris: Well, then it doesn't. [Laughter]
Dave: Not a component.
Chris: Yeah.
Dave: So, you know what I mean? Could it have just been--? But it's only a component because React has decided everything in here is a fucking component. Sorry. Bleep that out.
Chris: [Laughter]
Dave: You know?
Chris: But that would be true, too. If you made a click outside detector Web component, it would still be... And I heard Scott Jehl call this out as something he doesn't like and he was on Syntax talking about Web components the other day. He says one thing I don't like about all this is that we all call them Web components but what we really mean is custom element a lot of times.
If you're really saying angle brackets with a dash in it, one of those things, you should just say custom element. Ah... I don't know. He even admitted the ship has kind of sailed on that.
Dave: Yeah.
Chris: If you made a click outside detector custom element, it would still have angle brackets. It would still be....
Dave: You would still have angle brackets. Yeah.
Chris: Yeah.
Dave: But I would almost argue that should maybe just be a custom attribute that applies to a page - or something.
Chris: Yeah, that would be cool. Yeah, I can see that. If you were going to write this in the jQuery days, you would just say, "If you want to use this behavior, I will pick up on any data attributes or class names or something that has this," and then apply that behavior to what's already there.
Dave: Yeah.
Chris: In fact, it's probably better in a way. [Laughter]
Dave: Yeah. But Zach Leatherman has details-utils, which I like, as this progressive enhancement thing. You just wrap a details element in this details-utils, and you can add these behaviors like click outside and escape to close and show @media query.
Chris: Yeah. That's funny. Again, weren't you calling this out the other day as imperative versus declarative?
Dave: Yeah.
Chris: And what the angle brackets do is make it kind of declarative.
Dave: Declarative, yeah.
Chris: Which can be nice but maybe we miss. Occasionally, imperative is nice when there is no command to do. Remember Lea Verou was into this for a while, this idea of JavaScript behavioral type of scripts that were HTML-powered entirely?
Dave: Yeah.
Chris: It made them declarative in a way.
Dave: Yeah.
Chris: They would only ever react to attributes and that kind of thing.
Dave: Yeah, I forget what it was called.
Chris: She had a term for it.
Dave: Not Marco, but it was something like that. Yeah, it was just this idea of you just type these attributes and we'll bind all the behaviors. HTMX kind of does this, right? But we'll do all the behaviors.
Chris: Yeah, and Alpine.
Dave: Yeah, Alpine.
Chris: Yeah, so you don't write any JavaScript. It's a JavaScript library where you're not writing any instructions. The instructions happen via HTML.
Dave: Yeah. I think those are valid. Those components, I guess. Not really. But then you... I do think there is this, like, I type in angle brackets something and I get something. I think Web components fit that definition.
There's a big stink up about that, but I think also people have come to understand it as a universal programmatic DOM structure. It's basically like a tree. Everything is a tree, but then Web components kind of break that because your tree might get modified, either injecting HTML into the Light DOM or entire Shadow DOM that shows up. And properties aren't properties all the time. They're attributes and properties, which is how HTML works.
I think... Yeah, I think the problem here is not using the word components. I think it is just "component" is kind of by definition a weird word, and we've tried other words in the past. We've tried widget. We've tried plugin. We've tried component.
Chris: Hmm...
Dave: You're going to come up with a new one and, guess what... Island. You're going to come up with island.
Chris: Element.
Dave: And then somebody is going to come through and say, "Cool. I have an all islands framework." It's like, "Okay. Cool." What did we solve? Is it still confusing? Yeah, it still is.
Chris: I don't know. I know I've gone off on this before, and I like everybody involved that thinks and works on islands, and the term just does nothing for me. I get nothing out of it. I'm like, "What are you talking about?"
Dave: I think it's a good "explain it to your boss" term [laughter] in the, like, "Hey, this section is kind of its own fricken' deal." You know?
Chris: Sure.
Dave: And it shows up later, so don't... We'll just treat it like that. I think that's handy.
Chris: Then just do that. People have been doing it forever. They're going to keep doing it.
Dave: Yeah.
Chris: Okay. Component is... Yeah, we'll see. Listeners, let's hear from you if you have strong opinions about the word "component." Do you think it's overloaded? Do you think it's useful? Do you think there are better terms? I don't know. How are you feeling about it? Just because I feel fine about it doesn't mean you do. You know?
Dave: Yeah. Well, he mentions... Sorry. "He," I don't know who FND is, but FND mentions static design tools like Figma. Figma has a concept of components. They are just properties and states. You flip a button on and the properties change.
Chris: Mm-hmm.
Dave: Is that what a component is? I think that's pretty close to what a component is.
Chris: Yeah.
Dave: I feel like you flip a property.
Chris: To me that's evidence of its success.
Dave: Yeah.
Chris: In this component-based work. I felt so strongly about this in the past that I've put it in talks and stuff like that, this idea of components is just great because one of the side effects of it is, you know, you just mentioned Figma there, is that it connects design and development. It connects these two concepts in a way that there's this historical thing that designers and developers have trouble talking to each other and trouble communicating and finding common ground on ways to collaborate together. Components, I don't know if it solved it but it's awfully helpful.
And that there just wasn't... For a long time, people are nostalgic about their text pattern websites or whatever else. Good. You can be nostalgic. That's cool. But that type of architecture on a website did not offer you components. It was steeped in this make a page. Make the URL when it gets to this website building software comes to this file, and then you just do whatever in that file. It was like, "Ugh. Ack." It was too page-oriented and that this idea of thinking and building digital products as components that you nest and piece together is better.
Congratulations, us. We found the correct way to build digital products. It's components. Good job. Moving on.
Dave: Yeah. Yeah. I think we've solved that problem and so let's agree a component is kind of a nebulous thing.
Chris: It's nebulous but intuitive. I don't know.
Dave: Mm-hmm.
Chris: I like that, though.
Dave: Yeah.
Chris: Okay. While we're on components, let's talk about Michael Warren here. He posted a post one week ago.
Dave: We got in trouble again. No... [Laughter]
Chris: Well, kind of because I was running my mouth. Maybe you agreed with me. I can't really remember.
Dave: I do agree with you, but we could talk--
Chris: Yeah, okay. There's an API (part of, I'm just going to say, Web components because I don't have a better term to say) called CSS Parts. Just imagine an HTML element that is sitting in a Web component. Does it have to be Shadow DOM? I'm embarrassed to say that I don't know.
But let's say the Web component has within it a div. As an attribute on that div, I can just say anything part equals. I'm talking HTML attributes here. Part equals Dave. Part equals foo - whatever. I just give it a name, any name that I want.
Now I have opened a hole. I guess it really is only relevant to Shadow DOM because otherwise you wouldn't need this. I've opened a hole in the Shadow DOM. Now I can type my-component in CSS. I've selected the component, and then I can go ::part(dave) or (foo) or whatever the name of that part is.
I can style it now. I have given myself a tiny little tunnel through the Shadow DOM to style that thing, color equals red, font size equals 2 REM; whatever I want to do, I can style it.
But the reason I talk smack on this API is that it's just so strange to me. Now, let's say that really is a div and I want to select the H3 inside that div. I cannot do that with the part that I've already given. I have to, in the thing, go into the H3, give it a part too, come up with a new name for that part, and then I can select that H3 too.
I do not have the power of CSS. It's trying to open up CSS styling control but it doesn't want to just give me CSS styling control. Then how do people know about your parts? There's no intuitive inspectable way to really find out. I can kind of dig through the code and be like, "Oh, I guess that thing has a part name, so I could use it," but really it requires a read me or something on your component.
Dave: Mm-hmm.
Chris: Which I'm like, "Ugh!" You know? [Laughter] I don't know. I don't love it.
Dave: Yeah.
Chris: Anyway, that was my opinion (or it was) and I will admit that Michael Warren here posted a post on dev that says "CSS parts are saving you from a nightmare" where he really advocates the other direction in that parts really is actually a good API. Let me breathe there and see what you think.
Dave: Yeah. We can both be right. I think Michael wrote this great article. I do want to say I know what parts are. I know what ... but I take the point. They're useful for a way for an author to give access to an element. Actually, it mirrors the pseudo element standard that we have now, which is WebKit runnable track slider - or whatever - the thumb, WebKit runnable track thumb.
Chris: Yeah.
Dave: Whatever those custom sort of pseudo elements are.
Chris: Yep.
Dave: I think it has the same strengths and weaknesses of that. I guess I can reach in there and style it but guess what. It is not intuitive. Tell me all the track parts right now. Three, two, one... failed. You know what I mean?
Chris: I couldn't even name one. Yeah.
Dave: Can't tell one because it's a very opaque piece of API, and I mean opaque in the, like, you can't see it or understand it from the outside sense.
Chris: Yeah. It used to be a time where you had to go into your settings of your dev tools just to turn on the ability to look at that stuff.
Dave: Right. Yeah.
Chris: Which of course no one did. They didn't even know about it. Even if they did, they probably would be like, "What the heck is this setting even about?"
Dave: Pseudo elements are cool but they are kind of like hard to discern from the outside. There are things in Web component land like custom elements manifest, which is kind of like an agreement for Web component authors. Not all authors, including myself, just because it hasn't worked in our trials really. But you can run your Web components through this analyzer and spit out basically a JSDoc file that is... Or you can program JSDoc on your component and it will spit out a file that basically tells the world. It's like, "This is what's in these custom... These are the custom elements in this project and these are what the API surfaces are." That can be CSS parts. That could be CSS variables. It's pretty cool like that, the custom elements analyzer.
Then from that custom elements analyzer, the manifest that comes out of that, the custom elements manifest, you can then feed that into VS Code to get the auto-completes that you want. Pretty cool.
Chris: Yeah.
Dave: But that is three steps you need to do, so it's not just free 99, you know. It's not like as cheap as like a TypeScript type. But you could have maybe JSDoc is intelligent enough to make it happen - I don't know - some of that. But I think that was part of Michael's point.
Michael also kind of criticized the "I know what I'm doing" selector. That's a future nightmare because you change things and updated things. Yeah.
Chris: Well, let me set up what he said (a little bit). The main part of this is that we were talking about it (and I was definitely guilty of this) kind of talking about it as maybe components I would design and use for myself or on my own team, and that doesn't capture it. The opening thing is Web components are one big use case for them as totally third-party. You don't really control what the DOM is inside of that Web component. You're just using it. To me, that's like, "Well, all the more reason for me to reach in and want to mess with it, so I have some control that I didn't otherwise have."
But he's kind of saying you don't. It's a foot gun to write specific CSS against a DOM that you don't control because - whatever - there's no promise that that DOM is going to stay the same. The control aspect is different. I think that's a good point. Whereas, if that author -- and this is kind of theoretical -- uses parts and puts them all over their component that even if they change the DOM, kind of the contract there is they'll keep the parts the same.
Dave: Yeah. Right. Right.
Chris: I think that's fair. They've designed this API for you to use to style this thing, and that gives them control to continue doing what they need to do, and you're doing what you need to do, and that contract will stay strong over time. I say that's theoretical because I don't see this. There's not article after article about this. We're living in theoretical land as we talk about this, so that's okay sometimes but I just don't know how big of a real problem this kind of is. And I do maintain that a deep selector and "I know what you're doing" selector is still desirable, especially if a third-party author flips that switch on saying, "Go for it." I think that's the only way it'll ever happen anyway.
Dave: Yeah. I still think it's valuable. I think there are just too many things, like, "Oh, dude. I need this to be like a flex grow," or something weird. Some sort of like niche concern that happened in my implementation that I can't really wait on a fix for - or something like that - where just a minor CSS patch would work. And if that breaks in the future, yeah, I own that. I tried to style a third-party thing. [Laughter] That's on me. I broke that.
Chris: Mm-hmm.
Dave: I think maybe there's a way to manage that technical debt or keep an eye out for it.
Chris: Yep.
Dave: But I don't disagree. I guess my Spidey senses or sensibilities are just a little bit different just in terms of... This is very in-house. I don't think these are a problem with Web components. I just think this is now an in-house discussion of, like, "Are they good, though?"
Chris: Yeah.
Dave: If I put a part on everything, the world's problems will be solved. I don't necessarily think that.
Chris: Yeah, and it feels like that's what they don't want you to do. Don't put a part on everything. Put a part on the important parts that you can imagine someone wanting to style. But I hate that. I hate having to decide, you decide this. You give this really weird trimmed down version of CSS. But you still have to use CSS to do it.
Dave: Mm-hmm.
Chris: But you don't really get the power of CSS.
Dave: Yeah.
Chris: That really bugs me. [Laughter] I still think, "What is happening here?"
Dave: Nah. I think it's just sort of, too, what is your use case?
Chris: That's true.
Dave: In my opinion, an "I know what I'm doing" selector, you write a bunch of those to mash up your own Google Map called Dave-O-Map, and then Google changes it--
Chris: They ship a change. That's the job. We've been dealing with that forever.
Dave: That's kind of the job, man. Yeah. That's my take.
Chris: It's like if an API changes. God, I wonder whose job it is to deal with that? It's the developer's or it's versioned. You don't have to download the new version.
Dave: Mm-hmm.
Chris: You write up and say, "Oh, we changed versions and this stuff changed. You should know about these changes."
Dave: Yeah.
Chris: It's in that same bucket of stuff we've been... The entire job of being a developer is that.
Dave: Yeah. Hey, man. I've committed some CSS crimes in the past. You know what I mean? Between us, just you and me, Chris.
Chris: Yeah.
Dave: No one else is listening.
Chris: Right.
Dave: I've done heinous things with CSS and it's fine.
Chris: Sure.
Dave: I would wager--
Chris: I still throw an important on some crap once in a while just to be like, "Yeah, whatever." I don't feel like this... I feel like it's almost less confusing than an artificially strengthened selector sometimes. [Laughter]
Dave: Mm-hmm.
Chris: I even get why I'll often put a comment. It's kind of a crime. Especially if you're in a hurry. You're like, "Ah, who cares?"
Dave: Yeah. Yeah. But you know the post is good, so we'll put it up. Again, I think there's room for--
Chris: It really good. Good job, Michael Warren.
Dave: Yeah.
Chris: Thank you for writing that. I don't even disagree entirely.
Dave: Yeah.
Chris: I just disagree on the fact that we should get a deep selector.
Dave: Yeah, well.
Chris: I want it.
Dave: Okay. Ludwig writes in. "I'm currently working with Alpine.js." Oh, are we at time? Do we have time for one more? We do, right?
Chris: I'm sure we do. Yeah.
Dave: Okay. All right. Ludwig writes in, "I'm currently working with Alpine.js where you pass data into a component using Alpine's X-data attribute." Gosh, we just talked about this.
"It's supposed to be a valid JavaScript extension, thus JSON comes to mind when passing large, complex objects. However, the HTML attribute's value itself is wrapped in double quotes, which JSON is full of, so you end up escaping the ampersand quote semicolon. This ends up blowing up your attribute even though it makes it unreadable. The current approach is inserting a script tag with a variable right there, so you say script const whatever post equals this JSON, right?"
Chris: Sure.
Dave: "Then pass post into the JSON. This feels icky for multiple reasons. I'm not super-familiar with Web components, but just looking at the HTML part, if you're facing the same issue (right), is there a way to pass complex data into the HTML server-sided rendered application?"
Chris: Well, I mean the very first thing is you can single quote HTML attributes.
Dave: That's step one. Yeah. Maybe their linter is fighting them on that, though.
Chris: Yeah, maybe, or Prettier is messing with it, yeah, or something. You're using some kind of tool that produces HTML and it produces it with double quotes. I don't know. That seems very unfortunate. It did seem like this is a use case that's like, "Don't do that." I don't know what the situation is there but if it's a tool that's doing it to you, that tool should deal with the output of that attribute also. That sucks.
I understand what you're saying, though. You don't want a bunch of ampersand quote semicolons all up in your JSON of this thing. Nor do you really want inline script tags. I don't know. It just depends, I guess, because an inline script tag can be nice. Why not? It's a bunch of data. Put it in a script. That feels fine to me.
But you could be like, "Oh, crap. But our site has CSP on it. It has a "no inline scripts" content security policy on it, so that will fail." Well, you can always do the nonce thing. I'm going into weird territory here, but you can allow some inline scripts with the use of a nonce (even with content security policy). Putting that data in a script tag feels okay to me.
That's one of the reasons... I know I'm blasphemous, but I don't always love looking at code with Tailwind in it because you're like, "Oh, now there's a bunch of styling information right next to the markup," and I personally don't like that. It feels like too much data right there. Or when you see big, complicated x-state diagram stuff at the top of your component. You're like, "Ack! It's all getting muddied together in a component that I don't love."
If I saw a huge piece of data at the top of a div right before I'm about to look at the HTML structure of that component, I'll be like, "What is all this doing here?! This looks gross." I don't care what it looks like in the browser, but I do care what it looks like when I'm authoring the component.
I've seen other tricks. I've seen put the data in an input type equals hidden.
Dave: Ooh...
Chris: There's a big piece of string there that you can get your hands on.
Dave: Interesting. Yeah.
Chris: I don't know if it's Alpine-friendly or not.
Dave: I understand the problem. I generally sort of feel like if you are saying data equals some long JSON thing, you have an abstraction problem. That's a code smell for me--
Chris: Okay.
Dave: --that we probably need to separate our data in our markup just a tad. I don't hate the inline scripting. Basically, you're trying to say... I said the example of posts. If you had div ex-data equals every single post on my blog--
Chris: Whoa!
Dave: --that's a problem, right?
Chris: Yeah.
Dave: Even just that div's declaration becomes as large as the page. Maybe you're just doing ten pieces of data or something like the progress bar on how many questions you've answered in the quiz - or something like that. I think if you're doing the data part declaratively, you have to do it that way. You have to do something.
The data object has to live somewhere. It can either live in your big, long attribute or it can live in its own script block. I think those are your sort of like two big options.
Web components has a thing where you could have a property like on the component, so my post or my progress bar, and then you say my progress bar data, and then--
Chris: Yeah.
Dave: --in JavaScript, you say my progress bar dot data equals this. You basically declare this observed attribute. Then you can program that attribute to show up.
That's the neat thing about Web components is they are like JavaScript, so you can just reach into the element and change the property value. My list of posts dot posts equals some big JSON array. That'll work.
Chris: Hmm...
Dave: If you are doing the attribute-based thing, you can do that. But then you'd probably have to JSON stringify and then JSON decode. What is it? JSON unstringify?
Chris: Yeah, but that's the thing is that you probably don't have... I don't know if there is a middleman to do that in Alpine, but that's the point of Alpine is that you're not writing code like that.
Dave: Yeah.
Chris: It's just sucking in the value and knowing what it means.
Dave: I think Alpine works for this use case, but I think you can work around the attribute issue.
Chris: Yeah, you can, hopefully. Yeah, interesting. The more I think about it, the most I just like the script tag thing. Move the data somewhere else.
Dave: Yeah. Just put it somewhere else. It doesn't have to live ... it can live at the top of the page. It can live at the bottom of the page, hopefully.
Chris: Hopefully, yeah.
Dave: Yeah. Maybe it can't live at the bottom.
Chris: All right. The last one is just a shout-out from somebody that built something cool.
Dave: Hey! Heck yes. Yes.
Chris: Azat S. wrote in an ESLint plugin Perfectionist 4.0, so they've been working on it for a while. It's a plugin for sorting your TypeScript types, your JSX props, your objects, your variables, all kinds of stuff like this. Imports is my favorite one. I don't know why, but I was very adamant at our company that we have something that sorts the imports at the top of JS files because I'm so sick of looking at PRs where there was noise at the top of the file of the import org because it doesn't matter. It doesn't matter the order, so people had their own little opinions about if you should put a space between these two or do you put import view at the top or does it matter.
Dave: Mm-hmm.
Chris: Like, "Nooo!" But this thing takes it even further and just sorts absolutely everything in your files, [laughter] which I think I might like.
Dave: Yeah.
Chris: Just sort fricken' everything and do it on save.
Dave: Yeah.
Chris: I think it's one of those things where you'd probably have to spend a day in your code base running this, making sure it doesn't break anything. Making a big commit that everybody knows is coming because it's going to affect every file in the entire code base. And making sure it goes through okay.
Then we had to do it in a way that is fair. Like when you do the commit, do the commit under some ghost account - or something - so it doesn't look like every single file in the code base was touched by Dave. [Laughter]
Dave: That's next level.
Chris: Who touched this last? Dave.
Dave: Interesting. Yeah.
Chris: Yeah.
Dave: That's interesting. Yeah because I want the credit. If I'm running the process, I want the credit.
Chris: [Laughter] You want... [Laughter]
Dave: Ten thousand lines changed, I look real good on GitHub.
Chris: I do not want the credit.
Dave: I look real good on GitHub.
Chris: [Laughter] It would.
Dave: Yeah.
Chris: You use that plugin, GitLens - or whatever - on any file on anything. You click that line and it'll tell you the last person who touched that line.
Dave: Yeah, yeah, yeah. You don't want--
Chris: I love it.
Dave: Oh, you love it for blaming people. You're like--
Chris: Yeah, I want to know who touched it.
Dave: Rachel!
Chris: Yeah.
Dave: [Laughter]
Chris: I do not like seeing my own name on it, absolutely not.
Dave: Yeah. Yeah.
Chris: Yeah. [Laughter]
Dave: Who did this? Dang it!
Chris: Yeah.
Dave: Yeah. It's me.
Chris: It means that the line stops with me and I don't like that.
Dave: Yeah.
Chris: But this looks cool. The perfectionist plugin is very tempting to me to use. I love that it sorts absolutely everything on the page. Good job.
Dave: No, this is up my alley because this is literally the thing I don't care about. [Laughter] I just do... I want it to be organized. I just don't care how it gets organized.
Chris: That's the irony. I tried to call this out in my last talk is that you don't care but you care that it's handled.
Dave: Mm-hmm. Yeah.
Chris: You don't care to do it.
Dave: Yeah.
Chris: You don't care to think about it. But you do actually care.
Dave: Yeah. Yeah.
Chris: You care that it's handled. Yeah.
Dave: We're using Biome and having decent success with it.
Chris: Really?!
Dave: Yeah.
Chris: We were just looking at that. I heard it's fast as snort.
Dave: Well, I don't--
Chris: No? No?
Dave: I'm not looking at ESLint like it's slow. But the nice thing is it kind of smooshes Prettier and ESLint together. That's kind of the nice thing.
Chris: We were seeing a little bit of time issues with a few things. I can't remember what they were exactly. It just feels like too big of a stretch. As soon as plugins are involved with your linting and stuff and a pretty decent variety of file types and things, you're like, "You're not just linting your JavaScript. You're linting the JSX variety of JavaScript. Oh, wait. No, TSX variety of the JavaScript. Oh, wait."
Dave: Mm-hmm.
Chris: You also need to be cool with there being some GraphQL in there. [Laughter] You know? Okay.
Dave: Yeah.
Chris: Is Biome going to be a drop-in? No.
Dave: No. Yeah, I got into a situation, too, where Biome (the plugin) was complaining about things in my code that were not a problem with my code. You know? Biome's opinion was like, "Oh, this import is only importing a type and you have...."
The ESLint, which the other package was based on, didn't care that that was a type. You know what I mean? JavaScript figured it out, basically.
Chris: Right. Right. It's trying to impose some opinions, which some people love that about these tools. But it does shape your code.
Dave: It does shape your code. Yeah.
Chris: Yeah. Your tools.
Dave: Again, though, I would... Kind of right now I would probably just install Biome, turn it on, and then y'all tell me when... [Laughter] Let me know if I did it bad and I'll just keep saying, "Yep, fix red squiggles. Yep, fix red squiggles. Yep, fix red squiggles." Auto-fix. Auto-fix. I don't care. I don't care. I don't care.
Chris: Does it have good auto-fix? It ought to because--
Dave: Yeah. Yeah.
Chris: Yeah.
Dave: It does. Biome check--fix and it'll auto-fix stuff.
Chris: Yeah. I'm remembering a little bit. That was one of the problems. I think it supports something called Unicorn that I don't know that much about but it's a set of rules that is pretty opinionated and has good auto-fixers. If you write a dot for each loop or something, it'll be like, "Oh, in Unicorn actually a for of loop is faster," or whatever. So, you click the little unicorn button.
In VS Code it has a quick fix thing when you go over squiggles. One of the quick fixes will be a unicorn thing. The unicorn will just fix it for you, which is nice. Again, it's shaping your code. But whatever. At least it gets to pass that.
And so, Biome, I think, does support Unicorn. But then we use another one, too, called Sonar Lint or something, too. If those things aren't perfectly supported, then your code churn isn't just some reformatting and such. It's actually changed code. You know? Then you really need to fine-tooth comb that to see that it's not... That it was just some different way of writing a loop but it's going to be fine.
I don't like seeing PRs with changed loop structures. You'd better be real sure that works.
Dave: Right. It's better. I fixed it. Yeah. Did you, though?
Chris: A tool just did that. Yeah. [Laughter]
Dave: It wasn't broken.
Chris: Right.
Dave: Are we sure we're fixing?
Chris: Right.
Dave: Because when you change something that wasn't broken, you've actually introduced the opportunity for a break. Yeah. No, I mean for loops are pretty harmless, but I do--
Chris: Yeah, it's a lot, though.
Dave: We turn that rule specifically off because there's a time where for each makes more sense. It's just like I'm going to go through each of these. [Laughter] That's what I'm doing. I just created this array.
Chris: I much prefer the structure of that with for each and then the first argument of the callback is one of the things from the array. It makes intuitive sense for me in a way that I like.
Dave: Yeah. Yeah, well--
Chris: Oh, well.
Dave: All right.
Chris: Acquiesce to the tool. Um, yeah, that's about it.
Dave: ...yell at us about for each loops. Dang it! But hey, thank you for listening, dear listener, in your podcatcher of choice. Be sure to shart it up. That's how people find out about the show.
Speaking of sharting, I hung out with Adam Argyle the last time I was in Redmond. That was pretty cool. Anyway, a shout-out to Adam.
Then follow us in the D-d-d-d-discord. That's where the real homies hang out. Patreon.com/shoptalkshow. [Laughter] Chris, do you got anything else you'd like to say?
Chris: ♪ ShopTalkShow.com ♪ Visit us. You know we should probably do a Bluesky one of these days. It's really popping off over there. But for now, we're on the Mastodon and it's healthy over there, too. Just less exciting.
Dave: We could do a Bluesky. That's fine. I don't care.
Chris: One more thing.
Dave: Just the thing I don't want to do is Twitter. [Laughter]
Chris: [Laughter]
Dave: Whatever destroys Twitter is really all I'm committed to.
Chris: Cool.
Dave: So--