UI Elements - Basics, Best Practice, and Built Ins

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Silinski and Wes Bos.

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got a episode for you today on UI elements, basics, best practices and built ins basically talking about Things that are pretty common when you're building websites. You know, you've got we we had a whole show on the dialogue box, But there's all kinds of different elements that we use over and over again, progress bars and file inputs and checkbox and sortable and filterable selects. And There's all kinds of them out there, so we're going to kind of go through a whole set of them and talk about what ones are available to us in the browser right now. Maybe you need to reach reach for a a library with some of these, and ideally, Blue Sky Or or whatever is going to be.

Maybe we'll get these in the browser at some point. Wouldn't it be nice to have a bit more primitives that didn't suck In the browser.

How are you doing today, Scott? Oh, hey, man. I'm doing good. Doing good. I have been Very inspired in some code stuff lately that I'm very excited to show you later, Wes. Oh. I I've been I've been working with some some new tech here And just building some fun things. You know, when you get into, like, a fun problem, and it really feels like You're you have so many potential avenues to explore that are are very exciting to you at any given point, and it just pushes you into solving those things. And, You know, you're not bogged down by, like, the the weight of a project yet or anything like that. So, yeah, I've just just been really edge cases. The edge cases. I've been having a lot of fun exploring, with the idea that I'm exploring. And at the same time, If I'm exploring in in UI stuff, I'm exploring in JavaScript stuff. I'm exploring in, some more interesting things as well. I'll Talk about it later on. But, you know, it just feels really good to be getting excited about making anything, even if it's Just an experiment. Right?

Yeah. Oh, yeah. That's that's my favorite thing to do. Some days I'll just spend all day fussing around, making a bunch of little demos and whatnot. That's why I really like the, TikTok platform and Twitter platform is that sometimes you make something that is just like, This is not for anything, but it's cool, and I need to show somebody. It was fun, and I made it. I, I

I I took this clay and I slapped it together, and it it looks like a triangle. It's a pyramid, but I made it. Who cares? Yeah. So okay. Let's talk about UI elements today. I I thought this was a a really interesting topic because, you know, we talk about UI elements as if they just kind of exist and that we all know the right way to do all of them, and they're all the same and whatever.

But in in reality, there's a lot of Nuance to just about every single little UI element here.

And I think we're gonna be talking quite a bit about Best practices for various UI elements, but we're also gonna be talking about the UI elements that currently exist in browser as elements. And These elements are things that you might be used to inside of your code. Things like maybe the video element or the date picker, those types of things. So first off, we wanted to start off talking about some of the UI elements that exist in the browser today as HTML elements and that aren't very good. And then maybe we'll talk about some that are a little bit better, and then we're gonna talk about Maybe the future of UI elements in best practices.

Alright. Let's do it. Let's do it. So,

let's Talk about the bad UI elements that exist in the browser, which I'm I'm sure all of you out there, if we were to say, name a bad UI element In the browser. I'm sure you at least have 1 or 2 of them that you're like, yeah, this one's bad. I don't I don't like this one in particular.

Wes, what's your least favorite UI element? I'm gonna say

date picker because it had so much promise to bring amazing input to the browser, And literally nobody uses it as an input because it's so awful as you can't really control things. You can't select ranges.

I can't style it. If you need to select a time, I don't I don't believe I think it may be input date time will do that, but It's just such a a bummer that, oh, finally, we got these UI elements, and finally, we have standards in the browser, and then nobody uses them because they're just not very good. They don't cover all of your use cases. And like like, why do we have standards if they're going to not be as flexible? And there's there's some delicate Trade offs that we need to have there where things are built in and it's a little bit more rigid.

But I think that that one went a little bit too far in the rigid direction. Totally.

Yeah. And I would say my least favorite's probably the video and audio elements because These are multimedia elements that were given to us in Rome. Oh, sweet. We have a built in video player now. We don't have to use Flash. Right? We don't have to use Yeah. Crazy amounts of JavaScript to get this going. So we have a video element. That's awesome. We have an audio element. That's awesome. But the default UIs for both of these things are really inflexible.

You can't just style them. You can't make them look nice.

And, If if you're getting in to building a video player with the types of functionalities that you'd expect to have On the web today, YouTube, any of that sort of stuff, the built in video and audio players, they're not going to get you there Without you having to basically build the UIs from scratch or use a library.

I'm using a Mux video elements now to do all of my video player stuff, but Video JS, there's, Shaka. There's so many of these other video players Out there.

And they're all a huge, tremendous bummer to work in.

They're a nightmare if you try to build 1 yourself of any, Like, complex degree. Right? You could build a basic one, and the defaults are not something that you're probably going to be using that often. So the defaults, They're fine. They exist. That's cool.

I I just wish these were a little bit more, I don't know, easily customizable so I didn't have to do a crazy amount of work to get them to work. I also wish they supported streams better, but that's probably a different thing than the UI part of it. Yeah. The The styling thing is so funny that there's literally nothing

that you can do to to style it. Like, at least on some things, you can at least style the like. Like a good one is like a progress or an input type of range or a decent one. You know, like, you can you can style quite a bit on those things without having to go native. But when you search, how do I make a custom video player, the first thing they say is Put controls to false and then start putting divs and buttons underneath it.

And that's Then you got to think about accessibility and keyboard shortcuts and, like, such a bummer that that you have all that type of stuff.

