Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: [Vocal percussion]

Chris Coyier: You've still got funk on the brain.

Dave: [Vocal percussion continues] Oh, man! Chris, I've got the mouth base out, so you know what that means. It's time for mouth blogs.

Chris: [Laughter]

Dave: [Louder vocal percussion] Mouth blogs!

Chris: [Laughter]

Dave: So, a new segment. A show within a show here on the ShopTalk podcast.

Chris: Yeah. What is a podcast if not a mouth blog?

Dave: Yeah.

Chris: But we like to home in on it sometimes and literally kind of go off on something.

Dave: Mm-hmm.

Chris: You know one of the things I want... You can mouth blog whatever you'd like as well.

Dave: Oh...

Chris: But I thought that the verb could be HTML this week.

Dave: Ooh!

Chris: Let's get into it.

Dave: I like it. Let's go.

Chris: Let's get into changes in HTML.

Dave: Mm-hmm.

Chris: One of the things I'm thinking about is how it's certainly the most slow moving of the big three of the Web platform, right?

Dave: Mm-hmm. Mm-hmm.

Chris: But then of course, when I think about that, I always think good slow. Slow like brisket, as Dave once said. I've even seen a diagram pulled up that shows kind of the inner wheels of things and sometimes they intentionally move slowly because they're slow foundational. Then the rings go outward, and they move faster. It just kind of paints the picture nicely.

I'm not doing a good job mouth blogging that, but that's the idea. HTML is in the middle (at the time). And you don't want HTML to move really, really super-fast. It's too foundational for that. So, things tend to move a little slower there at the risk of it feeling boring. But it hasn't really been boring the last year. HTML has been a lot more exciting.

You think of the exciting things that happened to HTML. You have to go way back to HTML 5. You have to be like, "Ooh, we got a section element." You know? Which is so [laughter] so boring.

Dave: Mm-hmm.

Chris: Like, "Who cares?" You know?

Dave: Yeah. Yeah, yeah.

Chris: Sure. Does it have implied roles on it?

More recently, we got a search element. That one is kind of cool because it feels good. A lot of websites have search on it. Just kind of feels good to wrap that thing in search and what you buy by that is a correct ARIA role around it in browsers that support it, which I think is all of them now.

Dave: Mm-hmm.

Chris: But it's still a little boring wouldn't you say? Meh... You know.

00:02:37

Dave: It's an ARIA role.

Chris: I guess. Yeah.

[Laughter]

Dave: It's div ARIA role equals this. You know?

Chris: Yeah.

Dave: Which is fine. I don't know.

Chris: Yeah.

Dave: The main element, spicy div.

Chris: Yeah, that one is kind of good.

Dave: Section element, spicy div. Nav, spicy div.

Chris: Yeah. But let's get into the exciting ones because those are all--

Dave: ARIA closed brackets, yeah.

Chris: Those are all a little boring. And if that's how you think of HTML, I wouldn't blame you.

Here's a more exciting one. Detail summary. It's not exactly new.

Dave: Yeah.

Chris: Okay. That's been around for a minute. Sometimes they call it a disclosure widget. Why do they call it that, Dave?

Dave: I think that's old accessibility chatter. [Laughter] The idea of, like, you're going to say, "Spoiler alert," or "Content warning." It's just basically you're disclosing you have closed the content inside but you're disclosing what's inside the next brick, so you can optionally engage or disclose you can close it out.

Chris: Yeah. There's stuff that's just not there until you intentionally engage with it. The way that it expresses itself is there's a little triangle thing.

Dave: Mm-hmm.

00:03:45

Chris: That's what the summary element has in it, which is even optional I think. If you don't put a summary, you still get a little triangle that says summary, I think.

Dave: Yeah. Yeah.

Chris: [Laughter]

Dave: Something. It says something. Yeah. Yeah.

Chris: Yeah, you click it and then it reveals whatever is inside of that. Okay, you probably knew about that one.

Dave: Mm-hmm.

Chris: But that one is nice.

Dave: It is.

Chris: I like it. I use it a lot. I slip it into blog posts when I want to say a little aside but make it kind of skippable. I use it for FAQ type of pages, just any kind of thing that you're just like, "People don't really need to read this." You can use it for a spoiler. It's just great. It's a great HTML element. But it's had some changes over the last year or so and there is more to come for it.

One of them is cool in that it can have a name attribute on it just like kind of an input type checkbox. That's where the name attribute comes up the most in my life is all input of type checkbox that have the same name are part of the same checkbox group or radio button group. It's more important in a radio button because only one of a radio button can be selected.

Dave: Mm-hmm. Mm-hmm.

Chris: Which I think is nice, but it's relevant for checkboxes, too. So, it's like a weird thing to reuse, but that's what they used. If a group of details element all have the same name then the side effect for that is only one of them can be open at a time, which is an accordion. That's the default of an accordion. If you're using the word accordion in a different way, you're wrong. [Laughter]

Dave: [Laughter] Yeah.

Dave: Accordion is one thing can be open at a time. Otherwise, it's just a bunch of open and close machines, and they don't need to be connected to each other. You don't need to think of them together.

Dave: Yeah. Yeah.

Chris: Yeah, so that's just a bonus. Isn't that great?! Good job, HTML. Thanks for that.

00:05:30

Dave: I think it's great. We evaluated it. I will say I had this article and I get looped in on this all the time. Details is not an accordion - or whatever.

Chris: It is now.

Dave: It is now, and that's sort of... I need to update that article, but the story has kind of changed. We evaluated it recently for our design fluent UI according, fluent UI Web components, and we kind of came to the same conclusion that we kind of need the affordance of heading elements and not having that semantic stamped out.

You may come to a different conclusion, and I think that conclusion is valid for you. But we came to the conclusion we kind of need that, still. But I could see if you're just a little tree element or something like that, you're just - boom - powering through these folders full of icons or files or whatever, this might be a really great pattern. You're just like, blurp-blurp-blurp-blurp-blurp. You know? Open and close all of them.

So, I think, consider that. I don't think it's the end of the world. I think it's cool that we have this in HTML.

00:06:43

