Transcript

Chris Coyier: Boom!

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a speed round edition of the ShopTalk Show. I kind of have some meetings that I may have to go to, so we're going to kind of figure that out. [Laughter]

Chris: That's how you know we're real developers, though. You know?

Dave: Yeah.

Chris: Yeah.

Dave: We're not carving out days for this. We're like bing-bong-bing.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah, then we can talk about our real-world experience as developers. Absolutely. We're both just busy as... What do you say? Bees in a flower patch?

Dave: Rats in a sock?

[Laughter]

00:00:53

Dave: You know, Chris, I listen to the podcast occasionally just to see how we're doing.

Chris: Yeah.

Dave: Quality check. And I say the word "like" too much, Chris, and I'd like to stop. Oh, shit! I said it again.

I want to stop. Do you think I could--? Hypnosis as a viable option?

Chris: Hmm... Uh, yes. Did you go to one of those schools? I don't know if the school is the factor, but I think we're about the same age, where it was very popular to have a school assembly where a hypnotist came and did a bit of a hypnosis show.

Dave: Hmm... Yeah.

Chris: Did you have that once? Do you remember it?

Dave: I'm sure we had that, and I remember it on vacations and stuff, like the hotels, you know, little party in the plaza sort of thing, you know, they would do--

Chris: Yeah.

Dave: A hypnotist would show up and make people--

Chris: Now, looking back on it, I was like, "That was amazing. He could make somebody bawk like a chicken or whatever. And he always said you can't make them do anything you viscerally wouldn't want to do.

Dave: Mm-hmm.

Chris: You can't make two people make out or whatever. But they were awfully suggestive. Not to mention what they do is kind of put you half to sleep.

Dave: Mm-hmm.

Chris: You're sitting there in your chair just totally leaned over, practically drooling on the person next to you. That to me is amazing what they're able to do with that. It seems like a true superpower, this hypnosis stuff.

Dave: Yeah.

Chris: Yeah, my grandpa always claimed he quit smoking via hypnosis.

Dave: Oh, really?!

Chris: Yeah. He just went. He just went, and then he never smoked again after that day. It was just the hardest line cut ever.

Dave: I'm going to see a hypnotist. I'm going to get rid of it.

Chris: Yeah.

Dave: And an acupuncturist, too.

Chris: Yeah.

Dave: And the acupuncturist is going to stab it out of me.

Chris: Yeah, for sure.

Dave: Or I build an Arduino robot that every time it hears the word "like," it kicks me in the groin or something, you know, under my desk. That would be a good one. I could build that.

Chris: Yeah.

Dave: Sort of like a myth buster creation.

Chris: Let's do it all. Let's go big. We're going to go lipo, to all the things.

Dave: Yeah. Yeah, just do... Get hot beach bods, and then I'm going to start my TED Talk circuit where no one says "like."

Chris: Yeah. We'll do the thing Demi Moore did, too. Whatever. You know? Put some black stuff in our system.

I didn't actually see the movie, but I heard she didn't win the Oscar for it, The Substance.

Dave: Oh... Oh, okay. I didn't--

Chris: It's kind of a horror deal that she... Okay. Let's skip past that, then. Sorry, everybody.

Dave: [Laughter]

00:03:17

Dave: I did learn about banana Botox. Apparently, you can rub a banana on your face and it has Botox-like effects. It doesn't actually work, but that's something people on TikTok tell you works.

Chris: Right. Oh, gosh! I have so many thoughts. I'll tell you what does work. A little Head & Shoulders on the face and the beard kind of takes care of the white flake stuff.

Dave: Uh-huh. Uh-huh, uh-huh.

Chris: You don't have to go expensive. Head & Shoulders is like $3.

Dave: Mm-hmm. Mm-hmm.

Chris: I'll tell you, though. My dear stepdad, I went to his 80th birthday party recently in Wisconsin, a surprise birthday party. We pulled it off. It was very endearing, very fun, lots of people from his life there, from work life. He's a golfer. Those people were there. Old friends, new friends.

Dave: Is it the kind of town or community where people don't leave or people are kind of always around, sort of thing?

Chris: Uh, I'd say there's a little more. Yeah.

Dave: Yeah.

Chris: And more specifically, our family is pretty don't-leave, except for me.

Dave: Mm-hmm.

Chris: Sorry about that, everybody.

Dave: [Laughter] There's got to be a black sheep. Need to have a black sheep.

Chris: Yeah.

Dave: Yeah.

Chris: Sure.

Dave: Yeah.

Chris: But because they never see me, I'm also perfect, so that's cool.

Dave: I am also that black sheep. Everyone lives within, like, a normal amount of hours of each other, and I live in Austin.

00:04:31

Chris: He is self-admittedly quite into conspiracy theories.

Dave: Mm-hmm.

Chris: Almost prefers conspiracy theories, which I find to be actually rather common. It's not that there's one particular conspiracy that you happen to believe in because, despite all the evidence to the contrary, you're pretty sure that the conspiracy is actually the truth.

