Skip to main content
612

May 10th, 2023 × #UI#Accessibility#Standards

UI Elements - Basics, Best Practice, and Built Ins

Wes and Scott discuss browser native UI elements, issues with their lack of flexibility, and research into better customizable options via the Open UI community group.

or
Topic 0 00:00

Transcript

Announcer

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.

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.

Wes Bos

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.

Scott Tolinski

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?

Topic 1 02:18

Wes and Scott discuss enjoying exploring new tech and coding experiments

Wes Bos

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

Scott Tolinski

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.

Topic 2 03:02

Wes and Scott agree the browser needs more customizable UI primitives

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Topic 3 04:06

Wes dislikes the browser's date picker for its lack of flexibility and customization

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Topic 4 05:31

Scott dislikes the video and audio elements for their lack of styleability

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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

Wes Bos

And just work.

Scott Tolinski

Yeah. Of course. Of course. Yeah.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Topic 5 08:13

Wes finds native alert/prompt/confirm modals frustrating on mobile when needing data from other apps

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Mhmm.

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Topic 6 11:56

Scott found the dialog element pleasant to work with for its JavaScript API

Scott Tolinski

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.

Scott Tolinski

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.

Topic 7 12:41

Scott finds the progress element simple and easy to add animated progress bars

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

meter.

Wes Bos

Yeah. I do not think I've

Scott Tolinski

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,

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Topic 8 14:32

Wes likes the range input for its built-in features like labels and ticks

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Topic 9 17:48

Wes discusses usefulness of checkbox/label pairing and :has selector

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Yeah.

Topic 10 20:15

Scott explains Open UI is a community researching web UI controls and patterns

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

It's not a Node API.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 11 23:32

Open UI Component Matrix shows naming consistency across frameworks

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

There's avatar group, which contains many avatars.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Oh, okay. Yeah.

Scott Tolinski

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.

Scott Tolinski

Likewise, button.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Topic 12 26:45

Wes and Scott discuss most common component names like button and modal

Scott Tolinski

and

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Topic 13 30:42

Wes contrasts Open UI's collaborative research to browser's unilateral decisions

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

Yeah.

Scott Tolinski

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.

Scott Tolinski

I think they are interesting.

Wes Bos

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.

Wes Bos

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

Topic 14 32:11

Wes examines Open UI's checkbox proposal including new indeterminate attribute

Scott Tolinski

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

Scott Tolinski

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,

Topic 15 33:25

Scott learns of exclusive accordion pattern useful in product customization UIs

Wes Bos

what's an example of an exclusive

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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?

Scott Tolinski

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.

Scott Tolinski

A bellow?

Wes Bos

I just I just googled the pieces of accordion.

Scott Tolinski

Oh, okay.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

So handy.

Topic 16 36:15

Wes demonstrates using CSS :has for accordion selection and deselection

Scott Tolinski

So handy. Crazy.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Fascinating.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Topic 17 40:53

Scott finds Open UI select menu proposal allows for custom markup and styling

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Topic 18 42:43

Wes notes Open UI's focus on accessibility through standards instead of retrofitting

Wes Bos

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.

Wes Bos

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.

Wes Bos

So Rovi

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Topic 19 44:39

Scott appreciates Open UI's design examples for various components

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 20 45:47

Scott wishes for standard switch component given mobile prevalence

Scott Tolinski

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.

Topic 21 46:15

Scott picks textured skins from FishSkyn for phones, laptops and tablets

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

They're super thick, super heavy.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

a snack.

Wes Bos

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

Topic 22 48:23

Wes picks Flavacol popcorn seasoning and coconut oil for theater taste at home

Wes Bos

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

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Topic 23 50:17

Scott likes adding M&Ms to popcorn

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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

Wes Bos

like, I hate kitchen gadgets.

Wes Bos

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.

Topic 24 51:34

Wes now uses a saucepan instead of Whirly Pop for easier popcorn making

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Yeah.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

That was one of the buzz. Like True.

Scott Tolinski

It's like a type of candy machine.

Wes Bos

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

Scott Tolinski

Shameless plugs here. I'm going to shamelessly plug century@century.i0.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

Alright.

Wes Bos

Shameless plugs, westboss.comforward/courses.

Wes Bos

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

Wes Bos

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

Scott Tolinski

Peace.

Scott Tolinski

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.

Share