Chris: Yep. And then, as soon as we got this thing, people are trying to do more with it. Immediately, they're like, "Well, how do you animate the triangle then? Why can't it animate sideways?" Because you couldn't do it, you'll just lose some certain amount of people that use this thing.

Dave: Mm-hmm.

Chris: Because they're like, "Well, mine animates and yours doesn't, so why would I use yours?" You know?

Dave: Yeah.

Chris: You should because you get a bunch of free stuff. But you know that's starting to change, like, "Okay, well, let's actually make it use ::marker," and this is not done yet but this is more of now we're into kind of proposal territory or kind of moving along a little faster than that. You should be able to change what the triangle even is.

Dave: Right.

Chris: We already have that with list items with ::marker. That was a big improvement over the last few years in CSS, I thought. Now the marker will work for the triangle as well (should this proposal come through).

Dave: This is the biggest thing for me is just the standardization on name parts - kind of.

Chris: Yeah.

Dave: We talked about parts in a recent episode.

Chris: Yep.

Dave: But just that they're called the same thing across elements. That seems huge to me.

Chris: Yep.

Dave: I want that.

Chris: And you should be able to animate it. Not only just the triangle but the opening of the widget entirely. We probably talked about this type of thing before. There are foundational pieces that are landing both in CSS and HTML that are making this kind of thing happen, these discrete animations and what I kind of group together in my head is animate to auto stuff is happening.

Dave: Mm-hmm. Yeah.

Chris: But that doesn't necessarily help details unless they let it work, and that's all part of this kind of improved proposal and that kind of thing. You know details can't be the root of a ShadowRoot for some reason. [Laughter]

Dave: Unallowed?

Chris: Yeah.

Dave: Mm-hmm.

00:08:33

Chris: But that's changing. That could be the case now, too. As well as the guts of inside of a details. You have details and then you have summary. And then everything else in there.

You don't have to wrap it or anything. You don't have to put a div around it. You could have ten paragraph tags and all ten of them will hide and show when you open and close it.

Dave: Mm-hmm.

Chris: There doesn't need to be a single wrapping element. You don't have to name it anything specifically. It's just anything that isn't the summary is what gets hidden.

Dave: Yeah, yeah.

Chris: But there's no automatic way to kind of select all that. There is now. It's ::details-content.

Dave: Hmm...

Chris: It's a way to just be like, "Select all the other stuff."

Dave: Hmm...

Chris: Which is nice. That probably opens the door to the animation kind of stuff.

Dave: Yeah.

Chris: I might have that wrong, but you know there's that.

Dave: Yeah.

00:09:21

Chris: Then naming the different parts of it with named pseudo elements, which is nobody's favorite API but they probably should be in there.

Dave: Mm-hmm.

Chris: I do like that idea, generally. If a date input had really strongly named pseudo elements in it, I'm sure we would all appreciate that.

Dave: Well, I think about a data list. Have you ever used data lists before?

Chris: Occasionally, yeah.

Dave: It sucks because it's ugly. It's ugly in every browser. Somehow they managed to make it a different kind of ugly in every browser, but it's ugly in every browser. If you could style it--

Chris: Do I have this right, though? That's the thing that you could give five options to an input, and then you can still type whatever you want in the input but there's a drop down that shows you the five options that you could pick.

Dave: Yeah. Exactly, like apples, bananas, pears, oranges.

Chris: But you could still type orange if you want - or whatever. Yeah.

Dave: Right. It kind of autocompletes for you, kind of like a list box or whatever.

Chris: That's a nice feature. That's kind of old-school. I think that was--

Dave: Well, it would be cool to use. But you can't use it. Then even if you put it on an input type color and you pull up a color picker, you'll only see those colors. Isn't that interesting? That's an interesting hidden secret power.

Chris: Oh, right. Yeah, I've seen you can use it on a range input as well and it'll put little tiny tick marks where the options are.

Dave: Ooh! Now that's cool. I didn't know that. That's cool.

Chris: Yeah.

Dave: Hmm, hmm, hmm.

Chris: [Laughter] But it's so subtle.

Dave: Right.

Chris: These things are not--

Dave: Right. Oh, I'm going to use that. [Laughter] I'm going to use that.

Chris: [Laughter]

Dave: But that ability to style. If you could style, people would use it, I feel like.

00:11:02

Chris: Yeah. High-five to Stephanie Stimac on that who follows that and blogs about these things nicely. I'll put a link to that in the show notes for sure.

Even more... Well, kind of equally new school to that is the idea of styleable selects in HTML is coming back but kind of in a new way. Do you remember they played with this? It feels like it overlaps with your era at OpenUI where they were trying to solve this. They were like, "Well, let's prototype it with an element called Selectmenu," one word.

Dave: Right. Selectmenu, it was going to be different, like a Select 2, basically.

Chris: Yeah, Select 2.

Dave: It was going to be its own kind of thing and you could have options that have divs and images and SVGs.

Chris: It's just a lot more, and all of it was just pure CSS styleable. Just do whatever the hell you want with CSS in there. The reason they couldn't do that on select is because there probably is a whole bunch of CSS already applying to select elements that is rendered benign. And if all of a sudden you're like, "Oh, no. That's fine now," who knows how much of the Web will break because of that?

Dave: Mm-hmm. Mm-hmm.

Chris: You have to make a new element. Well, "Do you?" is the question.

The problem with Selectmenu is there's no real good progressive enhancement way to start using it, really.

Dave: Yeah. Yeah.

Chris: It was just too awkward.

Dave: How do I fall back to a browser that doesn't support Selectmenu?

Chris: You can't.

Dave: Yeah, you can't.

Chris: It would have to be an elaborate JavaScript swap-a-roo kind of thing, which isn't particularly friendly with progressive enhancement techniques. What if JavaScript doesn't run or you're in an environment that can't run it? It's just a problem.

Dave: Mm-hmm. Yeah.

00:12:49

Chris: Anyway, they kind of fixed it because they just had a different opt-in. The opt-in doesn't have to be it's an entirely different HTML element. The opt-in now is CSS-based. So, you take the select element, just select as a selector, just selected somehow in the CSS, and then say appearance:baseselect. And then you have to do this other little pseudo element, too. It's not worth me mouth blogging that particular part, but we'll have a link to it. It's like ::picker.