Dave: Like how Ivanka Trump is a necromancer and controlling her father's dead body.

Chris: Exactly.

Dave: We all know that's true.

Chris: Right.

Dave: [Laughter]

Chris: I'm not going to give any of this any credibility. But once you start down that road, I think the next conspiracy theory that you run into just seems all the more likable. I think the reason you like them is because--you mentioned TikTok and wrong information there--they have a certain feel. There's a certain vibe to the conspiracy video thing that just kind of hits you the right way. You like the vibes of it.

I listen to a video like that and I just want to puke in my mouth. It's so obviously manipulative and just devoid of real information - or whatever. But I kind of get it, at least that it hits the right person with the right vibes.

We're watching one, so this is tangential, but there are just these really bizarre TikTok videos where you take an egg, and then you rub a bunch of toothpaste all over the egg. You let it sit there, and then you peel the stuff off the egg. Then what's on the inside; it turns into a bouncy ball, essentially. It congeals in a special way that you can just play with the inside.

There are lots of these videos, but they're very unhinged. They don't ring true.

Dave: Mm-hmm.

Chris: They tend to have a kind of Asian, "Oh, oh, um, yeah, duka-duka-duka." You know? Like, "Look, ball now. Oh, it's like an eyeball!"

Dave: Interesting.

Chris: To the point where we were doing it! We were home visiting, and we got out an egg, and we put toothpaste all over that thing and cracked it open. And it does nothing to the inside of an egg (as you might suspect).

Dave: Egg poured out. Yeah, yeah, yeah.

Chris: Yeah. Just absolutely. Then we thought, "Well, we used the wrong toothpaste. We had the blue kind, but you kind of need the gritty, old-school white kind." So, we repeated it with that.

Dave: Because the mint cooks it.

Chris: It absolutely does nothing, either kind.

Dave: [Laughter]

Chris: But we look up, "What's the deal with these egg videos?" Then there is a guy on YouTube who, to his credit, was trying to make the video relatively entertaining. "You know those crazy videos about the egg and the toothpaste? That's not... That is not a thing."

But we were watching it, and there was a little bit of, like, "Ugh! I can't watch this." You know? The vibe was wrong. It didn't have the conspiracy. It didn't have that unhinged feeling to it. Thus, this person... When I was watching it, I was like, "Look at this! This guy is great!"

He made a great video explaining the real science of what's going on here. "If you want to get somewhere close, you could use these things instead," trying to just deliver the actual information about this, but that wasn't hitting. It was like, "I'm not giving up. We're going to make this damn egg bounce with toothpaste (if it kills me)."

Dave: If the toothpaste is wrong, that's what's wrong. Yeah. Yeah.

Chris: Yeah.

Dave: This guy doesn't know. Yeah.

Chris: It's okay. We were just having fun. It's just toothpaste. Most of this stuff is relatively harmless. But of course, your brain wants to extrapolate, like, "This is what's wrong with the world. Truth is ignored!"

Dave: Do you think you need an alternate conspiracy theory, like, "It doesn't work because cosmic rays are beaming down on us and preventing the toothpaste from interacting with the egg"?

Chris: Oh, you've got to just totally double down on it? Yeah.

Dave: The TikTok did it is they had a shield that prevented the cosmic rays.

Chris: Yeah. Yep.

Dave: Turn that into a conspiracy, maybe. That's maybe one way.

00:08:38

Chris: Or you package up just regular old truth in that same vibes.

Dave: Mm-hmm.

Chris: Where you're like, "This is crazy! Nobody will tell you this. Nobody will tell you this. I am the only one out there. You listen to me."

Dave: The government doesn't want you to know this, what I'm about to tell you.

Chris: Yeah, that your dentist will be so happy. Yeah, absolutely not. I'll tell you what. You take a little tiny piece of string. You find the smallest piece of string you can.

Dave: Mm-hmm. Mm-hmm.

Chris: You've got to do this every day. Otherwise, it doesn't work.

Dave: Mm-hmm.

Chris: You put it in between each of your teeth and rub it up and down, each one, each time. I know it sounds crazy.

Dave: Mm-hmm.

Chris: This is insane. Insane! You put it up in each of your teeth, but you do it every day. It works even better if it's right after you eat.

Dave: Okay. Okay.

Chris: Then you go to the dentist, and the dentist will be like, "Your teeth are perfect. Yeah, I've never seen teeth better than this ever." The dentist will love you.

Dave: I don't need to pay a dentist?

Chris: Nobody knows this. Well....

Dave: I wouldn't have to go to the dentist as often if I do this?

Chris: Absolutely not. That six-month visit.

Dave: That's just a scam by the ADA.

Chris: Go every two years. Yeah, exactly.

Dave: Yeah.

Chris: I tell you it's not easy to find little string like this. But if you can get your hands on some really thin string.

Dave: I think I've seen it at Walgreens kind of on one of the bottom shelves.