Yeah. Totally. Right. I I just wanted to I wanted to be all of the things I want it to be.

And just work.

Yeah. Of course. Of course. Yeah.

Okay. Well, let let's talk about some other bad ones or ones that are aren't great. The alert prompt confirm kind of deal in the browser isn't Isn't even excellent. You know, we did a a show on dialogue.

Dialogue can get you there. There are some nice things about dialogue. You still end up doing a lot of stuff yourself. With, like, alerts, prompts, and confirms, you know, you have things like toast messages and stuff in the browser that you think, like, having a little pop up and alert or something like that Is something that the the browser could help you out with considering it's such a common pattern.

But nowadays, you're you're almost always importing some sort of a library to Do that deal for you. Toast messages.

The prompt alert and confirm are only good when you literally need to lock the entire browser up And not allow your user to do anything else before they deal with that thing. And it can be frustrating because like if you prompt somebody for some information, Often they need to copy paste that from another tab that they have open on their phone, and It's really frustrating to do that. The biggest one that gets me this is not on a website, but this is on Ios.

When you Set up a brand new Ios device. It asks you to sign in to your Apple ID.

It gives you just, like, this prompt box with a username and password and a okay, And it you can't go to your password manager Oh, yeah. Because it literally locks the entire thing up. There's no option to autofill it from the password manager. So then you have to, like, close it, go to your password manager, copy it, copy it, or open it on your computer while you have your phone open and Type it in manually and such a broken like, I should be able to just go to my password manager and come back to that type of thing, but You just lock me up. So those are really frustrating, let alone that you can't style them either to look decent on your website. Like honestly, the alert, prompt and confirm, They're good. They're good APIs for Yeah.

Alert prompt and they're good. Did you see that Deno has implemented alert prompt and confirm On the server something about that, but I didn't

see it. I didn't see it. I saw a little tip on it the other day. It's it's awesome because if you wanna

Stop everything and give your users some info. If you wanna ask them for some input or you wanna say, hey. Do you wanna continue? You don't have to, like, bring in a third party package. You just literally alert, prompt, or confirm.

Mhmm.

Yeah. And and, I I don't know. I do think about, like I know you're ragging on the native implementation a little bit. But one thing I do love about The native implementation in iOS and Android is that the dialogue boxes, they look good. They look like the system dialogue boxes or whatever.

Everybody is so used to interacting with them that they know how to use them. And you think about that those I APIs just, like, exist for iOS and Android, but not on the web. And so a lot of times I'm thinking about these UI elements. I'm thinking about, like, what are all these APIs that native developers get that we don't get? And sure enough, we we do have some degree of an alerts and prompts and those types of things. But the native implementation of it just feels like,

I don't know. More along the lines of the types of things that we should have. Right? I agree. Let's go through some decent ones. We talked about the dialogue box On a previous show, that one's actually really good. It has a whole JavaScript API functionality, has a whole accessibility layer, and it's just a div And you can style the thing. Put it wherever you want and display it however you want. You can make the background blurred. You can around the corners.

To me, that is a really nice input. It doesn't have any default styling, which I'm not sure would fly with a lot of these other ones, But, you can you can stick it all. I often wonder, like, will some of these new UI elements simply just expose us CSS variables.

I know you can set. Well, would that be enough?

You know, I don't know if that would be enough, but that would be neat. It'd be nice nice thing to have. You know, after we did that show on modals and pop ups, I, I got to use dialogue In the swag syntax site in the admin section of it. And there were some really nice little things like the form method to close the dialog box.

So it it's really easy to work with. And and overall, I found that working with dialogue somewhat easy, but the lack of, like, Like, the amount of things you have to do for yourself, it's not like you get a model for free from the browser. You just get a couple of handy little methods And, you know, some some default stuff, but it it's it's not like a full on other lyric pop up implementation. But I I do found the API to be really nice to work with.

Another really good one is the progress, element. And progress is Something that people I think are underused, if you've never used it before. You know, it it's basically just a, Like a slider or a dragger. You know? What what do you call those? I guess it's slider. You would call those.

But, yeah, it's just an indicator, And I use this thing all the time. This is so funny. I use this one with default styling and admin stuff all the time because Either the default styling is not really incredible or anything like that. It's just a it's like a little progress bar with a color in it, your default color. But you're giving it just a value, and if you're giving it a max value, and it just does its thing. It works. Yeah. It works nicely.

You you bind that value to something, and, you can get a little animated progress bar in no time. I I found this thing to be just very nice Overall, there's also a meter element as well. I haven't used that one in a long time. But

a meter element will If you a high and a low value

meter.

Yeah. I do not think I've

yeah. I would have always just reached for progress for this, but I I did not know meter existed. I'm gonna be straight up honest with you. Unlike meter element, the minimum value is always 0,

And the min attribute is not allowed for progress element. That makes sense. So progress is how far you are from the start of something, Mhmm. Whereas meter

is saying, like, a fuel level gauge. Right? Yeah. And that it it all makes perfect sense hearing this, but it's like I'm hearing it for the first time.

Yeah. Like, I I don't know why I've I've never I've never encountered meter. So No. I don't think I don't think I have. I I should search my