Dave: It was picker.

Chris: Yeah, it's weird.

Dave: I kind of don't know why that's there, but I would like to know more. I would like to.

Chris: Yeah, that's a weird one, but it's part of the opt-in. Now you've opted into this; you get all those same benefits that we discussed with Selectmenu. Now you can do whatever in there.

Dave: Mm-hmm.

Chris: You can totally style the thing that opens up, and I do think that's an important distinction for people to understand. The thing that you just see on the page, by default, the closed select, you can style that.

Dave: Yeah.

Chris: That you can do whatever you want to (for the most part). That still feels a little bit new. I think not everybody knows that. But you can mess with that. Just like if it's a button or anything else.

But the thing that you open you could not touch, particularly across browsers.

Dave: Mm-hmm.

Chris: But now that you're opting into this (as soon as it's supported everywhere), now it's hog wild. You do whatever you want. Probably how it should have worked to begin with, but what are you going to do?

00:14:12

Dave: Yeah. One interesting bit about it is they kind of realized you could put invalid HTML in there and the browser just doesn't render it in a native select. I can put a button, and then--

Chris: You sure could.

Dave: That's how, if you click on a select, it's a button, right?

Chris: Yeah.

Dave: Then they have this element. I think it's called Selected Content now. I can't remember what that is.

Chris: Well, we didn't get to that yet.

Dave: Okay.

Chris: But that's a weird part of this is that you have to use this additional element because when you select, you have a list of dropdowns: apples, oranges, bananas - like Dave used earlier. You select oranges. You can see on the page that you've selected oranges.

Dave: Yeah.

Chris: Now if you're taking over styling of this thing and doing whatever weird stuff that you want, you need a button to open thing and you need an element that says the selected option goes in here.

Dave: Mm-hmm. Mm-hmm.

Chris: And so, that's the thing that's going to say oranges on it now. Now, there's a whole can of worms associated with all this. They went into it on Jake and Surma's show. I don't know if you listen to that.

00:15:23

Dave: Yeah. Oh, Off The Main Thread, a good podcast.

Chris: Yeah, they really went deep onto this Selectmenu thing because Jake is interested in that particular element and its behavior is ultra-weird on the Web platform that that Selectmenu button is like, "What is it?!" How do the styles work on it? Is it a perfect clone of the one that's inside the dropdown or can you style it differently? Are there infinite loop problems? I forget all the details of it, but because now you have totally open styling control of all the options inside the menu, what happens when it gets kind of booted up to the selected element?

Dave: Yeah.

Chris: The little thing that shows you what is the selected option.

Dave: Yeah.

Chris: It's weird. I'm sure they'll come up with something fine. For most usage, it's probably not that big of a deal. It's just a really nerdy, deep in the weeds kind of thing.

Dave: Yeah.

Chris: Selectedoption is what it's called.

Dave: Selectedoption.

Chris: So, selectedoption, no space in between them. Just one big, long word selectedoption with angle brackets around it. It's literally an HTML element.

Dave: That's the only net new thing to this select element, right?

Chris: Yep. Yep.

Dave: You have option and you have select data option inside a button of some kind.

Chris: Yep. You lose some things, too, like multiples not selected anymore - that kind of thing.

Dave: But I feel like that needed to go away anyway. [Laughter]

Chris: Yeah, that sucked anyway, so bye-bye.

Dave: Yeah. But I think they're going to work on it in a v2 or something like that, so that might be interesting. But I think you'll be able to get the images in there. I think the custom styling of elements options is going to be huge.

You think of a Typekit isn't around anymore. Adobe Fonts or Google Fonts or something where you're clicking a dropdown and you want to see -- or Figma -- you want to see the font, the text in the font.

Chris: Yeah. Yeah.

Dave: Now you can do that. You know what I mean? You can basically show the font name in the font and people will be like, "Oh, that's actually super-handy."

Chris: Yep.

Dave: You can have a country picker with flags. Flags are a little dangerous, but flags.

Chris: Yeah, the currency pickers and stuff. Those are what the demos are begging for, and they look great. The demos look excellent. The demos look like, "Hell yeah!"

Dave: Yeah.

00:17:45

Chris: You know what it makes me think of is... Because we're sitting here recording this in this app called Riverside.fm.

Dave: Yeah.

Chris: We were talking about anchored popovers, which we didn't get to, but that's a new part of HTML we can briefly touch on.

Dave: Oh, yeah.

Chris: I was talking about how the anchoring needs to get in because popovers are just begging to be anchored. What the hell? You know.

Dave: Yeah.

Chris: You pointed out in Riverside there are so many. There are so many anchored popups in this very app that we're looking at now. There are like 12 - or something.

Dave: Yeah. For sure.

Chris: Of course, they're doing it with... Obviously it's probably a React app. They're probably using floating UI or something. You inspect the things and it's just some div sitting somewhere on the page that gets left and top values that are intensely calculated to be perfect to put them where they need to be. Fine, but that's supposed to be what we get for free with anchored popups, right?

Dave: Yeah.

Chris: It's going to be great. But also look at what they are. They're little menus.

Dave: Mm-hmm.

Chris: They're mostly little menus for selecting what speaker you're using or what microphone you're using or whether you'd like to be the presenter or not or something. These styled popups make me think that people are going to -- maybe incorrectly -- use these really nicely styled selects for this kind of thing. Couldn't you see that?

Dave: You know it's interesting because I've noticed in other designs, too, where it's like a popover but it's just like selecting options in there.

Chris: Yeah.

Dave: There are other text, though. There will be like, "You can't switch mics while recording," or "Don't see your mic?" anchor link "Get help," which is invalid inside of a select. So, how do we do these kind of elements before or after slots inside a select? I don't think you can, per se.

00:19:35

Chris: You probably don't want to do this. The microphone here, though, I could maybe see.

Dave: Mm-hmm.

Chris: Because all you're doing is picking a microphone. But look at it. Roll over it right now. I'll show you. I'll mouth blog what we're seeing.