Chris: Yeah. [Laughter] Right.

Dave: Yeah. It's under old-time medicine.

Chris: [Laughter]

Dave: That's always my favorite is when they're like, "The Jesuits did it!" You're like, "Oh!"

Chris: Right.

Dave: Because those guys are known for... [Laughter]

Chris: Truly amazing. The caveman diet, that's my favorite, too. You're like, "Cavemen lived to be 20, so--"

Dave: Yeah. [Laughter]

Chris: That was rough.

Dave: Odds of getting eaten by a bear: super high.

Chris: Yeah.

Dave: Yeah, due to malnutrition.

Chris: But apparently, they have good cardio.

Dave: Yeah, yeah, yeah. Yeah, they were shredded, bro.

Chris: [Laughter]

00:10:25

Dave: My wife and I were talking (on this TikTok thing) in facts and things like that. There was a situation. My daughter went to a cheer camp or a cheer competition.

Chris: Oh, yeah.

Dave: She won it. That's cool.

Chris: I heard she won. Yeah. Yeah.

Dave: She won, so that's awesome. It's in Dallas. Thirty thousand people attending.

Chris: [Gasp] Enormous.

Dave: Enormous, right?

Chris: Yeah.

Chris: It's Saturday, the midday, I get a text from my wife. They won. Emmy's team won. And I'm like, "Dude, that's awesome! Way to go!" I'm looking forward to hearing more about it once they get out of the convention center.

Then the next text I get (ten minutes later) is, "We are in lockdown. There's an active shooter."

Chris: Oh... my... God!

Dave: It's just like, "What?!" That's bad, and your worst thoughts are going through your head just about, like, "What's going on?"

Chris: Yeah, of course. Just terrible.

Dave: I'm looking for news reports, Dallas news active shooter downtown, and nothing is showing up. Then I'm looking for--

I go on Facebook, right? I look for NCA active shooter. Of course, there are a lot of reports there just like, "Active shooter. Oh, we're in lockdown. There's an active shooter here." You know?

Over a half-hour, hour of this, my wife gets out safe, gets back to the hotel. The hotel is in lockdown, too.

The news report... During all of this, you see these videos of kids just rushing out, TikToks of kids just rushing out from the thing after the shots or whatever happened. I hear stories about kids running across ten lanes of traffic to get away from the building.

Chris: At this event.

Dave: At this event.

Chris: Oh... my God! Yeah.

Dave: These are, on average, 12-year-old girls just running for their lives. Right? And parents who came with them. It's a horrifying event. Have friends who are crouched behind a semi for like an hour. It's awful and chaos. People are getting trampled and separated from parents and teams and stuff like that. It's awful.

But a news report comes out, and the real cause of the... I guess the active shooter was actually two cheer parents fighting at a hotel across the street, and they knocked down a metal pole, like a little movie theater poles - or whatever - or something like that.

Chris: Somebody hears a crack? So, they see this fighting and they hear a crack.

Dave: They hear a pong-pong, you know, like pop-pop, or whatever.

Chris: Somebody is like, "Gun!"

Dave: People yell, "Gun!" It's like yelling "Fire!" in a crowded room, right? Of course, America is primed for this whole active shooter situation.

Chris: Oh, yeah. Can barely blame them. I would have thought the same thing.

Dave: Dude, if somebody says it, I'm going to trust them. I don't have to not trust them.

Chris: Why roll the dice?

Dave: Yeah. [Laughter] Roll of the dice.

Chris: Be like, "Show me the--" Yeah.

00:13:38

Dave: So, that's just an example of, like, disinformation spread quick. Then they were talking about it afterwards, and the news report said it's nothing. Then a friend was like, "Yeah, but TikTok said it is something."

And so, there's this thing where it's like, you almost don't believe the news. You believe the immediate thing. Does that make sense? You're like, "This is the current news."

I deleted all my Twitter accounts, so I couldn't even check Twitter for it, but that was my instinct: Go on Twitter. Find out what's actually happening, like eyewitness accounts or whatever.

People are trusting TikTok because the speed of information is so fast. The heartbeat of the Internet is there. Rather than taking a minute to chill out and think about it.

Do you watch those subway takes videos? They're like TikToks?

Chris: I don't know what you mean, subway take. No.

00:14:41

Dave: It's this guy, Kareem, and he's a funny guy, but he goes on the subway. He's like, "Tell me your hot take," and somebody will be like, "Restaurants where the vibe is cooler than the food is better than the food. Need to tell you so." Something like that. [Laughter] If the vibe is good but the food is crap, they have to tell you that before you go in. He'll be like, 100% agree or 100% disagree, or whatever.

Chris: Yeah.

Dave: Just let them kind of--

Chris: Riff? Okay.

Dave: --cook on their opinion. Just let them either embarrass themselves or try to convince him otherwise.

Chris: Mm-hmm, mm-hmm.

