Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk... What? Hey... what? No. Hey. No, you can't come in right now. No. I'm busy. No...

I said hip-hop, hip-hop, you know who it is. I'm the hip-hop dad. I'm rapping to the beat. You've got to get yourself on your feet. I said shoes, socks, brush your teeth. [Laughter] Shoes, socks, brush your teeth. Get out the door. Go to school. Learn something. The golden rule. Yeah. Hey, I'm the hip-hop dad, and I get my kids out the door every morning.

Chris Coyier: Wow! The Sugar Hill Dave.

Dave: Yeah. Yep, Sugar Hill Dave.

[Laughter]

Dave: The hip-hop dad. He's very popular in my house. [Laughter]

Chris: Oh, I bet he is. Oh, my gosh.

Dave: Get out of here. You can't come over here anymore. Sorry. I don't know what that guy is doing. Anyway--

Chris: I wish I had a cool dad to come visit in the mornings.

Dave: Yeah. Sometimes you've got to motivate your kids, and he shows up.

Chris: [Laughter]

Dave: Hip-hop dad comes over, and the kids, just kind of out of brute force, they just want to get away from you, so they put on their shoes and socks and get out the door. So, there you go.

00:01:36

Chris: Good. I see you've been... I see you've been shamed into being a cooler dad from Bandit.

Dave: Oh, fricken' Bandit. Let's talk about Bandit Heeler.

Chris: [Laughter]

Dave: From the TV show Bluey, the kids' animated series, Bluey. I don't know if you feel it, but I feel like he sets a high standard for being a dad and it is impossible.

Chris: He does. He does.

Dave: To just be "yes and" at every moment. [Laughter] But he's also very real in that he is laying on the couch most of the time. [Laughter]

Chris: [Laughter]

Dave: Staring at his phone.

Chris: Right, which makes him relatable.

Dave: Yeah.

Chris: And he's got the jokes, so you're like, "What a cool guy." But at a meta-level, this, like, "Yeah, I've got a $5 million home at the top of a hill, and I'm obviously successful in my career as, like, an anthropologist or something and have just absolutely unlimited time and energy to play every single game my kids think of. And they absolutely adore me for it.

To the point where, like, you know there's the movies episode. They're like, "Oh, Bluey has never seen a movie," or whatever. Like, "Oh, my God. Your kids are so perfect, they don't even look at screens."

Dave: [Laughter] They only have wood blocks in their house.

Chris: [Laughter]

Dave: They're....

Chris: I know.

Dave: Australian children. They're perfect Australian children. Ugh! We're never going to get there. Anyway, they have imaginations. They don't just yell at me about Roblox.

I want to see the Bluey episode where Bluey is like, "Can I have 25 Robucks? Can I?!"

[Laughter]

Dave: Happy Easter! What do you want? "25 Robucks!"

Chris: Oh, my God.

Dave: Are you sure you want to put a bunch of money into, like, digital hats? "Yes!" So, anyway.

Chris: I have one nephew now who is just old enough to have a phone, but I think under limited circumstances. But anyway, just last night, I got a pack of screenshots of the Amazon app of just stuff that he wants.

Dave: There you go.

Chris: [Laughter] He's just using--

Dave: Uncle Chris will come through.

Chris: That's how he's using his phone.

Dave: Yeah.

Chris: Yeah, totally.

Dave: Yeah. Yeah.

Chris: And it's like this cardboard finger skateboarding setup.

Dave: Yeah. Heck yeah.

Chris: Which looked pretty cool, and you know. It was all pretty reasonable. I assume his parents okayed it because it's nice to actually know what your nephews actually want rather than just winging it. You know?

Dave: I mean, yeah. I think, for my nephews, they're very great kids. But it was just like, "Do you want a Best Buy card?" They're like, "Yeah, I do." [Laughter] But it's like they live in a small town. They don't even have a Best Buy. They have to drive 30 minutes to get to the Best Buy. You know?

Chris: Hmm...

Dave: So, it was just like, do you want this? Is this helpful? But they can... I don't know. The older the kids get, the more they actually to apply their own money. You know? They become very motivated by that. Yeah.

00:04:44

Chris: Well, I've got a couple of things to throw by you. Let's see.

Dave: Let's go.

Chris: One of them was, I was thinking about cascade layers a little bit, which I'm hot on the existence of them in CSS and medium cool on the, like, yeah, but I don't. I don't have... My brain isn't reaching for them quite yet, even though I get it. But I just am waiting for the perfect use case.

But I do think there is a perfect use case, which is basically Bootstrap. Almost, even as hosts of this show, how many questions and crap we've heard about Bootstrap over the years. And we know for sure that it's used in just a heaping pile of production stuff.

Dave: Yeah. Yeah.

Chris: You know it's popular, and for good reason. It's useful. You just use the classes it tells you to use whether your site is extremely beautiful or not - maybe not - but it really gets the job done and not every site needs bespoke design. So, rock-n-roll, right?

But the horror stories come in (in front-end development) when it's like, we're trying to override Bootstrap.

Dave: Mm-hmm.

Chris: That's always what it is. You know?

Dave: Yeah.

Chris: And they have a customization story for Bootstrap if you go with the grain of whatever they tell you to do exactly.

Dave: Mm-hmm.

Chris: Like download the Sass project and adjust the Sass variables - or whatever. But not everybody uses it that way. The Web is a big place. Whatever. There are plenty of developers that have been in this situation of trying to pile on.

Bootstrap is already there. All I can do is add CSS to the party.

Dave: Mm-hmm.

Chris: And I need to fix it. So, I think if you took, in that situation, wherever you load Bootstrap, you just add a couple of extra characters to that (if it's an import statement, that is).

Dave: Mm-hmm.

00:06:39

Chris: Unfortunately, this doesn't work with link tags yet. But maybe you could convert to an @import situation in a build process or something. @important, and then, at the end of that import statement you just say layer()bootstrap. Give it a name.

You get to make up the name. Call it framework - or whatever.

Dave: Mm-hmm.

Chris: Now you've immediately put the entirety of Bootstrap (assuming it's bundled into one file) into a layer. Now you have the choice to make another layer on top of that that will automatically win.

