 And welcome to another episode of gooey challenges where I build interfaces my way and then I challenge you, yes you, to do it your way. Because with our creative minds combined, we're going to find multiple ways to solve interfaces and expand the diversity of our skills. I mean, that is undeniably true. Today, I've built breadcrumbs. I'm obviously excited by the variability and the ability to sort of like bring my own style to something. And here I've done it. I've made breadcrumbs. People are going to argue these are not breadcrumbs because they don't follow the kind of accessible spec of what these are supposed to do. But I really, it's so close to how it should work regular breadcrumbs. So like regular breadcrumbs are just a list of links that should reflect the history of where you've been, right? So theoretically, if I'm here on the on sale section of this website, I've gone from the homepage, I've clicked on the RPG section and I want to look at RPG video games. And then I'm going to say, well, I want the indie RPG video games and I make another click to find just the on sale ones, right? Well, now there's that whole history. And what's kind of nice is that history of how I got here is laid out for me. And what I've done that's different than this is how I branched off from the other breadcrumbs. I think there's even a joke in there like branching because we're making branches anyway, whatever. I have added this ability for you to see siblings. Usually breadcrumbs can take you just back to a landing page. So you would click RPG and go to the RPG landing page for all the video games that are RPG related. But what I've done here is I've allowed a user to see into the siblings of what's available and go to one directly. So they could search dungeon crawlers. And now the user would be navigated to the dungeon crawler section as if they had clicked this link and it had been there the whole time. Super cool, I thought. And, you know, of course, since I used nice semantic elements, it's easy to go to. So this is just a link. That's a link. And here's a select. I can hit space bar and hit up and down to find my different collections and choose one as I so please. Let's look at some of the layouts in here and some of the ways that this is a little unique. So if I turn on the flex layout here and the scroll snap, we can see that we have one scroll snap child. It wants to be snapped at the end. And watch as I do this, look at it. A little bit of scroll padding here to kind of make sure that we get some space here. I'll take this off so we can see it take off flex, right. Look at how it stays in view. And that's nice. I felt like the current page is the one that you're going to want to know in context when a page loads. So if there is overflow, we try to keep the current page in view with a little bit of scroll snap. So the scroll snap is on this nav element container. And then we find the last crumb and the last crumb look, it has scroll snap align and so we use CSS's selector syntax here to find breadcrumbs, the crumb that is the last of type. And we give it a snap align and now it says snap aligned. As long as the browser supports it, it will keep that element in view and snapped. If it doesn't support it, well, it just won't snap it. You get the, you know, nice scrollable interface just as you would before. But let's look at like how the flex is working. We have just a flex container, a little bit of gap. We've got the overflow, you know, scroll snapsets here, the overflow behavior contained. If I hover over in the align items, we'll get a nice visual. Yeah, it's trying to vertically align everything. Same with the crumbs. We got a crumb, we turn on the flex, we hover align items. We can see that each crumb is centering the icon in its text is vertically there. Really neat. One of the other interesting layouts we have in here is this chromicon here. So if I pop in here, we've got this chromicon, which is a grid, the grid defines a row and a column that are both the same size of three characters. And they're both named stack. So this is a, you know, layout technique you should have seen before, we're essentially creating one cell where it's named, and then we're giving every child assigning them to that stack area. So that creates this select on top of an icon. The select is semi-transparent at point zero, one opacity, and it's being fit to the block size. So it's being fit inside of that chromicon space. And that's why when I click in here, I'm actually invoking a select element because I've, you know, disguised it. Look, I can give it a name disguised to select. I've disguised it over top of the interactive area. Right. And it's kind of cool. We saw the keyboard users don't even know it's disguised. They're just getting focused into an interactive element. And the icon there, which we've hidden with Aria Hidden True is just not relevant. So so many cool little pieces come into this that I think made this a really nice breadcrumbs component from the flexbox layouts to the use of, you know, color scheme. So if I go into a color scheme line, let's just go to the debugging corner. We haven't been to the debugging corner yet. What is going on? Let's go over there. Yes. Okay, see, right now I have all of the different features displayed. Now there's even so much more to talk about. We've got the light theme, which we're getting on Firefox because they don't support color scheme yet, which is totally fine. Down here, I've specified prefers color scheme light, which explicitly brings in the light theme. iOS on Safari doesn't support color scheme yet. They've got the light theme. Safari on desktop does support color scheme. And here they've got the dark theme, right? And these dark colors are coming from the operating system itself and from the browser itself. I'm not deciding these. And that's why I think this component is something that's really easy to extend because if you wanted to change the colors, well, I haven't set any, you don't have to overwrite any. And I thought that was nice. If you also look closely, see how the home icon is here and there's no word home, same up here on mobile. Same over here. And look, we still see it here, but if I squeeze down a little bit, it's going to hide. Oh, and we can see, look at our items trying to stay snapped into view. Super cool. Just love that little feature. And I thought that was nice to remove the home label on mobile. And that was really easy to do with the nesting spec. I was just able to sort of reach into the parent, looking to see at the width and tell the home label to hide. I liked it. What else to talk about in here? What else to talk about in here? I really liked the way that the mobile select experience works because you can just tap a link. There's nothing, you know, interesting about that. But, you know, on an iPad, you would see an even different pop up. You'd get a really nice little overlay right here. And on Android, we get the sort of traditional huge pop up, which I think these are nice. I like these interfaces. I find them to be familiar. They're always legible. They're always on theme with the user's operating system. And you're sort of just sort of giving up the ownership of how this should look. And you're just opting in to just give users a way to make a choice. And, you know, don't, don't get too fancy with it. Again, though, something that you could extend. So if you wanted to take these breadcrumbs and create a more unique experience for what happens when you click the select element, you could go ahead and bring in your own select component and go to town and bring your style to that interaction. All right. So we've covered layouts. We've covered some of the responsiveness of this. We do have some reduced motion action in here. So really, if you look when I hover over the link, it highlights the chromicon at one pixel on its width. And then when I go into the actual icon itself, that highlights more fully. So I'm sort of saying that icon to the right is associated with this link. If you hover on it, now you can interact with this, see it grew. Now that grow animation is just a box shadow size that we're growing. It's a really typical strategy you all use to kind of make a circular animation. It looks like it's expanding or contracting. This one looks like it scales inwards a little bit. I thought that was cool. And if we're over here, there's prefers reduced motion, we just don't see any transition. And so again, it was really easy to do in the CSS. Like I find this chromicon, look at right here at media motion, okay, we're using nesting to sort of stay within the context of the chromicon. And we're going to transition the box shadow. And that was it. All the functionality is still there. All we're doing is gating the concept of a transition behind a media query, so that we can respect users preferences. I just love this stuff. It's just so little for me to do. And I feel like the impact is so large. So you know, classic GUI challenge, you got to have the prefers reduced motion in there. And the color scheme, it's just sort of, it's just ingrained in me now, like this is how the web works. Oh, there is one more thing I needed to talk about, right, like right here as I changed this, notice that all the other items disappear, and that the selection is done right here, we have some JavaScript to talk about, let's talk about JavaScript. There was a very critical user experience moment that I needed to fix because of the way that I was using a select element. So if I let's just do this, let's go back into the browser. And if I use the keyboard, and I navigate down to hear other collections, and I hit spacebar to invoke the select element, when I'm himmiting up and down on my arrow keys, notice how the blue highlight moves, but the check doesn't. It's awaiting for me to hit enter. Right, let's spacebar again. That's not how every browser's select element works. So my JavaScript is trying to normalize the behavior towards what we see here in Chrome, where this gesture up and down isn't changing the check mark. In some browsers, it changes the check mark. And if the check mark changes when I'm just looking at my other options, it fires the change event in my JavaScript, and my JavaScript will try to navigate there. So the user would be like, oh, what's other collections? And it would be like chosen. You really, well, that's not what I want. And he's like, okay, well, how about I chosen? And I'm like, that is really annoying. So the way that we fix that is we watch for each, you know, select element, we're going to observe the change event, and we're going to watch the keys that are pressed in there. We've got a set of allowed keys, which sort of mean, hey, if these keys are pressed, we want to see what the changes and then prevented keys are the keys that if they're pressed, we're going to ignore the change. All of this is so that when the change event does happen, we can confidently know whether or not we should accept the value that's in there or not. And if we do accept the value, we go find the element, we go change the Chrome content. So here's the text content of that link. So when we changed it, it actually updates the text content. And here's a cool trick I thought. So the Chrome element that we're changing on, we're going to grab the class list and add tree changed. And let's go see what tree changed looks like in here. I'm going to go back to the larger Chrome. Let's get rid of our grid and flex overlays. Let's change the tree here and inspect our Chrome. And look, here's Chrome tree changed. That's the class that we added via the class list. And if we look at all the siblings after, they're said to display none by CSS look dot Chrome dot tree changed, find all my subsequent siblings and set them to none. And I just thought that was so neat. It gives a really great user experience. CSS is doing a lot of the hard work. JavaScript is just adding a little bit of value in there. So it's normalizing the select. And it's also giving us some nice visual feedback that, you know, the route is going to change soon. And yeah, there's lots of other little details in there. Like I think the nav element here has role navigation, because as I tested, I just didn't see that the implicit role of navigation wasn't coming through with the nav. I was I needed to be explicit about it. And then I really like this feature here where if we go to the current Chrome, the Aria current page, and that we style that visually. I just thought that was really nice. So there's lots of little things to note in here. Again, the article is going to have all the great details. So thanks for watching this GUI challenge. I hope you enjoyed my breadcrumbs. I want to see what your breadcrumbs look like. Who's going to build some breadcrumbs that are per the spec? And who's going to build one that's not I want to see all the different types. I think there's a lot to learn here. And I'm enjoying building these like minimal components that are very system base and then seeing how people build upon this base. I think it's your nice extendable system oriented baseline components that lend themselves really well to getting extended and modified and customized. So let me know if it is or if it isn't and I can start making these things in a little bit of a different way and make sure that they're nice and easy to fork and customize. Y'all take care. Thanks for watching this video. I'll see you later.