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.