Jump to content

CSS caching - how does it work

SamC

By SamC,
in General Support

 Share

Recommended Posts

SamC Hero Member

SamC

Posted
Posted

I recently moved my dev site into dropbox so I can share it between macbook/windows desktop. I'm having some issues however with my css. I'm working directly out of the dropbox folder using sass and compiling with node/gulp-sass to a normal styles.css file. When I use: 

// main.php
<link rel="stylesheet" type="text/css" href="<?php echo $assets . '/css/styles.css' ?>" />

// outputs
<link rel="stylesheet" type="text/css" href="/site/templates/assets/css/styles.css" />

...any changes I make to my sass (even changes directly to styles.css) are not reflected on the page. However: 

// main.php
<link rel="stylesheet" type="text/css" href="<?php echo $assets . '/css/styles.css?a=1' ?>" />

// outputs
<link rel="stylesheet" type="text/css" href="/site/templates/assets/css/styles.css?a=1" />

...works as intended with any changes I make visible immediately.

It's obviously a caching thing but template caching is all disabled. I'm not sure where this is being cached? If the system is not outputting "/site/templates/assets/css/styles.css", then where is it getting the css from? Is it in the database? If I actually delete the styles.css file, the file is still there and populated in 'view source'.

I thought maybe it's a dropbox thing (maybe this file is cached in dropbox) but I'm not sure. I also don't know how to clear the css cache in processwire (or set it to off). Of course I can just leave it as "/site/templates/assets/css/styles.css?a=1" but I'm intrigued. Any help is appreciated. Thanks.

Link to comment
Share on other sites
Sergio Hero Member

Sergio

Posted
Posted

Hi SamC,

Processwire does not create a CSS cache. This is done by your browser and/or the server (in this case, Dropbox). The technique you used to see the new file, by appending a query string in the filename, in this case "?a=1", is one of the things that trigger an instruction in the browser to make it download the file again. You can read more about this in this post https://css-tricks.com/strategies-for-cache-busting-css/

And regarding keeping the site copies in sync between your computers, although Dropbox works, it's not a good practice because you can't track changes on the files and risk losing some of the work done in eventually sync error. It is recommended that you use a version control system for this. 

Best,
Sergio

  • Like 2
Link to comment
Share on other sites
SamC Hero Member

SamC

Posted
  • Author
Posted
1 hour ago, Sérgio said:

Hi SamC,

Processwire does not create a CSS cache. This is done by your browser and/or the server (in this case, Dropbox). The technique you used to see the new file, by appending a query string in the filename, in this case "?a=1", is one of the things that trigger an instruction in the browser to make it download the file again. You can read more about this in this post https://css-tricks.com/strategies-for-cache-busting-css/

And regarding keeping the site copies in sync between your computers, although Dropbox works, it's not a good practice because you can't track changes on the files and risk losing some of the work done in eventually sync error. It is recommended that you use a version control system for this. 

Best,
Sergio

Hi @Sérgio thanks for the info, that link will come in handy no doubt. I haven't got the hang of version control yet. Got git installed but yet to follow any guides to use it effectively, seems quite confusing to me. I guess the next logical step would be to learn it.

Link to comment
Share on other sites
Sergio Hero Member

Sergio

Posted
Posted

 

"To master git, one has to live many lives" – Confucius  ;)

Is indeed very hard to understand it beyond the basics. I sure don't. :)

One good resource that I can recommend is this course by Jeffrey Way on his Laracasts: https://laracasts.com/series/git-me-some-version-control

He is an excellent teacher, I can't recommend him enough. Take a look at all courses there, you won't regret.

 

  • Like 3
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted
On 10/26/2016 at 2:32 PM, SamC said:

Lol. I'll check it out thanks! (adds to #916 on the impossibly long web dev bucket list)...

I do not know about the Laracast tutorial, but this is my favorite:

https://www.pluralsight.com/courses/using-git-with-gui

Super cool, "boring off-topic stuff" is NOT included, easy to grasp via the usage of GUI, highly recommended :P 

Link to comment
Share on other sites
FrancisChung Sr. Member

FrancisChung

Posted
Posted

+1 for Sourcetree too. Great tool if slightly confusing at the beginning.

I probably need to look at this tutorial myself as some of the GIT Terminology confuses me.

I'm always under the impression Push / Pull / Get Requests etc seem to have slightly different meaning to what I know them to be from using much older SCCs.

 

1 important gotcha of the Sourcetree tool is that you can't do merges of 2 branches with it (At least I haven't figured it out).

So it appears me to that certain "admin" tasks can only been done online using the web client.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...