 and welcome to SuperCharge. This is the live stream version and today, well, we're going to try and do this. We're going to watch the chat on YouTube. The reason I want to do a side nav is because it's quite a commonly occurring UI component. People do this quite often. I often see this on YouTube. So, that's the plan. I'm going to dive straight in. I'm going to set up a page and already throw in some styles in there just so that I've got a header and a menu icon in there already. All right? All cool? Now, meanwhile, as I say, you know, he's going to be on the whole chat. So, if you've got any questions, anything to say, it's youtube.com slash Chrome developers. Are we already there? Does it just tap away? But last time, one of the things that kind of came up in the comments was that somebody said, ah, this code, essentially, I wouldn't use this code in production. I wanted to talk about that just briefly before I get going. No, I would agree. The idea here is not that we're going to be like, hey, here's some production code at the end of this. It's very much about an approach. It's very much about sort of thinking through the problem and it's kind of proto code at the end of it. But in theory, you know, it's the good basis to actually then take something into production. It is something that is the first iteration. You would refactor afterwards. You would probably make it more dry. You would make more functions that are aptly named so you can actually read through the code more. Whoa, you're saying my code's unreadable? No, it's very readable, Paul. It's great. Right, anyway, enough of that. Let's do some code. Right, so I've got my page just briefly to show you the stars that are already in here just so you know. I've included straight up the material icons font, which is cool. And I've linked up a styles, which is just going to be basically resetting the HTML and body. And it drops in a header with a box shadow. And then it throws in this menu toggle button, which is what I want to grab onto with the JavaScript. So that's all I did just to, because I thought it was not that interesting to actually do. But you know, there we go. Right, let's make a new file. I guess once again, the interesting parts are going to be in the JavaScript. And you have just doing the markup and some stars. So not really anything worth taking a close look at. ScriptSource equals side, let's do .slash, .slash, side, nav, .js. That's what it says on the 10. It's a side, nav, class, side, nav, side, nav. Yeah, I prefer it like that. I'll say new side, nav. Like so. Oh, hang on a minute. I can do just .js. Ta-da! Oh, you made the snippet. Yeah, I know, right? I thought I'd have actually remembered that. But I did in time, so don't worry. It's OK. All right, so let's see what we need to do. I think I'm going to go across and do some styles first. I want to set up my side, nav, element. So I'm going to use an aside, because why not? And aside, let's call it nav. Why not nav? Right, what I normally do, I normally do the kind of sort of fade to semi-transparent black thing, so that when the side nav is out, it basically slides out and there's this sort of background black that kind of fades in. So I'm going to do that. There is an upcoming backdrop CSS pseudo element, but we don't have it yet. Did not know. Today I learned. OK. And just to remind our audience, you can influence this entire thing. Just ask questions, make suggestions, point out bugs in the chat, or tweet them at me at Das Surma. Bugs, what? I don't write bugs. There is no bugs. I don't write bugs. But if you see any, or you think you saw any, let us know. We will try to incorporate them or fix them, whatever we think is more appropriate. So many bugs. OK, all right, so side nav container. And I'm going to do, I'll do a pseudo element, I think, for this after content. Actually, I don't know what it's going to be before. I'm going to put it as the first child in there. Content, nothing. Display, block. Oh, in fact, do you know what I'm going to do? Side nav itself, I'm going to make that position fixed. And some people like to do left zero, top zero. They also do right zero, bottom zero. I just, I can't bring myself to do it. No, no. Actually, one of these people who'd rather specify the distance from the outsides than using with height. But I think I've just been burned by height 100% because it's very ambiguous in what it actually needs. For position fixed. For fixed, it is totally clear, but it's just like. Yeah. That's a technical term, of course. OK, so this should be self-contained. And we'll do display block and we'll say position. Well, this can be absolutely doesn't really matter. Left zero, top zero. So I'll make you happy. Right zero, bottom zero. I'm so happy. That's so inconsistent. I can't bring myself to do it. 100% height, 100%. See how I just ignore you, buddy. Background. We're just going to do like pink. Make sure it's working. Yeah. OK, that's working. So that's good. We're going to use zindex to make the drawer on top of the backdrop. Yeah. Well, no, I might not need to because this is a before. So it should be the first child. So in theory, subsequent children should be underneath that, all being well. And we will do class equals side nav. And if we do, see what we'll do, the side nav. And we'll do that container like that, I think. Yeah. And I will change the styles in here to that side nav. And then side nav container. That's going to be wrong. Container. Container. What's a contrainer? Nobody knows. Container. There we are. Side nav container. So that should just be, let's say, width. What, 30%? Something like that. Let's just do that. Background, red. Oh, that should be dark in that one. 7. Background, red. Height. 100%. So this is position absolute. So this should be, there we go. That looks alright. I like the backdrop. How exciting. But what I don't want to do is, I could set this to overflow hidden. And then I can, because if I transform this out, then we'd get scroll bars, right? So if I transform this to the left, I'm pretty sure most browsers will put a scroll bar. So we'd end up being able to over scroll to the left, which would be weird. So what I think we want to do is we want to set overflow hidden here so that then we can do transform translate x minus 100%. Because this is one of the reasons I love transforms, right? Because if you do like minus 50%, it's minus 50% of that thing. Yeah. Which is really handy. Yeah. And then so if we did minus 100%, then it would be especially for these sliding animations where you don't need to do like major bookkeeping for the width and the height, whatever values you want to choose. Exactly. And there's something about that that just went very, very strange, which is that by putting a transform on it, I guess it got bumped down. Because look at this, without this on. It's below the backdrop. It's below the backdrop, which I find interesting. But this is because this is positioned absolute, right? Probably. So if I were to do position relative, then I can at least, there you go. Static positioning always, always, always stitches me up every time anyway. It's one of the more fun parts of CSS. Yes, it is. I'll tell you what we'll do is we'll make this 0.4 so we can see the page a little bit more. And I'm going to add a box shadow here. Box, shadow, naught. No, I'm going to 2 pixels in X, naught in Y. Blur it by 4 pixels and RGBA, naught, naught, naught, naught point. Let's just do a fairly hefty blur on that. Yeah, it's really looking at way too much. Let's just up that to like 7 pixels. OK, drop that to like 5. Yeah, I could look at that. You're OK with that? Yeah, I'm fine with that. Well, you're wrong. So, and that's why I'm not a designer. OK, naught point 4. OK, this is fine. This is fine. So that would say background that. Oh, pound sign. No, we don't know that. Excellent decimal pounds. Oh, poor. There we go. So that's now, that looks kind of like what we'd want. And I think if we do minus 100%, this is going to be wrong because you can see, yeah, you can see that on the left-hand side there, you can still see the shadow. So let's do it completely scientifically in, say, 102%. And now it's disappeared. OK. So, I know, it's good, isn't it? So let's set opacity on this to be 0. So this is fine. Now, we still wouldn't be able to click through to this button underneath because the side nav itself is going to block clicks going through, right? So, by the power vested in pointer events, if pointer events none, we will set that. There we go. So now, can we do that? Does that work? Oh, which is probably the side nav itself, actually. That's what we need to do. Side nav. There you go. Now we're clicking through. Looking good. Yeah. Winner. Right. So let's bring up the console because that's how I do my debugging. Side nav console.log. Straight across to the JavaScript. Side nav. All right. Side nav. We've got a side nav. I mean, we're basically done with the setup on the markup side. For now. For now, yeah. Because, well, I'll tell you what, I'm not done. But we'll get to it in a minute is the actual animation event. So what I wanted to do here is my plan is to toggle some classes. I'm going to do, predominantly going to do this with classes today because this is a fairly, well, it's a deterministic animation. We're going from minus 102% to a transform of zero. So we kind of know that up front, right? Yeah. So why not just let the browser do it for us? And because it'll be a transition on transform, when I'm done, it should get its own layer for that transform during the animation. But we'll find out. We'll get there in the end. So this. Side nav. Yeah. Maybe. Equals document. Query. Selector. Selector. All right. Selector. And what did I call it? I called it side nav. Any interesting questions? Yes. I just wanted to ask you one. So we have been asked, why do we like the double underscore notation in CSS, which I think is a good question. It's BEM. I'm using BEM. You could just as easily be using web components and do things with Shadow DOM and all that kind of stuff. I'm a little bit old school, I guess. And so I still will, first of when I'm prototyping something, I would be most likely to do it with just straight up classes and BEM and all that kind of stuff. And then if I got further down the line, and I thought, you know what, this is actually a thing. And I'm going to make it into a component. So I'll contain web component and redistribute it. Then I would probably start redoing it into IDs and everything else that you'd normally do. And then wrap it with Polymer or what have you. And then ship it off. But for this, for now, for kind of, hey, I'm in proto deduction mode. Let's just do it. If you want to read more about BEM, go to BEM.info. It's a methodology of developing independent components on the web. It involves both JavaScript and CSS. It's all very clearly specified. And you can just read it on that web page. You're going to see in a moment, because I'm going to do something like side nav dot visible. And a modifier on an existing thing has a double dash. So double underscore means it's a child of the thing. And a double dash means a modifier on the thing. So you can have a child of with a modifier. So if I did the container and that had a modifier, it would have, you know, mod. So a nice side effect of this is that your CSS selector rules will stay rather short and you don't run into specificity problems that easily. Yes, specificity. I think you pronounced it right, didn't you? You did. You got it absolutely perfect. I just can't do it. I just, nah, it's too hard for me. Well, I've been practicing it a lot while working in MDL. It's not specificity. Specificity. It's a word and a half. Anyway, side nav. So we're collecting up the side nav. And we need the button as well. So this dot toggle button element is the document dot query. Why can't I type today? I say today it's always the same. I can't type as quickly as I'm thinking of the thing. JS menu. I typically have a JS class independent of the other classes for picking up in my JavaScript. Some people prefer to just pick it up by the class name, but I figured classes can chop and change, whereas the JS dash ones kind of tells you when you're looking through the code, hey, this is going to be handled by JavaScript probably, and also whatever. It's just kind of not going to change. So let's do that. Which means I probably should do the same with this. JS side nav, right? Let's do that. What it says? Yeah. Be consistent, Paul. JS side nav. Side nav. Right. And then what I'm going to do is let's see. This dot add event listeners. You know how I do this. We did this last time. Add event listeners. And you're going to do it again? I am going to do it again. So we say the toggle button. So now there is a nice thing you can do here with class list dot toggle, but I don't know that it's fully supported. So I'm going to have to do it the other way. ToggleButton.io add event listener. Click. When you click on the button, we want to this dot show side nav. So since we've got a this dot call inside of here, I am going to have to bind this. Now in the feedback from the last one, somebody quite rightly pointed out you could use the most esoteric part of the web platform that I'd never heard of before. I mentioned it, which is handle event. And you could put on instead of an event listener like this, instead of an actual name, you could do this. And if the thing that it's referring to has a handle event, and there we are, that's what it'll get called. It's like the single handler for just the event. And then inside of it, you get the event and you can have query against event dot type. The reason I didn't want to go for it is because what you end up with is you end up with a double level of indirection, because you get one here in the handle event and you say, OK, which event is it and how do I root it? And then inside the event handler, you'd have to say, on which element am I actually operating? And arguably a big switch case is not even that readable. Yeah, right. So that was the concern that it would be. I'm really looking forward to ES 2016's double colon operator, which will just allow us to bind directly to a function and bind this in one nice syntactic sugary thing. Nice. I don't think I knew about that. Is that 2016? Is that this year? Well, if the number in the ES standards actually correspond to a year, then yes, I don't really know about that. OK, cool. SideNav. So when we do this, when we click on it, we want to do, we want to classlist.add. And we're going to do, what is it? It's like sideNav. And I said visible. I think that's what I said. And it knows that. Very clever. So we're going to add that class. So we need to now account for that over here. So when we have the sideNav like this, we're going to set pointer events to auto. And we need to talk about this in a second, so about why I'm using, why I'm not like doing display none. So when the sideNav is visible, and we will go with the sideNav before, and we will set opacity to 1, like so. And sideNav is visible. That's got a double dot. That's not going to work. The class of the class. And that is going to have a transform of trend none. Right. All being well. So we've sort of got there, except we don't have that before. There's not done anything sideNav before. Still opacity zero. SideNav visible. SideNav before. There we go. That's why it's not a chart. It will be like that. Except it will be like that. Right. That'll do it. Now, obviously, that's not very nice. So I'll tell you what we're also going to do is that width is a bit not good. So what did I say? I think I said width of 30%. I'm also going to say, oh, do you know what I'm going to do? I'm going to do width of 100%. So on mobile, it would take up the whole screen or like 90%. And then I think what I'll do is I'll say a max width of 400 pixels or something like that. So it's like that. And then there you go. You kind of get this. That'll do it. And that's how you're responsive. Yeah. That's actually one of the simplest ways to do the responsive thing. Right. We don't have a transition on that. So that's not fun. So we can do this where we could say transition, transform, not 0.3 seconds. And cubic, not 0.2. You can always ease in now this to mainstream. Yeah. All right. All right. I'll tell you what, we'll do 0.3 today. That didn't work. Transition on transform, because that's probably not the thing that's transforming, is it? Oh, Paul. Paul, Paul, Paul. There we are. I find myself confusing these two directives. There we are. So we get the side now coming out now. And the back is snapping straight in. So what we want to do is we want to do that transition on opacity. Like that. Hey, look at that. Nice. It feels about right as well. So we have no way to dismiss outside now, which is something of a problem. Now, the reason I wanted to talk about this is that I'm not doing display non and display block. And the reason I'm not is mainly that what I want to do is I want to avoid the situation. Because if you go from display non to display block, you've switched something from being out of the render tree to in the render tree. And when you do that, it's going to have to be, well, first of all, there'll be layout for switches in the display block. Even if it's positioned absolutely fixed. And then you'll have to do all the styling and all the painting and rasterization and compositing and all that good stuff. And for something that's a side nav, I would argue that it's the kind of thing that somebody could just tap on immediately. Something that somebody could go to straight away. And so you kind of want to be primed and ready. So it's not a tactic that I'd approach or take all the time. But I'm going to do it in this case because I want to make sure that if somebody taps, it's ready to go. If it was some kind of lesser component, something that was less frequently used a bit or more, I would consider the display non display block. But just bear in mind that you have some ramp up when you set something to display block for it to actually show up. And on a mobile device, you might want to be careful with that one. So where were we? We were here. We were doing that. That's the thing that's popping out the side there. Right. Let's add ourselves a close button. I'll tell you what. Let's pop something into here. So we'll do... So do you want to do just a close button or also tapping on the outside? Oh, yeah. I'm going to do both because, you know, why not? We'll just call this side nav and we will add a button. So that should be called something like JS menu show and JS menu hide. And since we've done that, we should go in here. JS menu show. I'll tell you what we're going to do. And we'll have a hide button element. Why not? We're going to do this. Hide button element. This.hide. Side nav. There we are. Hide. Side nav. And we're just going to remove said class. So that would work. Show hide. And let's pop in a close button into there. This is using material icons, so I can just pop that in. And it does clever things. The magic of ligatures. I know, right? So JS menu hide. So let's call... We want that header, but that's going to be... Oh, side nav. Let's call it side nav hide. Something like that. There we go. And we'll do that. Position absolute. Left 16 pixels. Top 16 pixels. We'll leave it at the top left. I'm just doing it now just to make sure it works. Okay. Cannot read property classes of undefined. Do you know why? I know why. Because I forgot to do something similar. I forgot to do this. Hide. Side nav. Would you believe it? It is almost. No, it's not almost done. We're going to be here a while, buddy. I was trying to be optimistic for once. Get a grip of yourself. I will. Unbelievable. Right. So let's... I'll tell you what we're going to put in a list of... Li. Right. Li. Li. I'm just going to make a list of sort of links to go in there. One. Two. Oh, look at you being creative. Shh. Yep. One, two, three, four. So that we've got at least content. So what I'll do is I will say header class equals side nav header. There we are. And do you know what we're going to do? We're going to say the side nav container, wherever you are. You can be display flex. And flex direction can be column. And we will set side nav content. Yeah, that'll do it. Side nav. Anything going on on the chat? Most people seem to be contently watching or contently ignoring us. I'm not quite sure. So if you want to participate in this, use the chat. Ask us questions. Say what we're doing wrong. For example, one person just said that we should be using Amit, which is an interesting remark because I tried using it and I kind of see the appeal, but I just cannot incorporate it into my workflow. And it's very rarely that Amit would actually be beneficial to me with the things I do. I've never used it. You're basically right. Kind of like CSS electors, press tap and it will expand the CSS. Oh, is this like where you do like li plus three? Yeah, exactly. And then it turns into an actual markup thing. Never. Never got it to work for me. I can see the appeal, but I felt like the cognitive load of learning what all the shortcuts are. By the time I'd done that, I could have just written out the HTML, which is probably, you know... I guess it's kind of like the VI thing. Once you actually have it incorporated into your muscle memory, you cannot stop using it and you will be so much faster. And that's what I say about VI, but I just, I don't know, I probably haven't spent enough time on Amit. Yeah, I've done it. Done it in hot pink. That's, wow, that's... That's a good question for you, Paul. Why not jQuery? Why not jQuery? Because I don't need jQuery for this particular instance. I mean, you could use jQuery. You can use whatever you like. I think, and if it's your project and you've already got jQuery in your project, well, it might make a lot of sense to do that. And certainly, stuff that I expect to be writing soon where we do kind of event propagation stuff, like return false inside of a jQuery event handler. Super cool. But in my particular situation, I just find it easy to just write the JavaScript directly. We don't judge. I know why you do. I mean, you also flicked my head off a poll yesterday on the promo for this. Thanks. Take that, Paul. Friends like these. Anyway, where were we? Right. Flex one. Yes, okay. So I want to do the header. I'm just going to position that to be... Oh, dear. Is it a line items, flex end, something like that? It's probably not the right thing because I don't think I set the header to flex. Display, flex. All right. That'll do it. And then we can just do padding, 16 pixels. I'm just having a bit of fun now. Writing in a bit of CSS, font, family. It said, nobody ever. I'm having fun writing CSS. Sun Serif. All right. Cool. We've got a sign now. There we go. All right. Header, font size, 24 pixels. Stop doing this and actually do something else. 3, 3, 0, 0, 9, 9. Something a bit purplier. That'll do. Okay. So that's actually okay. So what we need to do is we need to just grab that button. The one that actually already works. And a sign of hide. And I'm going to say background, non-border, non-color, white. Okay. We have something. So one of the things that I think we need to do is if the list of items goes too long, so we're probably going to need a lot of those for this to work. But we want to, okay, that'll do. That'll do. That'll be enough, actually. You're going to cheat with a font size, aren't you? No. No, no, no. I was going to try and do this just temporarily and be like, so a sign of content, we're going to save list, style, non. And we're going to say padding, 0, margin, 0. So that should make it even worse. Yeah. And then we can say each list item is going to be height, 30 pixels, line height, 32 pixels. I'm going to change that to a 32. It's nicer. And then I'm just going to do this for now is I'm going to do the hover background. That's CCC. Probably won't look very nice, but we'll find out. Okay. So that's now squished that, which is good. And so we can say overflow X hidden, overflow Y scroll. See if that works. Yeah, look at that. See now, if our list is too long, we'll scroll inside. If it's not too long, which I'm going to about to fix in a second. There we go. Did I say that? I did save it. It comes in. There we go. No scroll bar unless we need one, which is good. So did I say scroll or did I say auto? I said scroll. If I say auto, that will only put the scroll bar in if needed. Scroll will actually put it there all the time. So depending on whether or not you actually want the scroll bar there or not, you would choose the right thing. And for is it WebKit, overflow, scrolling, touch. I think if you want the smooth. Oh, the flicky thingy. Yeah. OK. So we do that. We'll pop that in. Right. The other thing I wanted to do is just do some padding and say 16 pixels on the side would be that one. OK. I feel like we're sort of thereish in terms of something that behaves right. So now we need to do the click to dismiss, right? Yeah. OK. Now I do this by, let's see now. So the immediate problem is that the backdrop is a pseudo element which does not have an event handler, right? I don't know. Wait. No, I know what I can do. I know what I'm going to do. I have already got the sign up so I can have the side nav receive events and that will hide. So this will be bad initially, I think. So this is a side nav event. So we say that and we say, ah, the event listener click. It helps if you can type. It really does help if you can do. So we'll do hide side nav. So when you click on this, that's going to pick it up. The bad side is if you click on anything like that, it's also going to dismiss it, which is not what we want. However, in the interests of fun, we can also say, let's see, the side nav container. JS side nav container. Scrub that. How's everybody doing on the live stream, Sam? We have been asked if and why we are using Jade and or SAS. And somebody has already said, if for this demo, SAS would be overkill and I tend to agree. Yes. I have an interest in showing as vanilla as we can get. And that's not because any of these other things, any of these tools are bad. And in production, you do typically use them. And for good reason, they typically solve problems for you. But in the interest of just saying, this is the approach I would take if I were building this from scratch. And you never know when you're going to find yourself in a project where you haven't got your favorite toy to hand. It's good to know kind of the underpinnings, how the engine works in order to be able to play with it. Also, this allows us to skip the entire build systems of like gulp or anything that we would have to explain first so that we are all on the same page. Yes. That. Very much that today. So the side nav container element, add event listener. So what I've got is I'm going to grab the container element and I'm going to grab it and I'm going to say this dot block clicks. Which sounds strange when you say block clicks and then take the event and you just say event dot stop propagation. Or you could do stop immediate propagation, but I think this will be enough for us. So in this case, you wouldn't need to bind the hander, but would you do it for consistency sake? Okay. I'll do it for you. Thank you. This is a pointed question. Are you going to do the thing that you do, Paul? Or are you not going to do the thing that you do, Paul? I just want to know if you're paying attention. I am paying attention. I wasn't paying attention. I was paying attention. Of course I was. All right. So let me save that as well. All right. So what was I testing? That's fine. That works. That works. But does it stay? No, it stays. So when this gets the click, it intercepts it. It stops the propagation so that it doesn't go back up. And the event handler that would dismiss the side nav on the side nav element itself doesn't get fired. So we basically, if you click inside there, which is kind of what we want to do, we want to maintain that your clicks inside here carry on. But if you click outside, we're dismissed. Yes. Another interesting question, I think, is why don't you use filter brightness 40% to darken the background instead of using the pseudo element like we do right now? Good question. I don't have a particularly strong answer, although I think Opacity is better supported than filter. You could check that on. I'm pretty sure that you're not necessarily able to animate something like a filter, or even then it wouldn't be. Oh, you can, I think. Really? I think so. That would be new to me then. I think so. But certainly Opacity is kind of what it's designed for. It's the Opacity value. So it seems like a good thing to use the thing that it's designed for. But we'll find out whether or not you can actually use filters broadly as you can on Opacity. You could find that one out for us while I figure out what's next. Oh, yes. So this is the thing. So now what we want to do, I think, is if you, I don't want to do that. I want to bring up the device mode. If you've got a side nav like this, you kind of want to be able to swipe it away, which sounds awfully familiar if you've ever seen something about, I don't know, swipeable cards. So that's fine. But we will probably do that here, I think. And what we'll do is we'll have it stick to the mouse. And then if you kind of, if you've moved it at all off the main point, maybe just over a threshold, maybe 0.35. That was what we had last time. What's the number between friends? When you've moved a certain distance, whatever that is, we will get rid of the side nav. Have you found out how we're doing with Opacity? Yes. So even though the suggestion is technically correct, it would probably achieve the very same effect. CSS filters are much less supported than Opacity is. We're talking 95% support for Opacity, even IE9 supports it, while the whole filter thing is not even supported in IE11. And we are at 80% for CSS filters. So it's basically an easy way to avoid compatibility issues. There you go. And it does what it says on the table. It changes the opacity. So that's all good. Right. Let's do the swipey dismiss stuff. Let's see. So we've got some add event listeners. So what do we want to do? We want to, oh, let's see. So if you grab the container element, I think, add event listener touch start. Yes, this on touch start. And I'm not going to do a mouse drag for this one. I'm just going to assume that it's a touch only thing. And if you're on desktop, you'd probably just hit the button to close. That makes sense. I think so. On touch start. I started writing on touch mouse, which is just not, that doesn't, that's not even an event. So why would I do that? So let's have a touch start event. Now, here's what we'll do. This on touch start equals this. I'm going to bind this. Here's what I'm going to do is if you just tap on a link or something in the list, we don't necessarily want to initiate the gesture, right? Do you know what I mean? So here's what I'm wondering is whether we need to do something where we kind of go, would you be, would you do look like you're dismissing? Well, let's see how we get on. Right, we'll do event dot prevent default. So we start capturing because if we don't do this, we get throttled back to only get the touch events every so often. So we don't, we don't, we know we definitely think, we know we definitely don't want that to happen. There we are. Right, add that touch move on touch move on touch move event. Okay, so let's see. So we can do what we did last time. We'll do this dot start x equals zero. And we'll say this dot start x equals event dot touches zero dot page x. Even this code looks very familiar. I know. And then we'll say current x equals this. But I might, I could be lazy today. I could be lazy. Could I be lazy? And we'll see how, see if we can get on with it or not. So we need this dot start x equals this dot current x equals zero. Let's be explicit about that because it's easier to read. So we'll do that. So we take the start x and we'll also say that current x is the same as the start x. We have another question. Yes. Could comparing the event target to the container for clicking outside be better than stopping propagation altogether? Could do. Could do. I mean, certainly you'd have, in this case, you would sort of make this less readable, right? Because instead of just sort of hide side nav, you now have to be like, under certain circumstances, don't hide the side nav. It's only sometimes hide the side nav. I mean, you could have a kind of maybe hide side nav, which then calls hide side nav. And I'm saying side nav quite a lot now. So I'm going to stop saying that. I think it's a design decision you could take. I have no idea if there's any performance implications to be honest. Oh, was it a performance question? No, I don't know. I'm just saying that if you're looking for arguments for or against either of these approaches. Yeah. My feeling is it's more a preference on kind of how you want to see your code structured. And in that case, do what makes sense for your project, for your team, for yourself. In this situation, I find it quite an intuitive thing to say, this will happen unless something blocks it and gets in the way. But I could see that other people would feel differently. Let's add the final event listener. Touch move, touch start, touch move, touch end. And I don't know what I'm going to do in there yet. So let me get rid of that code. Touch move, touch start, touch end, touch end. Right. Touch end. I'm not going to do the game loop for this just yet. I'm going to say, as I'm going to say game loop, I mean the kind of request animation frame style thing. I'll see how I go for a minute. Touch move, I'm going to say this dot side, nav l dot style dot transform equals. Well, the people that have joined us in the meantime, we are doing a side nav today. Last time we did swipe all the cards, this time we're doing a side nav. And as last time, I'm watching the chat, I'm watching my Twitter feed, ask questions, make remarks, and we'll try to incorporate them into the live stream and into the code so you have a chance to actually influence where this is going. Hmm. Oh, don't call it that, Paul. Call it something useful. What was that? Trianslate. Trianslate. There we are, trianslate. So we'll do that and we'll just say translate x. Now, I've got a problem immediately because this side nav element is going to have a transition switched on, which is not good. So what's going to happen is it's going to transition on the transform. When I update the transform to move to the side, it's going to be really laggy because it's going to be like, I'll get there eventually, whatever. Whereas what I need to do is I need to have a separate class for this. We're basically going to add is being drag class that will remove them. I think it's more like this. I'm going to say animatable. Yeah. So that will do that. So I need to make sure that the side nav has that. So side nav element dot class list. Whoa. Class list dot add that. And we're going to do that. And we don't want to remove it. We want to do that at the end, don't we? Side nav element dot add event listener. Transition end on transition end. And we could do const transition end. Wow. We can do that. And then we would say remove it. And then we want to remove the event listener as well. Remove. So this is going to do this. And then we want to have same kind of deal here. We want to say that we want you to remove the animatable when you're done. I think we're missing an equal sign there. Where? Where? Where? Where? Where? Before the parentheses. It's hard to change it anyway. Yeah. Because of the fact that we are going to repeat ourselves otherwise. Because both transition ends are going to do the same thing. So we'll do that. And this dot on transition end, this can go away. So this makes more sense, I think. So we're going to switch that on. We're missing this there. We need to bind the function. I do need to do that. I saw a mistake. I'm useful. Dude, you're very useful. Small doses. All the time. All the time. This dot that. I'll bind this. Right. So we've bound it. So what happens is when you say show side nav, we do that. And we switch that on. And event listener that. And then that's fine. And then we want to remove that. Make sure you've still got the animatable on. Remove it. And then on the end, we'll do that. Well, if that still works, no, it didn't. There we are. Didn't think it was going to work. It was too much in one go, wasn't it, for that to work? Oh yeah. I need to set the animatable at the start. Yes, I do. Except that I've got show side nav, which is switching on. Where? Animatable. I'll just switch it on before. I mean, that shouldn't make any difference, but we'll do it anyway. So side nav. Is it doing it? Yeah, it is doing it. But don't we need to wait for the next frame so that the transition is actually set? You know why? No, it's because I'm doing it on the wrong thing. That might also be the case. So what we need to do is we need to say if the side nav is animatable and you're the side nav container, that would probably be our way to do it. But this is the wrong hierarchy, right? The side nav is inside the inside nav container. I'm getting myself confused. Yeah. All right. So hang on. OK. So the side nav container is this one here. And we switch that on to have to be animatable. No, no, no, no. It was fine. It was fine. See? And it was just doing my job. No, you were right. You were right. Damn it. Which one do we want to do? OK. The side nav is the thing that's sliding out. So we want to tell the side nav to have an animatable class. So if we do the side nav animatable and then we tell the container to do that. OK. So in which case we need to go back here. And we said we need to say side nav is animatable. OK. We're part of the way there. The collapse isn't working yet. Don't know why. Let's find out. So that's definitely there. Let's find out why. So we're going to this hide nav. It's going to add that. It's going to remove side nav visible. And it's going to do that. So let's just check that it's firing. Hide side nav. It seems like it did. Things that seem simple up front. It's not firing. What? Is pointer event still in the way right now? No. Because it would be just a hatch. Yeah. Let's get rid of that then. No. Can't get rid of that apparently. There we go. Can't read that. Undefined. Interesting. Did I do the right thing with this? Mystery. Anybody know on the live stream what the bug is? Not yet anyway. OK. It is a bit of a mystery, isn't it? So JS menu hide. Interesting question or hurtful question. I'm a questioner. Is this accessible? So it's actually a really good question. It is difficult to do modal stuff and make it accessible. I'm not an accessibility expert. So what I normally do is I would defer to the people on our team who know significantly more. This is why I'd say this is a very much a prototype thing. And if it was an actual production approach, I would make sure that what I'm doing is the right thing. And certainly one of the things you need to do is like focus the button and make sure you've got, it's tabbable and all that kind of stuff. But you know, as I say, I would say it's definitely worth checking out with people who know before. For example, our colleague Rob Dodson knows a lot about accessibility. Yes. And Alice Boxall as well. True. She knows plenty as well. So between the pair of them, they often are the people I would normally talk to and say, is this the right thing? Tell you why. Let me just do that. That's why it works. It's the touch that's getting in the way. Because I prevent default. That makes sense. So now it's not getting through. So this is going to be an interesting one. If you, OK, I don't know how we decide whether or not this thing should actually be. Is there a drag event? No, there isn't. Oh, there might be. But I'm wondering if we've got something like a delta or something. Let's have a look. Console.log. EBT. All right. Let's find out. Right. Zoom into DevTools. Zoom into DevTools. Thank you. Wow. It seems when I zoom into DevTools, it also zooms the page. Oh, no. It's just zooming in. Just the header. OK. You know what I'm going to do? I'm going to make this bigger. Oh, no. Go full screen. Come back. Come back. Come back. You can do. Yeah. There we go. There we go. Somebody told me that. Right. Somebody is suggesting event target. Event target. Event target. You check if the start is on. On there. On the close button or any of the menu items. Yeah, but then you kind of, it gets a bit fuzzy, doesn't it? Because you want to be able to just kind of start dragging and moving. What if we use tap that we let the browser decide if it's a tap or a touch start? I will still prevent it. We'll still prevent that. Yes. Line 61. Yeah, it doesn't like line 61. It doesn't like this. Side Naviel, which is a mystery to me because Side Naviel should be very well defined. That would mean that this is not bound. Yeah. But have I done on touch start? They say on touch move. That's why. On touch move. Look at you. Touch end. On touch end. Right. I feel like what we need to do is we need to do something about whether it's going to, whether it's trying. Is there a delta? Is there any kind of delta? Probably only move rather than start, right? The first touch move. The first touch move might be where we can prevent default. Let me find that out. On touch move. So we don't want to do that anymore. Let's see. So we can say the current x. You already have a touch move, right? Ah, thanks, dude. Yeah, wow. Okay, cool. So we have that on touch move. And we can say, well, if this dot current x is less than 0, I think. Well, no, we want to do the translate. If the translate x is less than 0. That means we should be moving to the left. If that's less than 0, event dot prevent default. Maybe. Let's find out. So then we want to do pixels on that. Find out. So why is that not moving any? So I obviously have got something wrong. So let's find out what the translate should be. Console.log. Okay. This looks good. It does, doesn't it? It looks like it's getting all the good stuff. But we can't do that. So we need to find out why that touch start. Because you're still preventing touch start. So I need to figure out a way to kind of only prevent default if we're definitely moving to the left, right? But we will get to that. So why then? Side Navial. Is that the right thing to be moving? Why is the side navial again? It's just side nav, which is not necessarily the thing that we want to be moving. The thing that we want to be moving is the side nav container. That's the thing that we want to be moving. So side nav container element is that. Y, Y, Y, Y. Bugs, my friend. Bugs. Okay. It just doesn't seem happy. Transform equals, that's Y, translate, X. Oh, yeah. That's an important bit. It's going to help if you actually put that bit in. Okay. So we don't want to go past zero. No, we don't. Okay. So that's a thing we can fix. Is math. Since it's going negative numbers, we'll do math.min of zero, I think. Yes. Is that the right thing? Yes. I'm pretty sure it is. We're going to go past the end now. Okay. So that's good. Now, one thing I don't like is that when I'm out here, look, I lose the ability to do that. So it shouldn't be this.side nav. It should be document. Also interesting workbook question. Why don't you use breakpoints instead of console log? Because I'm funny like that. That would be my answer too. I know breakpoints. I know DevTools has all this kind of great features to help you debug code. But for some reason, most of the time, I resort to console log. And that's probably flaw. Oh, now I should be working on. It's definitely a flaw. Oh, definitely a flaw. So I have these. And we should only be adding these when the nav is expanded. So this is going to be quite an interesting one. So if, because the reason I'm doing this is I want to be able to grab it when it's kind of out the side there. So if the, where are you? That one. Yes. So if contains, if return. So if it doesn't contain the sign nav visible, we should be able to do that. And then we can do that after the fact. So the other thing I'm going to do is on touch end. If can do this. If that is that. And yeah, if, if translates, translate X is less than zero. I'm just going to say this dot hide side nav. So let's see if that works. No, why would that not work? No. Wait. So yeah, that should have worked. It was a log. I'd say no. Yeah. Did I say console.log? No, I did not. I said that. But I wonder if it's because this is still being active. So we want to say. So we want to say. This dot side nav container. That one. That style.transform equals initial. I think would be the equivalent of resetting it. Should we find out? I think so. Yeah. So it's going back to there. So then that's. Which is what we want for now. Oh, no, it's not. Actually, it's not. We want to delete this. All right. Hide side nav should actually. I thought there would be like a little bit fast enough. So now we've got this thing. That's the thing we wanted. So basically, when we let go, it's like that. So we just do this. And if you release over here, if you let go over here, we assume that you've dismissed it. So I don't think that it dismisses fast enough, though. So I'm going to make that. Here's one thing I like doing, actually. If you are, side nav is visible, and it's unamable, then we would shoot out a little slower. And we can just have that. So basically, we're going to override it, all being well. So if I've got this right, it comes out quickly, and then it shoots away. So it comes out a little slower, and it zaps off. That's nice. So it feels like, yeah, so you just kind of get this slightly more fluid motion out, and then when it disappears, a little bit more snappy. Right. And so we do that, and then off it goes. So there's just a little thing, just your transition out. Sometimes you might want to make that a little bit slower or faster. I mean, there are some people who like to do a fast kind of out. So you really feel snappy, and then kind of a slower dismiss. Or the same, make it symmetric. Symmetric, symmetric, cull. One of the two, apparently the English language is favoring me today. So or I'm failing the English language. I think that's much more likely it's been around longer than I have. You would think. But given the hair loss, it's a close run thing. I agree. Right. So there's this final kind of question, I think, over this, which is, what do we do about the close button? Because we don't want to always prevent default. This line here is the final problem here. So what would happen if you just remove the prevent default from the touch start? Why do we need it? I think, well, maybe we don't need it. Maybe that's the thing. Maybe I'm getting this wrong. Because I thought we'd get throttled back on the sign now. But maybe we won't. So that's, oh, that's still working. Now it might be just because it was the first touch move. Dude, nailed it. Yes. Sometimes the simpler solutions are the best. Yeah, don't add code, Paul. Just don't do it. I think we've all learned a lesson here. Right. Since we have a couple of minutes, let's throw it open to the floor. Is there anything that anybody has been asking on the chat, anything that you want? So maybe this will make you cry. But somebody has been asking, planning on adding, opening the menu by swiping in from the left. OK, let's have a think if we could do that quickly. No, we couldn't do that quickly from where we are. I don't think. Because what you'd need to do is, where we're currently leaving the touch start, you'd basically, you'd need to do something where you enabled some kind of intercepting element on the left-hand side. But that would be quite fiddly because you, or you could do it on the document. But then you'd be controlling, say, things like the opacity of the background, which we're not currently geared to do. So I guess I'm not going to take that one on. Learn to say no, apparently. That's always good. Stop the scope creep. Or not get into something that you don't want to do. Because it's hard. It's hard at this point. Well, it'd be hard if we set out with it as a thing. Fair enough if it's been on the list of to-dos. Any other questions, any final things? Plus one for swiping from the left. Yeah. Yeah, all right, you lot. Funny, funny. No, so far we have been covering all the questions, I think. All right, super. In which case, let's just have a quick look at the styles. I think we can just tidy it up a little bit. Just as an FYI, the code will, once again, go up on GitHub afterwards. So you can take a closer look and actually play around with it. Maybe you will find a very elegant way of adding the swipe in from the left that we just can't think of right now. And if so, do tell us, because that is actually interesting. Yeah, it's definitely, definitely, definitely. OK, I just wanted to add a little bit of extra, why did that not work? So why didn't it work, so I added. It's probably my fault. OK, I'm actually OK with that today. Having the padding top was there. Interesting. So apparently it's there, but it's not there. What? That's really peculiar. Why would that? So you'd expect padding top. It'll be to do with the Flexbox. It'll be to do with Flexbox. It always is. Another question that Garby just reminded me of that was asked earlier. Why do you bind the event listeners in the constructor and not in the add event listeners call? It could do. It absolutely could do. I just like to do it upfront so that it's done and it's stable. If you were feeling memory conscious, you definitely could and then you'd probably have to, in your remove event listeners, you'd set them all back to null so that it could be garbage collected. Or you just leave that. The thing is if you're going to do it here at the start, then you've kind of done it and it lives with the instance and then you just add them and remove them and that's exactly what it does. Changing them in the add event listeners would make it a little more side effect-y because it would be doing some unexpected binding work. And I feel like it's something that I expected as part of the setup of the side nav instance. What do you reckon? We have been reminded that we should be removing onTransitionEnd the event handler, which I don't think we have been doing. OnTransitionEnd. Oh, heroic work from whoever that was. Oh no, we are, we are, we are, we are, we are, we are. This, we are removing event listener transition end. This onTransitionEnd is... See, sometimes we do things right. Oh, many times. Many times. We have gone in this time. We've gone from a, a no side nav to a side nav and let's just check the timeline. Look at that. 60 frames a second. 60 frames a second. We are. There's probably no repaints anyway. Well, let's find out. Let's, let's have an hour look at the layer borders. So yeah, so you can, if you want, let me slow it down. Slow it down so we have a bit more fun. Right. Let's do it. Oh, do you know what we can do? In DevTools, if it's... Oh, we have the new... Yeah, if it's not hiding. Animations. And we'll go like 10%. And then we'll bring it out. Look at that. You see, this is the orange border on the side there. That, during this animation, because we're doing a transition on a transform, the browser knows, Chrome knows, that it needs its own layer for the duration of that. So we don't need to use something like WillChange, which is a reminder. You could use WillChange here and WillChange opacity and things like that. And in fact, I might just add that on for the background, because the opacity from 1 to 0 wouldn't qualify, I don't think, for its own layer. So this animation here with the side dev out, that is going to qualify for its own layer. And then it gets rid of it at the end. So what I'm going to do, just the last little thing then, I'm just going to say that this WillChange its opacity, because I don't think... I could be wrong, but I don't think that, by default, a transition on opacity would qualify for its own layer. And certainly the first time it changes from 1 value to a 0 value, it creates a stacking context, which triggers layout, which then triggers painting. And that's expensive. Which is expensive and something we want to avoid. And we know that we are only just going to be fading from 0 to 1 and back again. So we can put WillChange, it will create the layer up front. And that would mean that this is permanently got its own layer, the black box in the background. But there you go. Ta-da! Right. Well, with that, I have a few things to say. As server said earlier, and I will say it again, I'm going to push the code straight up onto GitHub. We will record a TLDW for you to watch again, which will be the breakdown bit of just what went into this. In the meantime, don't forget to subscribe to the channel. Let us know what you thought of today. And thank you so much for all your comments and your questions and your input. We've had a blast. And we will catch you next time. See you then.