Computer. Sometimes we say these things, and then I'd like the next week. I'm like, oh, I've used that. Oh, I use that. Yeah. Oh, oops. I used it, and I forgot all about it. What about a range input? I think this one's really nice too, as far as inputs go. Because inputs are kind of kind of Prime territory for, UI elements that could be considered not great.

There are a lot of input elements I think that people wish were better, Like the color picker.

Like the, date anything daytime related. Sure. Daytime stuff is getting a little bit better here with some of these New date and calendar pickers that we're getting, range pickers, those types of things. But the range slider has always been one of those ones that Works very well for me, and it's easy to set up. It's easy to drop in. You'd set a min and max. You can bind the value or whatever you do to get your values out There.

And you have a a slider. You know, the the coolest things about having range for me It's like when I'm building little code demos or something like that that have parameters. They have options. They have things to change.

You know, why give your users a a number value? Make them enter a number value 0 to 100 or just do a little slider. I I do those little sliders, and it makes the UI feel a little bit more real, a little bit less I don't know, nerded out by giving everything just text values.

It's so handy for those, like, built in basic ones. Like, they take labels. They have ticks.

Like, if you want, like, hot, medium, cold or 0, 25, 30, you can just pass a label to your to a data list, And it will put the little tickeys beside it. It's very stylable. They're not standard, so you have to style it twice.

Once for Chrome and once for webkit, but it works really well in Safari, Chrome, Edge, and Firefox, So you can style it really well. I made a what was it? A HSL color picker the other day and I use input type of range And I was able to change the background color, and the label of the thumb was based on the HSL values. And, like, I there's nothing in it aside from being able to select, like, a high and a low, like, 2 sliders inside of a range. Sometimes that's like, okay, I want to look for hotels that are above $50, but below $200. You know, in that case, you need 2 sliders in there, and that's not that's not doable, but it this does cover most of your use cases. Yeah.

So, input range, very good one. And you you also have check checkbox and and button on here. You know, button, I agree with button works well, Easily styleable does its thing. It's a button. Hey. Got a button? Checkbox has never been my favorite because it does Feel like the methods of styling the checkbox has always been a bit of a bother. The typical way that you're you're doing the cross platform Checkbox styling beyond just changing the color or something is to essentially hide the checkbox entirely and then rebuild 1 yourself.

Yeah. That is it doesn't seem like the the right API to me, but hey. Yeah. You're right. You can change the, like, size and background color on it, but, That's about it. The kind of cool thing about checkboxes now is that like the trick always was that You put a label and you put your checkbox inside the label and then anything inside of that label text, other divs images.

When you click on those, then it will check and de check your checkbox, which is really, really handy. So You are allowed to hide it and you can do it without any custom JavaScript turning it on and off. But now with with the CSS has selector, You can you don't even have to have your checkbox inside of the label. That's a good point. Yeah. You can say, like, you could say, like, body Has checkbox colon checked and then you can select anything inside of it. Right. So you could say so you You could do it a little bit of a higher level and say, okay, if this element has a checkbox that is checked, then go and select this other element And style it accordingly. I have a couple of examples. I haven't nailed the accessibility yet, so I haven't shared any code.

There's a couple of use cases where, like, you shouldn't do it because it's not accessible. But there are a handful of other use cases where you simply want to just turn something on and off And you wanna display something a little bit differently based on that. That's perfect use case for that. Yeah.

Man, Hass is Slowly creeping into my vocabulary in CSS as well. You know, it's it's doesn't feel like you can go ham on it just yet. But, like, What was I doing? I was doing tripping the other day where I was, working in content editable.

You know, content editable is kind of Not like a hugely fun place to be, but I was saying, hey. If there is a div With that is is in focus right now, and, I want the entire row. Like, you could think of, like, a row to be highlighted.

And he asked me that, like, such quick work, and it makes so much sense that, like, man, I I I'm very excited that that API dropped. I mean, we always fantasized about having parent selector in CSS. And now that it's here, it's like, I don't feel like I can use it just yet, but I'm I'm No. Every single time I in Firefox just yet. But every time I do use it, I'm just like, this is incredible. This is the future here of how I see assess everything.

So let's talk about Open UI, which seems like a a big shift here, but Open UI was really kind of the genesis of parts of this episode because What Open UI is is it's basically a group.

But would coalition be the right word? Is that even like a Is that an accurate word? I don't know if that is. It's a community group.

Yeah.

That, basically, of researchers and developers, People who are trying to decide essentially the UI patterns for the web here. So OpenUI says long term that they hope That open UI will establish a standard process for developing high quality UI controls suitable for addition to the web platform.

So you could think of this as, like, they're doing research into these UI elements with the hope that eventually They can become part of the web platform in some sort of way. But the coolest thing that I found about this website is that it is a tremendous place to do research For UI elements, especially if you are wanting to figure out what is the right approach for how these things should work when you're building them. Not necessarily how they should look, but also how they should look, how they should look, how they should feel, the types of accessibility things you need to think about and worry about.

And, they've done a massive amount of good research here. I I love that this exists because

you think you have to think about, like, oh, Even sometimes you see people on Twitter, like, tagging people that work for Chrome. Hey. I would love something that does x, y, and z, which is good because those people have to go Forward and put in the proposals and talk about this type of stuff. But it's really cool because this Community group will then say, okay, we're ready for input type of file. Like, we understand how it works And whatnot. So now we need to go to the other working groups.