Dave: Yeah.

Chris: Every fight with Bootstrap, you win, regardless of specificity. So, I was just dunking around with it, and I was like, "Man, that is just great." [Laughter]

Dave: Mm-hmm.

Chris: I have a Pen where, at the top of it, I just import Bootstrap from a CDN, say layer framework, and then grab some, like, Bootstrap-y HTML, div class equals card, div class equals card body, H5 class equals card title, P class equals card text. You know? You put this on the page and it makes a real nice looking card, a real nice little button at the bottom of it.

But then you're like, "Hmm... I don't like the amount of spacing," let's say, on that card title between the H5 and the P. Now that Bootstrap is in this framework layer, I can just write H5 margin-bottom 2 rem instead of one - or something - because that's what this override needs.

Dave: Yeah.

Chris: That H5 selector, the wimpiest of all selectors in CSS (just an element selector) will win over Bootstrap. No fighting. No fighting necessary at all. You don't have to double the class. You don't have to make sure it's later in the source. You don't have to add an ID. You don't have to double the class - I don't know.

Dave: The existence is, like, yeah.

Chris: It just automatically wins.

Dave: You predefine.... You know what I'm missing from, like, hierarchy? That came out in layers. I'm not saying it's wrong. I think everything is there for a reason. Smart people worked on it. But what's missing is I wish I could just spread the rest into the zero layer and then I write an important layer. Then my styles are always important.

I wish there was a way to transport existing stuff to the default layer. Does that make sense?

Chris: It does.

Dave: Right now, unlayered stuff is the most powerful. Unlayered stuff is the most....

Chris: Yes, and that felt like a last-minute switcherino because, at one point, I had in my brain, like, "Ooh, yeah. Layers are more powerful. So, anything that you layer up, you can layer on top of what you're already doing," and that made some kind of conceptual sense to me that I'd have this superpower above all existing styles.

Dave: Mm-hmm.

Chris: You can kind of still do that. You just have to... Yeah. Like you said, you have to be really explicit. You'll have to wrap it in a layer that is intentionally the top layer - or the bottom layer, rather, because those unlayered styles are the most powerful.

00:09:54

Dave: Yeah, and so it's not wrong. It's just, yeah, those unlayered styles are the most powerful. Guess what I have a lot in my existing application.

Chris: Unlayered styles.

Dave: Unlayered styles.

Chris: Exactly.

Dave: So, they're in components. They are in files. They're in Sass partials. I think there is a future here where I do something totally different.

Chris: Yeah.

Dave: You know I'm doing nesting without Sass, and I just have giant CSS files again or something. I don't know. I still need partials.

Chris: That's why having a layer thing on the link tag would be good because if you're trying to solve that thing, it'd be like, "Well, your CSS is linked up somewhere." Right, Dave?

Dave: Yeah.

Chris: Just put layer equals lowest.

Dave: Old. Yeah.

Chris: On that and then you're kind of good to go. Okay, so yeah. It's whatever. It's a little bit of semantic dancing in order to get that to work.

Dave: Yeah. It just creates a situation where I, as an author, cannot... I cannot play with layers. I cannot slowly enter layer land. I have to kind of go all in with layers.

Chris: Well, worse is, think third-party. You have no choice. If you're linking third-party, they're unlayered.

Dave: They're unlayered right now, and so that's where I just wish I could be kind of like - I don't know. I don't think anything is wrong, but I do wonder.

The nice thing about container queries, the nice thing about media queries, the nice thing about lots of @ properties is I can do them and know they're fail. I can progressively enhance into them. Right? If I use layer right now, it is a progressive enhancement.

Chris: Yeah.

Dave: Those styles would just show up for browsers that understand it. But I have authored weaker styles. That's my only critique or pain point because I have a situation right now where spacing classes right, and then you're like, "I'm just going to set a default rhythm, a gap of like one rem. But on this certain one, it's five rem."

We've been overhauling the entire spacing of Luro recently. It looks real nice. But it's been this battle, and I'm trying not to use important classes on all my spacing because I'm just like... I don't want to be that aggressive. But I'm thinking wouldn't it be cool. Maybe I could put my spacing rules in a default layer and then my overrides or my specific ordinal, in-line block end or in-line end, that's in the more important layer.

I'm describing this terribly, but I basically created a layer called important. I created a layer called default.

Chris: Yeah.

Dave: And I create a layer called overrides, and overrides would always win. Maybe I need to think about it that way and start authoring that way, but it's hard.

Chris: You do have these in production, huh?

Dave: Yeah. Just today, shipped out - or last night.

Chris: Oh, my gosh. Really? Nice. And no reports, no problems? [Laughter]

Dave: Uh... there was a... [Laughter] I stayed up late to fix a bug where something was breaking on a container on a few pages, and I just was like, "I thought... I know I fixed it."

You know that feeling where you're like, "I fixed it, and I think it just got stomped in a rebase or something"?

Chris: Yeah. Yeah. Which can actually happen. Yeah. I have kind of a two-computer problem, kind of the work one and the laptop one.

Dave: Yeah.

Chris: Somebody was like, "I thought you--" or was like "Why isn't this done on this PR?" I'm like, "I did! I did that!" But I'm like, "Ooh, is it just sitting as a commit I didn't push on another computer or something?" Ugh! Ugh!

00:14:12

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Frontend Masters. That's frontendmasters.com. Hey, Dave, they're pretty good, right?

Dave: Oh, I'm a big fan - big fan.

Chris: Heck, yeah. They're super. They just run a good business over there. Lots of good learning material.

One thing you should do is click that learn link in the header. You'll be taken to their learning paths area. Just /learning at Frontend Masters.

And this is what I was so envious of when I was running CSS-Tricks is that I never had course material that was like, "Start here. Do these things, and it will train your brain forward in this arena." CSS-Tricks was never good at that. It was more like a newspaper, just somewhere where you landed via Google or whatever. This is better than that.

[Laughter]