A really nice list of ones that you can pick. Some of them are grayed out for some reason. I don't even know why exactly. Probably because we're recording and it doesn't want you to switch in the middle. Then there's a big checkmark next to the one that you've selected. That looks good.

But at the top of it, it has a paragraph that says, "You can mute while recording but you can't switch mics." It's helpful. That's not an option. You can't say, "You can mute while recording, but you can't switch mics." That's not a valid thing in a select. You'd have to really bastardize it as an option and make it styled like that. That makes this the wrong piece of HTML for this experience.

What you want is a popover. Then you can do whatever you want in there.

Dave: Popover with the input field set with checkboxes.

Chris: Yeah. That's what you want.

Dave: The speaker one, too, looks like it could be a select. But really it's just a popover with checkboxes, and they're not checkboxes. Ironically, they're radio boxes because you can only select one output at a time or one microphone at a time.

Chris: Yeah.

Dave: Don't want to get into the nuance there, but [laughter] you know. Anyway.

Chris: There's a popover on the popover in one of mine because it's not wide enough to show "Microsoft Teams Audio Device Virtual," so there's "Microsoft Teams Audio De..." and then I hover over it and it's also got a popup.

Dave: Oh!

Chris: That then shows the whole name of it, which is nice.

Dave: Oh, yeah. Double popover. Yeah.

Chris: Double popover, but you see how that's styled. It's part of the brand of this website. That's necessary. It's one of those things that makes me think, "Oh, I wish title, a title popup was more controllable," because that's all that is. But no, it can't be because the designers of this website wanted it to look... It looks great, so I don't fault them. It looks good. It's just they had to do way too much work to make that happen. [Laughter]

00:21:43

Dave: Right. And the hope is we have to do less work here in the future, near future. I'm using popover right now in Fluent and it's great.

There are some caveats with Web components specifically around anchor positioning and then giving fallbacks or, sorry, making the polyfills work. I should blog about that while we're doing mouth blogs, but it's really technical so I don't want to get in the weeds here.

But anyway, it's really powerful. We're achieving that. Then you can even do the position try fallbacks and do a block flip and flip it if it gets to the end of the screen. Do a block flip.

Chris: Hmm... How good is the auto stuff on that? Do you absolutely have to do that? Part of positioning makes me be like, "Oh, yes. Thank God. We absolutely need positioning." But is it totally on you? If you have a tool tip that opens upward by default, do you have to code, "Okay, if it touches the top of the screen, then open towards the bottom," or do you kind of get that for free?

Dave: I think you have to code it. I think you have to put the position try fallbacks. But it's either block inline or flip. But maybe it does it by default. I would have to see. I don't think it does, though.

Chris: Oh, sorry. Bad journalism on our part there. I figured there should be some kind of auto value that's like I literally don't care where you put this tool tip. It could be one of the eight sides and corners on this element. I literally don't care which one you pick as long as they can see it. [Laughter]

Dave: Mm-hmm.

Chris: That should be an option.

Dave: Yeah. Mm-hmm. Can you just minesweeper this one and figure out where it goes? Thank you. Appreciate it. Good bye.

Chris: Yeah.

Dave: Wherever it goes.

00:23:28

[Banjo music starts]

Chris: You've got ideas. Now all you need is a website to make them real. Good news. Bluehost makes that super easy. It's the all in one platform for building and hosting websites.

You can save time on design and use AI to build a custom WordPress site within minutes, so no coding skills needed, just your ideas. Bluehost also has tools to help you optimize and scale your website's growth all in one place, things like blogging, SEO, social posting, email campaigns, and so much more.

And then when you upgrade to Bluehost Cloud, you can start managing multiple sites and domains. Not only that, you get 100% uptime, enhanced security, and priority 24/7 support to help keep you online no matter what. That means no crashing from heavy traffic.

Start seizing your dreams today. Build your brand. Build your following. Build your website. Build it with Bluehost. Now that is a great idea. Go to bluehost.com/shoptalk to start building your dream website today.

[Banjo music stops]

00:24:35

Chris: Well, we talked about popovers enough here. What we're talking about there is that it's an attribute that you can put on pretty much any -- I think it's any -- HTML element. I'm sure there are some limitations. You wouldn't put it on an input or something. It's mostly to be used on stuff like section or div or aside or something.

Dave: You can put popover on any element. Popover target has to be on--

Chris: A button.

Dave: --a button, basically. I think it can be interactive elements, but I think it means button.

Chris: It pretty much means button.

Dave: Yeah.

Chris: So, it's a way of hide and showing, a little bit like details. Only you know how details has to be nested, and they have to be named certain things. Imagine it's a div. You just put a div on a page and say popover=dave. I always use your name. My brain is broken. It always does that.

Then a button says popovertarget=dave, and now that button becomes a show-hide toggle for that dave popover, show-hide, boop-boop-boop-boop-boop-boop, open-close. Amazing.

You can animate it. It has special pseudo elements and stuff. Crucially, it doesn't just open wherever it is in the flow. The default styling of it is just like a dialog. It's right in the middle of the page.

Dave: Center of the page.

Chris: Yep.

Dave: Less desirable there, but yes.

Chris: That's why I mean that's annoying that you can't anchor it.

Dave: And it's also on the top layer, which is kind of a new HTML invention.

Chris: It's on the top layer. That's a very good point.

Dave: It's not in the document flow. It's not absolutely position or fixed position. It's on a different layer of the screen.

Chris: It literally cannot be beat. It cannot be beat, except probably other ones.

Dave: Another popover, yeah, inside of that one.

Chris: [Laughter] Yeah. But that's pretty rare because only one popover can be open at once - I'm pretty sure, right? You get that kind of behavior by default. You get click outside thing.

Dave: Yeah.

00:26:22

Chris: There are two ways to do it. There is an attribute way of saying... There's a special word for it. Do you want it to be essentially notable or whatever.

Dave: Manual. Manual.

Chris: Yeah.

Dave: Oh, yeah.

Chris: No, you can't make them modal, so ignore me there. Modal meaning you can't escape trap out of it.

Dave: Mm-hmm.

Chris: I don't think you get that like you do with a dialog.

Dave: Yeah. It's popover auto, which you get the escape light dismiss behavior.

