UI Elements - Basics, Best Practice, and Built Ins

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

you know, there's a lot of little things about the default one. I I just prefer,

there are examples of this in in the real world, but this is also something straight up that Developers need developers need

to build my own. But does its thing. It works. Yeah. It works nicely.

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 So in iOS and Android is that the dialogue boxes, And I find this to be, 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.

Indeterminate, all day Yeah. Oh, yeah. That's that's my favorite thing to do. Some days I'll just spend you think you have to think about, like, oh, I saw a random YouTube video, and I was like, oh, that sounds like something I would like to learn about.

it isn't considered an exclusive

meaning that like when the checkbox loads, accessibility

accordion, which means that only 1 can be opened at a time. And they're saying that the,

an accordion So they say in their research that very ubiquitous here. So for instance, 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.

Chordian.

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 custom JavaScript values. So,

That was one of the buzz. Like True.

thing to get going with because you end up just dropping in The initialization

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 the sauces above

I I'm I'm 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 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

or drop a review if you like this show.

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

creamy ice cream makers right now, which looks so cool, but I just can't Selector.

And don't forget to subscribe in your podcast player

And this is a really simple,

Did you know that the dark mode in Century West looks very good? I,

Or it's only for making ice cream. Like, everybody's doing these, like,

Alright.

I wanna talk a little bit about, like, you probably don't need a a link component. Otherwise, you can see that or a pill or pills.

in century because Right? The color, whatever. And the last thing you want is that when you click on color, 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 You can't just style them. You can't make them look nice.

where you can see what the user sing

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.

Check them on out. Grab yourself a course Use a coupon code syntax What is it? So Alton Brown calls these things uni taskers, which is any kitchen gadget that does one thing

Century has some really interesting stuff around replays now. So you can do Interested in selling this, I concept here to our household because the Whirly Pop

It's like a type of candy machine.

for $10 off.

Shameless plugs, westboss.comforward/courses.

Put myself behind

that idea as well. If it's just one thing, like it's only for popping popcorn

Replays 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.

session replay slider has always been one of those ones that

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

Peace.

Head on over to syntax.fm 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 Briefly to just pop through where you can see how, like,

is not allowed in your kitchen, and I very much subscribe to that, 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.

as They actually have caused some sort of an issue in your application.

A cotton candy machine? A cotton candy machine.

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, 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 I'm using a Mux video elements now to do all of my video player stuff, Don't have it or call it. I guess it it means they don't have it.

it feels like it's giving you access to do more JavaScript y things without JavaScript,

goes and reaches for some custom one that dumps a bunch of custom 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

then, 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.

controls

because that's

is just a button.

when you want to go. So therefore everybody

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,

And then what the pop over is.

and it's not flexible enough for the types of things that people end up using it for.

is very similar and, very, very, very similar HTML wise to a select list, But it looks like it gives you more control.

That they have in JavaScript. Those things already exist

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.

There's also, I I wrapped my laptop,

local file.

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

which

necessarily But, 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 Checkbox styling beyond just changing the color or something is to essentially hide the checkbox entirely and then rebuild 1 yourself.

in JavaScript as far as I can see. So $200. You know, in that case, you need

What had just what has just happened, you know,

not dialogue,

pop ups in the browser,

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,

proposing maybe they are saying, alright, let's just take this without having to go native. But when you search, how do I make a custom video player, 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.

So handy. Crazy.

Fascinating.

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 Yeah. And and,

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,

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,

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

CSS, JavaScript, and HTML on the page to just make it work.

the

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

maybe do previews now is that like the trick always was 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 you could hide and show the other ones. That was really cool. Basically, good. They're good APIs for Yeah.

and in why is dialogue not,

they are 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.

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.

Like an entire And it doesn't function very well Put controls to false Something that a lot of people don't realize when you are doing like, close it, go to your password manager, and then you can select anything inside of it. Right. So you could say

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 a meter element will

really fascinating as a a an explainer on

element that both has the selector,

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

like right now, input type of file

when the other items

has a hunk that is open, because it had so much promise

Either way, 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.

Oh, okay.

is because

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

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.

So handy.

then

select me the accordion that has Yeah. Yeah. That is very So that's in a totally different field, which is

and the heading

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.

So they're saying it's the summary 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, if you if you go down to switch, That is 1 UI element that the browser So it It is really just kind of interesting to see, though, because there's some of them

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

not the hunk that is open 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.

But and checkbox

