Python Web Apps that Fly with CDNs Transcripts
Chapter: Avoiding Stale Caches
Lecture: Finishing the rest of the links

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Now, we've made the change for this one particular static file, right? This is for a category banner image up here. These.
0:13 But what about our YouTube thumbnails? And maybe even more important, what about all of our static files?
0:24 So just to put a bow on this, I'm going to go through and add some of these cache IDs
0:31 to everything that might change that we're sending through the CDN.
0:35 I'm going to copy this because once you figure out that incantation of turn into a string
0:45 in HTML and then encode it, now you're back into calling a function with single quotes versus double quotes. Yeah, it's kind of nuts.
0:53 So let's go through and see where else we might change it. Well, we've got-- let's stick in the HTML for a moment.
0:59 We've got our partial for our image here. And it's going to be about the same. So I'm going to paste that and then come back and say, OK,
1:07 the URL is that here for this section. And then it's a video ID. Plus.jpg.
1:25 Go let's just run this again and make sure everything. Still works so if we refresh this it should have to download those again but only once
1:34 populate the CDN. There they go. And if we say view source. Perfect. We're not seeing that error missing file error missing file.
1:45 Now everything's working. Excellent. And let's just double check. We'll hit the Python one. There's one other area where we need to work on this.
1:55 If I click this, it's going to have the poster. So we need to go to the play section. But this is exactly what we're going to need.
2:02 So I'm going to copy that. And videos play. Remember we said here's the thumbnail we want. So that goes right there like that.
2:15 If I go and hit play here, you won't see it for long, but it was for a second. You could see there was the poster.
2:25 So if we view source, I should go down and see poster has the cache ID. Excellent. So I think that covers it for the videos.
2:35 And it should even work in things like infinite scroll over here. And it does because you can see they're a little bit slow
2:42 The first time, if I go over here and search for WWDC, there's the two. We look at that again, open image in new tab, at the top there's the cache ID.
2:52 Excellent. But let's also do the other static pieces of content. And those are in, let's close that all up for a minute.
3:04 Those are going to be in our shared layout over here. So we can see I've said, "Hey, let's take this bit." Just to remind me what to type in.
3:18 Where are we looking at? Just beware the caching staleness. I'm going to go to the end of this and put this long section there,
3:26 which is going to be this. Now I'm going to put one of these here. Let's just see this bootstrap one is working.
3:34 Refresh, a little bit slower just for a moment. Now it's got it. View source. Sure enough, it's working. I'm gonna go through and do that.
3:45 All these other ones, you don't need to see that. So I'll just zoom ahead. Well, that took a moment, but here you go.
3:55 We've got our font awesome, our site, our animations, all of these things, they have their static cache ID. And again, at the bottom,
4:03 we did the same thing for our JavaScript. Just run it real quick, make sure everything works. Takes a moment, you can see it's pulling in the files.
4:11 Now the CDN is populated and we can just check one more time. Up here, all these look good. All those look good, excellent.
4:22 And now we can go and play with the website and it does all of its things super, super fast like it should be.
4:30 But the magic now is if we change the site design in any way. So just to make that really obvious here, let's stop for a second, close that,
4:40 go to the static site and is there anything with the body, Yep. Let's just set the background
4:51 color here from this, I'll set it to be yellow. So we didn't do anything but just redeploy
5:00 the website. And then now as a user is clicking around, they'll just click here and instantly
5:07 new deploy, new static files. We've got a new design. It's amazing. Do you love the new footer?
5:14 So super easy. We don't have to think about this ever again. We've set it up. We've set it up in
5:20 our shared layout page over here. And basically it's on autopilot for the rest of the time.
5:27 We just go do our CSS work, our JavaScript work, our HTML and images, and it just, as we deploy
5:34 new versions, just picks them up automatically because the cache ID changed. You can see the
5:42 cdn came back here and grabbed this. And it's building this new hash for those. But if I
5:50 refresh it a few times here, you see it's no longer doing that because it's in its in-memory dictionary cache as well.
5:59 So everything's working perfectly. Hopefully you find this technique really cool. It's a little bit to get started with,
6:05 but once you get it set up, it just goes. It's excellent.

Talk Python's Mastodon Michael Kennedy's Mastodon