Dave: Generally, it's pretty funny. A lot of comedians do it. But this one guy was just like, "We shouldn't have hot takes," which is kind of funny for the show, right? But his whole thing was, "None of us know. In one minute... The Internet pressures us to be an expert on a subject in one minute."

State of the Union Address, for example. We've got to, one minute later, have what we think about it. That's not how the human mind works, necessarily. And we probably shouldn't trust people who do have an immediate opinion. We should let people think about things and matriculate and percolate ideas.

Chris: Yeah. If you think there was a time where, if somebody had an opinion that quickly, that culturally they would have been, like, "Whoa, bro. Why don't you think about it for a minute?"

Dave: No. I think it's this weird perversion. I don't know. This weird... We all appreciate somebody who is certain.

This is my hot take here. [Laughter] I'm doing it now. I think we all appreciate somebody who is certain. You're just like, "Wow! That guy believes something!" You know? "They really know their stuff."

Chris: Nobody wants Captain Wishy-washy, right?

Dave: Yeah. And I think no one wants to be a guy who goes, "Yeah, it was the Democrats," - or whatever - is way more believable than somebody who says, "I don't know, man. I mean you've have to look at all the data and build a chart." No one wants to believe that guy. [Laughter] You know?

00:16:49

Chris: Yeah. I do remember certain events and times where having a nuanced opinion was a little crucified.

Dave: Mm-hmm.

Chris: That's... yeah. I got that side, too. [Laughter] There is nuance to the nuance, in a way. But if a certain bad event went down, and it's either abolish all police or give all police raises were the only two opinions you could have.

Dave: Mm-hmm. Mm-hmm.

Chris: Then if you didn't say anything, your silence says everything. That means you're just as bad as a murderer if you didn't say anything. I remember that feeling and feeling kind of pressured into having an opinion (in the past, a couple of times). I feel like that was early days of how segmented the country feels now, which I don't like. I definitely am on team togetherness, somehow, some way, even though I don't want to be siding with somebody who wishes somebody else's life not to exist - or something. The nuance dies there, to me.

Dave: Right.

Chris: But if there's any hope for us, there's some kind of... We need to move forward together as a country. Otherwise, it feels very dangerous to me. [Loud exhale]

Dave: Well, yeah. I'm also. I think my weakness there is I can be convinced by data. [Laughter]

Chris: Hmm...

Dave: My coworkers once identified that I like data more than my own opinions, [laughter] which is kind of funny because it's true. If you can give me some good data that actually shows this is a bad idea or this is a better solution, I'm open to hear it. In certain situations, I don't necessarily have a hot reaction or hot take. It's more like I kind of want to just see data or understand more.

00:18:54

Chris: Yeah. Instagram is forever trying to sell me a T-shirt that says, "That wasn't very data-driven of you."

Dave: Oh! That's a good shirt.

Chris: Yeah. It's cute.

Dave: Yeah. My ads have taken a nosedive, dude! [Laughter] There's a lot of... Even when I had a dog, it's all like, "You need to feed your dog real human food. Like a chopped-up steak every night. That's the only way. Buy it from us."

That was okay when I had a dog. Then my dog died, and it was still giving me those ads. I was like, "That's not cool." Now I have dogs, and I'm like, "I don't want this ad. I don't need to spend more on these dogs." [Laughter] I don't know. Maybe it is good for my dog.

Chris: Hmm... Maybe.

Dave: Once you give them the food, they're going to want it every day. You know what I mean?

Chris: Kind of, yeah. Yeah. Is it true or is it in your brain or is it both? You know?

Dave: Yeah. Slippery slope.

Chris: I always the kind of... Yeah. Call me a jerk, but when I put food out for a dog and it didn't eat it, I was like, "Well, you ain't hungry enough then, dog." [Laughter]

Dave: Yeah.

Chris: When you get hungry, you're going to eat that.

Dave: Yeah.

Chris: All right. That's just because I'm a jerk I think. Let's do some questions.

Dave: Yeah.

00:20:10

Chris: Sheila Brennan wrote in, "What are your thoughts on when to use view transitions versus CSS animations or the Web animation API? It seems like view transitions are ideal for page navigation animations, but I wonder in what other areas they excel. Firefox support for view transitions could drop in 2025." I think this was written before it was announced that it's going to be an interop. At least the same page transitions are, so it probably will drop in 2025 for Firefox. "This feels like something to start thinking about."

I guess the root of the question is a versus. There's a VS in there, view transitions versus something like CSS animations or the Web animations API. Do they need to be a versus thing?

Dave: Hmm...

Chris: Sometimes you could accomplish the same thing with both, but they do feel relatively distinct to me.

Dave: I would. Yeah, I think it's sort of an improv thing, like both-and or yes-and.

Chris: Mm-hmm.

Dave: Yes, use them and use the other one. Yeah, I think I had a post I was writing on this. I'm trying to radically eliminate nuance.