Chris: Light dismiss. Great. Yeah.

Dave: And click outside, you get that for free. But if you do popover manual, which is kind of like, "Hey, I'm taking over the popover, buddy," and you need to do that if you're going to do a tool tip where you do a hover to dismiss. Now, you're in charge of dismissing it, which is less fun.

Chris: Yeah, I could see it. It's good to have a control.

Dave: That manual bails out of the light dismiss behavior.

Chris: Which means a second one could be opened without that first one being closed.

Dave: Mm-hmm.

Chris: Yeah, which is fine. There is also a way to HTML only make a close button.

Dave: Mm-hmm.

Chris: You have kind of... You use the same popover target kind of thing with a special value and then it will close the popup. That's so cool.

Dave: Mm-hmm.

Chris: Hell yeah!

Dave: Yeah, we're getting some cool features. I think this popover, popover target thing is kind of really shown this value of, like, using HTML to control HTML. Novel concept here, Christopher.

Chris: Yeah.

Dave: We're breaking rules here in 2024.

Chris: Breaking it up.

Dave: Using HTML to program HTML. But then you can... Right now, you have to do anchor positioning in CSS and Chrome, I think, is the only browser with anchor positioning turned on right now. I say that, and Safari is going to immediately launch it. That's why I said it because... [Laughter]

But you have to do it with anchor positioning and CSS. There is a proposal to have an anchor attribute. So, on the popover, div popover, you say anchor=mybutton and it points to my button, button ID my button.

Chris: Yeah.

Dave: You've tied these two together. You've quantumly entangled them. Now it'll auto-position on that element. It will anchor to that element. You'll still have to do the CSS to what kind of anchor positioning you want or where.

Chris: Right.

Dave: But it'll default to bottom, I think.

Chris: That rules. Anchoring in HTML is so cool.

Dave: How cool is that?!

Chris: I didn't know that that was a thing but I really like it.

Dave: It's being talked about, I should say. It's been talked about.

Chris: Talked about, yeah.

Dave: Yeah.

Chris: That's real early stage stuff.

Dave: Yeah. But then--

Chris: Curb your enthusiasm.

00:29:02

Dave: But that popover, popover target is giving way to CMD 4, command and CMD 4, which is under this invokers idea. Have you heard of that stuff?

Chris: Yeah, I mean I think of popover target as invokers-like.

Dave: It's in an invoker. Yeah, yeah. But it's like doing that popover thing but for anything, so I could have button CMD 4 equals my video element. Then I say command equals play. If I want to make a play button for my video element, I just do that. Bingo-bango.

Chris: Yeah.

Dave: Wow!

Chris: Is that signals? I feel it's the little butterfly meme thing. "Is this signals?"

Dave: Is this signals? [Laughter] We did it, chat.

Chris: Not really, but--

Dave: So anyway, I think it's cool we can kind of start using HTML to offload those not dumb but how much of your code is like, "Cool. I wrote the function to play the video"? Oh, man. Or 2x speed the video, right? I did all the effort. Then... Now I need to do the document query selector all my button. Okay, button document query selector dot add event listener equals event. Event dot prevent default. Prevent default equals... Then run my video query select my video dot play.

I feel like 25% of the bottom of my file is just all these event listeners to trigger a specific function. It would be cool if that didn't exist.

Chris: Yep. It would.

Dave: If I just had to write the methods and the script and it just worked, that would be... I bind methods to elements and they just work.

Chris: I like the thinking in the syntax, HTML-ness of it. We're still on HTML stuff. We talked about selects a little bit. That's pretty cool. A little tiny one was that you can just chuck an HR element into the select instead of an option, which used to be kind of the only thing that you could put in there.

You could have an opt group, and you could put options within that. That was relatively used. You see that sometimes. You could see fruits and then have orange, apple, banana, and then vegetables, and then carrot, broccoli, peas - or whatever.

Dave: Animals: dog, cat, donkey.

Chris: Yeah, and it would put a little tiny gray thing that said "Vegetables," and you couldn't select it with your mouse. It looked different. That's nice. But sometimes you just don't even care to bother with that. You just want a dash in there.

Dave: Mm-hmm.

Chris: Or a horizontal line that's like, "These are different than these."

Dave: Right.

Chris: Without necessarily having to label them. I just love weird crap like this. It's used in HR and HR (horizontal rule). It's the perfect... It's the perfect solution for this, I think. But it does just smell weird to me. I'm not against it. I'm very for it. I'm just like, "Wow! That's what y'all chose to do? That's amazing. Good job."

I don't know. I can't explain why it feels weird to me. It just does.

Dave: Yeah.

Chris: Another one that's along that same simplicity--this one kind of comes from Apple, I think--is an input type equals checkbox, so a checkbox can be on or off.

Dave: Mm-hmm.

00:32:20

Chris: Remember, it does have that super awkward intermediate state that you can force a checkbox into in JavaScript that puts a little dash through it.

Dave: Yeah. Don't love that but yes, that exists.

Chris: It's weird, especially because you have to do it in JavaScript which is very awkward and that it doesn't come across when you submit the form. It just is lost information, which is so weird.

Dave: We need to kill that. We need to kill that. Sorry. We need to get rid of it.

Chris: Yeah.

Dave: That needs to go away. It needs to be this whole indeterminate checkbox machine. I think it's an ill-thought-out part of HTML we have to work around. Anyway... Sorry.

Chris: Right. Well, here's an example of it causing some problems. More than it already is causing.

Dave: Mm-hmm.

Chris: Is that Apple says, "Hey, we can have--" you just switch is what I'm trying to get out of my mouth. It's just an HTML attribute name. You don't have to say switch equals true or switch equals switch or anything. You just put switch.

Dave: Yeah!

Chris: On a type equals checkbox input and then it visually turns from a checkbox (which is just on or off and has a check in it) to a left-right toggle thing.

Dave: Okay. Yeah.

Chris: Right.

Dave: Yeah.

Chris: That's it. But what's indeterminate in that? I wonder if they dealt with it. I didn't test that. I should have looked. Does it put it in the middle?

Dave: I think it's only bullion. I think it can only be on or off.

Chris: It's one or the other?