And depends on, like, what like, does it need a JavaScript API? Then we need to go to the what WG, you know, does it need to be stylable? Then we need to go to the CSS working group.

Does this need to have a low level JavaScript? Is it like a JavaScript feature, like a sync await? Then we need to go to TC 39. You know, like, there's all these or is this a proposal? Then it needs to go to the W three C. There's all these different groups, which is why we never had Fetch in Node for so long, because Fetch was a web standards API. It's not a TC thirty nine API.

It's not a Node API.

And Node doesn't necessarily implement all of the web standard. They're changing that a lot of they do implement a lot of the web standards now, but

There's just so many different groups that you have to talk about. So, on this open UI site, which we have linked is just open hyphen ui.org.

There's a number of interesting things on this site. So give a look to their their charter.

If you're interested in contributing, you can Learn about, you know, the proposal system. For the most part, I think you're probably better off just clicking through and reading through this thing.

But there's a lot of interesting stuff in here. So I think what we wanted to talk a little bit about is some of the proposals that exist on here, And the proposals are the ones where they have really understood these UI elements, and they're they're considered like, Here's what here's the the results of our research. And then there's also a research category for a bunch of different ones where they they talk about the research that's ongoing.

There's also a really interesting component matrix name, or component name matrix, which is is interesting Briefly to just pop through where you can see how, like, how many different different UI frameworks that exist out there in the world refer to certain things. For instance, 42% of the UI frameworks refer to an accordion as an accordion.

That doesn't mean that the other ones don't call an accordion. It means they they Don't have it or call it. I guess it it means they don't have it.

Yeah. Well, I'm just I'm just looking at this as well. Yeah. Everyone who does have it calls it An accordion. An accordion. Yeah. Everyone who calls it an avatar calls it an avatar.

There's avatar group, which contains many avatars.

I'm just looking. Are there some that people call

different? Lowercase dialogue versus capital d dialogue? Yeah. So I think the way that this This chart is working is that if they did call it something different, it would be in its own row.

Oh, okay. Yeah.

So it It is really just kind of interesting to see, though, because there's some of them that are very ubiquitous here. So for instance, Button or menu, everybody you know, 74% of the UI frameworks here have a menu component, and it is called menu.

Likewise, button.

89% of the UI frameworks here have a button component, and it's called button. You could see that that is like, These things are the thing that it is. Right? It's a button. It's a badge. It's very common to be called that. It's a a menu. It's a form. It's blah blah blah.

It it gives you at least an option to see, like, alright. There there's some things like a link component is only a link component in 21% of the UI frameworks here. We're, like, you probably don't need a a link component. Otherwise, you can see that or a pill or pills.

Yeah. Those types of things. Right? These are are more like, niche type of naming for for components. Can you guess what the top 5 are With I don't know. Sure if you're looking at that or not. Okay. Well, I've already seen some of them that are are decently high. So, like, button? Pretty high. Yeah. Button is number 1.

Accordion is, like, number 10, a 42% implemented.

And these are For anyone wondering, these are things like, are they implemented in, Twitter Bootstrap? Are they implemented in Auth Zero's style guide. Are they implemented in Carbon. Yeah. So there's all these different, like, style guides where

these big companies or these Open source things have said, okay. This is how we're gonna do a button. Right? This is what it looks like. This is how we style it. These are the options for that specific thing. Yeah. Okay. So I I guess Button is good. I already said menu was pretty high. So let's go to menu. Okay. Menu menu button. But it's funny because I never use the word menu at all In my code ever. Yeah. I would say nav. Yeah. I always say nav too. Maybe we should start using menu. I know. I'm I'm I'm starting to to get that, tie turn. I don't know because I know that one of the proposals is breadcrumb. I'll say breadcrumb.

Breadcrumb is number 5. Good. I think the only one you missed Was number 2 being tooltip

and

number 4 being tabs tabs. It goes button tooltip menu checkbox Tabs, breadcrumb,

select form badge card, modal icon, slider alert. Okay. So modal is pretty high up here. That's interesting, because we've now called it a dialogue, you know, in in the actual browser. So but I guess a modal is its own thing. A dialogue encompasses a modal as we learned in the modals and popovers episode. Yeah. We we went deep into that already. Yeah.

We do not need to rehash the what is a modal conversation.

So I I thought this this table was super interesting, fascinating, the type of thing that is is fun to paw through, but let's actually talk about some of the proposals here. So The, number 1 proposal at the top of the list because they're alphabetic is the breadcrumb.

Everybody knows what a breadcrumb is at this point where, this was a I wanna say this is something that people still use in UI, but it feels like a breadcrumb is a little bit more of an older school UI element. Does it feel that way to you, or am I just tripping? So I guess looking at Notion, Notion has breadcrumbs.

Yeah. I love breadcrumbs. Like, for example, I was when I was doing all the equipment searching for my gym, I would often stumble upon a page that had some, like, weights on it, and I go, oh, these are nice. I wonder what else they have. And I always immediately went Breadcrumbs and said, if it's in this category, can I go up one level and it shows me, like, bumper plates? Or can I go up Two levels and it shows me all weight plates, you know, and I love that type of organization because I can say, okay, let me Zoom out a little bit? I know that I'm seeing Those specific I much prefer that over the super obnoxious, like, sidebar where there's a 1,000,000 things. You have to check all the check boxes of Different things you wanna see. It's just like a like Home Depot has that, and it's exhausting.