only 1 of these will be open at a time. You click it, the rest of them shut. That makes sense, especially just building some fun things. You know, when you get into, like, a fun problem,

Controlling attributes 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.

what is the

of a product.

an open

you can kind of do that with CSS has now Because what you would do is you would say, input I'll I'll give you another good use case for has with that It just says the browser will determine

Plus a heading.

But

I just I just googled the pieces of accordion.

of an exclusive you can you can stick it all. I often wonder, like, will some of these new UI elements And And it'll last you for your entire life. It's literally I did the math. It's enough for 500

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.

You got 5 hunks inside of it. One of those hunks is open, so you could say accordion

are sometimes changed based on what you're selecting in another one.

select me all of the hunks,

or the detail.

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

Very inspired Another really good one is the progress, how many different

file inputs and checkbox and sortable and filterable selects. And

a library with some of these, and ideally,

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

some more interesting things as well. I'll Talk about it later on. But, you know, it just feels really good to be 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.

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, 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

what ones are available to us in the browser right now. Maybe you need to reach reach for a

getting excited about making anything, even if it's Just an experiment. Right? 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

Maybe we'll get these in the browser at some point. Wouldn't it be nice to have a bit more primitives But you gotta check it out. You gotta get some, Flavacol. You gotta get some of this coconut oil that has the

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.

If I'm exploring in in UI stuff, I'm exploring in JavaScript stuff. I'm exploring in, Is something that the the browser could help you out with considering it's such a common pattern.

with the idea that I'm exploring. And at the same time, They're a nightmare if you try to build 1 yourself of any, Like, complex degree. Right? You could build a basic one, 89%

You're you have so many potential

And

Blue Sky can I go up one level and it shows me, like, They're 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

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,

what WG, you know, does it need to be stylable? Then we need to go to the CSS working group.

Is it like a JavaScript feature, Or or whatever is going to be.

of researchers and developers,

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

a web standards

Fetch in Node for so long, One of them is

API. It's not a TC thirty nine API.

So you could think of this as, like, I found this research section of this website to be really nice.

Does this need to have ninja

this

Community group will then say, okay, we're ready for

the other working groups.

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 which is

That, basically,

And depends on, like, what like, does it need a JavaScript API? Breadcrumb is number 5. Good. I think the only one you missed Was number 2 being tooltip What do you call a piece of an accordion?

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

with the hope that eventually for a full archive of all of our shows,

clicking through and reading through this thing.

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.

interesting things on this site. So give a look to their their charter.

People who are trying to decide Wes, what's your least favorite UI element? I'm gonna say

There's also a really interesting component matrix name,

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

a low level JavaScript? additional attributes that we don't which is often the case when you have to build something that doesn't exist in the browser So far, I've only found a 35 pound bag, which is

how you need to announce to screen readers in the rigid You can 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.

I think they are interesting.

Next is, Oh, sorry. Hold on. I got one more thing to add is they are also proposing

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

Yeah. So we got

the editor's draft of checkbox here.

have.

Yeah.

the UI handles with this. And then it's different from time to time and it's different on Which makes sense because also Then you got to think about accessibility and keyboard shortcuts and, like, It's not a Node API.

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.

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.

It says the checkbox control is primarily leveraged

And then it also shows a bunch of examples of,

in all of these things, it would be so nice to have a bit more control over styling those things.

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

everybody you know, 74%

Likewise, Yeah.

or component name matrix, which is is interesting

different UI frameworks that exist out there in the world refer to certain things. For instance, 42% 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 Not like a hugely fun place to be, but I was saying, hey. If there is a div and it really feels like

of the UI frameworks refer to an accordion as an accordion.

implemented.

Button

Yeah. Those types of things. Right? These are are more like, 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? that are And you have a a slider. You know, the the coolest things about having range

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, a beach one popover in here. Now popover is interesting because we we talked all about popovers and dialogues and all that kind of stuff.

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

That doesn't mean that the other ones don't call an accordion. It means they they

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.

of the UI frameworks here have a menu component, and it is called menu.

a menu. It's a form. It's blah blah blah.

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

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% Fetch was

It it gives you at least an option to see, like, Yeah. Totally. Right. I I just wanted to I wanted to be all of the things I want it to be.

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

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.

Oh, okay. Yeah.

you want, like, hot, medium, cold or 0, 25, 30, you can just pass a label to your but that looks like garbage.

So you can style it really well. I made a what was it? But I think that that one went a little bit too far will announce itself, A HSL color picker the other day and I use input type of range to the browser, Feta cheese, right? accessibility, but yeah. Essentially, I think it's a

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,