Dave: Oh! Oh, oh, oh, oh.... Does it--?

Chris: I'm going to test it really quick.

Dave: Yeah. Okay. Sorry, my brain is frying. You triggered me, dude. There is a chance that it has a different ARIA announcement (selected or not selected).

Chris: Oh, it messes with it?

Dave: When you use the switch attribute.

Chris: Hmm...

Dave: So, even though checked is true and that is valid HTML, I think maybe the ARIA changes in there. I'm going to die because [laughter] I possess this knowledge. I have a half fact in my brain. I'm sure there's an Adrian Roselli article about it. [Laughter]

Chris: I didn't know that. Is that good or bad, though? I don't know. I can't tell which.

Dave: I think--

Chris: It's just something to know?

Dave: Yeah, I think it's just something to know, perhaps. Maybe I'm making this up, though. I'd have to get into ARIA -- switch role equals switch -- because it will change the ARIA role, which is awesome. But I don't know if the value changes from selected or not selected. My Internet has decided to tank because I think I'm VPN to Seattle, which had a big storm. [Laughter] So, anyway--

Chris: Yeah, it sure did. Hmm... My Seattle coworkers are just sitting around.

Dave: Yep. That's what I want. See, never live where there are trees, man.

Chris: [Laughter] That's your policy?

Dave: Trees are going to take stuff out, man. Cut them all down.

Chris: [Laughter]

Dave: The Whos in Whoville - or whatever - had it right. The Truffula Trees, they just got rid of them all.

Chris: I'm trying to validate this. I believe it is true. Of course, I'm live CodePenning because that's what I do.

Dave: Googling, yeah.

00:35:36

Chris: If I can manually set input type equals checkbox to indeterminate, which is the thing that normally puts a weird little slash in the things that we don't like--

Dave: Mm-hmm.

Chris: --it looks like whatever value it had before. It's just like, "Yeah, you're indeterminate? Cool. Good for you. I'm not going to change the visual look of it." Maybe the right call. I would have almost suspected that they put the little slider thing in the middle.

Dave: [Laughter] Like, "Mep!"

[Laughter]

Chris: Yeah. But it can't because it needs to say what's going to send with the form.

Dave: Right. Right, right.

Chris: Which you otherwise don't know. What it's used for, I've seen, is the tree. You have a nested tree of information. Let's say it's like fruits and, underneath fruits, there are three checkboxes: apples, oranges, bananas. And you have two of the three selected. If there's a selector or if there's a checkbox for fruit, too, indeterminate is trying to say, "They're not all... My children are not all selected or not all unselected. There's a mixture of both, so the visual way of showing that was type indeterminate." I don't know that's quite strong enough of a thing for it to exist.

Dave: Yeah. Yeah.

Chris: There are probably other ways of handling that.

Dave: Oh, man. Yeah. This is going to send me down... This is my afternoon. Thanks, Chris, for [laughter]... Sending an invoice.

I'm just going to be thinking of it, like, "How can I break this? How can I do this? How can I poke holes in this?" Oh, it's fine.

Chris: I believe it is out in stable Safari, so use your toggles for free.

Dave: In stable Safari.

Chris: But nothing else as far as I know. Interesting how that stuff goes.

Dave: I think it's a great decision. I think it was a little controversial. They just kind of yeeted it out and kind of went--

Chris: Yeah.

Dave: Juked the spec process.

Chris: But they get yeeted, too.

Dave: Yeah.

Chris: I know for a fact they feel yeeted upon regularly. [Laughter]

Dave: Right. Right, so tit for tat. I'll take it. Just implement, finish Web components. That's my trade.

Chris: [Laughter]

Dave: Here's my offer.

Chris: [Laughter] Sure.

Dave: I'll allow it. Fix Web components. Anyway--

00:37:51

Chris: Yeah. Yeah, here's another tiny, tiny, little one that's years old but I'm just learning it now. Our HTML linter at work, when you put target equals underscore blank (or just generally a target attribute on there) -- sometimes I put named values in there -- has this thing that red squiggles it, and it says, "You have to put rel equals no opener on it," or "rel equals no referrer space no opener."

Dave: Mm-hmm.

Chris: It's just a linter that's says it's a little bit of a security hole to not do that. That was patched like three years ago, so you just don't really need to do that anymore unless you have some browser targets that you're really worried about that are that old. It's even more older than that in Safari and Firefox, apparently. Just so you know, you probably don't need that in the linter anymore.

Dave: Yeah. Surprise! HTML got better.

Chris: Yeah.

Dave: I think it's really bad. They did that when, like 2021?

Chris: I guess. I think of Matthias Buyens - or whatever.

Dave: Yeah.

Chris: Who had kind of a famous page showing how dangerous it was, which it was.

Dave: I just feel like if you're going to do something during a pandemic, you've got to be a little more obvious. You can't just--

[Laughter]

Dave: We all had a lot going on, bud.

Chris: Yeah.

Dave: We can't just be making changes like that.

Chris: Oh, you're saying that's when they fixed it? Yeah.

Dave: Yeah, yeah, yeah.

Chris: Yeah, fair enough.

00:39:12

Dave: I do want to correct myself.

Chris: Yeah?

Dave: Jackals, get away. This is a switch according to the switch pattern on the APG, which is not the most trusted source but it is a source. It says to use ARIA check true, so I think it does do check. It is not exactly recommending an input type checkbox but it is saying that is a valid thing. Yeah. When on, the switch element has the check state. When off, it has the ARIA check set to false. There you go.

00:39:49

Chris: Okay. We got it. We could do a shoutout here for the Discord's own Blake Watson who released a website called htmlforpeople.com. Have you seen that, Dave?

Dave: I loved it. Oh, my gosh. It's such a good way to teach HTML. We've bandied about the idea, like, "I want a shot at teaching it," right?

Chris: Yeah. Yeah.

Dave: I'm kind of like, "I don't have to do it. Blake's is kind of the best one."

Chris: Blake's was all over it.

Dave: [Laughter] Yeah.

Chris: Yep.

Dave: Did you read through it all? I assume you know HTML, so you didn't go all the way through.

Chris: I haven't made it all the way through it yet.