Yeah. You know, it's so funny. I don't know if you know this. I used to work with a guy, Peter Morville, who was, like, Coined the term information architecture.

Oh. He he he wrote he wrote the book on it, and he worked out of our office at an agency I work at. And he was so big on breadcrumbs all the time. I remember him being the the bigger proponent of breadcrumbs anytime we did design. So all all of our designs at that agency had a nice implementation of breadcrumbs, but I almost never used that myself. And maybe it's it's time, we declared the new syntax website will be having breadcrumbs because gotta love them. Right? So breadcrumb, we haven't really said what it is, but it's landmark. Basically, you could think of it as, like, here's the current path you're at. And, if your information is architected in the, a good way that path should actually mean something. And oftentimes that even correlates directly to the URL itself. Right? But not all not always, but oftentimes is.

And so a breadcrumb basically says, here, we're at a a leaf. We're at a leaf of a tree, and the next branch is going to be the next step back. And the next branch is gonna be the next step back until you get to, like, the root of the entire thing. So each of those with links to that that branch as you get further back or closer toward the root of the website.

Next 1 we have here is the checkbox, which is good. You said, like, I hate having to do checkboxes in in CSS, and it's good. They have a editor's draft here. We should say, like, none of these things are going to be in the browser just yet. Yeah. You're not NPM installing open Open UI or something. Exactly. They are trying to come up with specs and standards so that they can then be proposed To the jobs reporting groups, the CSS working groups and say, okay, this is how we think it should work, right? Rather than someone like what we have with date, you know, like, it probably should have had a bit more of a more flesh out to date. The way that date works right now is just let the browser decide input type of date. That's where the spec stops.

There's obviously a little bit more to that, but It just says the browser will determine how the UI handles with this. And then it's different from time to time and it's different on Which makes sense because also on Ios, you don't want, like, a crazy date picker. You want, like, the native date picker. It's just that the Date pictures in the browser are awful.

Yeah. So we got the editor's draft of checkbox here.

It says the checkbox control is primarily leveraged to indicate a binary state, for example, in many forms using checkbox. And it gives a bunch of really good examples, both As what the anatomy will look like, which is the dom elements that will make it up.

So it shows that the The entire checkbox inside of that, you'll have a label as well as an indicator.

And then it also shows a bunch of examples of, oh, no. That was with Radio Group as well. I was looking at a very similar one. The Radio Group is Mhmm. You know, like, how would you rate 1 to 10 in all of these things, it would be so nice to have a bit more control over styling those things.

Yeah.

Yeah. And, I I like that they're looking at this as, hey. We have a indicator and we have a label and these things are, You know, both separate things or whatever, and I don't know.

I think they are interesting.

Next is, Oh, sorry. Hold on. I got one more thing to add is they are also proposing additional attributes that we don't have.

One of them is Indeterminate, meaning that like when the checkbox loads, is it in on or off state or is it is it nothing? Right? That's that's indeterminate state. That would be really nice to have. You know, it's it's nothing until you touch it. Here's a

an interesting UI element that I've never really thought about, but it makes sense, an exclusive Chordian.

So they say in their research that the current details element, which is not one of my favorite elements. I don't really like the Default triangle or the fact that there's no animation or you know, there's a lot of little things about the default one. I I just prefer, to build my own. But With this current details element that exists, it isn't considered an exclusive accordion, which means that only 1 can be opened at a time. And they're saying that the, there are examples of this in in the real world, but this is also something straight up that Developers need developers need an accordion that functions like an exclusive accordion. Only 1 may be opened at a time. And I never thought about that being a UI element itself, but it makes sense that it is its kind of own thing. Right? What what's,

what's an example of an exclusive

accordion. It says some examples are the Pixel 7 product page. Yeah. It's mostly, like, product pages. One accordion in each of the sections on Performance, photography, and video production is now available. A good example they have with the room and board link, it's a second link that they have here, is you are Controlling attributes of a product.

Right? The color, whatever. And the last thing you want is that when you click on color, That the size also stays open or that the whatever also the other ones also stay open, really cluttering and, like, taking up a massive amount of space in the UI. So their example that they link to is, like, a table from room and board, and you can choose the leg style, the size, the the top, the the wood on the top. The I don't know if it's a varnish. It doesn't matter. Yeah.

Either way, only 1 of these will be open at a time. You click it, the rest of them shut. That makes sense, especially

when the other items are sometimes changed based on what you're selecting in another one.

I'll I'll give you another good use case for has with that is you can kind of do that with CSS has now Because what you would do is you would say, select me the accordion that has an open What do you call a piece of an accordion?

Well, I think we could probably find out that answer by looking in the accordion research tab of this. Alright. Let's let's find out what that is so we can continue on. You're you're you're referring to the the body of it? Well, like, an accordion is the whole thing. What is each of the hunks? Yeah. Each of the hunks. A bellow.

A bellow?

I just I just googled the pieces of accordion.

Oh, okay.

That's a a legitimate accordion. The disclosure widget is a widget containing a summary Plus a heading.

So they're saying it's the summary and the heading or the detail.

Detail summary. Summary or heading and detail. Detail is the the bottom part. The summary or heading is the top part. Okay.

But what is the The whole thing called? The whole thing is called a disclosure. Disclosure. Okay. We'll call it a hunk. Alright. So you got a you got an accordion.