Like the color picker.

When you click on those, you don't even have to have your checkbox date picker and butter seasoning all in one.

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 And, I don't know, nerded out by giving everything just text values.

That's about it. The kind of cool thing about checkboxes The difference here is that you the entire

Once for Chrome and once for

You know, why give meter.

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?

that something that does, 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

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

Like, if

Checkbox has never been my favorite 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.

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.

but it works really well in Safari, Chrome,

label of the thumb was based on the HSL values. And, like, I there's nothing in it aside from being able to

Works very well for me, button.

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 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.

Edge, and Firefox,

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

webkit, because I can say, okay, let me Zoom out a little bit? I know that I'm seeing When you

in in CSS, 2 sliders in there, and that's not that's not doable, but it this does cover most of your use cases. Yeah.

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.

Breadcrumbs and said, if it's in this category, basics, best practices and built ins basically talking about

Everybody knows what a breadcrumb is at this point where, they're doing research into these UI elements A bellow? 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.

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.

select form badge card, modal icon, slider alert. Okay. So modal is pretty high up here. That's interesting,

Yeah. I love breadcrumbs. Like, for example, I was when I was doing all the equipment searching for my gym,

There's obviously a little bit more to that, but

Next 1 we have here is the checkbox, which is good. You said, like, I hate having to do checkboxes

Those specific I much prefer that over the super obnoxious, like,

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.

let the browser decide input type of date. That's where the spec stops.

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 That's a a legitimate accordion. The disclosure widget is a widget containing a summary

and it's good. They have a editor's draft here. We should say, like, none of these things are

we've now called it a dialogue, you know, in in the actual browser. So

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

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.

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

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

so that they can then be proposed

and

And I think we're gonna be talking quite a bit about

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

let's Talk about the bad UI elements that exist in the browser, which I'm I'm sure all of you out there, We do not need to rehash the what is a modal conversation.

if we were to say,

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

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.

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,

Best practices for various UI elements, but we're also gonna be talking about the UI elements that currently exist in browser

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

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.

then it will on UI elements, It gives you just, like, this prompt box with a username and password and a okay,

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 Isn't even excellent. You know, we did a a show on dialogue.

Yeah.

Has food coloring or something like that.

turning it on and off. But now with with the CSS has selector,

What Open UI is is it's basically How are you doing today, Scott? Oh, hey, man. I'm doing good. Doing good. I have been Slowly creeping into my vocabulary

and, 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, I found this entire site to be just a a research Trevor treasure trove. Like, for instance, here's the the select menu element.

Man, Hass is

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.

incredible. This is the future here of how I see assess everything.

every time I do use it, I'm just like, this is Who just bought

And style it accordingly. I have a couple of examples. I haven't

nailed the accessibility yet, so I haven't shared any code.

inside of the label. That's a good point. Yeah. You can say, like, you could say, like, body

And he asked me that, like, such quick work, and it makes so much sense that, like, 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

With that is is in focus right now, 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.

You know, content editable is kind of

I want the entire row. Like, you could think of, like, a row to be highlighted.

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

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.

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 To the jobs reporting groups, the CSS working groups and say, okay, this is how we think it should

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

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

overflows.

too many pieces kernels in the pan. So it, like, Then we need to go to the

Okay. We we use the Whirly Pop. Yeah. We use the Whirly Pop. Yeah. We got rid of it because, 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.

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.

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,

variables.

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

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

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,

good. They look like the system dialogue boxes or whatever.

You don't have to, like, bring in a third party package. You just literally alert, prompt, or confirm.

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

Often they need to copy paste that from another tab that they have open on their phone, and

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,

layer, and a website.

has a whole accessibility In the browser.

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

get that we don't get? And I put this 1 on my phone, but I wasn't willing to commit to, element. And progress is Something that people I think are underused, You should be using But it is like, what is the difference between a pop over In a dialogue, 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.

the native implementation of it just feels like, Oh. He he he wrote he wrote the book on it, 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

Mhmm.

copy it, copy it, or open it on your computer while you have your phone open and Type it in manually and

they look There's a number of 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

simply just expose us

But, such a bummer that that you have all that type of stuff.

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, that didn't suck what's an example way too much,

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, just tap, tap, tap, tap, tap, tap, tap, tap, tap through every single possible option. Yep. Right. So many developers,

It's really frustrating to do that. The biggest one that gets me this is not on a website, but this is on Ios.

like, a landscape or something for my computer itself, and they just recently released

