The Looper Mini Web Machine

Key Takeaways

presenting the Looper a Powerhouse machine for building all sorts of awesome stuff like this and this F this it might not look like much unstyled but it packs a punch of functionality that's Mega [Music] useful the Looper features automatically unselecting the previous item ensuring that only one can be selected at a time and I call it unconcealed because all the options are shown to the user without an action to reveal the full set you know like a select element where you have to click it to see all the options as opposed to this radio Group which just lays them all out there for you it's also super accessible it supports mouse keyboard screen readers and has been a solid little machine for many years it's a perfect Mini web machine to use when there's like less than eight items or so to pick from but if there's more than that there's certainly use cases where you might want to reach for a select or something that does conceal the additional options you know to prevent Choice overload managing State it's super fun and stuff but it's also really fun when the browser manages the state for you and so in the case of this the browser manages the selection State and also offers a few ways to style or access the data from it from CSS we have the checked pseudo class and from JavaScript we can query the checked pseudo class like via query selector or you can use Looper inside of a form and access the selected value from the form data API lots of choices classic web now if it wasn't obvious or maybe you're wondering why I called it at the Looper it's because this supports something called roving Focus or roving index that's like a fancy term for saying it's a meaningful Focus trap that is cyclical upon interaction that cyclical aspect is why I called it the Looper but roving ux has even more features check this out if I had to tab through a 100 videos in that first section just to get to the second section that would be absolutely terrible well the way a radio group works and the way that roving ux works is you focus into that area and then you can move with the arrow keys and if you hit tab again you jump to the next section so you're not trapped inside of there you're actually you go in you dip around with the arrow keys and then you can jump out and go to somewhere else that's very critical in the interaction pattern something to note when you go and copy and paste this machine which I hope you do I am using the implicit label input relation here this is where the input element is inside of the label this means I don't have to use the four attribute or give the input an ID but there's certainly use cases where your label might be somewhere else and your input is somewhere else at which point you can connect them together and by the way always use a label you can connect them together by giving the input an ID and the label element a four attribute that points to that ID now when you click the label it selects that particular radio it's a really cool way to kind of separate your concerns and also build really engaging experiences and a little bonus tip the field set element which you might remember from gooey challenges hopefully you saw some of those episodes it can make observing value changes super easy so normally you might look at each particular input and wait for them to change and then try to manage state that way ah it's really messy or you can use a field set element put all these inside of it and watch for changes on the field set element kind of rolling up all the changes of the inputs into one single place for you to observe and I really like that pattern plus then you get to use the legend element and then you get to be a legend or use a legend I don't know anyway it's the legend element who doesn't want to use that one it just sounds rad so earlier in this episode I teased to some really cool use cases of the Looper and now let's go into those a little bit deeper and try to look like a pro this one is kind of silly it's very literal so here I tab into the radio group and then where's the start and where's the end I don't know cuz someone put this layout of this radio group into a circle and now it goes around forever I can use the up Arrow the down arrow the left Arrow the right arrow and it's just kind of silly it was also a fun use of trigonomic CSS you know make a circle layout that's fun this one you can see the label and the input so there's a pretty strong hint right there that this is backed by the Looper and of course if I tab in I get cyclical uh interaction here so I can kind of loop through these forever and thanks to the view transitions API I can morph between the selection so basically this is a grid layout the current one that's selected the one that's checked remember we saw that CSS hook it's the larger one in the layout but if the checked State changes a different one has become the larger one and I just say hey grid make this one big and hey view transitions I'm going from an old state to a new state would you please morph those elements between the states and it does it all and the final inspirational demo for what you can do with the Looper is this single selection plant Chooser and it does this by well here let's see I'm in a radio group look there's only one checked at a time and if I get to the end and I go back to the beginning there is your strong clue we are trapped inside of some roving ux it's freely delivered by a radio group and the way that this one works is it takes that checked pseudo class that CSS we were talking about earlier and it promotes it by giving it grid template columns it's going to have more FR units assigned to it than the ones next to it so the one in the middle here is getting about five the one on each side is getting about two and a half and the ones at the end are getting one and then as I move through I use the has selector to look at which one is selected and I select the adjacent ones next to it as well as the one here and give them a different size in Fr units and then you can transition grid template columns so you combine transition and grid template columns the Looper element and the easing function for getting springy animations and you've got yourself this super cool rad demo if you liked this episode go ahead and tell us in the comments I'm curious should I keep making more Mini web machines I've got a long list of things that I think make really good little reusable machines but I need to hear from you to let me know so give a like give a subscribe give me a comment and I hope I can send you some more Mini web machines see you later y'all [Music]