Chris: I think of view transitions as state, you know? At least if we keep it to the on-page animations because that's the only thing that's worth comparing here because CSS animations or the Web animation API, they cannot do cross-page animations. It's not possible unless what you're doing is not actually changing pages. You're faking some single-page application like thing and then you can use those things. But let's keep that out of it.

If we're just talking about animations that are currently on the page, they certainly excel at different things. But view transitions is stateful. I think a classic is I need to reorder this list, for example. The way that I'm going to accomplish that reordering is by doing some DOM operations on it. Maybe five things are leaving the list and three things are being added to it, or the sort order is being changed. There's some fairly--

The DOM, there's a before DOM and an after DOM. If you just say view transition that, there is a beautiful thing that happens, even without doing much work at all. If each of those individual list items has a unique view transition name on it, they will move themselves into their new position from the before DOM to the after DOM, which is so cool.

Dave: Mm-hmm.

Chris: If you're like, "I'm going to do that, but I'm going to use the Web animations API to do it," you have a lot more work to do. It would be ten times the amount of work--

Dave: Yeah.

Chris: --to store that state yourself and calculate it and move them into the positions and have elements to maintain the previous position and stuff. It's just not really tenable. And so, you'd use view transitions for that.

But if also your goal was click this button and animate something to transform scale to (or scale to, these days), sure the Web animations API is probably better at that because inventing a class name that's like scale to, applying it, and having a before DOM and after DOM for that. Then that puts view transitions in the, like, "that's too much work" category. I'll just use the Web animations API to do it.

They have their strengths.

00:23:30

Dave: Yeah. I started a post called "Sprinkle Some JavaScript is Dead." Good title. That's a good one. That's good, right?

Chris: Ooh... Ooh... Yeah, that's pretty good.

Dave: I don't know if this will end up in the final post, but for animations I was talking about how you could approach other things. Animations would be like use CSS to animate minor state changes like hover.

Chris: Okay, sure.

Dave: And a little blip, a glow, a something. Use view transitions to animate major state changes and page navigations.

Chris: Okay. I like this distinction. Yeah.

Dave: Otherwise, wrap it in a Web component that handles animations. You could think of, like... And the Web component is purely just from, like, this is an isolated thing. It's a contained interaction.

Chris: Mm-hmm.

Dave: And I'm using GSAP or something in here or Web animations API or whatever that's just going wild in here.

Chris: I see. But you've said this component is for animation and that's why I'm using it.

Dave: Yeah or if you have "don't use Lottie or a Lottie animation" or something like that.

Chris: Right. Okay.

Dave: Lottie is super-big, so don't.

Chris: [Laughter] Is it? Is it like a megabyte of JavaScript kind of thing?

Dave: Yeah. Yeah. When all you need is a little bit of wow and it's a megabyte of JavaScript.

Chris: Hmm...

Dave: I'm sure people are working on that. There's a new... Framer Motion split off into React Motion. Then it's not just React Motion anymore. It's Motion, and I think they support a native JavaScript API.

Chris: Vanilla town? Mm-hmm.

Dave: I would actually consider using Motion as well but in the context of a Web component. If you're trying to move something around and do something, that would be a place to maybe consider using Motion. If you can get your designers to prototype Motion in Framer, than you should be good-ish.

Chris: Cool.

Dave: Yeah.

Chris: Don't sleep on view transitions, Sheila. You're right. Think about those APIs. They're pretty darn good. Also, pretty progressive enhancement friendly, too, so yet another reason to not ignore it.

Dave: That's the progressive nature of it, right? CSS transitions, they're probably not going to fail. They're very small. But they could bomb out. View transitions might fail because they're big, but they fall back to just static page stuff or static swaps. Then the other one is the sort of more extreme ones, like you need the success button to shoot off fireworks and then bloop into a thank you modal - or something like that. That's actually a view transition. But the fireworks can be something else. It doesn't have to be all one big thing.

00:26:36

Chris: Yeah. All right. There's an interesting follow-up one here from Mark Root-Wiley, a friend of the show, I believe. Remember we were talking about typography and this Richard Rutter TODS style sheet thing that was really neat that we saw? I had just plucked out one tiny thing from it that I thought was interesting that was kind of a reset, like when you're setting an at font face that he specifically put in there font weight one space 1,000.

The idea was that it's a nice general default to put in there because that's not the default, actually. I think normally it caps out at 900 or something as the default. But let's say you're using some variable font and the variable font was designed to have a font weight that went up to a thousand or beyond that you'd be artificially kneecapping yourself by not including that, which is just an interesting little, tiny tidbit.

Mark is kind of saying he almost likes... He didn't use kneecapping. [Laughter] There's probably a nicer word for that. He said there are some people that think that maybe a font in the other direction is too low.

He says, "I know a lot of people take the opinion that light font weights are considered harmful," and points at a CSS-Tricks article we published back then about that. "I think there is something to that. In my own projects, and especially in WordPress, which offers a font weight setting in the app of 100 to 900, explicitly resetting that to be 350 to 832." Just some random numbers. He's like, "Why not?" Intentionally taking advantage of the downstream restrictions.