You got 5 hunks inside of it. One of those hunks is open, so you could say accordion has a hunk that is open, then select me all of the hunks, But not the hunk that is open and you could hide and show the other ones. That was really cool. Basically, When something is active, select that or select all the other ones that are not active, and it's it's kind of like a before this and after this Selector.

So handy.

So handy. Crazy.

Next step is file. Hey. We are working with files in the browser.

How about how about that? Is it it's always been kinda just like it's a button. Okay. You click the button and it opens.

The editor's draft in here is kind of interesting because They talk about, like, what a a file should do. And to me, I guess I don't necessarily understand how this is different than the one that exists in the browser today. The file input consists of 2 parts, a button and a label. Clicking the button opens the file dialog, controls local file.

Yeah. What what exactly about this is different? I think,

the The difference here is that you the entire like right now, input type of file is just a button.

And if you want to do things like drag and drop or maybe do previews of the files that are selected and that type of thing, there's really not that much Control over that type of thing. And if you wanna do like a drag and drop area and associate it with it, then you have to get into a whole bunch of, custom JavaScript values. So, they are proposing something that does, Like an entire element that both has the selector, as well as a button, as well as a label.

And if you go into all the examples of input type of file, so it's really not all that different. If you take a look at all the attributes and all of the methods That they have in JavaScript. Those things already exist in JavaScript as far as I can see. So maybe they are saying, alright, let's just take this One step further and give people a little bit of control because it's it's like those things. Okay. You can do input type of file, but that looks like garbage.

And it doesn't function very well when you want to go. So therefore everybody goes and reaches for some custom one that dumps a bunch of custom CSS, JavaScript, and HTML on the page to just make it work.

Fascinating.

There's also, popover in here. Now popover is interesting because we we talked all about popovers and dialogues and all that kind of stuff.

And I find this to be, really fascinating as a a an explainer on a little bit about the ideas of modals and popovers and Light dismisses and those types of things. It's a good read if you're still curious about it after listening to to our episode.

But it is like, what is the difference between a pop over In a dialogue, and in why is dialogue not, the way to go here? Or it says, if the dialogue The log in question needs to be a modal, then the dialogue element is the way to go. If it's a nonmodal, then, You should be using not dialogue, which interesting because it does feel like dialogue gives you the access to do Dialog or modals or non modals. But they have, some interesting things like declarative triggers where you could say, like, pop over target And then what the pop over is.

So it feels like it's giving you access to do more JavaScript y things without JavaScript, which The current dialogue one, it does kinda feel like you gotta at least get into a little bit of JavaScript y stuff if you wanna customize it at all. Oh, that's interesting. I also wonder if this type of thing

will announce itself, because that's Something that a lot of people don't realize when you are doing pop ups in the browser, you need to announce to screen readers What had just what has just happened, you know, so maybe that will include because it's kind of funny like this, all of this Open UI stuff is It's part partly CSS. It's partly HTML. It's partly JavaScript, and it's partly, accessibility concerns, and that's why they're kind of putting it all together. Yeah.

I found this entire site to be just a a research Trevor treasure trove. Like, for instance, here's the the select menu element.

Their idea for select menu is that the select list or select element that we all know and do not love Is, hard to hard to customize. It's hard to style, and it's not flexible enough for the types of things that people end up using it for.

And so the idea here is that they have a select menu, which is actually currently implemented behind the flag in Chromium, which I did not. Oh. I didn't know that. Yeah. So select menu is very similar and, very, very, very similar HTML wise to a select list, But it looks like it gives you more control.

You can use your own markup. You can customize it. You can style it.

You you can make it feel a little bit more like a, anything you want. List behavior equals list box. That's interesting because it ends up being like a multi column drop down that it feels more like a pop over menu that you'd have in a real navigation.

And all of these things, like, they do feel like a a little bit more real of a navigation, then you could still get that mobile UI, native element used case out of it without having to Shoehorn in a select list for something that it doesn't actually fit in. Yeah. The the declarative trigger stuff you're just talking about, it says,

as mentioned with the declarative triggers, accessibility mappings will be automatically configured for the associated popover with its trigger element as needed. Do it for me. Yeah, exactly.

Wouldn't it be nice if the standards were accessible by default and you didn't have to do a whole bunch of extra work just to make it accessible, which is often the case when you have to build something that doesn't exist in the browser like a popover. Right. Yeah.

That is really this sweet spot for me in accessibility anything is when the browser can do it all for me or not just for me, but for any developer because, You know, when people gotta do it themselves, they either don't often do it right or choose not to do it because they have to do it themselves. And there's a lot of reasons we've done before. I I wanna talk about this one, which is the focus group.

Have you taken a look at this one yet? I saw it. I saw the focus group. Yeah.

But I didn't I didn't dive deep into what exactly it is. I know it has to do with focus and

accessibility, but yeah. Essentially, I think it's a hunk of content that can be focused and then you can go into it and that is referred to as roving. I've never actually heard of this before Is like, imagine you are on a website.

Let's use pizza, for example. You're ordering a pizza, right? And the first set of inputs are what type of sauce do you want? Right? Regular sauce? Do you want white sauce? Or do you want heavy sauce? And then the next one is cheese. Do you want mozzarella? Do you want double cheese? Do you want I don't know. This is a bad example.