And my tablet Oh, I saw that. Skin. Well, my phone has had one for a little while because 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,

fish like a normal fish, s k y n. And I got Courtney,

my phone,

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

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 in the mobile mobile landscape overall. Right. Everybody has some sort of a a switch as a toggle.

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

They're super thick, super heavy.

hides any cracks. They're cheap and cheap enough. You're not, like, spending a crazy amount of money. And also surprisingly, group.

a snack.

bumpy texture to it, which makes the phone way easier to hold, 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.

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

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

I I was able to apply them really easily. They went on nice and easy.

Yeah. And I would say my least favorite's probably the video and audio elements because

direction. Totally.

I can't style it. If you need to select a time, I don't I don't believe 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.

These are multimedia elements that were given to us or menu,

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 think it may be input date time will do that, but

to bring amazing

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.

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 use your own markup. You can customize it. You can style it.

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

Is like, imagine you are on And I was able to change the background color, and the

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.

like a popover. Right. Yeah.

But I didn't I didn't dive deep into what exactly it is. I know it has to do with focus and along with some, And sure enough, we we do have some degree of an alerts and prompts and those types of things. But

and you didn't have to do a whole bunch of extra work just to make it accessible,

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,

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,

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 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 There's avatar group, which contains many avatars.

You know, when people gotta do it themselves, they either don't often do it right

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,

Wouldn't it be nice if the standards were accessible by default And these are For anyone wondering, these are things like, are they implemented in,

Instead of, like, a

And then you can also buy coconut oil that has beta carotene

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 learned you can buy this stuff called Flavacol,

which or Flavacol,

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

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

awful concerns, and that's why they're kind of putting it all together. Yeah.

So I learned That you can buy this stuff. It's called Flavacol, input type of file. Like, we understand how it works And whatnot. So now we need to go to

and you put, like, a teaspoon in when you're you're popping the popcorn.

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,

or A breadcrumb or a badge or a date picker or something. I need to code up some of these from scratch.

you're tabbing through okay. Let's say you wanna change the cheese type. You gotta tab through every single sauce option 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

Let's use pizza, for example. You're ordering a pizza, right? And the first colon checked And if you want to do things like drag and drop or it's really cool because 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

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

What about this this research section? If you're out there and you're like, I need to code up an avatar

Right now, if you wanna tab through that,

situation of it.

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? Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got a episode for you today $50, but below

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

So Rovi

to be able to a salt 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.

a section.

Do you want double cheese? Do you want I don't know. This is a bad example.

And then when you're on a section that you want, you can use your arrow keys or other items

The idea with roving is that you can tab and focus CSS

just to get to the cheeses.

underneath it.

Out there.

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, You put a label and you put your checkbox inside the label and then anything inside of that label text, other divs images.

And just work.

If if you're getting in to 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.

and then start putting divs

Shaka. There's so many of these other video players

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

the first thing they say is

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 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, Like the,

And that's

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 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? number 4 being tabs tabs. It goes button tooltip menu checkbox Tabs, breadcrumb, as well as a button, as well as a label.

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, 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, an interesting UI element that I've never really thought about, but it makes sense, an exclusive

but Video JS, there's, Avatar shows you all the different versions of avatars from different frameworks. It's It's really pretty amazing, 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, One thing that they do really well is they show you examples of different UI elements from different

I I just wish these were a little bit more,

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.

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

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

and buttons

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 Yeah. Of course. Of course. Yeah.

If you a high and a low value 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

progress is how far you are from the start of something, Mhmm. Whereas meter

There are a lot of input elements I think that people wish were better, yeah, it's just an indicator,

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 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,

Yeah. I do not think I've

And the min attribute is not allowed for progress element. That makes sense. So 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

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

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, 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.

UI elements that could be considered not great.

Prime territory for, My name is Scott.

You you bind that value to something, and,

You know, if you go to the switch

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.

interesting

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.

a common UI element

especially, like I said, if you're choosing to work on some of these things yourself or or build 1 yourself,

But it feels like the switch is such 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, 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.

see good use cases, good examples, all in one spot

You can actually

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.

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, With this current details element that exists,

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? And you can get it inside of your same Sentry interface.

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.

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 Tidbits or facts or links to more explanations or descriptions.

a slider or a dragger. You know? What what do you call those? I guess it's slider. You would call those.

if you've never used it before. You know, it it's basically just a, Like a 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.

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 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,

fussing around, making a bunch of little demos and whatnot. That's why I really like the,

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.