If somebody were to attempt to use font weight 300, because you've set the font weight in the at font face to only go from 350 to 852, if you set font weight 300, it would get bumped up to 350 in this case. It's like a way of imparting a restriction at the font declaration level.

Dave: Like a min-max range.

Chris: Yeah.

Dave: Yeah.

Chris: Kind of neat. I don't know what to say about all that. If that's helpful, go for it.

Dave: I think that's a great idea. I think it's going to depend on the font, ultimately. Did the typographer think about this? Ultimately, it depends on what whoever set up the font is doing. These aren't random scalers. They set the min, the one size and the 1,000 size, so that would be sort of like the question is, "How was the font set up?"

But coming out of the era of thin fonts, like the early 2012 or whatever... I feel like Apple was the driver of that maybe. Those were way too thin and lack contrast. It was really hard to read. For some folks who have blurred vision - or something like that - that text literally could look invisible. [Laughter] If you put gray text on a gray background, it would just disappear, and it's all thin and faint.

I like the idea of, per font, setting min-max so people can't get too clever.

Chris: Although, can you do that for a variable access range? I don't know. I don't think so.

Dave: Oh, yeah. Yeah. I think it's sort of like these are the allowed. These are the font weights that we cover here.

Chris: Yeah.

Dave: Yeah.

Chris: Although, I'm not totally boned up on all this, so maybe there is.

00:30:18

Chris: As a follow-up to that, remember we were talking about the advanced ATTR, the attribute function in CSS?

Dave: Yeah.

Chris: I did end up playing with that a little bit more, and this is reminding me of it.

Let's say you started supporting this (on your Web components, for example), and you just had a data font size attribute. It let people just set the font size, obviously. You plucked that off and used it as the font size in CSS.

But let's say somebody put in font size 2 pixels - or something. You're like, "Well, that's too small." And you wanted to do the same type of thing that Mark is doing here. You're trying to prevent somebody from doing something that's inaccessible.

Well there are ways to do that. You can just use min. You could pluck that value off and say min 12 pixels - or the value that was provided. Now, all of a sudden, they can't do 2. It's just going to get bumped up to 3.

Or you could say in my design system we only do 4 pixel intervals (4, 8, 12, 16) because we want to impart that level of consistency. I don't know if design systems do that all the time but maybe it is.

You could use min and round as nested functions in CSS. You could say min is 12. Then round the value of the attribute to the nearest 4 pixel increment. It wouldn't even be that much CSS. A little one-liner.

I just was playing with that, and that type of stuff works just great these days. So, just know that. Pretty neat.

Dave: Yeah, I still think it would be a good idea to bake your scale in there, like, I want this to be... I have a base font size of 16 pixels. [Laughter] Maybe it just goes text plus 2 - or something. Then it just goes bloop. I add that value to the text.

Chris: Right. More of an API kind of thing.

Dave: Yeah, sort of just like an ATTR or subject, sort of like, "How big do you want it?" I want it plus 2 big. It's like, "Great. I'm going to do plus 2 times 2," or whatever.

Chris: Yeah.

Dave: We just kind of--

Chris: Mm-hmm.

Dave: You play with that scale.

00:32:30

Chris: You could design that system, I think, especially if you just said the value of the attribute has to be the value plus 2, because you could test that as a string and then apply styles based on it. But I think you were talking a little bit more complicated than that where it'd pluck the value 2 off and actually use it somehow.

Dave: Mm-hmm. Mm-hmm.

Chris: Rather than just a random string identifier.

Dave: Yeah.

Chris: I don't know. I don't know. It's clever to think about but I haven't actually done it.

Dave: I think we could build some cool systems is kind of what I'm thinking. It's a very cool tool. [Laughter]

It's funny because when you first learn about content, you're like, "I can do so much." Then one browser supported ATTR a little bit, then you're like, "Oh, my gosh! This is going to be great." Then your hopes are dashed because no other browsers supported it. But now it's back, and now it's better, so I have to almost reboot my 2013 brain to be like, "What were all those cool ideas I had for ATTR way back?" You know?

Chris: Mm-hmm.

Dave: I still think grid area was going to be the best. [Laughter] Just be like, "Header, grid area, header," done. Boom. Poosh-pow. It's in there.

Chris: I know what you mean, yeah. Yeah, I wonder if that works... if that worked already because header is a string.

Dave: It might have. Yeah. I don't know.

Chris: Yeah. I mean you can now declare an ATTR as a string, too.

Dave: Mm-hmm.

00:34:00

Chris: It's weird seeing those angle brackets in CSS, isn't it? Have you seen the syntax for it? If you're plucking off 13 pixels off an attribute, you have to say, "ATTR data font size space parentheses angle backets length."

Dave: Yeah.

Chris: It just looks real weird.

Dave: It's types in CSS is cool.

Chris: Yeah, types are angle brackets. I'm glad that worked out. Cool.