Dave: A) it's cute. It's really, really well done. But then B) it's just like he generally builds up a webpage, and maybe this is a spoiler. Can I do a spoiler? Spoiler alert.

Chris: Spoiler alert.

Dave: Fast-forward 30 seconds. At one point, he just puts a picture of himself in there to show off image tag.

Chris: Mm-hmm.

Dave: He's like, "That's me." And I think that was a very charming surprise and delight. That was a very, just like, "Wow, it made it extra personal." You're already reading this personal website and then you get to the image tag and he puts an image of himself on a webpage, which is exactly what a 12-year-old Dave Rupert would want to do when learning HTML. You know what I mean? I just think that was a perfect moment in... It was the About page section, so adding an About page. Just puts a photo of himself, and I was just like, "That is the best," because that's what you want to do when you're making a webpage for yourself is put a picture of yourself on the webpage. That's so good!

Chris: [Laughter]

Dave: Perfect. It's perfect. No notes. No notes.

Chris: I am so envious of his design abilities.

Dave: Yeah, he's a triple threat, and we don't like to talk about it.

Chris: It's really annoying how nice this is.

Dave: We kind of need to put those guys (men and women) in a corner. You know? Must be contained.

Chris: [Laughter] Yes. It does feel like that. It's like, "God dang it! This is so good!"

Dave: Putting Blake, Josh, Sarah Drasner, putting them all in the "I've got my eye on you," "I'm watching you," section.

Chris: What is the code font? Do you recognize this? Is it...?

Dave: I don't know.

Chris: We can look at the computed value and find it. Input Sans, I think that's... Is that a typography.com one?

Dave: Yeah, maybe. Yeah, yeah.

Chris: It looks freakin' great.

Dave: That does look great. It's like mono but not. Right?

Chris: Yeah.

Dave: It gives it kind of like--

Chris: Is it mono? It might not be all the way.

Dave: It might be. It might not be mono. Yeah.

Chris: Because it kind of doesn't... It matters less probably in code blocks on blog posts--

Dave: Mm-hmm.

Chris: --than in your editor.

Dave: Yeah.

Chris: You probably want a true mono in your VS Code - or whatever. But maybe this works better. Oh, gawd, it looks good. Okay. Sorry, everybody. I know you can't see it but go to htmlforpeople.com and see that.

Dave: Yeah.

00:43:04

Chris: That's cool. You've seen... Have you seen Heydon blogging about HTML? He's doing one element at a time.

Dave: One element at a time. It's pretty fun. He's a funny dude, so you know. They're doing a good job on that.

Chris: Yeah. They're only at the B's, so it's going to be a while.

Dave: Yeah.

Chris: [Laughter]

Dave: I always thought that would make a good TikTok series. You know?

Chris: Yeah.

Dave: Hey, TikTok. Today, I'm going to teach you about ABBR, why does it exist, and why you should use it in your projects today.

Chris: Yeah. Oh, you picked the hardest one in the world. I'm still not totally sure where you should use ABBR.

Dave: The only reason to use it is you get a dotted underline for free. That's why you use it. [Laughter]

Chris: Yeah. And you can put a title on it, but the title doesn't buy you that much, so you still have to explain the abbreviation in the sentence anyway.

Dave: You still have to explain it because screen readers and almost everybody just ignore titles. But hey, you can have fun with it. I want you to have fun.

Chris: Yeah. Yeah. Okay. Well, that's what's going on with HTML. There are probably a few more things. I was just kind of early thinking about all the stuff that's changed in it, and it starts to feel like, "That's kind of a lot."

Dave: Yeah.

Chris: Compared to the five years before where it was like, "Sure, we had HTML 5," which had very little to do with HTML.

Dave: Well, if we were doing a "What's new in JavaScript?" I don't think that would be (to be honest) a huge episode. If we were doing a "What's new in CSS?" that would be a six-hour episode.

Chris: [Laughter] It would be. CSS particularly is popping off.

Dave: Yeah.

Chris: And it's hard to explain all these details. It makes me feel a little guilty that we didn't get all the details right in here. But whatever. Other podcasts do that.

Dave: Sure. Sure.

Chris: I don't want to be the Wikipedia podcast - or whatever.

Dave: I know.

Chris: Look it up! Look it up!

Dave: You can have AI read you a podcast right now, so go ahead and do that. NotebookLM, go ahead and sign up.

Chris: Yeah.

Dave: But I think there's cool stuff happening in HTML. I think it's starting to become more feature-complete. I think there are long missing features. But if we end up with an accordion and a custom styled select by the end of this decade, that's fricken' awesome.

Chris: Yeah.

Dave: What's next? A tabs element? Holy cow!

00:45:35

Chris: Well, you know that's another reason to go listen to that Jake and Surma do the one about the selects thing because they did a good job of mentioning that there was something like a dozen features that it took foundationally underneath it to make it happen. Now that they're all done, that other features won't take nearly as long, which is very fascinating. I would suspect a little bit of faster movement here. Hopefully not too fast.

Dave: Yeah.

Chris: We don't want our HTML going wild on us.

Dave: I saw Brian Cardell asking the other day, like, "Do you need a date picker?" We have input type date, but some websites, like a flight booking thing, will just put it on the page. So, should that be an element? An inline date picker, if that makes sense. Anyway, it's kind of interesting to think about. Maybe we need... I don't know. Usually, I feel like in January we do an episode with people who are writing HTML, so maybe we'll get some people on to kind of tell us what's happening.

00:46:45

Chris: I did recently look at what's all new in JavaScript in 2024. It's a little easier to wrap your mind around because they release a yearly thing, so you can just look. There's a list, which is not the case with HTML. Soon to be the case with CSS, which not only has a new logo but there's kind of some agreement about naming of eras of CSS. It won't be year to year. It'll be more like--

Dave: Five-ish years. Yeah.

Chris: Five-ish year chunks. Yeah. Anyway, that's cool.

Dave: Which is welcome. I'm into the numbers. Keep the numbers going. I mean I think the big thing happening in JS land is they are maybe not writing new JS. They are only doing the JS sugar thing.

Chris: Oh, that's not going to happen.

Dave: Yeah.

