Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: Cache busting: The demo

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Let's jump over here to PyCharm and have a look at the web application that we are going to be using to explore web design.
0:08 So, I decided to take just a basic empty shell from the Pyramid starter project, which does include Bootstrap but really basically nothing else,
0:17 and strip it down to just its essence. So, I wanted to keep the content and styles in play at the very minimum
0:26 so let me go and run this, and show you what we got. So over here we've got our design foundations demo app
0:34 and you can see we have a thing for style sheets and caching, CSS selectors, we look at box model layout and floating items.
0:42 So the part we are focused on right now is this cache busting and stale caches,
0:47 so check this out, if I click here you can this is just going to refresh this page,
0:50 it's as if I came back to it, same thing is if I go up here and hit enter, it's just going to reload this page,
0:56 so let's go make a very trivial change to the style sheets affecting this app.
1:01 First of all, notice we've created a style sheet static/css/site.css in our static folder,
1:09 remember we have Bootstrap and some other things installed in Bower, so I replicated that in our little demo app
1:15 and I made the CSS folder and image and a js folder. So over here, I've made a variety of CSS for the various demos
1:24 that we are going to work with, theme and site are used across everything and then these are specialized little changes that we are adding on.
1:30 We'll get to those later, but for now, notice we are including site.css in the index page, and over here we've got some colors.
1:38 Now, let's change a color, see it's black on white, what if we want to change the color? Now this is pretty cool, check this out in PyCharm,
1:46 notice there is a black thing on the left and if I hit Alt+Enter it will say: "Hey, you can change the color, what do you want the color to be?
1:51 Pick something that you've recently worked with, or whatever." Right, so this lets you go and say you know what,
1:57 I kind of like this green, maybe we'll use this green here. And of course, green is not going to be lovely, what are we trying to set?
2:04 We are trying to set the color, so let's set the color to like a cyan, not quite cyan but close enough.
2:12 And then let's come over here and set the color instead of this being white
2:15 let's set it to something black, like right around there, that's good enough black. Choose.
2:21 OK, I am going to save, Command+S, you can see the little presenter tip, saved every file, now if I come back over here, and I am like: "All right,
2:32 I just changed, let's move this aside, I just changed the color from black to cyan and I changed the background from white to basically black."
2:44 And you would think if I come over here and I visit this page, that I would see a black background with cyan text, but wait.
2:54 What? What is this? Like it's white and if I click around, it's white, if I click around, I click on here, I navigate over this page,
3:02 oh, now on this page - look! It finally changed, but now it's gone again, if I do a force refresh then look, cyan-color text, well,
3:11 cyan-ish-color text and a black background. Finally that change took hold.
3:17 This doesn't happen very often in development, if you set things up correctly.
3:22 But, in production, this happens all the time, you actually want this to happen,
3:26 you want the browsers not to download the CSS and the images and everything,
3:31 except for one time ever, like that would be ideal if it never ever downloaded it again,
3:36 because that means when people visit your site or more importantly when they got to like the second page, it's instantly got all the images,
3:44 all the CSS, all the JavaScript, and it doesn't ever go back to your site to pull that in. So we want to aggressively cache things
3:52 but you can see there are these problems it introduces, now, I said you don't run into that problem as much, when you are running in development,
4:00 so if I go over here, you see it's still white but if I force refresh it, it goes,
4:04 sorry it was still black, but is I force refresh it, it goes to white. Now notice, over here that I am running the production version,
4:11 let me check out the run configurations I've made, one of them is running production.ini and the other one is running development.ini,
4:19 so normally, you are going to be running development and when you do that locally, you are going to most of the time not run into this caching problem,
4:28 you are still going to run into it and like I said, it's worse around JavaScript but it's not as bad.
4:33 But in production, it's going to be a problem for your users, and so we might as well solve it now at the beginning,
4:39 and we won't run into it ever in development and our users won't either.


Talk Python's Mastodon Michael Kennedy's Mastodon