Dave: Yeah. Well, I still love that CSS got types before JavaScript.

Chris: [Laughter] Quite literally.

Dave: Yeah. Don't call it a language, though. That would be silly.

Chris: Mm-hmm.

Dave: Should we do another question here?

Chris: Sure. Go ahead.

00:34:42

Dave: Yochai Glik.

Chris: Yeah, this is a good one.

Dave: "Love the show." Thank you for listening.

"You talked about AI auto-completion. Firstly, I really sympathize with the struggle of surfing between classic auto-complete and AI auto-complete."

Chris: We should stop there on that one just because it's interesting in that classic auto-complete versus AI auto-complete. Fascinating to me. You're typing. You type document dot in a code editor. What do you want? Do you want a list?

Dave: Add ... and listener.

Chris: Yeah. Exactly.

[Laughter]

Dave: Yeah. Yeah.

Chris: Probably. But I don't know. What's going to--? That's probably what I want, but auto-complete in TeleSense has been helping with that for a long time.

Dave: Mm-hmm.

Chris: You don't need AI for this at all. Maybe it's better not to use AI because it's not polluting water.

Dave: It's like predefined strings, basically. There's a structure, right?

Chris: Yeah. Right, and it knows.

Dave: It's a JSON object - or something. Yeah.

Chris: Yeah, it's kind of a solved problem in a way. But if you wait long enough, you're going to get... or perhaps it's getting faster and faster, but it really doesn't take long for most of these AI things to give you some ghost text after you've typed document dot.

What should it do? Should it give me--? I type the period. Do I get the auto-complete menu? And then, because the auto-complete menu is up, it won't offer AI? Should it win that menu? Or should it go the other way around is that it shows it for a second. Then once the AI completion is ready, it closes the menu? Or should they overlap each other and have different completions? For example, tab usually is to take the ghost text from AI whereas, in TeleSense, you have to use your arrow keys and pick which one you want and hit return. It's tab versus return. To me, that's a very interesting distinction. It makes them not fight. It makes them visually fight a little bit, but not fight with key command, so... eh... tricky. Or can you move the auto-complete down so it's not hiding the auto-complete?

Anyway, they are at odds, and I don't know which should win or what, but they do need to kind of coexist, I think, because I wouldn't be like, "Eh, turn off auto-complete. That's no good." I like auto-complete. I think it's a more responsible way to code almost. At least it'll be right, [laughter] for sure.

Dave: Yeah. Right? It's a known attribute - or whatever.

Chris: Right. Exactly.

Dave: Like when you type CSS in Web Inspector, and you type B. It's going to show you background blend mode first. [Laughter]

Chris: Right.

Dave: Instead of background right - or whatever.

Chris: Yeah. Biddy override.

Dave: Yeah, yeah.

Chris: Ones that you definitely don't need.

Dave: Bi-direction - or whatever.

Chris: Yeah.

Dave: Yeah. I think they fixed that. They weighted them - or whatever. Yeah, I think I like that more. I don't know. I am struggling with the latest Copilot update, and it's super aggressive, Dude. It puts all these green boxes and red text. It's like shoving a UI in there.

I'm trying to be chill. Generally, I'm like, "Yep, that's sort of what I was doing." But I don't know. It's kind of a coin flip to be honest if it's doing what I want it to do.

Chris: I know. I know.

00:38:13

Dave: I've had this thing where I type an import. I think surely it's going to find the import. It'll auto-import, so my red squiggly goes away, but it auto-imported from some file that does not have an import. You know? It auto-imports from something weird, and so I don't catch that. That went into my Git commit. Then the CI breaks. Yeah, I've been having that problem regularly to the point where I might put a pre-commit, like build the whole damn project hook in there because I'm just dying. I'm dying because if you lose the CI halfway through because of some clearly--

Chris: Bungled line of code that you didn't even write.

Dave: --bungled import.

Chris: Yeah.

Dave: Dude. Wasted ten minutes of my whole life. You know?

Chris: Yeah. I generally like, you know, start typing the variable name or something and it's like, "Oh, that's a constant declared in your constants package. I'll put the import in there for you." Mostly like it, although in order to get it right, we've really had to do some fancy dancing at CodePen.

For example, we have barrel files - or whatever. When we import a constant, the constants package might have folders in it, constants for eight different areas of the site in the folder, and I don't want to import from @codepen/constants/editor. I want to import from just @codepen/constants.

Dave: Mm-hmm.

Chris: So, there's a barrel file at the top of constants like export star from all these folders - or whatever.

Dave: Everything, yeah.

Chris: Which is nice, but then does VS Code know the right thing to do? Will it respect your barrel file or will it drill down and try to get the import more fine-grained? The answer is: Who knows?

Dave: Who knows? Yeah.

Chris: Yeah.

00:40:00

Dave: We actually want the opposite in ours because we want you to go to a specific file.

Chris: Sure.

Dave: Because it's over-importing when you do a barrel file kind of thing, for us.

