649: Chrome 133, Attribute Update, and Standardized Async CSS

## Metadata
- Author: [[ShopTalk]]
- Full Title: 649: Chrome 133, Attribute Update, and Standardized Async CSS
- Category: #podcasts
- URL: https://share.snipd.com/episode/f5844a6e-f1a8-4428-a106-5d6f15d73443
## Document Notes
## Highlights
- **Fake Art and Nostalgic Reviews**
- Dave Rupert mentions a YouTube channel, "This Aged Great," which humorously analyzes outdated aspects of 1980s movies.
- He also discusses Maggie Appleton's post about AI-generated art sold on Etsy, raising ethical concerns.
Transcript:
Dave Rupert
Reminded me of two things. Okay. One is this, you want to remember a movie. I've been watching this YouTube channel called This Aged Great, where this guy, two guys, it's a comedy podcast. So like, take that into consideration, but they watch old eight, 1980s movies and just like explain everything that like is wrong with them today. You know, like, like teen wolf or whatever, like, like, you know, or can't buy me love. It's like this guy pays this girl to make him popular, And it's very tongue-in You just can't do this anymore. And a lot of 1980s movies were not the, let's say, most progressive movies in the world. So anyway, it's pretty good comedy if you want like your childhood just like ruined or whatever. But it's very funny if you remember all these movies. But more seriously, Maggie Appleton did this – had a post on her digital garden. So it was called – I had read it – I guess it was planted nine months ago. So I'm out of date. It was Faking William Morris Generative Forgery and the Erosion of History. Oh, yeah, I remember this. So somebody was on my socials was like, hey, does anyone know? I'm thinking about buying this print, but it doesn't look like it's ever it's a real print. And Maggie had chimed in and was like, I actually wrote a blog post about this exact Etsy shop. And it's basically these Etsy shops that use AI. And they're like, you know, make this in the style of Gustav Klimt or Monet or Matisse or something, you know. ([Time 0:03:51](https://share.snipd.com/snip/0807d764-d427-4e9c-abec-618791fa1264))
- **Ethical Concerns of AI Art**
- AI-generated art, while seemingly harmless for personal use, becomes problematic when sold with fake attributions.
- This practice pollutes image searches and misleads buyers, blurring ethical lines in the art world.
Transcript:
Dave Rupert
And so and they make, you know, pretty convincing art pieces. Yeah, it looks like a nice poster.
Chris Coyier
Yeah. Looks like, you know, why not?
Dave Rupert
Get some inspo, right? Like a little inspo. William Morris, you know, who has a very unique style.
Chris Coyier
Right, and these are old artists, right? So it's long in the public domain. Is that how that works? Yeah.
Dave Rupert
So you can just steal the, you know, you don't have to pay Van Gogh any money, I don't think, to put a Van Gogh.
Chris Coyier
So what you probably should have done is found the highest quality image you could of these real paintings and put them on there. But that's not what this is, right?
Dave Rupert
No, they feed an AI, you know, mid-jour or whatever. And they say, go make these fake William Morris's and, uh, in the style of, in the style of, in the William Morris, who has like famous for like very repeatable patterns, like think big Ornate wallpaper. Right. Um, so, and she was like, I was almost buying – I almost bought a print. And then I like went through like all his work to see if this really was a piece he had made.
Chris Coyier
And it wasn't. It was just made up. 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 just like a photograph or image of his real work.
Dave Rupert
Well, it has like the name. It has a date, like a year it was made and it has the museum it's hanging in. That's all just made up.
Chris Coyier
It's just fake. Just fake. And the only way to verify it is to like ask a total expert probably or like just dig through. I don't know what go to the library, try to find every image that William Morris ever created and cross-reference these. Nobody's going to do that. I mean, clearly Maggie did here.
Dave Rupert
Well, Maggie did, but I think like Maggie has like a designer history background, right? And so like I think she was kind of like, oh, man, I almost – I know what I'm doing and I almost got caught off guard, you know? Like I almost bought fake art.
Chris Coyier
But doesn't – this rabbit hole goes little deeper, doesn't it? Because then it's like then the like 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 name and all that stuff means that Then they show up in Google image search as art by that artist. Yeah. So it's polluted the well of like, yeah. So somebody's doing their own research, they type it into Google image search, whatever. Not that that's the end all. Certainly it shouldn't be considered research, but if somebody is doing a quick check, you know, they'd be like, Oh look, there it is. ([Time 0:05:44](https://share.snipd.com/snip/770bc2b7-c172-4226-8ea2-748237f45eed))
- **Polluted Image Search**
- AI-generated images appearing in search results pollute the information ecosystem with inaccurate depictions.
- While AI enhancements in photography are acceptable, fully fabricated images present ethical considerations for accuracy.
Transcript:
Dave Rupert
I'm not like opposed to it. Like my family in the style of Picasso, that would be a fun little goofy photo to send in the group text, uh, where it like turns into like, uh, like you're selling art under this name with The fake, like fake attributions and stuff like that. Like that's, that's where it starts getting into this., oh, no, we're crossing the chasm of ethics. You know, we are lying.
Chris Coyier
We are selling lies, you know? Right. And then polluting the search world is a part of it too. And it doesn't really feel like Google cares. I don't know. Maybe they – Google is a big place. You know, it's hard to paint with one brush. I'm sure there's people in there that deeply, deeply, deeply care. But it's happening and it's happening now. I just saw one the other day. Like when you search like Times Square or something like that, there's a bunch of images of, of course, Times Square in New York City. Very famous place with all the billboards and animation, whatever. And there was a bunch of stuff in there that was just AI generations, not labeled as such, but just like 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 like calculated it looked like based on other images at some time.
Dave Rupert
Yeah. Real Times Square has Elmo, three Spider-Mans, a Batman, and a Superman. And it's a photograph of it.
Chris Coyier
But there is a little bit of a gray line because it's like, well, let's say it was a real photo. Let's say you went to Times Square. You took a picture with your phone and it was a nice picture of Times Square. And then you named that thing Times Square.jpg and you had good metadata on it or whatever. Somehow, some way, your photo came in Google image searches of Timesquare. Well, good for you. You did it. That's a real photo of Timesquare. 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. It's color corrected a little bit through those same technologies. So maybe you could argue, hey, that's fine.
Dave Rupert
It's still real. You can highlight a person and zap them out now, right? Like you can do all that stuff. Yeah.
Chris Coyier
Yeah. And we applaud that. And I do too. I think that's cool and stuff. But then how far different is that than a fully fabricated photo? I don't know. It's different, but how different? How much does that matter? And maybe we'll come to the point, I mean, 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. ([Time 0:08:21](https://share.snipd.com/snip/4a481fe7-492c-4ba5-b4ec-0c152e5afa4c))
- **HTML's Status and Impact**
- The debate over HTML's status as a programming language is ultimately inconsequential.
- However, downplaying its importance can negatively impact salaries and recognition for skilled HTML developers.
Transcript:
Dave Rupert
Computer stuff. Wired kicked off the year with a good article by Tim Karmadi called, HTML is actually a programming language? Fight me.
Chris Coyier
Interesting use of it. 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. I feel like fight me works better with the period at the end of it. I think so. I'd agree with that. 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. And I think Tim is also a good, I read his, he had some, or maybe still does a newsletter about the, where he watched the company Amazon and wrote about it. Cool guy. And I tend to agree with this assertion in a way. 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 like absolutely guaranteed that you're going to hear from some people with their little opinions.
Dave Rupert
Oh, this is your engagement beat. Like you're kind of like, uh, yeah, I like it.
Chris Coyier
I like to see what people think. Cause I think that this doesn't matter. I don't think there's any, any benefit one way or the other. It's a little bit like the, like, is it a web app or is it a website? And people love to talk about that. And you're like, let's say you nail it. It still doesn't matter. It just doesn't matter. There's no implications in it. Yeah. Zero people were convinced. 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. So it's kind of like, 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.
Dave Rupert
Yeah. It is curious to me why HTML and CSS get downgraded so much, you know, like every website in the world has HTML on it. I'm just going to throw that out there. You know what I mean? Um, so it seems like it works pretty well and is pretty ubiquitous. A hundred percent chance. Yeah. A hundred percent coverage. Um, you know, but like, we, we're not like, Oh, JavaScript's not a programming language, you know, even when it was like, you know, because it's very kind of, I guess it's obviously is. But, you know, then people are like, oh, JavaScript is.
Chris Coyier
Yeah, it's, you know, 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. Yeah. And I get HTML is interpreted in a different way. It doesn't have that same kind of execution model and whatnot. Like, I don't even want to get into it because I just don't care. ([Time 0:12:00](https://share.snipd.com/snip/e487b631-be2b-4c4c-9770-44b3610cd908))
- **Modern Web Dev Skills**
- While HTML and CSS are valuable skills, they are insufficient for senior roles in modern web development.
- Proficiency in related technologies is crucial, including understanding how HTML is generated and integrated with other systems.
Transcript:
Chris Coyier
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 kind of like, you know, for lack of a word, denigrated or whatever, treated Like a baby language, that then stuff like salaries and stuff come into it, you know, that like 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. And I don't think there's any argument against that. Like, it just is, you know? And I have probably, you know, controversial opinions when it comes to that. And that I do feel like if your only skill in web design is like you're just amazing at HTML or something, even if you're just amazing at just HTML and CSS, that like, you know, controversially, That's not enough. You need to do more than that to be a, you know, like maybe there is a job for you or whatever, but like, I don't know that you deserve to be the CTO of a company or something like that's just, 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 that particular, if that's your only skill set. It's not enough. Yeah.
Dave Rupert
I mean, I probably tend to agree there. But I also, you know, like I know, you know, Microsoft and other companies are looking for people who are good at like CSS. Like who understand how a website works, you know, and are not just fake it or like, you know, plopping code, you know? So I know those skills are in demand, you know? So I think more and more people are realizing that role is necessary. And, you know, maybe it has to take on this role of design engineer, you know, and you probably will have to write JavaScript or something, you know, but. ([Time 0:15:32](https://share.snipd.com/snip/49641833-d1ac-437a-9e65-59e30843fc91))
- **Advanced attr() Discovery**
- Dave, while building a web component, desired a way to format attribute values directly in CSS.
- He discovered the "Advanced attr()" feature in Chrome 133, which allows specifying the type of an attribute value for styling.
Transcript:
Dave Rupert
Yeah. So I was actually making something yesterday. I was making a web component, right? And it's like, you know, sometimes you're just like, oh, okay, I'm going to have size or something or gap is what I was coding, right. And I was like, okay, I'll make the gap 32, you know, or like let you pass in a gap as an attribute. And then I was like, okay, cool. Well, now I got to make it like set the style to 32 pixels. You know, I can just do an inline style in the template or whatever, you know, it's not the end of the world, you know? And I just was like, God, it would be cool if I could just like use an attribute and format it as a pixel and then send it out. Well, I was pleased and I was like, where's the status on Adder? Because I knew like it was like kind of being talked about. And I found out, I found a Chrome developer, Chrome blog post, Advanced Adder is what it's called, but it gets an upgrade. And so in your CSS, you can say whatever,.grid, gap, colon, Adder, gap. And then you can do whatever. You can set a type to.
Chris Coyier
Well, a gap is going to be a number. It has to be for it to be valid. And that's what Adder couldn't do before. It was always a string. So Adder 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, like, set it to the content of a pseudo element or something and redisplay it. There's very little you could do with a string. Even if that string happens to be like red, R-E it's still the string red. It's not the color red. Yeah. So that wouldn't work. You can't say data color equals quote red and then use adder to set the color. It literally wouldn't work. So the like that is the utility of adder before this was pretty dumb pretty useless once in a blue moon it would be useful for something like a text effect where you needed to like 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 your 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, you know? And it's proven through the kind of the DX or the, I don't know, the semantic quality, the declarative quality. It's like it looks nicer to use that. And we got that essentially through props. You know, JavaScript libraries were big on kind of, I don't know, invent your own props. In a way, this is giving you a little bit of a green light to invent your own props.
Dave Rupert
Yeah. And so you just do adder, parenthesis, gap, and then you space px. And it'll just be like, oh, I'll set it to a pixel. ([Time 0:25:29](https://share.snipd.com/snip/f4eac9eb-abaf-4414-8c04-6b15de1e0674))
- **Leveraging attr() for Styling**
- Use `attr()` to set CSS properties directly from HTML attributes, enabling more dynamic styling.
- This approach allows for fallbacks and avoids the inflexibility of inline styles, providing better control over design updates.
Transcript:
Chris Coyier
Oh, even an atter you can do. So if you don't have one at all, it still falls back to that. Oh, that's nice.
Dave Rupert
So it's almost like variable. A custom property usage. Yeah, custom properties. So it has the same sort of deal. And so I just, I was like, dude, this is going to solve a bunch of problems. We have like one component that's like an avatar, you know? Okay. And we have, you know, small, medium, large, right? T-shirt sizes. And then we have XL, XL, XXL, XXXL, four XLs. And then we have four extra smalls and then a tiny. And like, it's just, you know, at some point, it's all based on like four pixel measurements or four pixel whatever rhythms, you know. It's just like, we have so many. It should just, you should just pass in the pixel size. You should just tell us the size.
Chris Coyier
Like, we should quit. God, even after you did that, you could round it. Right, exactly, right. 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. And I think that's crucially too, is that when you set an inline style, let's say your alternative to this was to set style equals dash dash gap is 20 pixels or whatever. Now you are, you know, you're passing information from the HTML into the CSS in a way that it can be used, even typed. And that's cool and it kind of solves the problem. But you are applying that style to that element. Like it's not 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 in the site doesn't do crap with data dash color like it that's that's old and we'll clean
Dave Rupert
That up at some point but it's not forcibly applying an inline style yeah i mean and then you have like a like that and that's you know there's like every if you apply an inline style that's Like a style recalc and stuff like that like like there's probably performance advantages we're squeaking out here too you know just, just by like JavaScript didn't have to run to set A variable, you know, that's huge. Like it has, it has tangible impacts, you know? Um, so anyway, I'm, I'm just kind of excited. I mean, one, another way, place I'm excited about it is like, you know, like grid areas and stuff like that. Like how cool would it be to just be like whatever header area top you know like like you're controlling where they where it's going from the html yeah like i just i'm slotting it into the The named areas on my yeah on my master layout that i've created.
Chris Coyier
I feel like there's Tailwind people rubbing their hands, like Dave and Chris, they're starting to understand the power of Tailwind as we speak, but they're not saying it. ([Time 0:29:28](https://share.snipd.com/snip/c8dadb18-a046-4d16-b7d4-0a1b261493e0))
- **Taming the "this"**
- Dave, bothered by the visual prominence of "this" in his light-themed code, explored ways to minimize it.
- He dimmed its color in VS Code and considered replacing it with a glyph, sparking the idea of a rune-based coding font.
Transcript:
Dave Rupert
I was, you know, I just, I was sitting there like, you know, I'm looking at my code base and it's like this dot food, this dot bar, this dot, this, this, that, that, that, that, that, you Know, super, super, you know? And I just was like, man, it's not a problem. It's just a lot, you know? And I think I was using GitHub light theme. I'm sorry. I use a light theme. I know that's bad, but the contrast is better for me. It was, you know, it just was like, man, I am like staring at the word this, because it was in this dark 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. So I was just like, how can I get rid of the word this, you know, like, could I make like a, I don't know, what can I do? And so brought it up into the discord and got some ideas you know um and I the first thing I tried was like to dim it like to could I just make it lighter you know like like sure less opaque or
Chris Coyier
Like gray does that work it works I can do it I think it's set up to do now well what I like about that is that you uh because I change themes once in a while and I always feel like if I pick a color Or something, like 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, would survive through theme changes. Yeah.
Dave Rupert
And so like you can, um, like basically there's ways to do it. You have to kind of dig into the VS Code API, and it's like this text meet rules thing, like this old tech that it pulled over from text meet. But you just say variable.language So just this is the keyword in that language. You can set the foreground to lighter. And I also did the same thing for comments because I was like, dude, I don't, you know, the comments, I really only need those when I need to read the comments, you know? Yeah. Like, so I wanted that default color dimmed down.
Chris Coyier
I have a plugin that does the exact opposite. It, whatever comment, when it finds a comment, it makes it hyper super orange although only does that when it starts with to do so i guess i should have heavy out of that first like if it's
Dave Rupert
A to do comment it's like i like that and i like when they highlight words in the in the thing like when like when i get like syntax highlighting and like a js doc kind of thing i kind of think That's super cool, you know?
Chris Coyier
Oh, yeah, right on.
Dave Rupert
But I would also like it to be dimmed down and, you know, diminished, you know? Because it's not the focal point of what I'm trying to read and write, you know?
Chris Coyier
So you chilled out your this. All you did was just like toned it down. Toned it down. So now when you're looking at the code, it's just not as intense there. And just that alone seems like an improvement.
Dave Rupert
Yeah, totally. I mean, it's like cool waters. I'm not, you know, I don't have to like, whatever. I'm not getting screamed at all day. And so that's great. And then like, I'd also kind of ask Discord, like, you know, could I like replace it with an icon Like, could I just replace the word this with an icon? And, you know, I think Ginger had said, you know, use the pointing up emoji, you know, like. Oh, yeah, yeah. Which I like from, like, it's like I'm with stupid, you know. It's like pointing up or, you know. But it's also like, you know, social media, people go this, right? Like, you know, so that funny um double funny to me uh but andrew walpole has been on the show uh he was he took it to the next level and made a glyph for this and it's the word this kind of a diamond Pattern and then alan smith figured out how to use glyphs mini to put a custom ligature so you know how like you have like whatever fi and it combines it into one character yeah that's the
Chris Coyier
Part that starts to get scary for me i'm like really you could you that's next level stuff it's pretty impressive like like like did like you know how like you do like arrows, you know,
Dave Rupert
Like arrow, arrow, bracket, and it'll turn it into like a super arrow or whatever.
Chris Coyier
Yeah, it happens in coding fonts a lot. Some people really dislike it because then it's not like the, you know, it's not then the syntax of the language. It has like changed. Yeah.
Dave Rupert
Yeah. If you did like, whatever, exclamation point equals, not equals, you know, it'll do like an equal with a slash through it.
Chris Coyier
Right. So like, that's kind of probably the quick example. Yeah. My controversial opinion is that I just don't either way, whatever.
Dave Rupert
I actually, it's like more distracting to me, you know, it makes, it's like, it's especially like double equals and triple equals, which matters, right? Like, yeah, leave them alone, please. Yeah. Yeah. Please, please, please don't optimize that, please. But, but anyway, to each their own, I understand why it's good, but, but Alan Smith figured out how to like, do like a glyph, you know, make a glyph for the word this dot and like, just put Whatever character you want in there. And so Andrew took that and is on what's our favorite app setup it's so it's on glyphs mini is on setup so you didn't even have to pay extra money he's already paying for setup paid right So sick um but anyway the so andrew then took his glyph and put it in a font in glyphs mini and exported like a fear of code with with this.
Chris Coyier
It's good thinking. I've seen that done before with fear of code. I think that's because I think it's already a little glyphed up. Yeah.
Dave Rupert
I think there's like versions of it where it's like normal and ultra glyph. Yeah. You know, like. So anyway, he. Got it going. Glyph into there. And like, you know, and I have a screenshot of like the code and it's like, it's wild, dude. But it's cool, right? It's like, it's the glyph, you know, and then my variable. I think like, I think it's awesome. I, you know, like after staring at it for a while, I was like, I don't think this is like for me exactly. Cause it's just like, I, I think it's too weird. Probably is probably the right word.
Chris Coyier
You know, what happens when you like put your cursor right in front of it and hit backspace? Does it delete the whole glyph or does it just delete the S? I think it deletes the whole glyph.
Dave Rupert
But if, I think if you started deleting, it would split it or whatever because you broke the ligature. Does that make sense? Like if I was on the dot, the right side of the... Yeah, that's what I mean. Then you hit delete. What happens? The S gets deleted? It would expand this and delete the period and then it would keep...
Chris Coyier
I see, I see. Because you type T-H and as soon as you hit S, it turns into the ligature.
Dave Rupert
Well, the ligature had the period in it, so it could detect. Oh, it had the period in ([Time 0:36:12](https://share.snipd.com/snip/79d93690-4026-4124-abf2-dcaffdcad552))
- **Fear of Misuse**
- Dismissing technological advancements due to potential misuse is a flawed argument.
- Many powerful tools, like setting colors in CSS, can be misused, yet their benefits outweigh the risks.
Transcript:
Chris Coyier
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. And I don't know, because I've never really deeply participated in spec stuff, but it seems to like 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. And I always think of like 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. Or you can, you know, you can kick stuff out of the accessibility tree easily. You know, there's all these things that like, they're incredibly powerful. Almost every tool can be misused in some way to ruin it. And I thought of it the other day because our mutual friend Scott Jell has taken on a new spec fight that he wants to fight. The last one he took on, you know, he tends to win these things. I think he was involved in responsive images overall to some degree. And then he got into responsive video, which is now like done. It's like a one battle. And we have responsive video in a large way. Thanks again to Scott and other people, of course, but he's the one who's like, I'm going to fight this until it goes back into browsers, all the way up to it and including like learning C and doing the browser patch myself. This latest fight that I'm talking about is called let's standardize async CSS. Meaning like 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, you know, and it's an interesting thing and he's all about it. That would be cool. Yeah, but, you know, I think the little bit of pushback he's getting is, yeah, but you could, you know, that could be bad. It could be misused. You could break a website that way. Again, so you can do that with literally everything. So I just, I don't love that argument, you know?
Dave Rupert
I would say from a standards point of view, you need somebody in the room who has the freedom to say that, you know? Like, somebody's going to misuse this technology. It kills babies, you know? We need that, right? It harms unsighted, non-sighted users. Like, this would be able to say it sure right like that needs to be and there needs to be a person in the room who will say that does that make sense but i i i agree i feel like it's this like somebody Might misuse something so we can't do it is like the, the like fear of misuse is over indexed at times, you know, like people are going to do bad things with technology. Like, I mean, when people were like, people are going to whatever generative, you know, LLMs, right. People are like, wow, I made the computer talk like a person. You can make a chat bot immediately. Somebody's 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. You know, um, 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 the thing you can do, man. But like, you know, do you get smarter if you do that? And he was like, no, not really. And I was like, exactly. You know, so like, like I would do it the hard way, you know, not take the shortcut, but then, you know, but then on, and then you take that from the next level and now people are generating Whole websites from one prompt just to spam, generate spam to get keywords, you know, like like the slop sites, you know, like that's misuse of a technology. And 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, you know, gender video. And then you have, what is it? Deep fake pornography and stuff like that. Like that sucks. You know, deep fakes in general suck. So like we do need constraints, you know, but. ([Time 0:45:38](https://share.snipd.com/snip/6f77c402-a4d6-4b72-8fd9-299063ac1ffc))
- **Uniform APIs for the Web**
- Strive for consistent APIs in web development to reduce complexity and improve developer experience.
- The numerous ways to import or lazy-load resources in HTML demonstrate a lack of uniformity, creating unnecessary confusion.
Transcript:
Chris Coyier
For me it's like a uniform api almost for that reason alone it's like yeah do it then yeah that's what gets me the people are going to accidentally do it just like i think i had an old post
Dave Rupert
I'm gonna see like lazy loading uh import uh anyway or maybe it's a tweet or something i i don't know whatever that's dead now uh but it was just like all the different ways to import something In html you know it's like link rel uh import or whatever you know or link rel something uh link rel preload to preload it script defer to lazy it, you know, script async script, you know, Uh, and then there's like prefetch and then there's image lazy load and there's image loading equals ease eager or whatever. Right. Like we're everyone, every time we redesign this like api we use a different grammar and it just drives me nuts you know it's like we're using you know it's like we're doing the same thing But every time we we add this feature of like user defined loading and execution we use different verbs and different nouns and stuff. And it just drives me nuts. So yeah. Yeah. When HTML just be easier to do if we like used existing words, you know, and they kind of did that with even popover, they like created new, you know, it's not, it's not show and close like Dialogue. It's, uh, what hide and toggle, you know, and that's fine. It's just like, man, can't we just have uniform stuff?
Chris Coyier
Yeah, I was listening to Surma and Jake, you know, talk about one the other day that they're laughing about, like attribute values can be all messed up. I think they talked about the autocomplete attribute at one point in HTML. You know, there's so many. Hidden is a funny one because hidden is just like its presence means that it's hidden. So you can say hidden false and guess if it's hidden or not. You know, it is. Yeah, it's probably hidden. And then they talked about autocomplete. That's a funny one for form elements. Do you think it's autocomplete true and autocomplete false? Ah, you'd be wrong, Dave. It's autocomplete on and autocomplete off. Oh, bless. Yeah. So that's a fun one. Good. You know, yeah. Yeah. And I believe they said there's, you know, there's reasons. It's like, it's not like that stuff didn't come up. You know, there's a reason those are different in some way. Is it a great reason? You know, like how hard should we fight for consistency? And the answer is probably a little harder.
Dave Rupert
Probably a little harder. Yeah. Yeah. A breaking change in HTML. Maybe we do that, you know? How do you make an input show the correct keyboard? Well, you use the type attribute. And then you also use the pattern attribute. And then you also use the input mode attribute. If you want to autocomplete it or whatever, there's an autofill equals one of 17 dozen different options to autocomplete it. And then autocomplete is not the one you want to autocomplete. It's just, anyway. ([Time 0:51:29](https://share.snipd.com/snip/59f441d0-9a6f-41b7-a8f6-a226a49d0aa7))