 Hey everyone, Sam here. On this episode of the Santa Tracker Dev Diary, I wanna dissect the village. Now the village is the place most people will land when they come to Santa Tracker. It's the cute interactive scene with houses and stuff to click on. But it's different on mobile and desktop. So let's have a look at that. So on desktop, which we loosely defined as having a screen width of greater than 768 pixels, we've got a very desktop experience. You can hover over cards and see what's inside the houses. We've also got a new today card in the top left. And we have this because this is a very physical experience. It's meant to be Santa's Village. And as stuff gets unlocked, as you go on the page, you get more and more houses to play with. However, we kind of know that people do tend to click on the stuff at the top, which is why we have this new today card. On mobile however, we have a very different experience. We actually flip it on its head and we actually show the most recent cards at the top. What's interesting is this is actually the same DOM. So these pop-up cards here that you see are actually the same elements over here, but being displayed in a different way. They're in a flex box in both cases, but on desktop, they're positioned very absolutely. They're very specifically over the houses. On mobile, we give that up and we just place them in a grid. We actually reverse them, which is kind of cool. So the same DOM elements, if we have a look here, have, we use a CSS variable called release order. And on tablet mode, which you see here, and if they have a link, which means if they're open, we actually use the order attribute. And the order attribute is using a flex box to rearrange elements. So these elements on the left here are actually ordered top down, but we leverage flex box to rearrange them so that the first one that's open, or the most recent one that's open is at the top. So that's pretty cool. So despite the differences in the card layout, the villagers do have some similarities. The header here is the same. The pegman here, which is the maps dive game we have, is actually the same in both environments, although we position him slightly differently. So this code here controls whether we have the Easter eggs at the bottom of the page. And so you can see here that this template, which is a Polymer feature, controls whether we have the background Easter eggs. There's quite a long list here, as you can see. The way this works is we use the iron media query. It sets the is seen village to true or false based on whether this query is true. So if it's true, we've got a big size and we want to create all these nodes. When this might happen in the real world is let's say you've got a tablet. And if you have a tablet in landscape mode and then rotate it, these elements will now be created. Your tablets change size and now we have a big wide village and we want to show the full experience. However, when you rotate back, what Polymer will do by default is keep those DOM elements around. It will just hide them. Now this is sometimes desirable, right? Like these elements might take a lot to create. There's a bit of a cost in that. But for us, we don't want that. For us, the cost in these elements is not really their creation on the page, their memory cost, but often that they'll do things. And we actually want to leverage the natural lifecycle methods of the platform, the attached and detached methods to actually control those elements behavior. Let's have a look at that. The way Polymer does that is through this restamp attribute. And what that means is that when this value becomes false, these elements will properly be removed from the page. By default, as I said, they'll just be made display none. Why do we do that? For us, this is really important because we try to leverage the natural lifecycle methods of the platform. In our example here, we've got the snowmobile. And the snowmobile is a little thing you click on that zooms left and right. It's quite cute. But it does a bit of work on attached and detached. And rather than having to awkwardly plumb through some like, oh, you're on the page and not on the page, we can actually use the natural methods, these attached and detached methods, which are built in, they're part of the platform. Although in the platform they're called connected callback and disconnected callback, we can leverage these methods to do things. We actually know, therefore, that the elements on the page are not on the page. And that's very nice. But we actually take this to the extreme. So in a previous episode of the series, I talked about lazy pages. Now, lazy pages is an element that will create elements as we need them. So none of these elements are on the page to start with. And what happens is when you navigate to them, we create them. That makes a lot of sense. In previous years, these elements actually stuck around on the page even after you were done with them. Now that's fine, but it causes a few problems. We had a lot of memory issues because basically Santa's a really complicated site. If you went to a bunch of scenes, what would often happen is that your browser would really get bogged down. I mean, Santa's already pretty complicated. I'm not gonna lie to you, but it will get really bogged down because all these scenes, you went to the airport, you went to the press page, you went to a few other scenes, your browser would really be feeling it. So what we do now is we actually remove these elements from the page. What the tricky parts there are is we need to make sure that we're actually cleaning up properly. And in JavaScript and HTML, this is actually quite hard. So if we look at a scene here, let's look at our elf ski scene. I'll show off the game, it's pretty cute. You can ski down the mountain here and eventually you run into a tree. However, we need to make sure that we clean up properly. So in this case, this game is adding a few global listeners and that's tricky, right? Because we need to make sure that we remove them when we're done. So we wrap the attached and detached methods in on show and on hide here, which you can see. And so a good way to think about this is whenever you add a listener, make sure you're adding an equivalent cleanup handler somewhere else. And so for us, we add things like the resize handler, which you remove down the bottom. We also have a tick interval which we remove down the bottom. And we also have a request animation frame. Now in request animation frame, this callback, we don't register an additional one. Now as part of this raft, we actually check to see if we're on the page. And if we're on the page, we keep doing more rafts. And if not, then we stop, which is a pretty natural way to clean up when you're done. So as part of this, we make Santa Trucker more stable and more reliable, which is great. So these were our learnings from building a responsive village inside Santa Trucker and how they applied to the site as a whole. And while obviously Santa Trucker is a hugely complicated example, right? We've got lots of animations and effects and stuff we want to clean up. So it's not happening while you're browsing the site. Hopefully you'll take away something for your own sites. Any single page application that loads content dynamically might need to clean up rather than keeping the DOM around. Thanks for watching. I'll see you next time. You can subscribe to the Google Chrome Developer channel down here. Or check out some other great videos along here.