Chris: It can be depending on your bundler, for sure. Yeah.

Dave: We are kind of trying to hyper-target, right? It's just turning into a situation where we had to actually add a linter rule last night so that it would not pull from the root. It wouldn't just go /webcomponent.

Chris: Oh, okay. Yeah.

Dave: It would pull from--

Chris: Imports must have four slashes. [Laughter]

Dave: Yeah. [Laughter] All imports must include this hexadecimal code. No, it's... Yeah, these tools are getting smarter and that's cool. It is also trying my patience just one hair at a time. It's just like, "Okay. Oh, boy."

Chris: Oh!

Dave: I'm not going to be mad!

00:41:03

Chris: I talked to... Yesterday, I talked to the team at Augment (it's called). They are a VS Code plugin that's like a Copilot alternative deal.

Dave: Mm-hmm. Mm-hmm.

Chris: But of course, try to convince you however they can that they do a better job. And I don't know. I'm not prepared to just straight up answer that question, but I have been using it for like three weeks. And I haven't found the need to leave it yet. Not that I think everything is perfect, but because Yochai is asking about some of this stuff.

You're just asking auto-complete versus the AI auto-complete. But AI these days, I remember the good old days it was just auto-complete. Now it's so much more than that.

Dave: Mm-hmm.

Chris: Now it's like, okay, you select some code and you ask it to refactor it. But you need to memorize what the key command is for that because it doesn't always tell you - or whatever. Maybe that's a special mode. Or you open it and it says something like, "Add to chat," or something because you need to kick it over to the sidebar, and the sidebar has more opportunity to explain to you in text what's up. That's something.

Chances are those are using different models. The chat approach is going to use a fancier, more expensive, slightly slower model. Then there's starting to be more and more--Augment doesn't have it yet--like an agent mode where it uses an even fancier model and goes slower and tries to reason out things. But then it's saying onto you, like, you better know which mode you're using whereas the auto-complete just uses the cheapest, fastest model they can have because that thing is just getting hammered because, every line of code you're on, it's suggesting stuff.

I do think it's interesting, though. That's why I bring it up on this show. Sorry. I don't want to make it the AI show, but to me it's a lot about the UX of it. Just fascinated by it. I think we've gone too far. I think the dial has turned. There are too many different modes and stuff to think about. It's too much now that there's agent mode and chat mode and refactor mode and auto-complete mode and blah-blah-blah.

Dave: Yeah.

Chris: It's just like, "I can't. It's too much."

Dave: Well, you have to think about it. You make a code editor.

Chris: Yeah. Yeah. Then the context is interesting, too. A lot of them, they just kind of guess the context. But in the case of Augment, I found an interesting approach. Like I said, I'm not sure if I love it or not yet, but wouldn't you just assume that the context is perhaps all your open tabs?

Dave: Hmm...

Chris: But it's not necessarily. You'd have to add those individually or use one of their context helper things to do that. But it's almost always your whole code base. Then you can add more. Have you seen this? You can add more stuff even than your code base.

Dave: Oh, yeah.

Chris: If your code base is just a folder, you can go, "Oh, but also go add my docs to it," or something. You could export all your Notion docs - or something - and then add that to the context. A little bit interesting.

Then there's if you select text, your selection text becomes part of the context, too. It doesn't have to, but I like that. I like being told specifically that it is, or reminded, because I'm like, "Yes!" Chances are if I have text selected and I'm thinking in AI, I'm like, "Please give extra weight to this. I'm shining a spotlight on what I want you to be looking at."

Then I learned that it even factors in where your little cursor is. Then that is extra weight, too.

Dave: Yeah.

Chris: I think all this is very fascinating and not shaken out yet. I think it will take a couple of years to be like, "This is the best way to do all this stuff."

Dave: Yeah. Yeah. No, I mean I think we kind of just... I think it's all evolving still.

Chris: It is.

Dave: And I think you had the explosion, the Cambrian Explosion of, like, "We're all doing it!" "Different ways!" Then you're going to have the opposite, sort of, consolidation phase eventually, right?

Anyway, I do have a meeting, though, Chris. The meeting has happened. I do have to attend. [Laughter]

Chris: Arg! Sorry, Dave.

Dave: We're going to have to finish. Oh, no. But we'll have to finish Yochai's follow-up there.

Chris: Okay.

Dave: Yeah, that was actually a really good question. Thank you. Because that auto-complete versus AI auto-complete is super-different, right?

Chris: They are! They fight.

Dave: That's a different world. That's a different world. Anyway. All right, so I do have to peel. Sorry, Shop-o-maniacs. This one is going to have to cut short.

Thank you for downloading this in your podcatcher of choice. Be sure to shart it up! Then follow us on Mastodon or Bluesky because those are the good ones. And then join us in the D-d-d-d-discord, patreon.com/shotalkshow.

Chris: Yeah. Have a good meeting, Dave. Bye-bye.

Dave: Okay. Bye.