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.