 Hello again. So somebody on YouTube remarks, well, day one to six seemed to be like messing around with a header. And day seven, it's like all done. Actually, you're not far wrong. I mean, there was a lot of setup for it. But actually, the styles that got onto the page were done pretty quickly. It was just a lot of flex box. And I'm not actually that interested. There wasn't actually a bunch of challenges in there. So it didn't really make much sense to kind of record entries for that. But as you might recall, we've done all the accessibility stuff at least for the static version. And the next step is to now go into progressive enhancement mode. And that's exactly what I've been doing. And I will show you exactly what's what, really. So if you look at the screen, you remember that before when we clicked on a link, it would take us to a new page. Well, it still does that. But now it goes and actually hot swaps the content for us. So it's a lot cleaner, if you like. It's a lot sort of up here. I don't know what the, it's good, I think. It's nice. It's nicer than reloading the page. And that's working out really well for me. Here's one other thing that people were saying in the comments. They were saying, why is so obsessed with clipping it rather than just overlaying a block? And here's why. When we go to the live stream section, what the yellow strip, just below location, watch what that does. See how it slides down and reveals that content, the live now and the up next. And also when I leave that section, let's say go to the code of conduct, it slides up. And so for that to actually work, the photo in the master has to be clipped. If I don't clip it, then it basically, it would just, that whole effect wouldn't work. So that's why I wanted it so that it could slide out the content from underneath. So that's basically it now. In terms of the actual code that underpins this, let me show you around a little bit. It's all in the cds.js right now. And there are some challenges, shall we put it, with the fact that I'm not supporting, say, just Chrome. So I can't use const and let and a bunch of ES2015 type stuff. I didn't really want to transpile it. I'd rather, I think, just because there's not that much code, I think I'd rather just write the ES5 myself and be done with that. It's not like it's, you know, it's a bit of a shame. And it does cause me a couple of challenges in a couple of places, but oh well. So when you click on a link, I hijack all clicks with document.it event listener. I'm not a big fan of delegating all clicks to a big handler like this, but it's not a big site. And it's something that we can get away with, I guess. And we've got, we basically call this on click and the target, we start there. And basically I work my way back up to find the nearest anchor. There is element.closest, which you'll find if you Google for it, but it's not supported everywhere yet. I think it was edge that didn't support it. So I have to basically write a little do while. Do while, it's in there. Do while's are the funniest, cause I only ever use one probably every six to 12 months. But when I need it, oh, it's the best little construct ever. Find the nearest anchor. And then basically decide if it's an internal link as it's got slash devsum in its href. Great, I basically go to that and we'll talk about that in a moment. And then if it's YouTube, I tell the video handler to begin playback. And I'll talk about the video handler probably in the next entry cause I'm still working on that's still refining that a little bit. Not quite sure where that's at in my own mind. Anyway, for anything that's not internal, we'll basically just do what it's supposed to do. It just won't prevent default. But if it's an internal link, we prevent default and we go to that URL, which basically involves pushing state on and then calling this unchanged. And the unchanged is basically gonna be fired when we go to the URL or when the pop state happens. So all it's going to do is fairly, it puts the kind of this routing code right into the middle of it. It basically says, if I either actively tell it to go or if I passively find there's a pop state as in the URL changed, tell me about it and this unchanged will fire and we'll decide what to do. And if you've come across the supercharged router episode, that's exactly what we did there. And that's why I'm applying the same concepts in production because I know that they will work just fine. So what does the unchanged do? Well, it's actually all the way up here. It grabs the path, makes a new XHR and loads it. And some people would say, why are you not using fetch? Well, fetch won't let you set a response type of document. There's a good reason for it. It's because you can fetch inside a service worker and service worker like every other worker doesn't have any notion of the DOM and therefore it doesn't support getting things back as documents. So I have to make a request as an XHR. I don't have a problem with that personally because XHRs are still completely valid. They're not deprecated. They don't return a promise, but that's okay. I can live with that. And so we basically load whatever it was that you were going to, whichever page you were going to. We update the nav and then I'll show you the small player. Oh, there's a fun thing. Maybe I'll leave you a little hint at that at the end of this. Right, the onload. What we do is we hide and swap area contents. So that's the bit where everything kind of fades out. Let's head down there. Yeah, I'm basically going to watch the mass head graphic transition out. So the mass head graphic is the longest running of the fade out. So I basically apply this hide areas class to the body and underneath in the styles, let me show you the mass head style since we're here. Mass head in line. There we are. If the page is animatable and I have a separate class for switching on and off animations and I've told you to hide areas then the mass head graphic should turn to opacity zero and it should take half a second to do so. At the end of that, the transition end will fire and that's where everything kicks off because at this point we've got the new content. So we've loaded in hopefully all the content from the new page and we get the title and the new graphic and everything about the new page and we swap it in for the existing one. So everything that we are gonna swap out has been faded down. We swap everything out and then we basically wait a couple of frames and it's a slightly bizarre technique this one. Because the event could fire somewhere in the middle of the frame, you actually want to typically wait two frames. So you wait for the start of the next frame so that anything that's pending happens and then you wait another frame and then you actually do your actual animation. I would prefer it if we had some mechanism to say, let me know when this work is done, whatever the work is when it's been applied and rasterized and put to screen and then do my next step. But at the moment, the double rough is what I'm having to do and it's a bit there because I'm having to bind it because I can't use arrow functions. Yeah, I would like it if I could. Anyway, so at the end of that, so we basically fade out, swap the content, fade back in and then there's just a bit of tidy about toggling a couple of bits of area hidden. I'm gonna have to, when this is done, I'm gonna have to go back and do some of that accessibility checking again because I wanna make sure that we don't completely lose focus on the page because we have a feeling that in some contexts, we actually will and I probably want to take you to the header of the new page. That's what I understand is normal. Talking accessibility, bit of an update for you. I showed Rob Dodson the accessibility work that I did and he was like, yeah, that's all really good. The only thing you probably wouldn't do is that thing that you're really proud of, Paul, with the SFJAS thing where it said SFJAZZ, you don't really need to adjust what the screen reader is going to say. People who use screen readers apparently are fairly comfortable with the fact that content won't necessarily be announced correctly in all cases, but it's good enough and they're used to enough that it's not really a big deal. So he was saying you don't really need to go out of your way to kind of correct that stuff. On the other side of it, I was like, well, I'd rather it said SFJAZZ because that's what it is, but I kind of understand his point that you don't need to kind of go all the way to 10 out of 10 on making sure that everything sort of sounds absolutely perfect. That's not necessarily the sort of ideal or practical approach. But there you go, I said it was a journey like all of this stuff I'm going on. So that's essentially what we're doing right now for the hot swapping of sections, at least on desktop, it's nice and fast. Let me show you a timeline profile. And so you've got this animation out here. So you basically, this is the click handler here. And then we have an animation out with admittedly one long frame in there. Then this is the swap over section here. And psychologically, there's a break for people because you've faded out the content and there's a break where they're like, by doing that initial animation, you've acknowledged their action. So that's fine. So you're like, okay, you've responded instantly to my click. And then there's this sort of the swap over moment where we buy ourselves a little bit of time. So we can afford this gap in the middle is what I'm saying because it's not one continuous animation. And then the secondary animation where it's coming back in, again, very similar, couple of long frames, not disastrous but broadly very convenient. And I'll say convenient, broadly very performant. And the reason it's performant is because I'm sticking to opacity and transform, which if you've followed any of the supercharged videos is something that server and I talk about very often. So there you go. That's essentially what I've got for now from going page to page to page. We've enhanced, if the JavaScript fails or isn't running, we know that we'll be falling back to link to link to link to link. So that's not a big deal. So we've kind of progressively enhanced into something that hopefully should work. That's it for now. I will quickly show you the video stuff. Let me mute my screen there. So this is what we've got. And at the moment, if we go to a different section, it goes down to a small video in the corner. So you can continue watching. And if you go into say another thing with another video and you click on that, then it replaces it. And then blah, blah, blah. And if you go back into, let's say go back, it brings the video back up to full screen. If you go back to the place where the video originated. More of that in the next video about the videos. Right, check out the code. Subscribe if you haven't already. Keep on commenting, keep on saying hello, keep on throwing in your ideas and suggestions. I do really appreciate them. They're often very good. It's lovely to read them all. So thank you for that. And I will catch you in the next entry. Toodaloo.