Chris: This is learning done right because there's this big SVG circle that fills out the percentages of finishing a course. It gives you that satisfaction of actually learning something, right?

Dave: Yeah. The way my brain works is it's so much easier to follow a course, like end-to-end, versus piecing together 52 different blog posts and YouTube videos and stuff like that and hoping I understand React or something like that. That's what I really like about Frontend Masters is it's taught by experts - everything like that.

Chris: Yeah, man.

Dave: And it's great. And one of the most common questions on ShopTalk Show is, "What do I need to learn next?" or whatever. Well, there's your answer. There are 10, 15, 20 courses that you can just go through and just A to Z it. Go for it.

Chris: Yeah, dude. Frontendmasters.com.

[Banjo music stops]

00:16:00

Chris: There was a comment you made that was my favorite thing last episode, I think, about the CSS nesting. You were like, "Don't tell us you're going to pave the cow paths and then not pave the cow paths!"

Dave: Yeah.

Chris: With the thing, which was just a funny thing. There's no progress on that necessarily, but it made me think about cow paths and stuff again.

The metaphor there, listeners (if you're unsure), is kind of a Web standards thing that gets tossed around that says, "Hey, if you want the Web platform to do something, just do it without the Web platform," i.e., make a preprocessor, make a library, Polyfill it, PRolyfill it, whatever. Do one of these things.

If it's popular, the Web platform can then step in and say, "Ooh, okay. Clearly, a lot of you are doing this. We're going to codify it. We're going to make the Web platform like this."

There are all kinds of examples of it, but a big one is jQuery and how pretty much everything from jQuery has made its way into the platform to the point where you don't really need jQuery anymore. Everybody knows that one, but it's happened in other ways.

We obviously needed variables in CSS. Preprocessors kind of did that. Then the platform comes in and says, "Hey, we can do everything, almost everything that a preprocessor variable can do. But we'll make them a little bit better." That one is a little iffy because they didn't quite give us everything that Sass variables can do. But they did it better.

Dave: They did it better, and so I will give credit.

Chris: Yeah.

Dave: At first, I was just like, "No, idiots. Dollar sign." [Laughter]

Chris: Right.

Dave: I probably didn't say that in the show because I was trying to have friends. I'm way past that now.

Chris: Yeah.

Dave: That was ten years ago. [Laughter] But it was like, "No, idiots. Dollar sign. Just make it like Sass." But it is better, so I will give you that.

I think var-- is a little kludgy, but whatever. it works.

Chris: Yeah. It's not my favorite syntax how you have to wrap the var thing around it. But the saving throw there is that because it's a function then you get that cool comma syntax at the end of it for a fallback.

Dave: Yeah.

Chris: That's actually decently powerful, so I'll take it.

Dave: I'll take it. Yeah, I get the reason.

Chris: Right. Right, right.

Dave: But dollar, dollar. That was the right answer. But this is good. But I think the way they cascade is actually super cool.

Chris: Yeah. I mean that's just amazing. The JavaScript APIs are there for it, and the performance is good. There are just a million things to like about it to the point where the usage, I assume, is pretty fricken' high. I think it's entered developers' brains properly.

I wish there was kind of a measurement you could do for that. I think layers is going to be slower on that.

Dave: Yeah.

Chris: Just because it's not as clear of a use case. There's a very clear use case that's just like, "We put the word red a lot--"

Dave: Mm-hmm.

Chris: "--our brand color, and I don't want to type it. I want to change it in one place." It's just very clear.

But nesting, the cow paths were paved there, too. Then the only reason we're not getting identical Sass nesting, which doesn't have the same concerns, really. Cascading isn't relevant there, in a way.

Dave: Mm-hmm.

Chris: It's just nesting. It's just, "Expand the selector." It's fine. But there was some kind of infinite look ahead problem - whatever - so it couldn't happen.

Maybe they wanted to pave the cow path but couldn't. But I don't know.

00:19:43

Dave: Yeah. I think the only thing we lost was the BEM style.

Chris: Right.

Dave: Like card.

Chris: Which we've been told that will never work, ever.

Dave: Yeah.

Chris: That one is just out.

Dave: You have a card at the top and then nested, you have and--left - or whatever.

Chris: Yeah.

Dave: That's not going to exist. And I'm okay with that. I kind of hated that.

Chris: Yeah.

Dave: Big opinions Dave here. I kind of hated that.

Chris: I hated ... together.

Dave: It's not grep-able. I cannot find it in my codebase. That therefore becomes unmaintainable code, in my humble opinion. I'm sure you have a trick.

Chris: Exactly. It's gone, and the only advantage to it at all was that it kept specificity at that one class-level layer.

Dave: Yeah.

Chris: And I have generally been a fan of keeping specificity flat, so I get the intention there. But I'm just starting to care less about that. I certainly care more about maintainable code than I do about most other things.

Dave: Yeah. I'm curious when people... I mean we have to wait on Firefox, I think, right? I'm curious when it will feel normal because it didn't feel normal to write CSS variables until, I would say, three years ago. It didn't feel normal, right?

The codebase, Luro, the refactor on spacing I just did, I'm using lots of variables now: type variables for our type ramp, and then I'm using some spacing ramps, too. Those are generating a bunch of classes and stuff like that.

I didn't do it in variables, originally, because it was painful or just maybe it doesn't work in Edge or something like that, and that's all changed in the two years or whatever this codebase has existed. We didn't even use Sass variables because, in Vue components, you have to import your vars file. [Laughter] I just was like, "This is stupid. I'm just going to write one rem." We actually have a lot of duplicate values and stuff like that.

Chris: Hmm...

Dave: Yeah. I don't know. The variables story has been cool to see. I'm just doing it very nice. I'm refactoring, but I'm looking forward to that day when I can just be like, "You know what? I'm just going to delete the Sass transpilation here in this step, and this is going to be a pure CSS thing. I think we're close. I don't know. Right?

Chris: I think so. Yeah, scrollbar-gutter.

00:22:30

Dave: Let me check on our old drunk friend Firefox real quick. [Laughter] Can I use... When is nesting showing up in Firefox?

Chris: Um... Good question.

Dave: Ooh, behind a flag. No way.

Chris: Oh, that's great. Yeah.

Dave: No, it's not. It's not there. Sorry.

Chris: You know this is one of those things where I kind of heard that browsers had secret builds of this stuff way, way ahead of time because people have wanted nesting since like 2008. You know?

Dave: Yeah.

Chris: It's not like a thing.

Dave: Yeah. It's behind a flag in Edge, weirdly. It's in the new 16.5 Safari, which I think... Is that the new one that's out right now? Then it's in the 1.13 build of Chrome.

Chris: Nice. Yeah, so soon. There's plenty of stuff I want to see them pick up, but I am just going to cheer them on because every time I've thought, "Oh, we'll never get that in Firefox," they have delivered over the last few years, so let's just keep delivering. Shall we? That sounds great.

Dave: And they do some fly-by-night deliveries, too. They kind of just say, "Cool. Everything is here."

Chris: Yeah.

Dave: Maybe it'll show up.

Chris: Right.

Dave: Yeah.

00:23:45

Chris: I brought all that up to rehash again because of the cow paths thing. I wonder what you think about this as a cow path or at least... yeah, yeah, as a cow path, I guess. It's this concept of block links, meaning like I brought up with the Bootstrap thing - or whatever.

A card. Fricken' so many websites have a card. I know you've had thoughts about cards over the years. It's just a little website - or whatever. [Laughter]

Dave: It's a baby website, right? You put a whole little baby website. Same with modals; baby websites.

Chris: But what I'm getting at is the linkable cards where, for whatever reason, the business requirement (if I can call it that or at least that's what's being talked about in meetings) is that you can click anywhere on the card in which to go to the link. Now, this was exciting when HTML 5 dropped because, for the first time in a while, it was semantically okay to wrap whatever you want in an A-tag.

Dave: Mm-hmm.

Chris: So, you can wrap an image and an H3 and a paragraph all together and put it in a link, and people did. We were like, "Oh, cool. Solves that problem. Thanks for block links."

Dave: A lot. Yeah.

Chris: You could even make the A itself display block, so you wouldn't have little gaps in the clickable area.

Then accessibility. People got... It's not the people's fault. It's that what happens accessibility-wise to that is if you tab to the link or use some other technology that shows you the text of the links on the page, every bit of the text that's in there is the link text, which will be read, which is too much. Usually, too much. It's too much.

Dave: Yeah. Yeah. The best way to put it is noisy, right?

Chris: Sure.

Dave: You want to see the link or go to the link for the - whatever - cool T-shirt, and you're getting a whole recipe read to you - or whatever. Yeah.

Chris: Including the price of the T-shirt or whatever. That's not necessarily something you need to know, and so I think it's kind of been a no-no.

Dave: Mm-hmm.

Chris: And I don't hate that, as general advice. Okay, you can't wrap the A around everything. Maybe you could put an ARIA label around it, but then you're probably wiping out other information that then becomes inaccessible, so that's not a solution to it.

Dave: Yeah. ARIA label is tricky because it's almost in the... I bet we're head to it enters the "do not use" category. But I still use it - full disclosure - but the reason being is if you're on Dragon Naturally Speaking, which is a text-to-user interface, like text control or voice control, so I could say, "Click T-shirt," and it would click it. But if you don't know the text inside the ARIA label because it's invisible to you (the person navigating with text), how do you click text? You're like, "Click T-shirt"?

Chris: Yeah. Okay.

Dave: Maybe there's a way to be like, "Click first element in row of products," or whatever. But I don't think that's possible yet.

00:27:08

Chris: I think my number one use case is kind of repeating the text that's in a button, but there's other junk in the button.

Dave: Yeah.

Chris: And I'm trying to wipe out the other junk. [Laughter]

Dave: Right.

Chris: Another way to do that is probably like ARIA hidden on the junk. But sometimes it's harder to do. Anyway, it probably should be in "don't use" territory. Okay, so that's not a solution.

I've seen a clever one where if there's one anchor link inside of the card, one of the things you can do is kind of position relative the card and make a pseudo element on the link cover all of the space of the card.

Dave: Yep.

Chris: Now it's just a link inside. The link is just whatever the link is, and you can have it have meaningful text on it. But the clickable area has become the whole card.

I think that's a relatively clever solution if everyone involved is okay with wiping out almost the ability to select text as you'd expect to select text.

Dave: Mm-hmm. Mm-hmm.

Chris: Maybe it's a Chris Coyier hangup, but I hate that. [Laughter] I just hate it when you can't get text correctly.

Dave: Right. Right. Yeah because it can... I guess, if it goes over it, you'd maybe have to, like... Yeah. Do you put it under it and pointer events none the card? Yeah, there are some downsides, or that would be a particular downside.

Chris: Yeah.

Dave: I too am a highlight the entire fricken' page, "highlight as I read" person, and so that would be--

Chris: Even as a fidget thing.

Dave: I'm a fidgeter, yeah.

Chris: But yeah. It could be thought of, I think, as an accessibility problem, too, because people need to copy text sometimes to use in other contexts.

Dave: Yeah.

Chris: And who are you to decide they can and can't do that? Now, it doesn't totally block it. Depending on the white space around it, you can kind of hop in there and get what you need to.

Dave: Mm-hmm.

00:29:10

Chris: Now another consideration: Is there just one link or do you want the whole card to be clickable to one place, but there are a couple of other links in there that the clickable area should just be where they are?

Dave: Yeah.

Chris: That's still solvable with some Z index to pop them up above a full area and stuff.

Dave: Generally, you shouldn't have an interactive element inside an interactive element.

Chris: Okay, so it's breaking--

Dave: That would be an ARIA or validation failure.

Chris: Hmm... Interesting. See how many... We're not even done with the list of trouble yet. There's so much trouble.

Dave: One approach I do is I make the image clickable and the title clickable, so I'm double linking, so I'm probably killing my SEO.

Chris: Right.

Dave: But I've said, "No, this thing is clickable, and this thing is clickable." Very explicit. If you want to put little actions, those are also clickable.

It's not the best either, right?

Chris: Mm-hmm.

Dave: Yeah.

00:30:03

Chris: So, I've seen a couple of decent solutions to this. I wouldn't say they're perfect or anything, but there's one where it uses some JavaScript in the text selection API--

Dave: Ooh...

Chris: --to know if text is selected. And if text is selected, then not follow the link, like prevent default on the link - or something like that.

Dave: Mm-hmm.

Chris: Then there's a Haden Pickering one where he has kind of a set timeout, essentially, that can test what your intention is on clicking the card.

Dave: Mm-hmm.

Chris: Two little kludgy JavaScript solutions to the clickable card thing, and so this is what I mean by cow path. It might be a little difficult, but this is a need of sorts. And so, is it best left to, "Well, there are too many different requirements for the card, so we can't offer anything," or is there something the Web platform could do to help with this all-clickable situation?

Dave: I mean the oldest is LI on click, window.location.

Chris: Sure. Yeah. Yeah. Is that okay? Because if there's an anchor link inside anyway, like a smaller one, it's not harming an assistive technology user because they can still get to that link.

Dave: Yeah, I mean it's technically a progressive enhancement, so maybe it's okay. I mean you still have the double link issue, right?

Chris: Yeah, but it's not really a link, you know, like a Web crawler wouldn't see it.

Dave: To make it a full link, you would need to tab index. You'd need to support enter keys and not just click - or whatever.

Chris: Yeah.

Dave: It's like the div is a button issue, which everyone likes to complain about.

Chris: Right. Right. I don't mind that as an enhancement kind of thing. Although, the fact that it's a surprise isn't great. You'd probably have to do styling and add some affordances, as it were, to make it seem like, "Okay, yeah. This is going to go somewhere when I click even in this white space up here.

Dave: Yeah.

Chris: It doesn't help the text selection thing either.

Dave: Mm-hmm.

Chris: Now I've gone to select some text and, as a matter of fact, I might click, drag, select the text, unclick, and then, whoop, I'm gone.

Dave: Yeah. Yeah.

Chris: Because that counted as a click. And you're like, "Oh, come on!" You know?

Dave: Yeah.

Chris: That's where I think the text selection API comes in. If I click, unclick, and I don't have any text selected, fine, go to the link. But if I click, drag, and I can tell in JavaScript that there's text selected, then don't follow the link.

Dave: Yeah. Yeah. Man.

Chris: Tricky.

00:32:48

Dave: I think there should be something. One thing that gets me, and I think it's the same issue but it's slightly different, is on Amazon. I still author names a lot, but often they're in a link tag, like on Amazon's little book page. And so, then it opens up the author page, and then I'm in the author page, and I can steal the name, but it showed me a card first, and then it showed me the author page. Then I have to go to the other--

Sometimes, it would just be more useful if I could just steal the author name. [Laughter] But yeah, I think you're right. It would be - I don't know.

I think there's a need to define these patterns and make more elements. That's where I'm going to live.

Chris: That's what I was going to say is this could be a pretty good Web component.

Dave: It could be a good Web component, and that's probably where it should start is let's solve this in the best possible way as a Web component. Shop it around.

Chris: Well, and it can be opinionated, too. It can be like, "Oh, well, we do the one where it uses the pseudo-element because we know what the tradeoffs are, but that's what this Web component does. So, if you don't like what this Web component does, then make a different Web component." You know? It doesn't have to solve everyone in the world.

Dave: It's stupid that we all have to go through and copy/paste these from the blog posts and put these in the thing. It should just be Web components. There should be a lot more--

You know what gets me is when somebody is like, "Hey, this is the accessible dropdown. This is how you do it." I'm like, "Okay, let me see." All right, you're using jQuery 1.2. Great. [Laughter] That's not going to work for me, so either I have to rewrite all your jQuery or, "What, you're using...? It's 600 lines of vanilla JavaScript? Cool. Now I've got to think about where this copy/pastes and what class names you used. And I have to put that in my thing."

Chris: Yeah.

Dave: Web components. If your solution, if your blog post solution doesn't come with a Web component, why? Why did you do that?

Chris: Mm-hmm.

Dave: It doesn't go anywhere. It goes less places is maybe what I want to say. Your solution goes less places if it doesn't have a Web component attached to it.

00:35:18

Chris: I like it. Yeah. We know that HTML is kind of the slowest moving of all the specs and such, and we've really felt that over our careers. It was interesting to see (relatively recently) the search element get dropped. It was a little light on news, I thought. I think the point is that you wrap a search control around it.

Dave: Yeah.

Chris: I think it just has an implied ARIA role search on it, which you should put on the search element if you use it now because it hasn't rolled out to all browsers that it would have that role, but eventually you'll not need to put that role on it because the role will be implied, which is not search results. It's just the search form itself.

Dave: Search forms specifically, yeah.

Chris: Right, so it's a little tricky there.

Dave: It was tricky, too, because we have input type equals search, I think, actually, right? And it gives you a little--

Chris: It does.

Dave: --querier cursor thing.

Chris: Used to get a magnifying glass or something in Safari.

Dave: Yeah.

Chris: I think that's gone now, maybe.

Dave: That's probably gone. But the thing was you had to actually wrap it in a form and then put role equals search on the form.

Chris: Oh, because you didn't get that role for free.

Dave: Because you didn't get that role for free. Now I think you have to wrap the whole form in the search element, which is a smidge like, "Oh, wait. We changed it."

Chris: Well, somebody made an HTML change, so wow. [Laughter]

Dave: Yeah, and HTML got changed. We should celebrate it. I do think that's a trend of, like, we probably just need to take these ARIA roles and make elements like tab, tab list, and blah-blah-blah.

I hate to be... [Laughter] You know list box, combo box. Do you know the difference, Chris? I sure don't. We should probably just have an element for it. [Laughter]

Chris: Mm-hmm.

Dave: They're working on select menu to fix the select box to make it stylable. Popup is not an element. It's going to be an attribute.

00:37:13

Chris: I have something stuck in my brain where a cite, blockquote and cite.

Dave: Mm-hmm.

Chris: I was afraid of it for a while because I heard that you're not supposed to put, for example, "If you want to pave the cow paths, pave the cow paths" - Dave Rupert. The text would be the blockquote, and then I'd say, cite Dave Rupert.

That's wrong. That's not a citation or something.

Dave: Yeah.

Chris: I never really understood why or whatever. Then at some point my brain just said, "I literally don't care anymore. That's what I'm putting in the cite element."

Dave: Yeah.

Chris: Just forget it. I don't get it. Then to see that that's basically what WordPress does. They have a block thing in their block editor. When you put... You can put whatever. There's a UI for it. You put the text and then, in smaller text in the editor itself, it says, "Put a person that you're quoting," or whatever, and it just comes out as a cite. I'm like, "Ah, if they do it, I can do it."

Dave: Is it inside the blockquote or is it outside?

Chris: I think it's inside.

Dave: Good. Yeah.

Chris: I think it's inside.

Dave: Just dirty, break all the rules.

Chris: Jam it in there.

Dave: Yeah.

Chris: That's how I roll.

Dave: Yeah. No, I mean that's how I do it, too. I think they updated the definition of cite to sort of be broader. But I think another one was details. Sorry, DL, the definition list. You had to DT (definition title), DD (definition definition), and actually, now you can wrap your DD and DT, DT and DD, in a div or something like that. You can have not arbitrary elements inside a DL now, which helps with styling. They've expanded that.

Chris: Just the.... Not a UL or OL, unfortunately.

Dave: Yeah. Yeah. See. What are we doing? But anyway. Yeah.

Chris: [Laughter] I know. It's pretty weird, but I get there's less reason for it there or that would break up number styling or something. I don't know.

Dave: Right. It would probably actually cause a lot of Web pages to start behaving differently. [Laughter]

Chris: Yeah, it might.

Dave: Very poorly coded pages might suddenly start working or something.

00:39:29

Chris: Speaking of a little accessibility thing, I've read... I wish... If you remember it, tell me because I want to quote the source of it. It was kind of like, "Here are a couple of accessibility things you should know," or it's from somebody that heavily uses a screen reader, "Here are some things that are annoying for me."

Dave: Yeah.

Chris: One of them was emoji lists.

Dave: Mm-hmm.

Chris: It was like, "Could we stop with the emoji lists where ever bullet is a different emoji?

Dave: Right. Yep.

Chris: Which it got stuck in my head because I see it a lot in particularly... I'm pretty much off the Twitter, but at the heavy times there, that was the productivity grifters or whatever they were. That was a mandatory thing. But even you see it in PRs.

Dave: Yeah.

Chris: Public ones, anyway, and stuff like that.

Dave: Change logs. Yeah.

Chris: Yeah.

Dave: Everything.

Chris: I've even seen... You can even ask ChatGPT to do it. Make a bulleted list and use a different emoji for each bullet - whatever.

Dave: Mm-hmm.

Chris: I think I saw Simon Williamson thing where he uses it for that. No! It was somebody else. It was Paul Stimado. Do you know that guy?

Dave: Oh, yeah. Yeah. Yeah.

Chris: He wrote a browser extension that, on any given article, you can just click a thing and it'll send it through ChatGPT and produce a summary for him with emoji bullets or whatever. Now that's fine because that's just for him.

Dave: Yeah. Yeah. It's his own curse.

[Laughter]

Chris: Yeah.

[Laughter]

Chris: But the point is it's obnoxious when you're going through a list that it's just--

Dave: Yeah. I mean if you think about how it reads, I recommend Edge has this read-aloud thing. You can listen to your pages.

Chris: Mm-hmm.

Dave: Yeah. It's like, "Eyeballs, new spacing updates." "Fireworks, fixed bugs."

Chris: Yeah.

Dave: "Green insect, fixed bugs."

Chris: That's not adding a lot to the party, I'm afraid.

Dave: It adds noise. It's a signal versus noise problem, right?

Chris: Right.

Dave: And it adds a lot of visual signal, but it adds a lot of ARL noise, I would say. Right?

00:41:38

Chris: I will say, though, if you really wanted to do this and really not be annoying, and you had CSS access to the page that it's being rendered on, there is a CSS thing called @counter-style that allows you to set up what symbols you want to use for a list.

Dave: Oh!

Chris: A list. You just make up a name like you do with @keyframes, right?

Dave: Yeah.

Chris: @keyframes-dave. You can write @counterstyle-dave. Then in the list style, you say list style dave - or whatever. Then you put a symbols property in the @ property of counter style and put whatever emojis and crap you want in there.

I want to test this. I haven't done it yet. I assume they're largely ignored by a screen reader.

Dave: Mm-hmm.

Chris: You go to that list, and it's just like they're a bullet or a number or whatever. It's not going to read "eyeballs," so I'd like to try it.

Dave: Right. Right. I would assume it works the same. Yeah. I guess you'd have to have a very consistent system or art direction, I guess, to do it.

It supports images, too. I didn't know that. That's cool.

Chris: I've gotta. Now that we're on the CSS banger thing, I've got one for you for Luro.

Dave: Ooh... All right. Hit me.

Chris: You don't have to use it. But if you want to, you can.

Dave: Go for it.

Chris: There's a sidebar on the left in Luro and the content on the right. Tried and true. There are little arrows for expanding and contracting.

Dave: Right. Yep.

Chris: The different sections of Luro that you can navigate to. Well, also, if you have a short enough screen, it'll be a scrollbar, which is the right thing to do because, otherwise, how would you see the rest of your thing there? It has overflow Y auto on it.

Dave: Yep.

Chris: You can chuck on that same element scrollbar gutter stable.

Dave: Oh!

Chris: And if you put that on there, it won't move the little stupid arrow when the scrollbar appears and disappear.

Dave: Oh, it doesn't indent? Oh, interesting.

Chris: Just a little bonus because, without that, the little arrow moves to make room for the scrollbar, if it's there, and then not there.

Dave: Yeah.

Chris: So, you have to be in that perfect situation where expanding one opens a scrollbar. It's just nice. It's almost like one of those things that should be in a reset stylesheet because you're like, "Yeah, be stable." Who wants the janky shift?

Dave: Sorry. What's it called? It's scrollbar what?

Chris: Scrollbar-gutter.

Dave: Gutter stable.

Chris: Stable. Yeah.

Dave: Oh, my goodness. Oh, my goodness.

Chris: It's a nice one, isn't it?

Dave: Oh, no. I've done something. Oh, that's beautiful! Oh, so it kind of just pretends there's a scrollbar there at all times, huh?

Chris: Yeah. That's the downside.

Dave: Okay.

Chris: If you prefer the design kind of hugging closer to the outside, that's not possible.

Dave: But we could plan for this. We could just shorten the padding.

Chris: Yeah, you could.

Dave: You pretend there's always a scrollbar there. You just have no padding right, basically. That's awesome. [Laughter] I'm sold.

Chris: [Laughter]

Dave: I didn't know about that one. Yeah. That's cool.

Chris: I can't remember how that crossed my path, but it's been on my brain. And then I was in Luro, and I was like, "Oh, I'm going to see if that works," and I just did it in dev tools and it worked. I'm like, "Ooh, I'm going to tell Dave."

00:45:09

Dave: It's funny. That's in our sticky header footer component.

Chris: Yeah. Yeah.

Dave: But the footer is not sticky on that one. But it could be. It probably should be. But it's funny how easy this stuff is getting. You used to have to do millions of miles of JavaScript, and now it's just a sticky header footer. Cool.

Chris: Yeah. You've just got to know about it.

Dave: The top one is sticky. [Laughter] Position sticky top zero. It's getting so incredibly easy to sort of do this stuff.

I'm looking at this CSS, literally, that we wrote two years ago or so. We prototyped a lot and built out stuff.

Chris: Mm-hmm.

Dave: I'm looking at it now, and I'm just like, man, half of this doesn't need to exist anymore. We could just delete half of this.

It's so easy to get this stuff going now. There's still work to do, obviously, but CSS is getting so easy now.

I will say part of a problem is it's so easy to do, like, display flex gap ten pixels.

Chris: Mm-hmm.

Dave: That we overdid it. And so, we actually took a step back when we wrote two components of V stack and an H stack, like horizontal and vertical stacking components.

Chris: Yeah.

Dave: Just to do gap in a vertical stack. It's like V stack size small. Rather than people just making up sizes, we have a very set of predefined sizes.

Chris: Yeah.

Dave: That's been a little revolutionary for us. I think you're going to have some kind of container anyway around most lists of items.

Chris: Yeah.

Dave: We're using a Vue feature where we can change that into an element. It's the Vue component-component. We can change that into a header element if we want - or something like that. But it's added so much consistency.

It's not on every page, but it's on most pages right now. Man, you feel it. The difference between a page that is, like, when you get to a page that hasn't had the consistency, the spacing rollout yet, you feel it. Spacing is a weird thing where you feel it more than you can describe it.

Chris: Yeah.

Dave: When you're on a consistent, ultra-consistent page, you just feel better.

00:47:43

Chris: Are you saying you have a component for spacing now that has that one job? That got hot for a minute.

Dave: Yeah.

Chris: Yeah.

Dave: Yeah, well, it's not like a spacer component you chuck in the middle because we want to control spacing at the parent. That's kind of the decision we made. We had a bunch of spacing classes.

Chris: Oh, I see. The parent not the child. How interesting.

Dave: Yeah. We had a bunch of spacing classes, sort of like... We were very verbose. We called it spacing bottom MD (for medium) - or something like that.

Chris: Mm-hmm.

Dave: But that would be the equivalent to Tailwind MB4 - or something like that - MB5.

Chris: Yeah. Yeah. Yeah.

Dave: Whatever. You can think of it like that if that helps you. But what we found was we were very inconsistent about what number or spacing size we used all over the app. So, we were just eyeballing it from the Figma and being like, "Okay, that says small, so let's just use that." Right?

Chris: Mm-hmm.

Dave: Now we had like 500 spacing classes littered throughout the app. We probably still do. It's probably less now, but like 500 different spacing classes, and nothing was cohesive. Or you were feeling that incohesion, so we just kind of made these spacing components to just make it really consistent.

Chris: Yeah. Interesting. So, it's generally Grid, or is it always Grid?

Dave: It's mostly Grid. I went Flex for the horizontal just because Flex has wrapping, better wrapping, in my opinion.

Chris: Yeah, but you don't find it's being too strong about how wide or something some of those children should be?

Dave: No. No, and we added little attributes you could chuck on the children, like grow and shrink and justify, space between.

Chris: I could see the temptation would be to use gap because gap has just been great for CSS, right? Just in the middle, please.

Dave: Mm-hmm.

Chris: Although, it's interesting to see, now that we're talking about new CSS things, that this margin trim property is dropping. Meaning you can say, "Hey, children. All of y'all have margin-right," or more likely, "margin inline end to rem," or something for spacing. And then just say, "Margin trim inline end," and it just won't put that margin on the last one.

Dave: Wow. Yeah.

Chris: Which that's gap. That's what gap does, but it's gap without needing a parent that is Flex or Grid, which is cool. I don't know if that will--

It's just nice to see a great idea like gap, the best part of it, come to other parts of CSS.

Dave: Come back to margin itself. Yeah, so you don't have to--

We're probably overdoing it on the grids, but you actually do get this--

Chris: Who cares? [Laughter]

00:50:38

Dave: Well, who cares. Yeah. But the inspecting, and you're just like, "Make it purple, please," and you see the grid gaps all highlighted. Chef's kiss. It feels so good.

Yeah, it's been a few weeks of work to redo the entire spacing and heading sizes of your app. And we kind of made a controversial decision on our... You know type ramps, like H1 style, H2, H3, but you call it .h1, .h2, and .h3?

Chris: Yeah. Yeah. Yeah.

Dave: Or however you're doing it. Spacing large, small, medium, large, or text one, two, three.

Chris: I always used to like that idea because it's like then I can use the semantic and accessibility correct H element without caring about what size it comes with. I'll just be explicit about it. Then I don't think I ever ended up coming to fruition on that very often.

Dave: Well, yeah, and the reverse, I think, happens, too. You're just like, "Oh, I don't know. H5. H5." [Laughter] So, you're just like, "That's an H5 now, so that's what it'll be and we'll fix it later."

But we actually just were like, "You know what? We have all these heading styles everywhere, just like our spacing styles. They are inconsistently applied." So, we just said, "You know what? We're not using those anymore. They still exist, but we're not using those anymore. We have page heading, and that's literally the fricken' page heading, H1. We have section heading. That's your H2. Those come with all the pages. And we have subheading, which is inside a section." That's what we do.

It's usually always H1 page heading, H2 subheading, but not always - or section heading. Sorry. But we just were like, "Man, we are just dying under all these kind of CSS best practices."

What is it? "Best practices don't scale," Adam Whapin hot take.

Chris: Yeah.

Dave: What's nice about CSS is you can rethink what's working for you and not working for you, and then you just go fix it. You can build your own systems and figure out what works and doesn't. You just built it how you want it.

00:53:06

Chris: Indeed. It's just because we've managed to talk about 100 cool HTML and CSS things, I'll round it out by mentioning that trigonometric functions are available in CSS now, or at least starting to drop.

Dave: Cosign.

Chris: Cosign.

Dave: And TAN. Is TAN in there?

Chris: [Laughter] You'd think, but I don't know.

Dave: Love to TAN. I don't know anything about this other than Dan Wilson had a really good blog post on them.

Chris: Yeah. That's what I'm looking at here, too. Count on Dan for doing new stuff like this, I assume. And a tutor will be--

Dave: Breaking.... [Laughter]

Chris: Yeah, because I've probably used... I think they're probably in Sass, and we'd probably use that to pull it off. But whatever. Might as well.

These seem like no-brainer to me, too. If there's any need at all, just slap it in the language. It doesn't harm anything at all.

Dave: Mm-hmm.

Chris: It's just the ability to do a simple calculation on a single number. Yeah. You should. Might as well drop that in there and see what cool stuff people do with it.

Dave: Yeah. Well, you know what's cool about that is I hadn't really thought of it, but text on a circle. You'd have to split it up with lettering or splitting or something. But you put positioning text in a circle or numbers on a clock. I've seen a demo of that.

Chris: Yeah.

Dave: That's hard. [Laughter] That's actually not great.

Chris: It just came up the other day. Did you see my dumb, little--? I did a clock demo? What was it? It was like--

Dave: The Apple Watch thing?

Chris: Yeah.

Dave: Yeah. Right?

Chris: Yeah, that's what it was. Apple Watch has this watch face where the numbers on the watch face use variable fonts. The San Francisco by Apple, it could go really fat and really skinny.

Dave: Mm-hmm.

Chris: It's surprising. I found that the shipping version on Mac OS doesn't go as skinny or as fat as the one on the watch, for some reason.

Dave: As the watch? Hmm...

Chris: But I just faked it in the browser with a range input where you could just slide it, and it would do that. But I had to think about how you put numbers on a watch. It's less intuitive than you'd think. It's not just like, "Take the numbers and then rotate them exactly perfectly all the way around."

Dave: Yeah.

Chris: Because it's like when you get to the bottom, you don't want the six to be upside down, because then it looks like a nine. So, when you get to the bottom, the six is actually right side up.

Dave: Yeah. Yeah.

Chris: You know what I mean? Which is just a weird one. Then when you get to the nine on the left, I think it kind of depends on the other design things that are happening on the watch.

Dave: It's not just a pure rotate.

Chris: No, it's not.

Dave: Yeah. Yeah. Yeah, it's weird because you're getting into radiant and all the stuff I understood in high school geometry but totally punted on. You know? [Laughter]

Chris: Yeah.

Dave: I just was like, "I get it, but I'm going to remember it the least of all the things I'm going to remember about high school." [Laughter]

It's pretty compelling. We're getting all this new stuff, and I don't know how it all comes together yet for me, but it is pretty cool. I guess it's good. We're paving some cow paths like trigonometry and stuff like that.

Chris: Yeah. Yeah. Like I said, I think it's just cool that it's in there and it just doesn't have to be controversial because it's not changing the language in any fundamental way. It's a simple math function.

Dave: Yeah.

Chris: Yeah. Yeah. Ship it. It sounds great. Put square root in there too - or something. Who cares?

Dave: Yeah.

Chris: It sounds great.

Dave: Random? Random? Random? Hey!

Chris: [Laughter] That would be controversial. [Laughter]

Dave: Yeah.

Chris: I think so. Wouldn’t it?

Dave: If random happens, I'm sure Dan quits his job and only makes CodePens for the rest of his life.

Chris: [Laughter]

Dave: Yeah. Yeah, good times. Well, should we stop there?

Chris: Yeah. That sounds good.

Dave: That's a lot of new CSS and stuff to parse through. [Nerdy laugh]

Chris: [Snickers]

Dave: All right. Thank you, dear listener, for downloading this in your podcatcher of choice. Star, heart, favorite it up. That'd be noise. [Laughter]

I'm here rapping to the beat. Join us in the Discord; get on your feet. You know where you gotta go, patreon.com/shoptalkshow.

Chris, do you got anything else to say? [Laughter]

Chris: No. [Laughter]

Dave: [Laughter]

Chris: I should have. I should have backed you up, man. I'm bad. I should have beatboxed at least.

Dave: Oh, yeah. You could have. What is it where you add... adlib.

Chris: [Beatboxing]

Dave: Yeah. You need, like, "Yeah! Uh-huh!"

Chris: Oh, yeah.

Dave: Like Biggy style. Yeah. That'd be good.

Chris: Next time. All right, man. ShopTalkShow.com.