Feta cheese, right? Right now, if you wanna tab through that, you're tabbing through okay. Let's say you wanna change the cheese type. You gotta tab through every single sauce option just to get to the cheeses.

So Rovi

is an I we need to clip this. Oh, you got time for all the sauce types.

The idea with roving is that you can tab and focus the sauces Hey, say, you know what? No. I'm going to leave it default. I want to go to the next thing, which is cheeses. Then you tab again and you get to that. So you'll be able to focus a section.

And then when you're on a section that you want, you can use your arrow keys or other items to be able to go within that. And that makes so much sense. Get to the section that you want and then use your arrow keys to go up, down, around, and then tap to the next section that you want rather than having to simply just tap, tap, tap, tap, tap, tap, tap, tap, tap through every single possible option. Yep. Right. So many developers,

They they just hit the tab key and see that it all works in some degree, and they're like, alright. That's good enough. Not like if this could be Better because ultimately many people just straight up aren't using UIs in the way that people with disabilities are actually using them. And that's just the unfortunate, situation of it.

What about this this research section? If you're out there and you're like, I need to code up an avatar or A breadcrumb or a badge or a date picker or something. I need to code up some of these from scratch.

I found this research section of this website to be really nice.

One thing that they do really well is they show you examples of different UI elements from different UI frameworks. They show you what a snack bar or a toaster or an alert Looks like in all these different ones, and you could take a look at that and see what's coming, what's not coming.

Avatar shows you all the different versions of avatars from different frameworks. It's It's really pretty amazing, especially, like I said, if you're choosing to work on some of these things yourself or or build 1 yourself, You can actually see good use cases, good examples, all in one spot along with some, interesting Tidbits or facts or links to more explanations or descriptions.

You know, if you go to the switch if you if you go down to switch, That is 1 UI element that the browser you know what? Maybe the browser doesn't need a switch, so to say, because we have a checkbox. It's just a binary option.

But it feels like the switch is such a common UI element in the mobile mobile landscape overall. Right. Everybody has some sort of a a switch as a toggle.

It just makes me wish that there was a switch HTML element that I could drop in Because it's it's one that I end up having to use on every project that I do. Right? But it's it's nice to see them all all of the different versions of them next to each other, How they include the active state versus the inactive state, disabled, the sizes, whether or not they're including labels, how they're doing labels. You can see all of this very easily in here, And it's fantastic. Let's get into the next section of the show, which is our sick picks.

You have a sick pick for me today, Scott? Yeah. I do have a sick pic. I,

I I wrapped my laptop, my phone, And my tablet Oh, I saw that. Skin. Well, my phone has had one for a little while because I cracked the back of my phone a while ago. Yeah. And so a lot of people go with dbrand, but I never really liked the dbrand. The skins like the fake carbon fiber stuff always looks Yeah. Cheesy to me. So I I've been looking at fish skin for a little while. It's spelled s k y n, fish like a normal fish, s k y n. And I got Courtney, like, a beach one for Christmas, and I wrapped her laptop because her laptop was My old laptop and my old laptop had stickers on it, and then when you took all the stickers, there's, like, weird aftermath of all the stickers. Yeah. Yeah. So she was just like, yeah. This computer looks awful. So I I I put a nice little beach skin on it for her, and I was really impressed with the quality of these things.

They're super thick, super heavy.

And I put this 1 on my phone, but I wasn't willing to commit to, like, a landscape or something for my computer itself, and they just recently released Neutrals. Neutral colors. Oh, now imagine that you can all you can get any color that you want to get in a fish skin. And and for me, I was like, oh, that was the The thing I needed for my computer was for a black one to come out. So, yeah, I really like it. The 1 on my phone is actually textured. The 1 on my my computer, they're not textured, but this one's Got like a bumpy texture to it, which makes the phone way easier to hold, hides any cracks. They're cheap and cheap enough. You're not, like, spending a crazy amount of money. And also surprisingly, I I was able to apply them really easily. They went on nice and easy.

They have a deep you know, good instructions on their YouTube channel that shows you how to put these things on, but fish skin is my my sick pick. I I really like having a skin on stuff now. Awesome. I am going to sick pick

a snack.

Sick snack pick, and that is, 2 things. Snack Snack picking.

So my I went down the rabbit hole of how to get movie theater popcorn at home.

I saw a random YouTube video, and I was like, oh, that sounds like something I would like to learn about.

So I learned That you can buy this stuff. It's called Flavacol, which is a salt and butter seasoning all in one.

And when we make popcorn, we just like put oil in the pan and pop it in a just like in a pan, put the lid on, right? And it makes awesome popcorn. So I learned you can buy this stuff called Flavacol, which or Flavacol, and you put, like, a teaspoon in when you're you're popping the popcorn.

And then you can also buy coconut oil that has beta carotene in it, which makes it like super yellow, and it makes it look like the movie theater. It's just beta carotene. So it's not like some awful food coloring or something like that.

And man, oh, man, Does it make such good popcorn? The only thing I haven't done yet is to find you know when you sometimes have popcorn and it's like a circle? It's like a perfect circle Instead of, like, a a popcorn shape, you know what I'm talking about? You get, like, oh, yeah. Corn, and they're, like, perfectly circle. You like You like that? That's your ideal? That's the perfect triple one? That's my ideal because I've always well, maybe it's not my ideal, but that's kind of like what you get at A lot of the places. So I've been looking for that.

