DEV Community

loading...

Flask, CSS and Cache walked into a bar...

sush_kd
CS Sophomore, Blockchain Enthusiast, Web Developer
・2 min read

Hello reader :)

I would finish this joke but it's meaningless without context. Hence bear with me till the end, to experience the best joke ever.

So yesterday night, I was learning flask from a freecodecamp video, and it was pretty decent. The video begins with some boilerplate, followed by the concept of templates and their inheritance. Now I faced an error, and I assume some of you guys might have faced this in the beginning too.

The CSS stylesheet that I linked in the 'base.html' file, didn't seem to work.

VSCode screenshot of error.

I tried everything, and all my code seemed to be fine as I referred to multiple sites. I rewrote the code, just to make sure I didn't commit some stupid mistake (btw my code worked in the first go with no errors except for the damn CSS.). Eventually, I was frustrated and left it.

But as fate would have it, I searched for 'CSS with flask error' on google today, just to see if other people might have faced it (In retrospect, should have done this yesterday.). And the god of programming, Stack Overflow, came to my rescue.

It had the exact same problem as mine, with 11 answers. Since the first and the most upvoted answer is usually the right one, I read it and found that I had already tried it all (The damn answer was long).

And right when I had almost lost hope, when future seemed bleak and life felt meaningless, I saw the next answer... it changed my life. I am a better person because of it. I got out of my depression and set up a billion-dollar company (all this happened a few minutes ago.)
The answer was written by Tanishka Gupta, and I quote:

try reloading the chrome using
ctrl + shift + R

And if you think this is funny, what do you think about the fact that it actually worked?

Screenshot after hard reload

So finally, when my laughter stopped, I read a comment on this answer by VocoJax and I quote:

WHAT KIND OF MAGIC IS THIS??

(The capitalization is not my addition. It was commented this way.)

The comment described both my emotions, and the next fit of laughter I couldn't explain to my co-residents, pretty well.

So after some research, I understood that chrome saves a copy of CSS file in its cache on the first load, and uses it for that session. Simple reloads do not reset the browser cache, hence any of my changes in the CSS file weren't reflecting in the browser window. ctrl + shift + R does a complete reset of the window thus clearing the cache and using the source CSS file. Which in turn reflects the changes you do in your CSS file. Simple enough?

And hence to end this article and to finish my stupid joke,

Flask said "You still haven't changed CSS.", to which CSS said, "Hold my cashe!".

I know the joke wasn't good. Thanks for sticking around though.

Au revoir. :)
(I don't really know French.)

Discussion (13)

Collapse
nigelmrodgers profile image
Nigel M Rodgers

You can add a query string that changes on every page load like

example.com/style.css/?ver=12345678

I use the time function. DON'T FORGET to remove the query string when going live. There is probably an automated way to do this.

Collapse
sushantkd2019 profile image
sush_kd Author

Thanks for the suggestion. I will try it. : )

Collapse
brandonwallace profile image
brandon_wallace

Another thing you do is in the developer tools you can go to the "Network" tab and check off "Disable cache". Sometimes you will have to uncheck it, refresh browser page, then put the check mark back and refresh the page again. I have done that in Chrome and Firefox.

Collapse
sushantkd2019 profile image
sush_kd Author

Good idea. I will try it. :)

Collapse
arberbr profile image
Arber Braja

Easily fixable issue though if you always hard reload while developing. Browsers do marvelous things on their own, things which help us have faster load times and better experience but they are not always smart.

So always do hard reload of a page while developing and you should not see problems like this at all.

Collapse
sushantkd2019 profile image
sush_kd Author

Yes, you're right. I understood that with experience. Thanks :)

Collapse
rachitprojects profile image
rachitprojects

Dude I thought you'd leave the puns in 2020. 🀣🀣🀣 Must say this post is my guilty pleasure

Collapse
sushantkd2019 profile image
sush_kd Author

My puns are a part of me XD. Thanks though. :)

Collapse
swani_didde_63ceba69d5108 profile image
Swani Didde

That was one hella roller coaster . πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
sushantkd2019 profile image
sush_kd Author

XDXD Thanks. That was the intention. :)

Collapse
prasanna28devadiga profile image
Prasanna28Devadiga

was hooked till the very ending

Collapse
sushantkd2019 profile image
sush_kd Author

Thanks :)

Collapse
debashishere profile image
DEBASHIS ROY

test