 Hello, hello, I think we're live. Yeah, we got six minutes. So if you're hopping in or if you're already in and you have some questions for me, I'd be happy to answer them. Just throw them in the chat. I think everything's looking good right now. I never know. So let me know if it's looking good or not. Yeah, yeah, I'm just gonna wait for a couple minutes until 2.30, that's when I'll start. But yeah, again, just hit me up. Ask me anything in the chat before we start if you want. Hey, Hugh, welcome, welcome. How do I sound? Do I sound glorious? Tyler, what's up? How's it going, homie? So I just got this new mic. Tyler, you might be interested. I had one of these guys for the longest time, but it was just so just like bassy and crunchy on the top. And I was just, I was just over it. I was, I was tired of like just being like this all day and never quite getting it right. And anyway, got one of these, one of these beta 57A's. I love it. Thanks, Tyler, thanks. I got my Friday hair going on, which is, I did it yesterday, but today it's just leftover. Alrighty. Oh, the new one, the new mic is the Shure Beta 87A. This one right here. It's legit. I love it. It's got a little bit more of that like mid bass. Still got that kind of upper mid catches that like timbre when I got it, but yeah, not all like all sizzle and all bass. What time is it? Got a couple of minutes still. Thanks, dude. Oh, I love the love. I mean, he's lying. He picked it up super fast, super fast. Just kind of like made me upset actually how fast he picked it up. I was like, man, I like do this for a living and it took me way longer than this. I like to take credit for it, but it was probably all you, Tyler. Right, one minute to go. I was thinking I would change courses and I would just do that. What's that thing where you just listen to people really loudly, take drinks of water or whatever. I know. Hey, how's it going, Joseph? Welcome. All right, it's 2.30. Let's get on with this. Thank you so much for joining me and I appreciate you coming along to suffer through this exploration of Reach UI with me. If you're not familiar, Reach UI is pretty cool. You can find it at reach.tech. This is created by Ryan Florence. He's doing workshops, online courses and consulting. You can find his courses here, but then over here there's Reach UI and this is an entire UI library. He's building these components out piece by piece. And the goal of this library over other UI libraries is to be fairly unopinionated about style, but very opinionated about getting the right attributes and things in place so that you can have accessibility. Now, that's not an easy problem. It's not an easy challenge because there's all these attributes that you need to have in place that sometimes you need to have control over and can't be fully automated. So he's done a really good job of kind of riding that line and giving you some components that work out of the box while still giving you the power to kind of customize things as you need. Now, I really haven't had any time to get my hands on this for myself. I've just talked with him a little bit about it from time to time. We did a React podcast episode on it. Gotta get my typing fingers going. Let's see what episode it was. 22, we talk all about accessibility and all the things that Reach UI is giving you, all of the things that he is doing to make sure that you get certain accessibility promises out of the box. So if you wanna find out more, just go to reach.tech. Today, I am hoping to explore this menu dropdown. Now, I'm gonna be totally honest. I actually don't know if this is gonna be a good fit for what I need to do, but I wanted to give it a try. So what do I need to do? If you've been following along with the other videos, we've been building up this tabbed navigation UI and this was from a spec that two of our designers, Travis and Angela made, which kind of just set all the boundaries for the margins, the tabs, like how these things all look and interact together if you got a title, like where these buttons are if you don't, et cetera, et cetera. So we built all that into these components. The last video that I did, or the last stream that I did was a bit of a train wreck when I tried to put this in our kind of Lerna-powered monorepo. I could not get it working. I had been away from that code base for too long. So I decided to kind of not continue with that. I'm gonna have to figure some things out because it's a little bit busted at the moment. So I thought I'd continue the actual UI development of this, this all kind of breaks terribly if we go to these smaller screens. So we need to have a mobile-friendly version of this. Now that wasn't in the spec that we were given, but I do know our apps and I know that we have a bit of a convention for this. So this is roughly what these components are going to replace this little like tabbed subheader thing that we have here. And if we go to our mobile view, we'll see that those collapse into this dropdown right here. You can expand that. It does a little, come on, gonna reload. Okay, if we expand that, it kind of darkens out the background. I don't know if we'll get to that today. My wife is hosting a, what is it, bridal shower today? So I actually have to get out of here in like 40 minutes. So I just wanted to see if reach UI would be a good fit for this dropdown setup. Maybe it will, maybe it won't. We shall see what we shall see, but this is the goal. We want to go from the desktop view, which we have right now to this kind of mobile dropdown arrangement. So let's dive in. Okay, I got my code on this sandbox. So I can post this URL in to the chat if you wanna fork it and play around. Okay, so first of all, let's give ourselves a little bit of a place to work. You'll notice that I did not fix my key repeat. So I'm like stuck on ones. I'm not gonna make you suffer through that now. Okay, cool. So we kind of carved out a new space for ourselves to work. And then what are we gonna need to do? So these are the reach docs. He has an alert and alert dialogue, dialogue, modal, menu button. And then this is kind of, I guess menu button is the kind of accessibility term for a dropdown. He has the documentation and the source here. He has a little bit of an example here. So you can kind of see that this is what's going on. If I click on one of these, it does an alert. I know that what I'm gonna be using this for is gonna be, these are gonna be anchors. So right off the bat, I'm thinking maybe this might not be a good fit. So we might end up ditching this, but again, we'll see. So he has the installation up here right upfront, which is perfect. That's what I need to know. So if we want, we can just add reach menu button. This is all kind of separated out. Now, if you're not familiar with this, if you're kind of used to seeing like npm install menu button, this is an org scope. So it allows, if you're familiar with npm, modules can have scopes. So let's see. I actually don't know how to find the scopes. Here, let's find that module and then we can see if we have the, see if it lists all of the modules in scope. Interesting. So it doesn't actually show the org. That's really weird. Anyway, this is an org and I've been seeing this a lot more, which is pretty cool. So Babel has recently changed all of their plugins and stuff to use this scope, which is really cool because now they can control that scope and not have to worry about coming up with like really kind of abstract fixes for certain things or worry that someone might steal the name for that package. So anyway, so that is what that is. If you're kind of unsure about what that little at reach was in front of it. So let's grab this and let's go into our code sandbox, which I moved. Now in code sandbox, let's see, we're gonna go over here to our prod. Let's see. Oh shoot, I clicked away too quickly. We wanna add this as a dependency right off the bat. Okay, cool. Now, typically we would add this in our package JSON, but since we have this UI, we will do that in the UI, which will update the package JSON for us. So we'll paste that in, reach menu button, that's the one, and we just click on that. You can see that added it to our package JSON. Let's see if we can import that now. Let's see, how is he doing this? Okay, so this module has named exports. So when there's names named exports like this, we can import them in a variety of ways, which is pretty cool. I love seeing that. Let's just copy what he has. Perfect. And I am gonna do the same with this. I'm just gonna copy this example and see if we can just recreate what he has. All right, so we have that. Okay, got that. Then the should alert still. Yep, perfect. So drop that down. Cool, now these should be keyboard navigable. So right now I, so I hit tab to get in space to open it, escape to get out, space again, open it, escape to get out. So we're getting a lot by default and really what did we do here? We didn't do a lot. We copy this, we have the menu component. We're using that menu button. This is all under our control. So we can change this to was up and that works. Cool. And then we have this menu list, which is, you know, once this is exposed, we see that and then each of these menu items. Super cool. Now these aren't doing a lot. I'm not sure what these menu items do. Let's go see what they do. Oops, that didn't work. Menu item handles menu selection must be direct child of menu list. Okay. So if we want, this is how he has given us, so he's given us attributes for styling these. If we want to style them with CSS, I believe if I'm not mistaken, they probably take, oh, it looks like my stream health is suffering for whatever reason. So hit me up in the chat if it's kind of getting insufferable and I can kind of see why that might be. But yeah. All right, so ours is unstyled at the moment. I'm kind of curious what we get by default. So I'm gonna maybe poke around in that. Printer's going, printer's in my office. Means Nelly's gonna be coming through that door any second, which is gonna be super fun. I'll have her say hi. Okay, so what do we got? So we got this button we have. So it gets an ID. He's putting some kind of hash on there, it has pop up, menu, like magic. I can predict the future. The profit, fantastic. Anyway, so as we click those, the RE expanded attribute changes from false to true, which is great. That's exactly what we want. And then it looks like we're getting this react portal. I can't inspect that because it goes away as soon as I leave focus. So I'll probably have to ask him how we do some inspecting on that. And for right now, yeah, that's how things are going. Okay, cool. That is cool, no problems. Let me just see if anyone's, okay, cool. Okay, awesome. So I'm really pleased so far with how that works. Let's see if we can just kind of style some of these things. So right now we have just this gray background around that. So let me snag that color and see if we can add that. Where do we need to add that? All right, so menu doesn't take that. That's fine, doesn't need to. Maybe we can put it up above a level. There we go, okay, cool, cool. That's good. Let's see, so let's see if we can directly style these buttons. I'd prefer not to have to jump back and forth between a CSS file right now, but I will if I have to. Okay, cool. So we have, we can choose the color of that directly, which is awesome. Let's add some padding. I know that that's what we have here is likely. Let's see, it's probably gonna be on like eight pixel increments. Yeah, so 16, we got a 16 pixel border there. Let's change the line height to 32 pixels. Oh, I always forget that that's not. With 100%, okay, cool, cool. So one thing I'm noticing right away is that this is kind of like going below what we had before. So like in our experience currently, it all kind of shows up in this same box. So the portal kind of like takes it out of that. I don't know if that's a huge problem, but if we're trying to match this, doesn't look like we might have control over that because reach is doing a lot for us. So now one thing that I'm thinking that we might not need, what's the, one reason I'm thinking we might not need reach is because these menu items are really just gonna be anchors. So when this thing compresses down, they're just gonna be anchors where you basically expand this thing and send them off. So I don't know. I don't know about the accessibility of all this stuff. So we'll kind of see. Let me see what happens if I just put an anchor in there now. Okay, so it doesn't, let's see. So I don't know if I'm, okay, I'm not. So I can still navigate between the items, which is cool. And it's something that it doesn't like. So if I tab in, I can go up and down. Oh yeah, here we go. It looks like he has an example of an anchor. So he's using this style, which I talked about in like a previous video where you can basically provide the component that you want. So I'm assuming that these are probably buttons under the hood, even though I can't inspect them. That by default, these are buttons, but he takes a component prop. We had taken that in previous videos as as. So it looked something more like this, but it's the same idea. So we can take a component. That's cool. So that's actually what we're gonna be doing. So I'm gonna delete these. I'm gonna delete this now because I'm not gonna give it a link directly. I'm going to use this menu link, which I'm certain gets some type of accessibility treatment or default attributes. So it takes an href cool text. Perfect. Let's see, what do we have in some of these as example buttons? Or example routes. I guess it doesn't matter. Oh yeah, so you can see this is where we have the as h1 stuff going on. Okay, so we have this, we have, so this would likely be the name of the active route or target route. Oh shit, it's some type of keyboard shortcut that I think took me to the previous version of this thing. Wow. Really apologize, I'm not a terrific live streamer am I? Okay. We are back in business. Okay, so that's gonna be the target route. Since we're in here, I wanna see what else we get. So we're looking at the menu item right now. We're kind of seeing what props it takes. I'd like to see a little bit more, learn a little bit more about this component. So let's see menu item. See handles menu selection must be direct child of menu list. Okay, we got that so far. These are the CSS selectors. I wanna see the style guide thing real quick. Okay, so if I wanted to import the base styles, I can import them through reach menu button. That is super cool. Let's try that out. It's possible that I'm overriding them. Okay, cool, yeah, so I'm overriding them for this one, but you can see that it works for this one that I had not applied any styles to. Okay, cool, killer, awesome. So that is cool. So each of those come with their own style. That's just at the slash style.css from the package name. Great. And then yeah, so it's perfectly acceptable that we're using this. We can use any number of other styling options if we want. That's good to know. And then the element selectors. So these are things that are guaranteed. These are attributes that are guaranteed to be on their data selectors, so very cool. Okay, cool, so we're on the right track for the most part in terms of styling it. We're not doing anything wrong at this point. Menu item. Now, so it takes an element prop or element props. So this is a spread. So let's click into that real quick. I think I know what this is gonna tell us. Man, my internet. I need to figure out what's going on because my internet goes to shit as soon as I start streaming. Maybe I'll take these warnings more seriously. It's lower than the recommended bit rate. We're making room. Yeah, 128 is significantly lower than 2,500. Okay, oh, my word. Okay, we'll come back to that as soon as this little do-hacky-stop students thing. Okay, so it'll take children. Obviously we've seen that because we're passing in the text nodes, which are children, obviously. On click, which we've saw in the case of it being a button and you tap it and the action happens. On key down, I didn't do anything with that yet. On mouse enter and on select. Now, so it looks like the href is being passed along into the as component. So we could effectively give in any component that we wanted. And have those props passed into that. So that's super cool. See, spread. This example, the on focus prop is passed down to the element. Okay, so this is like, if we wanted a more complex example, I think, we could basically... Okay, yeah, never mind. I'm not even gonna go into that. We could basically force the state of it based on external state instead of the internal state that the library manages for us. I don't care at all. I just want it to do its thing. Okay, great. Menu link. So this I'm kind of curious about because maybe this is... And I was linking to different pages in the menu. By default, it works with reach router but also accepts any other kind. Okay, so this is if you were using reach router. So this is good to know in future cases if this page is being managed by reach router, I can use that menu link instead of a standard href and be able to do the relative links controlled by reach router. Okay, cool. Yes, so we saw this already. This is where we're passing the anchor tag in as a component and passing that href along. Okay, I'm not super worried about this stuff yet. This is some accessibility stuff around icons. We just need to hide certain things. Okay, cool. And then this talks about the accessibility of the keyboard navigation. So if we hit enter, that should open and close it. I don't know why this page refuses to load. So let's tap into that. We'll hit enter. That opens and closes. So, uh-oh. Oh, I accidentally selected the thing. I obviously don't do a lot of keyboard navigation. Okay, I'm gonna shut this one down because it's not getting us anything. Arrow up and arrow down. We saw that already. Enter selects, which we just experienced by accident. Escape closes, tab. When you're in the menu is no effect. So you can tab into the menu. But once you're in there, tab doesn't do anything. Cool. So we are actually getting all of these promises for free. Still a question of whether or not we can style it the way that we need to, but that is fine. I am going to kill these styles for now because we don't, I wanna have control of them. So, let's see. One thing that I'm thinking right now is that in order to kind of get that effect that I have before where these kind of connect to this button. One thing that I could do is have another div that gets this gray background around the outside and put it around this. So I'm gonna do, I am gonna do that. So we're just gonna insert another div effectively and see if that allows us to do what we need to do. Interesting, so I'm super cute. So if I put other content down here, it's always going to the bottom. Bottom, why is that? That's stupid, I didn't put any markup around it to make it go further down. That's super curious. Let me see if there's anything about the portally nature of this. Let's see anything so far. Maybe that's handled in the CSS. Let's add that CSS back and see if that changes anything. Okay, cool. So it looks like by default, it's going to shove all of that kind of wherever this menu is. It's gonna shove it into the bottom of the document. So no matter what content we have, it's gonna shove it into the bottom as we see below all of the rest of the content, which is not desirable. And if we want to solve that, we need to solve that with CSS. So as soon as we import the default styles that he gives us, we see that it attaches appropriately to this thing. So there's two problems that I have in terms of doing the thing that I need to do, which is right now this is kind of, it's being presented as an overlay. So question one, can I make that expanded in place? And in question two, what are those selectors allow us to do that? Let's go back into here. Go back over to style guide or styling guide. We might also be able to, so this is the inline styles. Yeah, so the thing that we're looking to style is that menu list. Feels like my internet is like completely broken at this point. There's anyone still watching. Can you just tell me that you're still there and you can still see me? I upgraded my internet plan and everything. I thought this was gonna be awesome for all involved. Let's see where we're at. So frustrating. If you stream and you have advice for how to make all this stuff work, let me know. This is like my fifth or sixth. And every time I tweak one option in OBS to see if I can get it to stream a little bit more smoothly. And it always kind of devolves to this where I'm just like under streaming bits and it's super frustrating. Okay. So styling guide refuses to load. We want the menu list style. So I'm curious if we can add that style directly in place on the menu list as well. Oh, sweet. Okay. So let's forgive about the styles right now. So we have, we got that pink background. Perfect. What if we do, see if we can make it position relative. I always forget not to save. Like save is so ingrained in me but I always forget that every time I do that it's going to spit me back to the top. Okay. So we can't control that there. Let's see if we can finally open this style doc. Feeling a little bit caught between a rock in a hard place because I cannot inspect this menu. So I can see that it opens but I actually, once I click on that I lose this focus which is kind of frustrating. I wonder if we get anything better with the React tools. I can't see how we would but it's worth checking out. But then also I can't open this URL for whatever reason. I'm blaming it on my internet speed because it's obviously struggling. Yeah. This isn't going to be helpful because inside this code is sandbox environment and particularly it's hard to find those components because they're all in shadow DOM land I believe. Hmm. Well let's try this. Can we get to unpackage? Yes we can. So we're going to do reach menu button. Awesome. We're going to find those styles.css. Perfect. Okay so let's see what styles we're getting. So I think this is the data reach. So this is the data reach menu item. Data reach menu list. I'm assuming that this is what we're looking for. No menu. So this is the one that's position absolute. I wonder, I'm curious if we can change that to make it relative. Doesn't look like it at least not in here. Okay. Let's go into our file editor. Open up the CSS file that comes with this. Let's copy that whole thing. No dice there either. Let's go ahead and take these styles out. Hello again. Take those styles out and we'll just have our styles and let's copy this whole thing in there and see what we get. This is duplicate now. So even though I've removed the styles that were coming in from here, they should be coming in through this file now and now that we've copied and pasted them. So we should see the same thing. Okay, perfect. Now I know that everything in here is styling it. I don't have to worry about some cascade or inheritance thing. Let's see what's going on. So if I take this out, oh come on code sandbox. That's not how you comment out CSS. That should hit the bottom now. Yes, it does. Okay, perfect. So we're gonna change that to relative. Oof, okay, cool. So this is definitely not something that is intended to be used in this way where we kind of insert an element, kind of like write inline. Yeah, okay, bummer, bummer, bummer, bummer. Again, at the beginning of this, I was saying I'm not totally sure that this is even gonna be a great use case for Reach Router, but I really did like the idea of being able to kind of get some of this accessibility by default. I'm not opposed to the dropdown. So maybe just for the sake of today, I'm going to kind of keep on. I have to leave in about like 10 minutes anyway. So let's just keep on. Let's kind of, let's keep styling these things in the same vein of our app and see what happens. So change this to mobile. Let's check out these buttons. So what are these buttons? Oops, what does that look like? So we have a border. I'm gonna style them this way. It is a bummer that we have to keep clicking into those every time we wanna look at it, but I am glad that it makes it better for keyboard navigation. This is background color like fa, fa, fa. Do re mi fa so la ti do. Okay, what's the color on those? That can't possibly be right. Oh, that's that one. Okay, cool. Am I seeing the hover? Okay, anyway, it's probably this. Okay, so that's the active state. Curious with this window if we can make it 100% with two. Okay, so when the menu comes in, font family, split block, position absolute. Okay, we're getting closer. Where's that pink line? Okay, so it appears that it's anchoring it on the right. Okay, man, oh man, I'm really kind of at a loss. I'm having, I think I'm probably gonna have to figure out how to, like how it is that I can, so as I'm working with this, I'm a little bit lost, I guess, so I'm feeling pretty lost in terms of how I look at these. I'd really like to see the DOM representation. It kind of feels right now, like I'm in that space that I was like for a long time ago, kind of without the Chrome Dev tools. I'm gonna try one more thing to see if maybe I can render this element all by itself. I know that it says it has to be rendered in a certain context, so maybe I can recreate that contents text, but I really wanna see if I can state is undefined, okay. See if we can just back into as little of this as possible. What was it? So it has to be wrapped by a menu list. Okay, so we don't have a ref now, which means that I probably need to wrap it in a menu, which means that it's all gonna disappear. Other than that, or it's pissed that I have two of these. Yeah, so I have no way of presenting it. Let me see if I can just use these CSS to force, see if these are display block. Is there like a, when are they hidden? Okay, let me see if I can force these to be open. So as I was saying, there are some back doors to kind of force the state if I wanted to. This I'm gonna have to import another component. Let's see, okay, so maybe I can change this and just force it. No, I don't see where I'm actually applying the state. Okay, well, I do have to go. Thank you so much for watching. I'm sorry that this was not more fulfilling, but we do kind of get to explore a lot of the reach documentation, some of the components. I'm super bummed about a bunch of things, but now at least I have questions. So first of them is, how do I inspect these things? Like if I want to style up an element, is there a way to just insert it directly into the DOM and like style it up that way and then place them in? Is there a way to kind of like pause that like execution of everything so that I can inspect those items when it's open? What's the best way to kind of like force a state on these? Like how deep do I need to go? I don't see anything that suggests how I could say like, hey, make this thing open all the time just so I can debug it and style it. So yeah, so those are my open questions right now. If you have more questions too, let me know and we'll kind of try to sort this thing out together. So yeah, thanks for watching. Hit me up on Twitter if you have any questions, twitter.com-chantastic is where I'm at. Thanks for watching.