Chris: But maybe. That was good drama. We're interested in stuff like is signals going to be real. Is TypeScript in the browser going to be real?

Dave: I want signals. Yeah.

Chris: That kind of thing is interesting. If you look at the actual list of ECMAScript 2024, it's like, um...

Dave: [Laughter] No big plans, guys.

Chris: Cool. Yeah. Looks good. Thanks for the little thingies.

Dave: Yeah. Well, I think there's something to be said. Burnout is real. I think it's hard work. Spec work is hard work when you've got a bunch of people proposing stuff.

Chris: Also, I don't necessarily know that I want it to move all that fast. Not that I want things dead. But I don't know. Sometimes you look at new features and you're like, "Are you just bored?" [Laughter] "Is this solving a real problem?" or does it feel like somebody submitted a proposal that's like, "This should work a little bit better or work in this way"? It's like, "Is that actually helping the language?" or is it--? I'll use the word sugar again.

00:48:33

Dave: The only thing... Yeah, the only thing I could really want would be sort of like Lea Verou's colors JavaScript library. Something to translate colors in JavaScript, especially as we get more colors in CSS and things like that, it'd be cool to have a color class that had these CSS style functions like color from RGB, you know, this color, and you get an R, G, and B tuple - or something - out of it - or something like that.

I do think we need to radically eliminate Lodash, perhaps. [Laughter] And so, could we kind of bring some of those up? They've started that sort of with group by and stuff like that. I don't know if you've seen those.

Chris: Yeah.

Dave: Array, group by, and stuff. It'd be interesting to see what happens there.

Chris: Yeah, I was just looking at that one. It's the kind of thing I look and I strain my brain. Then I kind of get it. Then I'm like [laughter] "Why did I just do that? I don't need this right now."

Dave: You don't until an interview where they're like, "Make a hash map out of the blah-blah-blah."

Chris: [Laughter] Yeah.

Dave: And you're like, "Well, how about I just do array dot group by?" And bing-bong, it's done. I actually did that today and I didn't use... or yesterday... and I didn't do array dot group by and I probably should have.

Chris: I mean maybe if you're future compiling or something.

Dave: Mm-hmm.

Chris: But if it's ECMAScript 2024, it seems a little soon to just roll that baby out.

00:50:03

Dave: Here's what we need: ten more for loops. Just ten more.

Chris: Ten or so? Fair enough. Yeah.

Dave: Maybe ten more ways to find something in an array. That would be cool.

[Laughter]

Dave: Ten more math functions that spit out the wrong math. That would be cool. [Laughter] And ten more things in the international API that I'll never remember how to use.

Chris: [Laughter]

Dave: That's all I'm asking for.

Chris: That seems small. Yeah.

Dave: Yeah.

Chris: I think they should ship a formatter. Is that weird?

Dave: Okay.

Chris: Like an official-official JavaScript formatter.

Dave: A language formatter.

Chris: Yep.

Dave: That would be awesome. I mean you're basically undercutting thousands of developers, Chris.

Chris: [Laughter]

Dave: These kids... [Laughter]

Chris: Well just pick one - or something.

Dave: How are people going to get famous at JavaScript conferences if you do this? You're just basically killing the whole ecosystem.

[Laughter]

Chris: But I guess you just do it as a spec (right) and say, "This is how it could be formatted."

Dave: Yeah.

Chris: "And we suggest that formatters follow this spec."

Dave: That would be helpful.

Chris: It's nice. I'll tell you what, man. Looking at the fact that all Go code on Earth, meaning GitHub, is exactly formatted exactly the same is kind of cool.

Dave: When you said that one time, I was like, "Wow!" It's like peace, you know? It's like a before and after GIF of chaos and what the world could be. You know?

Chris: [Laughter] Yeah.

Dave: It made my head very quiet, if that makes sense.

Chris: I mean it's a little bit different because it's a white space dependent kind of language -ish.

Dave: Yeah. Yeah.

Chris: And so, it kind of needs a formatter because one little formatting thing isn't just like, "Oh, it could be interpreted wrong." It just doesn't compile.

Dave: Yeah. Yeah.

Chris: So, having a formatter will prevent you from very obnoxious "won't compile" errors is kind of crucial, whereas that's not true in JavaScript.

Dave: I think that's a challenge with JavaScript is it has to be a little bit forgiving, right?

Chris: All right. Well, we did it. Whatever. HTML. There's probably more stuff than that. I feel like that wasn't quite the whole in HTML land, but that's okay.

Dave: Maybe we'll do a follow up HTML mouth blog. I'll start digging around in my notes. There are quite a few things happening.

Chris: Yeah.

00:52:35

Dave: And we'll maybe have Interop 2025 at some point, so we'll have a list of cool things on the horizon.

Chris: Yeah. Has voting happened yet - or whatever?

Dave: Voting is closed. I think it's in secret voting - or whatever they do.

Chris: Yeah. There isn't really voting.

Dave: No.

Chris: There are just proposals and then people kind of thumbs up the proposals.

Dave: Thumbs it up.

Chris: Which has no meaning at all (I've scientifically proven).

Dave: Yeah.

Chris: Then we just get the list. Honestly, I'm fine with that. I don't know if we want the popular vote deciding what... [Laughter]

Dave: No. We have popular votes. Yikes! Aren't the best right now.

Chris: Not to mention half the proposals are bogus anyway. They're what people want to see the Web platform do not what's perfect for interop, which involves interoperability. For example, a browser that already supports something and the other ones need to do it. Thus, you can write tests and make that kind of stuff happen. That's a lot different than being like, "We should have signals."

Dave: Yeah. I'm into how can all... Boats don't have to go to the same place but at least rowing in the same direction. I feel like CSS is really good evidence of just how much CSS we've gotten over the last few years of how beneficial that can be. Let's just row in the same direction a little bit.

Chris: Mm-hmm.

Dave: We can each do our own thing and blah-blah-blah. But just a little bit of rowing in the same direction benefits everything.

Chris: Yeah.

Dave: Yeah.

Chris: Well said, Dave.

Dave: All right. Well, we'll wrap it up here. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to shart it up. Then, yeah, join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Eh... ShopTalkShow.com.