So far, I've only found a 35 pound bag, which is way too much, But you gotta check it out. You gotta get some, Flavacol. You gotta get some of this coconut oil that has the the coloring in it, and it makes Such good popcorn. My kids absolutely loved it, and, it's kinda fun to be able to do that at home. I've placed my order for Flavicol. Have you really? Looks like something that I would like. I I'm a big salt fan over here. Here here's a,

I wonder if you do this for your popcorn, But we like to this is something I did since I was a little kid. You get one of those little baggies of M and M's, and you just sprinkle M and M's on the top of your popcorn.

I I'm addicted to that. That's my my popcorn life hack. Alright. We do that with chocolate chips and the kids. Chocolate chips. That's gotta be messy. Yeah. It's such a mess. The pop The M and M's is a much better idea. It's such a mess when we do it with it with that, so I like that. We used to, like, do the butter and you would stir it and half the popcorn would fall out of the pan. And I always put way too many too many pieces kernels in the pan. So it, like, overflows.

But now I'm I'm getting on my flat Lab Flavacol. So you you buy 1 box, and it's, like, $9.

And And it'll last you for your entire life. It's literally I did the math. It's enough for 500 batches of not 500 batches of popcorn, which is silly. So Now we're putting it in jars and giving to all of our friends because there's no way you ever use that much. What do you what do you use to pop your popcorn? Just so we had one of these, like, whirly pops.

Okay. We we use the Whirly Pop. Yeah. We use the Whirly Pop. Yeah. We got rid of it because,

like, I hate kitchen gadgets.

I just I just want, like so I I was like, this is annoying. It's always in the way. I never use it because it's, like, downstairs.

It's hard to put away into a cabinet. It's hard to put away. It's like really Thin metal. And I was like, you know what's also really good? It's just a saucepan.

So we put we just do it right in a saucepan. You put the lid on it, and it's perfect every single time. But then you don't have the little Stir. Yeah. You don't need to stir it. It it's self stirring. It pops.

Yeah.

I I'm I'm Interested in selling this, I concept here to our household because the Whirly Pop is, like, the the most frustrating kitchen gadget to put away. Oh. And you have to have, Cleaning it. For it. Oh, cleaning it's a pain. Putting it away is a pain. Like and then I opened the Drawer and the Whirley Pop handles all getting in the way of everything. Yeah. I I came into this discussion pro Whirley Pop, and I'm leaving anti Whirley Pop. It's unnecessary. Sorry.

What is it? So Alton Brown calls these things uni taskers, which is any kitchen gadget that does one thing is not allowed in your kitchen, and I very much subscribe to that, that idea as well. If it's just one thing, like it's only for popping popcorn Or it's only for making ice cream. Like, everybody's doing these, like, ninja creamy ice cream makers right now, which looks so cool, but I just can't Put myself behind buying a single use gadget like that where that only does one thing. Like, a a pen does everything. This is coming from the guy

Who just bought a A cotton candy machine? A cotton candy machine.

That was one of the buzz. Like True.

It's like a type of candy machine.

Yeah. Yeah. That is very So that's in a totally different field, which is specialty items that can be brought out. So that's stored in the basement. It has a box. It has a spot on the shelf. Not a big deal. But, like, if it's something that it's gets in the way every time you open the pots and Hands covered Mhmm. Or where you can store it downstairs. Like, I I have a vacuum sealer, and I store it downstairs What? I use a vacuum sealer once or twice a year, and it's not a big deal to walk downstairs. But you have popcorn once a week. I'm not going downstairs to Did you go get the Whirly Pop? Popper? Yeah. The Whirly Pop. Anti Whirly Pop. Anti Whirly Pop. Alright. Well, let's get into, shameless

Shameless plugs here. I'm going to shamelessly plug [email protected].

Did you know that the dark mode in Century West looks very good? I, I I just did not know that there was a dark mode in century, and I am a dark mode fan, but it is like it is purple. It's a purple bomb in the best Kind of way. It's like more of like a desaturated purple, and, it matches all of my themes and everything really nicely. So I've Shout out to the century dark mode designers. They did a good job with their dark mode. It's actually dark, and it's not just like a dark gray like everybody else does.

I wanna talk a little bit about, Century has some really interesting stuff around replays now. So you can do Replays in century session replay where you can see what the user sing as They actually have caused some sort of an issue in your application.

And this makes it really easy to scrub Through a reproduction of these user issues and be able to pinpoint exactly what went wrong, how it went wrong. You can get the errors and all that stuff that you know and love, And you can get it inside of your same Sentry interface.

And this is a really simple, thing to get going with because you end up just dropping in The initialization code is is you would. You give it a little bit of, you know well, you can install a depth, and you gotta do a a little integration thing here in your your code. But It it's really copy and pasting some lines from Sentry's docs, and next thing you know, you have session replays going on inside of your Aaron Error exception handling and tracking. So check it out. It's a new feature for Sentry, and it works super duper well. And it works in tandem with all of the other awesome features in Sentry. So check it out. Sentry. Io.

Alright.

Shameless plugs, westboss.comforward/courses.

Check them on out. Grab yourself a course Use a coupon code syntax for $10 off.

That's it for today. Thanks, everybody, for tuning in. We'll catch you on Friday. Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.