649: Chrome 133, Attribute Update, and Standardized Async CSS
Dealing with AI creating fake work by famous artists, HTML is actually a programming language, Chrome 133 updates, attr updates, making "this" less annoying, and Scott Jehl's trying to standardize Async CSS.
Time Jump Links
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey, hey, hey, hey...
Chris Coyier: [Laughter]
Dave: ...Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris. How ya doin'?
Chris: Oh, I'm all right. Thanks, Dave. It's going to be fun here. We're kicking off the new year talking about who we're going to get on for guests and stuff. Don't worry; they're coming back. But we get about equal feedback that people like guests and not guests, so...
Dave: [Laughter] Yeah, it's like fully split. It's like, "You should have people on. My boss, for example."
Chris: [Laughter]
Dave: Then other people are just like, "I like it better when it's just you guys." But I mean--
Chris: What if you hired that? What if I, because I was really, you know--? Like I have... The CodePen launch will come up at some point this year, I very much hope, the 2.0 thing. What if I reached out to one of these firms and said, "Get me on ten podcasts!"? Do you think they'd deliver?
Dave: I wonder, man. I bet you could. Yeah. Do the circuit.
Chris: Then who is saying yes? Would they be the ones that I want to be on? [Laughter]
Dave: I know.
Chris: Probably not.
Dave: No, it's going to be like Chuck's Technology Web. You know?
[Laughter]
Chris: Mm-hmm.
Dave: And it's just Chuck reads Mac rumors from top to bottom. [Laughter]
Chris: Yeah.
Dave: Yeah.
Chris: But it'll somehow have really great statistics. You know? You're like, "Did you buy those statistics?"
Dave: Yeah. Chuck gets five million downloads a month and 90% are just him refreshing. But it's still impressive.
Chris: That's what I want to believe. I don't know that that's the truth. You know? I've got to be careful about that as I get older. Sometimes my brain just thinks that's the way it's going to be so that's the way it's going to be.
Dave: Oh, I am fully down the rabbit hole on this, Chris.
Chris: Are you?
Dave: Any number you see online is made up.
Chris: [Laughter]
Dave: Any blog post now you see online, made up. Any video, yep, watch the mouth and see if it syncs up to the audio or else that's fake as crud.
Chris: Yeah. It's getting bad, too. I wanted to... Somehow the... Something came across my... Who knows? I watched a reel or something about Shutter Island, like that old... It's not old, but not particularly new, Leonardo DiCaprio is on some creepy island as an investigator.
Dave: Oh, yeah. Yeah. Totally.
Chris: Yeah.
Dave: Yeah.
Chris: I was like... Somehow I'm like, I don't really want to watch it again. Not because I don't want to watch the movie but you know I just ain't got time for that right now. But what I wanted to do was remember what was the big twists and stuff.
Dave: Oh, yeah. Yeah.
Chris: I wanted the five-minute, you know, like, take me through it again. Remind me why that was cool. And I Googled it, and I found this page. Then I read it, and I was like, "Eh, I guess that kind of explains it good enough." Then they explained it like six more times but with slightly different H2 elements above it.
Dave: Mm-hmm.
Chris: I was like, "Ah... I just read cruft," or whatever. Slop!
Dave: Oh, really?
Chris: I just accidentally read a bunch of slop. Ack!
Dave: Yeah.
Chris: No!
Dave: I hate that. I hate when you get so far into it and you're just like, "Oh, man." You're just like, "Dude, I got tricked. I feel like I got fully tricked by this."
Chris: Yes. Then I went back and read it. I was like, "Nope, this is just crap."
Dave: Yeah.
Chris: Anyway, what do you have that's more interesting than this?
Dave: Well, I was going to say you reminded me of two things.
Chris: Okay.
Dave: One is this... [Laughter] You wanted to remember a movie. There's... I've been watching this YouTube channel called "This Aged Great" where this guy, two guys... It's a comedy podcast, so take that into consideration.
Chris: Yeah.
Dave: But they watch old 1980s movies and just explain everything that is wrong with them today.
Chris: Hmm...
Dave: Like Teen Wolf - or whatever - or Can't Buy Me Love. It's like, "This guy pays this girl to make him popular. It's just this like... It's very, like, tongue in cheek, like, you just can't do this anymore. A lot of 1980s movies were not the, let's say, most progressive movies in the world. [Laughter]
Anyway, it's pretty good comedy if you want your childhood ruined or whatever. But it's very funny if you remember all these movies.
But more seriously, Maggie Appleton had a post on her digital garden. It was called... I had read it. I guess it was planted nine months ago, so I'm out of date. But it was "Faking William Morris Generative Forgery and the Erosion of History."
Chris: Oh, yeah. I remember this.
Dave: Somebody on my socials was like, "Hey, does anyone know? I'm thinking about buying this print, but it doesn't look like it's a real print." Maggie chimed in and was like, "I actually wrote a blog post about this exact Etsy shop." It's basically these Etsy shops that use AI, and they're like, "Make this in the style of Gustav Klimt or Monet or Matisse or something."
Chris: Uh-huh.
Dave: And they make pretty convincing art pieces.
Chris: Yeah, it looks like a nice poster.
Dave: Yeah. Put it up in the office.
Chris: Why not? Yeah.
Dave: Get some inspo, right?
Chris: Sure.
Dave: A little inspo. William Morris, who has a very unique style.
Chris: Right. These are old artists, so it's long in the public domain.
Dave: Public domain.
Chris: Is that how that works?
Dave: Yeah.
Chris: Yeah.
Dave: So, you can just steal.
Chris: Sure.
Dave: You don't have to pay Van Gough any money, I don't think.
Chris: Right. So, what you probably should have done is found the highest quality image you could of these real paintings and put them on there.
Dave: Right.
Chris: But that's not what this is, right?
Dave: No, they feed an AI (Midjourney or whatever) and they say, "Go make these fake William Morris's."
Chris: In the style of William Morris.
Dave: "In the style of William Morris," who is famous for very repeatable patterns. Think big, ornate wallpaper, right?
She was like, "I was almost buying. I almost bought a print. Then I went through all his work to see if this really was a piece he had made, and it wasn't. It was just made up."
Chris: Which of course you would have to do because how else would you know? As an average consumer, you would immediately assume that it's a real piece or at least a photograph or image of his real work.
Dave: Yeah, well it has the name. It has a date, like a year it was made.
Chris: Yeah.
Dave: And it has the museum it's hanging in. That's all just made up.
Chris: Yeah, it's just fake.
Dave: Just fake.
Chris: And the only way to verify it is to ask a total expert probably or just dig through... I don't know what. Go to the library and try to find every image that William Morris ever created and cross-reference these? Nobody is going to do that. I mean clearly Maggie did here.
Dave: Well, Maggie did, but I think Maggie has a designer history background, right?
Chris: Mm-hmm.
Dave: And so, I think she was kind of like, "Ooh, man. I almost... I know what I'm doing and I almost got caught off-guard. I almost bought fake art."
Chris: Right. But this rabbit hole go a little deeper, doesn't it? Because then it's like then the alt-text on these images and whatnot and the fact that they're in a store and they have the title and the artist's name and all that stuff means that then they show up in Google image search as art by that artist.
Dave: Yeah, so it's polluted the well of--
Chris: Yeah, so if somebody is doing their own research, they type it into Google image search - or whatever. Not that that's the end all. Certainly, it shouldn't be considered research. But if somebody is doing a quick check, they'd be like, "Oh, look. There it is. There's that image."
Dave: And I'm not opposed to it. My family in the style of Picasso, that would be a fun, little, goofy photo to send in the group text.
Chris: Right.
Dave: Where it turns into... You're selling art under this name with the fake attributions and stuff like that, that's where it starts getting into this, like, "Oh, no! We're crossing the chasm of ethics." We are lying. We are selling lies.
Chris: Right. Then polluting the search world is a part of it, too. It doesn't really feel like Google cares. I don't know. Maybe.
Google is a big place. It's hard to paint with one brush. I'm sure there are people in there that deeply, deeply, deeply care. But it's happening, and it's happening now.
Chris: I just saw one the other day. When you search Times Square - or something like that - there are a bunch of images of, of course, Times Square and New York City (a very famous place with all the billboards and animation - whatever).
Dave: Mm-hmm.
Chris: There was a bunch of stuff in there that was just AI generations, not labeled as such but just clearly from AI of what Times Square looks like. That's a polluted well. That isn't what Times Square looks like. That's what some computer calculated it looked like based on other images at some time.
Dave: Yeah. Real Times Square has Elmo, three Spiderman, a Batman, and Superman.
Chris: Right. Yeah, it's a photograph of it, but there is a little bit of a gray line because, well, let's say it was a real photo. Let's say you went to Times Square. You took a picture with your phone. It was a nice picture of Times Square. Then you named that thing timessquare.jpeg and you had good metadata on it and whatever. And somehow, some way, your photo came in Google image search of Times Square. Well, good for you. You did it. That's a real photo of Times Square. But is it?! Because the generation of that these days on phones probably has a little bit of AI-type stuff in it, too. It's corrected a little bit.
Dave: Mm-hmm.
Chris: It's color corrected a little bit through those same technologies. Maybe you could argue, "Hey, that's fine. It's still real."
Dave: You could highlight a person and zap them out now, right? You can do all that stuff.
Chris: Yeah, and we applaud that. I do, too. I think that's cool and stuff. But then how far different is that then a fully fabricated photo?
Dave: Mm-hmm.
Chris: I don't know. It's different, but how different? How much does that matter? Maybe we'll come to the point. It seems like it's coming to the point where it doesn't. That not enough people care, so the well will remain polluted through inaction.
Dave: Yeah. No, I don't know what you do to stop it or whatever. It's hard. It's interesting. It's hitting... When I'm just searching for an image, it's less of a big deal to me maybe, unless I'm shooting for accuracy. But when you're buying something, that starts to feel criminal because money is on the line.
Chris: Okay. Yeah.
Dave: I don't know. Money, I guess, changes it. Right? Huh.
Chris: I don't know.
Dave: Hey.
Chris: Somehow, it feels very big, like this is a big moment for humanity. Depending on your mood, sometimes you can be like, "Eh. Whatever." Certainly, to most people, "Eh. Whatever," is the default.
Chris: Pretty dark.
Dave: Hmm....
Chris: Let's talk about computers.
Dave: Yeah. We've got some good computer stuff. Wired kicked off the year with a good article by Tim Carmody called "HTML Is Actually a Programming Language. Fight Me"
Chris: [Laughter] Interesting. They put a period after "HTML Is Actually a Programming Language," but not "Fight Me". I'd like to see their style guide on that. That's interesting.
Dave: [Laughter]
Chris: I feel like "Fight Me" works better with a period at the end of it.
Dave: I think so. I would agree with that. Yeah.
Chris: I bet there's some editor said it doesn't. Wired is a great magazine. They have great writers. Been a fan for a long time. One of the good ones, let's say. I think Tim is also good. I read his... He had some -- or maybe still does -- a newsletter about where he watched the company Amazon and wrote about it.
Dave: Ah...
Chris: He's a cool guy. I tend to agree with this assertation, in a way. Although, you know what I have come to the conclusion of? I like to bring it up and then not be real clear about my position on it just because I like the little fireworks. It's absolutely guaranteed that you're going to hear from some people with their little opinions.
Dave: Oh, it's your engagement bait? Kind of like--
Chris: Yeah, like it.
Dave: You're just like, "Hey..."
Chris: I like to see what people think because I think that this doesn't matter. I don't think there is any benefit one way or the other. It's a little bit like, "Is it a Web app or is it a website?" People love to talk about that.
Dave: Mm-hmm.
Chris: Let's say you nail it. It still doesn't matter. It just doesn't matter.
Dave: You convince zero people, right?
Chris: There are no implications in it.
Dave: Yeah.
Chris: Yeah.
Dave: Zero people were convinced by your--
Chris: Nor are decisions made based on what decision has come to. So, it's like you can have your little argument or whatever and then nothing will be different. I just like to bring it up so people can have their little opinions and feel good about it and then we can go back to what we were actually doing. [Laughter]
Dave: Yeah. It is curious to me why HTML and CSS get downgraded so much. Every website in the world has HTML on it. I'm just going to throw that out there. [Laughter] You know what I mean? It seems like it works pretty well and is pretty ubiquitous.
Chris: 100%. 100% chance. Yeah.
Dave: 100% coverage. But we're not like, "Oh, JavaScript is not a programming language," even when it was... Because it's very kind of... I guess it obviously is. But then people are like, "Oh, JavaScript is--
Chris: Yeah. Some people say, "Well, it's because it's executed. It is executed in order and you can write logical instructions on it with branches and all that stuff." Of course, I get the argument. I'm not an idiot.
Dave: Mm-hmm. Yeah.
Chris: I get HTML is interpreted in a different way. It doesn't have that same kind of execution model and whatnot. I don't even want to get into it because I just don't care.
Dave: Yeah.
Chris: It doesn't matter to me.
Dave: Well, but then it's like even JavaScript is like... People are like, "Oh, that's a bad language." It's like, "Why?"
I understand why you would think that. But it's just like, why does Web tech just endlessly get shit on? No one is like, "Oh, man. EPub, that's dumb!"
[Laughter]
Dave: No one is like, "Oh, C, that's stupid!" Because everyone is like, "Oh, every computer is running C." It's like, "Well, every website is running HTML." Ugh! Ack! You know what I mean?
Chris: Right. At the very end of it, Tim gets into a part where it does actually kind of matter, so I don't want to sound too dismissive of the idea because one of the problems is that if HTML continues to be, for lack of a word, denigrated or whatever, treated like a baby language, that then stuff like salaries and stuff come into it. If HTML is this baby language, then the people who are really good at writing it are certainly not paid as much as JavaScript developers. I don't think there is any argument against that. It just is.
I have probably controversial opinions when it comes to that. I do feel like if your only skill in Web design is you're just amazing at HTML - or something - even if you're just amazing at just HTML and CSS, that controversially that's not enough. You need to do more than that.
Maybe there is a job for you - or whatever. But I don't know that you deserve to be the CTO of a company or something. You need to have more skill than just that. Even though they are very complicated and I'm not trying to denigrate them in any way, it's just like the Web is just different these days. And if that's your only skill set, it's not enough.
Dave: Yeah. I probably tend to agree there. But also, I know Microsoft and other companies are looking for people who are good at CSS, who understand how a website works, and they're not just fake it or plopping code.
Chris: Well, that's good to hear.
Dave: Those skills are in demand. I think more and more people are realizing that role is necessary. Maybe it has to take on this role of design engineer, and you probably will have to write JavaScript or something. But yeah, I don't know.
Chris: Yeah, that's kind of the point, right? Let's say you're amazing at HTML, and even that's very desired. It's needed. Well, what's producing that HTML is probably some other technology.
Dave: Yeah.
Chris: It's probably not a .html file, and so you need to probably know what that other thing is and how it pieces together and works.
Chris: Here's Tim, though, just to say we quoted him. I like this paragraph at the end. "Ultimately, even as HTML has become the province of professionals, it cannot be gate kept. This is what makes so many programmers anxious about the Web and sometimes pathetically desperate to maintain all too real walls they've erected between software engineers and Web developers. But people who write HTML know that hierarchies were made to be blown up. And all it takes is a tag that doesn't close where you'd expect it to."
This is kind of a fun thought.
Dave: Yeah. Yeah. Yeah, I mean it seems simple from the outside. But then the more you get into it, there's always better and more - I don't know. It's very idiomatic. You should use M to emphasize and cite things, which he mentions heading numbers. That kind of matters.
Chris: Mm-hmm.
Dave: It takes a lot of kind of meta understanding about the whole place, the sphere that this website can exist.
Chris: Yeah.
Dave: That's a big part of HTML.
Chris: This is about a year old now, but I just was reading it and linked it up. Stephane Eckles, who I think you know, right?
Dave: Mm-hmm.
Chris: At Adobe now, I think. Wrote this post called "A Call for Consensus on HTML Semantics," and it was funny because it called out all these examples of when there doesn't seem to be a clear answer in HTML, which is kind of a barrier to being or feeling like you're good at HTML because there often isn't just a "This is how you do it well." There is in a lot of situations because you can always test and find the right answer.
Dave: Mm-hmm. Mm-hmm.
Chris: But yeah, there is a lot of ambiguity in the world of HTML. Probably no more so than any other language, but it certainly exists there, too.
Dave: What gets me is when it's not obvious, like I use this section. Well, your section needs a label or it needs some sort of labeling.
Chris: Right. Otherwise, it's nothing. You didn't really make a section.
Dave: Yeah, and so it's sort of like, "Oh--"
Chris: Did you know that, everybody? Did everybody here know that?
Dave: Did you know that?
Chris: I bet somebody listening is like, "Yeah, I didn't know that. I thought you just use section--"
Dave: Did your dev tools scream at you and say, "Whoa, buddy. You used a section without a label. Let's rethink what we're doing"?
Chris: And it can't because the HTML gets pieced together in absolutely unknown ways. So, you could maybe write a linter, but the amount of false positives there would be crazy.
Dave: Yeah, so I don't know. I think it's kind of like this... I would love more tooling like that.
Chris: Yeah.
Dave: I would love if my dev tools were just like--
Chris: Runtime tooling, yeah, you could do.
Dave: Yeah. Yeah. I would love if my dev tools were like, "Dude, tab index negative one is not what you need to do here, dude."
Chris: [Laughter] Yeah.
Dave: "It looks like you're using an icon font. Maybe you should ARIA hidden this thing. Otherwise, it's going to read out as--"
Chris: I like the chill nature of it. It's like little Clippy for Web developers in the corner that's like, "Hey!" [Laughter]
Dave: Hey!
Chris: "I noticed a little bit of a problem." Use AI for that, people. That would be sweet.
Dave: "Ooh! Cripes, buddy. You made a goof."
Chris: Yeah.
[Laughter]
Dave: Why isn't that--? Yeah. I don't know. Maybe we'll get a Clippy in dev tools. I'll call my friends at Edge and just say, "Edge, make it happen."
Chris: Yeah. It's coming back.
Dave: Yeah. That would be the one thing I don't understand. [Laughter] There are a lot of jokes, but why Copilot isn't just called Clippy, I don't know. I get Clippy.
[Laughter]
Dave: No. [Laughter] I'm on that team. If I have to choose a team, I'm Team Clippy right now.
Chris: What else do you got, Dave?
Dave: Well, got some... We'll start with something that's out. I've got two things. We'll start with something that exists or is coming in Chrome 133, which is set up to be a really good browser release.
Chris: Oh, I have that bookmarked too. I'm going to do it really quick. Chrome 133, which is a couple of weeks away, February something.
Dave: Yeah, end of Jan or so. Yeah, yeah.
Chris: Yeah. Advanced attribute function, we'll talk about that. A colon open pseudo class, I forget what that is. It must have to do with dialogs or something. Scroll state container queries. The textbox trim, we talked about a couple of times. Popover equals hint: I don't know what that is.
Dave: That's like tool tips. You know when you have a little carrot on the end of your popover?
Chris: Yeah.
Dave: That's going to have the little carrot.
Chris: What?!
Dave: Yeah. Yeah.
Chris: A pointer?
Dave: Yeah, a little pointy--
Chris: Oh, my God. You've got to be kidding me. That blows my mind.
Dave: Then I think it's hover-based, but I could be wrong. I need to investigate that.
Chris: Okay. Holy cow.
Dave: Yeah. Yeah.
Chris: I like that we get things that I obviously wanted but wasn't watching the progress of.
Dave: I could be wrong, but I'm pretty sure that's what it is. Maybe I'll spin up a CodePen here in the old--
Chris: Check it out. Yeah.
Dave: In 183 here, so yeah.
Chris: And a DOM state preserving movement of elements, which looks amazing to me. You have a div with a bunch of click handlers and stuff and literally move its position in the DOM, which traditionally would be very definitely losing those event handlers and such. I guess it won't be anymore, and that's wild.
Dave: Yeah. That's kind of always been a very sticky thing to wrap an element in something or to move something in the DOM tree.
Chris: Yeah.
Dave: It beefs it up pretty bad. You're going to have to--until it's in every browser--come up with some, I guess, fallbacks.
Chris: Well, it's a reason to use a framework because the framework would just deal with that crap for you.
Dave: Yeah.
Chris: You wouldn't even have to think about it. Or it was kind of our little bit of a reason to... [Laughter] I think back on some historical crap I used to do.
In the way old Wufoo days, we'd just use HTML on-click handlers for clicks. I remember, at the time, like when I first started there when jQuery was really popular, the prevailing wisdom at the time was like, "Do not do that." An on-click handler right on an element was sacrilegious. It is not the separation of concerns we were looking for. You should get that out of there. Put that in a JavaScript file. Deal with it elsewhere.
There were some advantages to that. That could be explained at a conference in a way that you would nod your head to. Then over time it was like, "No, actually that was kind of the right way to do it actually." [Laughter]
Dave: [Laughter]
Chris: Because an on-click handler in HTML, if you pick that up and move it in the DOM, that's fine. That click handler will continue to work just fine.
Dave: Yeah. But... Well, yeah, but when you bind the click, it's going to mess it up.
Chris: That's when you bind the click and, yeah, it's gone. It's not only that. I'm sure there are all sorts of other state-like stuff.
State is not just a click handler. State is all kinds of stuff. Presumably, this just keeps all of it in a way that you don't even have to think about.
I haven't looked into it a ton, but let's start back up at the top because it seemed like you were particularly interested in the attribute stuff, which I am as well.
Dave: Yeah, so I was actually making something yesterday. I was making a Web component. You know sometimes you're just like, "Oh, okay. I'm going to have size - or something," or gap was what I was coding.
Chris: Hmm...
Dave: I was like, "Okay, I'll make the gap 32."
Chris: Yeah.
Dave: Or let you pass in a gap as an attribute. Then I was like, "Okay, cool. Now I've got to make it like set the style to 32 pixels." I can just do an inline style in the template or whatever.
Chris: Mm-hmm.
Dave: It's not the end of the world. I just was like, "God, it would be cool if I could just use an attribute and format it as a pixel and then send it out."
Well, I was pleased. [Laughter] I was like, "Where is the status on attr?" because I knew it was kind of being talked about.
Chris: Mm-hmm.
Dave: I found a Chrome developer, Chrome blog post. "Advanced Attr" is what it was called. But it gets an upgrade. And so, in your CSS, you could say .gridgap:attrgap, and then you can do whatever. You can set a type, too.
Chris: Well, a gap is going to be a number.
Dave: Yeah.
Chris: It has to be for it to be valid. That's what attr couldn't do before. It was always a string. Attr already existed, and you could pull any attribute from any HTML element and use it in CSS. But it didn't have that much utility because pretty much the only thing you can do with a string in CSS is set it to the content of a pseudo element and redisplay it. There's very little you could do with a string.
Even if that string happens to be red, R-E-D, it's still the string "red." It's not the color red.
Dave: Yeah.
Chris: So, that wouldn't work. You can't say data color equals "red" and then use attr to set the color. It literally wouldn't work. That is the utility of attr before this was [blows a raspberry] pretty dumb, pretty useless. Once in a blue moon it would be useful for something like a text effect where you needed to layer two copies of text on top of each other for a design effect or something. Sure. Glad that's cool.
But the fact that now you can pass it and say what type that attribute is, it just blows up the utility of this thing. Now you're dream is real. You can use these kind of like... Put actual values as attributes on HTML elements and use them. Colors, sizes like gap, like you're talking about - amazing.
It's proven through the DX or the semantic quality, the declarative quality. It looks nicer to use that.
Dave: Mm-hmm.
Chris: And we got that essentially through props. JavaScript libraries were big on - I don't know - invent your own props. In a way, this is giving you a little bit of a greenlight to invent your own props.
Dave: Yeah. And so, you just do attr(gap) and then you space PX and it'll just be like, "Oh, I'll set it to a pixel. I'll make that a pixel, and it's going to be great."
Chris: Yep. You have two ways to do it because you could do that or you could put gap equals 20 pixs.
Dave: Mm-hmm.
Chris: And say that the type of it is going to be a length, which is kind of nice because then you could put pixels or rems or ems or whatever you wanted to do.
Dave: Yeah, be whatever in there. Yeah.
Chris: Now you're in charge of your destiny of the API that you want to support. Saying gap 20 might not map to anything pixels, ems, or anything. It could just be this is zero to 100 scale that you invented that you want to map to something else. You could totally do that.
Dave: Then you can also do a fallback in there, I learned. You can do comma - whatever - 12 as your default pixel value - or whatever.
Chris: Oh, even an attr you can do, so if you don't have one at all, it still falls back to that? Ooh, that's nice.
Dave: It's almost like a variable.
Chris: A custom property usage.
Dave: Yeah, custom properties.
Chris: Yeah.
Dave: It has the same sort of deal, and so--
Chris: Ah, that's great.
Dave: I was like, "Dude, this is going to solve a bunch of problems." We have one component that's like an avatar.
Chris: Okay. Yeah.
Dave: We have small, medium, large t-shirt sizes, and then we have XL, XXL, XXXL, 4XL, and then we have 4X-small, and then a tiny.
Chris: [Laughter]
Dave: At some point, it's all based on 4-pixel measurements or 4-pixel rhythms.
Chris: Okay.
Dave: We have so many. You should just pass in the pixel size. You should just tell us the size.
Chris: Yeah.
Dave: We should quit--
Chris: Even after you did that, you could round it.
Dave: Right, exactly! Right?
Chris: It gives you this extra step of CSS control is that you grab it from the HTML. Now you're in CSS land, and now you can apply the CSS or, Dave, not. I think that's crucial, too, is that when you set an inline style -- let's say your alternative to this was to set style=--gap is 20 pixels -- now you are passing information from the HTML into the CSS in a way that it can be used, even typed. That's cool, and it kind of solves the problem.
But you are applying that style to that element. And it will be forever until you change that. Whereas, when you put an attribute on HTML, it's the CSS that decides if it's going to do anything with it or not, which gives you an opt-out. You can bail. You can just bail on doing anything with that attribute at some point and your HTML will be okay.
It probably shouldn't be in there. Maybe it's a little old cruft. But it gives you this escape hatch for, like, "Ah, this new design on the site doesn't do crap with data-color. That's old, and we'll clean that up at some point." But it's not forcibly applying an inline style.
Dave: Yeah. Then if you apply an inline style, that's like a style recalc and stuff like that. There's probably performance advantages we're squeaking out here, too, just by JavaScript didn't have to run to set a variable. That's huge. It has tangible impacts.
Anyway, I'm just kind of excited. Another place I'm excited about it is you know grid areas and stuff like that.
Chris: Uh-huh.
Dave: How cool would it be to just be like, "Header area top."
Chris: Like you're controlling where it's going from the HTML.
Dave: Yeah. I'm slotting it into the named areas on my master layout that I've created.
Chris: Yeah. I feel like there are Tailwind people rubbing their hands, be like, "Dave and Chris, they're starting to understand the power of Tailwind as we speak, but they're not saying it."
Dave: Right.
[Laughter]
Dave: Yeah. Pass.
[Laughter]
Chris: I do not engage. Yeah, that's fine.
Dave: No. My TLDR there is I like utility classes for size ramps and things like that. I think Tailwind and other utility libraries go way overboard on it. Sort of the same way React goes overboard on everything is a component, I think these utility classes go all in on utilities. Everything is a utility class, and I don't think that's the best way to build things. That's what I think. And it's not the best, most comfortable for me. It's not the most understandable.
Chris: Mm-hmm.
Dave: I think we had a guest on--I forget who. Ben Frain or somebody--a long time ago who was kind of like, "For scalable CSS, you either need to do all utilities or all BEM," or something like that. It was very cut and dry; you have to be one or the other.
Chris: Yeah.
Dave: You can't be in this middle ground.
Chris: Don't mix it. Yeah.
Dave: The middle ground kills, and I still think about that. But I don't agree. I think you can make really cool things if you have a smart middle ground or if you have just a handful of utilities, somebody can take the BEM thing and make it a little bit more theirs. I think there's a middle ground.
Chris: Mm-hmm.
Dave: I think it's hard to get there. I think you have to really--
Chris: Yeah, it's tricky. Yeah, we have all of this muscle memory for simple utilities. I remember one that has probably been on every website I've ever worked on in my life called, like, screen reader text.
Dave: Yeah, visually hidden, SR-only. Yeah.
Chris: Yeah. Then you sprinkle that in when you need it, and you feel good about it because you're like, "Ah, that's a thing that I want hidden in that way." It feels like a really useful utility to have around and not then extend that thinking to, "I'm going to use that approach on every single element of this entire website." Why is that not okay again?
Dave: Yeah. Again, it works. You can do it. But I think you can lose the forest through the trees if you just go all in. If everything is a component, now you've got to build a router to manage everything. Whereas pages are cool and pages route [laughter] from the server.
Chris: Yeah.
Dave: That was free stuff and we just gave it up for a component model. Anyway, I'll get off my soapbox here. I'll just put it over here.
Chris: [Laughter] Well, speaking of components a little bit, you had a pretty interesting blog post about the keyword "this" and it was cool. You know I'm a fan of your blogging, generally, but I do like blog posts, in general, everybody listening out there, when they talk about something that's just really personal to the work that they're currently doing. You know? It's little things like that.
Not to tie AI into this, but it's the kind of thing that will never... That can't be automated because it came from your brain and your current experiences that nobody knows except you and your brain.
But anyway, you've been working with Web components and awful lot, right? And in the world of Web components, you just use "this" a whole hell of a lot because it defaults to the class or the element. You just write it over and over and over. So, what do you think about--?
Dave: Well, you know. I was sitting there. I'm looking at my codebase and it's like this.foo, this.bar, this.this, this.that - super, super, you know. And I just was like, "Man! It's not a problem. It's just a lot."
I think I was using GitHub Lite Theme. Sorry, I use a light theme. I know that's bad but the contrast is better for me.
Chris: [Laughter]
Dave: It just was like, man, I am staring at the word "this" because it was in this blue and everything else was kind of like reds and pinks and whatever - greens. And I just was like, "This has the most contrast to me and so it's always in my face." I was like, "How can I get rid of the word "this"? Could I make - I don't know? What can I do?
And so, I brought it up in the D-d-d-d-discord and got some ideas. The first thing I tried was to dim it. Could I just make it lighter?
Chris: Sure.
Dave: Less opaque or gray.
Chris: Does that work?
Dave: It works.
Chris: Yeah.
Dave: I can do it. I think it's set up to do it now.
Chris: Well, what I like about that is that you... Because I change themes once in a while. I always feel like if I pick a color or something, it's going to work today and then annoy me tomorrow, and I'm going to remove it. Whereas I feel like an opacity change on something like that would survive through theme changes.
Dave: Yeah, and so basically there are ways to do it. You have to kind of dig into the VS Code API. It's like this TextMate rules thing, like this old tech that it pulled over from TextMate. But you just say variable.language.this, so this is the keyword in that language. You can set the foreground to lighter.
Chris: Mm-hmm.
Dave: I also did the same thing for comments because I was like, "Dude, I don't... The comments, I really only need those when I need to read the comments."
Chris: Yeah.
Dave: So, I wanted that default color dimmed down.
Chris: That's interesting. I have a plugin that does the exact opposite. Whatever comment, when it finds a comment, it makes it hyper-super-orange. Although, it only does that when it starts with "To do," so I guess I should have caveated that first.
Dave: Oh...
Chris: If it's a to-do comment, it's like, "Blah!"
Dave: I like that. And I like when they highlight words in the thing. When I get syntax highlighting in a JS doc kind of thing, I kind of think that's super cool.
Chris: Oh, yeah. Right on.
Dave: But I would also like it to be dimmed down and diminished because it's not the focal point of what I'm trying to read and write.
Chris: Right. Right. You chilled out your "this". All you did was toned it down in your theme.
Dave: Toned it down. Gave it a--
Chris: Now when you're looking at the code, it's just not as intense there. Just that alone seems like an improvement. Yeah?
Dave: Totally. It's like cool waters. I'm not... [Laughter] You know.
Chris: Mm-hmm.
Dave: I don't have to - whatever. I'm not getting screamed at all day, and so that's great.
Then I'd also kind of asked Discord, "Could I replace it with an icon? Could I just replace the word "this" with an icon?" I think Ginger had said, "Use the pointing up emoji."
Chris: Oh, yeah. Yeah.
Dave: Which I like. It's like, "I'm with stupid." It's pointing up.
Chris: Yeah.
Dave: But it's also social media people go, "This," right?
Chris: Yeah.
Dave: So, that's funny. Double funny to me. But Andrew Walpole has been on the show. He took it to the next level and made a glyph for this and it's the word "this" kind of in a diamond pattern. Then Allen Smith figured out how to use Glyphs Mini to put a custom ligature, so you know how you have - whatever - FI and it combines it into one character.
Chris: Yeah. That's the part that starts to get scary for me. I'm like, "Really? You could--?" That's next level stuff to me.
Dave: It's pretty impressive. You know how you do arrows, like arrow arrow bracket, and it'll turn it into a super arrow - or whatever.
Chris: Yeah, it happens in coding fonts a lot.
Dave: Coding fonts.
Chris: Some people really dislike it because then it's not then the syntax of the language.
Dave: Right.
Chris: It has changed. Yeah.
Dave: Yeah, or if you did exclamation point equals not equals, it'll do an equal with a slash through it. That's kind of probably the quintessential example.
Chris: Exactly. Yeah, my controversial opinion is that I just don't... Either way, whatever.
Dave: I'm with you. It's more distracting to me, especially double equals and triple equals, which matters.
Chris: Yeah. Leave them alone, please. Yeah.
Dave: Yeah, please don't optimize that. Please. But anyway, to each their own. I understand why it's good.
But Allen Smith figured out how to do a glyph, make a glyph for the word "this." and just put whatever character you want in there.
Chris: Mm-hmm.
Dave: And so, Andrew took that. And glyphs is on -- what's our favorite app? Setapp, Glyphs Mini is on Setapp, so you could just get it.
Chris: Ahh... So, he didn't even have to pay extra money because he's already paying for Setapp?
Dave: Yes, auto-paid, right?
Chris: Oh, sick. Yeah.
Dave: But anyway, Andrew then took his glyph and put it in a font in Glyphs Mini and exported a Fira Code with this glyph in it.
Chris: Yeah. It's good thinking. I've seen that done before with Fira Code because I think it's already a little glyphed up, isn't it?
Dave: Yeah.
Chris: Yeah.
Dave: I think there are versions of it where it's normal and ultra glyphy.
Chris: Yeah.
Dave: So anyway, he popped that--
Chris: Got it going.
Dave: --glyph into there, and I have a screenshot of the code. It's wild, dude. But it's cool, right? It's the glyph and then my variable.
I think it's awesome. After staring at it for a while, I was like, "I don't think this is for me exactly" because I think it's too weird, probably, is probably the right word.
Chris: What happens when you put your cursor right in front of it and hit backspace? Does it delete the whole glyph, or does it just delete the "s" in "this"?
Dave: I think it deletes the whole glyph. But I think if you started deleting, it would split it - or whatever - because you broke the ligature. Does that make sense? If I was on the dot, the right size.
Chris: Yeah, that's what I mean. Then you hit delete, what happens? The "s" gets deleted?
Dave: It would expand "this" and delete the period, and then it would keep--
Chris: I see. I see because you type t-h-I, and as soon you hit "s", it turns into the ligature.
Dave: Well, the ligature had the period in it so it could--
Chris: Oh, it had the period in it.
Dave: Yeah. Yeah.
Chris: Oh...
Dave: Yeah, yeah.
Chris: I thought it was just the four letters. Anyway, yeah.
Dave: It could be just the four letters. But any time you type the four letters, it would slurp up.
Chris: Yeah, so you couldn't write a commend that said--
Dave: [Laughter] "Fix this later."
Chris: "Check this out."
Dave: Yeah.
Chris: Yeah.
[Laughter]
Dave: So, it has to be "this." But anyway, it's cool. But as much as I'm not going to use it, it also made me want to make this whole font that are all these rooms, like straight up Nordic runes for function. I don't have real characters. All the native keywords, const, function, class, export, import. They would all be kind of like these Nordic runes. I think that would be cool. But I'm not going to do that.
I don't know. Just imagine reading your code and it just looks prehistoric or just very Norse mythological. That would be so cool. I don't know. Fun, but. Make coding fun.
Chris: It's fun that the power feels close at hand.
Dave: Mm-hmm.
Chris: This was actually doable. It's not just the domain of - whatever - type creation geniuses - or whatever.
Dave: Well, yeah. I finished the post, like, it's cool to do this but baking a font every time you want to do a goof is not that fun. You know?
Chris: Mm-hmm.
Dave: It would be cool if I could make my own custom ligatures in CSS or something.
Chris: Oh, and apply them in CSS. Yeah.
Dave: Wouldn't that be cool?
Chris: I see. Yeah.
Dave: Then I would just propose a syntax like find and replace on font face - or something.
Chris: Uh-huh.
Dave: And so, you could be like, "Find cloud and replace with butt," or whatever. Any time you write "cloud," it'll replace it with the word "butt."
Chris: Uh-huh. Okay.
Dave: Something like that. Your own weird, custom ligatures - or something like that. It would be fun. I don't know. Make the Internet fun. That's all I'm saying. That's what I'm trying to get at.
Chris: Yeah. It's interesting because I imagine it could be easily... The argument could be made (and would be made if that ever got closer to standardization) that you could really mess up a website with that.
Dave: [Laughter] Yeah. "Do you agree? Yes or no?" Then you just flip it.
Chris: You just flip them.
[Laughter]
Chris: Yeah, that has some implications. But I had written this down for a previous show that we didn't get a chance to get into but that I really dislike that as an argument in spec land. I don't know because I've never really deeply participated in spec stuff, but it seems to come up more often than I'd like it to and that I feel like you can apply it to pretty much any technology whatsoever.
Dave: Yeah.
Chris: I always think of color and background color as, like, "Did you know that you can hose a website by setting those two things to certain values?" You can make text totally unreadable (from a visual perspective anyway).
Dave: Yeah.
Chris: Or you can kick stuff out of the accessibility tree easily. There are all these things that they're incredibly powerful. Almost every tool can be misused in some way to ruin it.
I thought of it the other day because our mutual friend Scott Jehl has taken on a new spec fight that he wants to fight. The last one he took on... [Laughter] He tends to win these things. I think he was involved in responsive images overall to some degree. Then he got into responsive video, which is now done. It's a won battle. We have responsive video in a large way thanks again to Scott, and other people, of course. But he was the one who was like, "I'm going to fight this until it goes back into browsers (all the way up to and including learning C and doing the browser patch myself)."
This latest fight that I'm talking about is called "Let's Standardize Async CSS." Meaning, can we just put the async keyword on the link element and now it's async just like you can with scripts, meaning that it doesn't block loading? It's an interesting thing, and he's all about it.
Dave: That would be cool.
Chris: Yeah, but I think the little bit of pushback he's getting is, "Yeah, but that could be bad. It could be misused. You could break a website that way."
Dave: Blah! Blah-blah-blah!
Chris: Again, so you can do that with literally everything. So, I just don't love that argument.
Dave: I would say, from a standards point of view, you need somebody in the room who has the freedom to say that.
Chris: Mm-hmm.
Dave: Somebody is going to misuse this technology. It kills babies.
Chris: [Laughter]
Dave: We need that, right? It harms unsided, non-sided users.
Chris: Yeah, right.
Dave: This would--
Chris: You need to be able to say it. Sure.
Dave: Right. That needs to be, and there needs to be a person in the room who will say that. Does that make sense? But I agree. I feel like it's this... Somebody might misuse something so we can't do it. The fear of misuse is over-indexed at times. People are going to do bad things with technology.
When people were like... LLMs, right? People were like, "Wow, I made the computer talk like a person. You can make a chatbot." Immediately, somebody is like, "I'm going to have it write my school papers," and now every high schooler in America is just having it write their papers.
I talked to my son about this. He's like, "Yeah, a lot of people just use AI to write their school," and I was just like, "That's a thing you can do, man. But do you get smarter if you do that?" He was like, "No, not really." I was like, "Exactly." I would do it the hard way; not take the shortcut.
But then you take that to the next level, and now people are generating whole websites from one prompt just to spam, generate spam, to get keywords, like the slop sites. That's misuse of a technology. I think it's bad, but I don't think you should not have LLMs just because somebody decided to misuse it in that way.
But then you take it to another extreme. Generative video. Then you have - what is it - deep fake pornography and stuff like that. That sucks. Deep fakes, in general, suck. We do need constraints.
Chris: Right. Yeah, you can't. There probably is a point where this could be misused. It does need to be taken seriously and the technology stopped. But when and where is so hard to know. There's just so much ambiguity in the world. It's so hard. Obviously, this is kind of the purpose of politics.
Dave: Right. Right. This is just politics, I guess.
Chris: We'll see. Should you be able to make a glyph in CSS?
Dave: I think so.
Chris: Obviously, you thought that that was a yes.
Dave: I don't know. I don't know.
Chris: Should you be able to? There's a Web in the world, theoretical possible, where you cannot set colors. It is not up to you. There are no colors because you could screw it up.
Dave: Yeah.
Chris: If the technology takes that away from you and says, "When you display text in this Web browser, you may not set the colors of it. It will be visibly readable," would the world be a better place? There would be no contrast issues ever on the Web. Is the Web better for that? I could see the argument easily made both ways.
You'd like to think it would be a little sad. Then it's like if we're not even going to do colors, why do anything then? Just forget it.
I don't know what to say, but Scott is clearly saying, "Do I think CSS should be asynchronous easily like JavaScript is?" He's saying, "Yes, we should be able to do that."
Dave: Yeah. For me, it's like a uniform API.
Chris: Almost for that reason alone it's like, "Yeah, do it then."
Dave: Yeah, that's what gets me.
Chris: I don't know if people are going to accidentally do it. [Laughter]
Dave: I think I had an old post. I'm going to see. Lazy loading, import... Maybe it was a tweet or something. I don't know. Whatever. That's dead now. But it was just all the different ways to import something in HTML. It's like link rel import - or whatever - or link rel something, link rel preload to preload it. Script defer to lazy load it. Script async. Script... Then there is pre-fetch. Then there is image lazy load. There's image loading equals eager - or whatever. Right?
Every time we redesign this API, we use a different grammar, and it just drives me nuts. It's like we're using--
Chris: Mm-hmm.
Dave: We're doing the same thing. But every time we add this feature of, like, user-defined loading and execution, we use different verbs and different nouns and stuff. It just drives me nuts.
Chris: Yeah. Yeah.
Dave: Wouldn't HTML just be easier to do if we used existing words? They kind of did that with even popover. They created new... It's not show and close dialog. It's show and hide and toggle.
Chris: Yeah.
Dave: That's fine. It's just like, "Man, can't we just have uniform stuff?" [Laughter]
Chris: Yeah. I was listening to Surma and Jake talk about one the other day that they were laughing about attribute values can be all messed up. I think they talked about the auto-complete attribute at one point in HTML. You know there are so many.
Dave: Yeah.
Chris: Hidden is a funny one because hidden, its presence means that it's hidden.
Dave: Mm-hmm.
Chris: You could say hidden false, and guess if it's hidden or not. It is.
Dave: Yeah. It's probably hidden, yeah.
Chris: Then they talked about auto-complete. That's a funny one for form elements. Do you think it's auto-complete true and auto-complete false? You'd be wrong, Dave. It's auto-complete on and auto-complete off.
Dave: Oh! Yeah.
Chris: That's a fun one.
Dave: Good.
Chris: Yeah. [Laughter]
Dave: Yeah.
Chris: I believe they said there are reasons. It's not like that stuff didn't come up. There's a reason those are different in some way. Is it a great reason? How hard should we fight for consistency?
Dave: Yeah. Yeah.
Chris: The answer is, "Probably a little harder." [Laughter]
Dave: Probably a little harder. Yeah.
Chris: Yeah.
Dave: A breaking change in HTML, maybe we do that. How do you make an input show the correct keyboard? Well, you use the type attribute. Then you also use the pattern attribute. Then you also use the input mode attribute.
[Laughter]
Dave: If you want to auto-complete it - or whatever - there's an auto-fill equals one of 17 dozen different options to auto-complete it.
Chris: Yeah. Mm-hmm.
Dave: Then auto-complete is not the one you want to auto-complete.
Chris: Uh-huh. The one that always gets me in CSS -- because I somehow have written about it many times and it comes up in my life many times but I can't seem to lock it into my head -- is explain to me which things you need to set so that a really long piece of unbroken text doesn't blow out a container. Mm-hmm.
Dave: Okay. White space pre--
Chris: Good luck, buddy.
Dave: Word wrap none.
[Laughter]
Dave: Wrap-a-wrap. I don't know, man.
Chris: I think those are the ones that make it blow out.
Dave: Yeah, dude.
Chris: To prevent the blowout, you need word break break.
Dave: Oh, yeah, word break break, all break.
Chris: [Laughter] Yeah.
Dave: Break.
Chris: No joke, there is a lot. There are five or six of them.
Dave: Yeah. Nothing--
Chris: Good luck.
Dave: That's job security, man.
Chris: I think I added to the problem because now when I look it up, I find some old stuff that I wrote. I'm like, "How--?" I know that I haven't looked into this in a few years, so is this still the right thing if I copy and paste it, or has there been changes in it since then?
Dave: I feel like my only job security is my ability to open Web inspector, click on the ultra-way too long URL that is wrapping the page or causing the page layout to break--
Chris: Yeah.
Dave: --and cycling through the word break options.
[Laughter]
Dave: To find the right one. Click, click, down arrow, down arrow, down arrow. Break all. Got it. Done.
Chris: Yeah, that's the one.
Dave: Next.
Chris: Yeah, make sure you set your hyphens, too, though.
Dave: Yeah. No wrap has no spaces but no repeat has a dash. That's going to kill me.
Chris: [Laughter]
Dave: There are just a few of them I'd change, dude. I would just... Or implement both. I would just do it. You know what I mean?
Chris: Yeah. Yeah, just do both. That's an interesting one to me. It came out.
I've got to go in a second here--
Dave: Yeah.
Chris: It was about forms and stuff and posting. We have kind of this API in CodePen that uses that. I was like, "Why didn't we--?" because I was writing the back-end code first that accepted the data and processes and dealt with it. I just was like, "Well, of course, it's just going to come over as JSON," because a post can be form encoded as JSON - or whatever. That's the obvious, easy way to handle this because we're asking for JSON data.
But we don't. We send it as form data instead, which needs to have a key. Then the value part can be JSON. I was like, "Why don't we just send it as JSON?" Then I was like, "Oh!" It just wasn't top of mind. I'm sure I thought of this at the time, but it's because HTML can't post JSON alone. It can't. It's not a thing that HTML can do.
If you want this API to work as an HTML, it has to. It can't assume JSON. HTML cannot post JSON to a form. Bummer, right? Why not?
Dave: Mm-hmm.
Chris: Do it. Fix it. It's better.
Dave: Yeah. Yeah. Wouldn't that be cool if it could do that? Instead of accepts mime type or whatever, we have a gives mime type.
[Laughter]
Dave: Method post, post JSON.
Chris: Yeah, I mean JSON has made its way into Web standards. Before it was just kind of a spec or something. But now that we have import type assertions of JSON and stuff, it's here to stay, so let's do this.
Dave: Yeah. Yeah. Cool.
Chris: All right.
Dave: All right. Well, we'll wrap it up there. Hey, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, shart it up. That's how we get discovered. Share it with your friends and let them know you still listen to ShopTalk even though it's been 15 years and 649 episodes.
Then join us in the D-d-d-d-discord. That's where the party has started. We have a new projects channel where people are sharing their kind of projects that they're working on. So, it's kind of cool to see what everyone has been working on from streaming stuff to video games to Web component kits and stuff like that. Kind of cool to see it building out. Maybe we'll share some of those in the future. Yeah. Chris, do you got anything else you'd like to say?
Chris: I don't think so. ShopTalkSho.com.