This is probably a dumb question, but I'm worried :
I have published a website on a server, then made some changes to a css file.
As the css file was already cached by my browser, it didn't display the changes.
deleting the cash allowed to display the changes.
Now my worry is that if some users have previously been to the website, and it is cached by their browser, if I make a change they wouldn't be able to see it.
How do you guys prevent this ? Do you just change the file names ?
Sorry for my noobness,
Thanks.
There are a number of solutions floating around the web, but as far as I can tell they all boil down to changing the CSS filenames whenever their content changes. That way you steer clear of user caches and server caches serving old content.
Variants:
Instead of changing the name of the file itself, create a symbolic link with a new name to the old file whenever content changes.
Instead of changing the name of the file, change the way it is referenced by the page. Replacing myfile.css?v=1 by myfile.css?v=2 circumvents people's caches.
Write code that automatically changes the name or the link name or the way the file is referenced
Use a framework that does one of the above.
And: remember that the same problem applies to any content that might be cached, like JS files.
Related
Im creating the UI of my application from a PSD file following the instructions in: https://www.codenameone.com/blog/psd-to-app-revisited.html (by using the css support plugin), everything is fine, but i edited one of the images in photoshop and exported it again to my codenameone folder(replacing the original image) and i thought the new image would replace the original one, but the application is still showing the old image(it seems as it is cached or something similar).
I already tried "Clean and build project" but didnt worked, also went to the generated .res file and tried to delete the original image but it says i must first delete the themes that use them(which i dont want to do). Is there any way to "refresh" the images referenced in the .res file so they reflect the latest image in the folder? or a "clear cache" or something similar. For now i renamed the image, and also changed the name in the css,but i think is not the best way cause that implies creating new names for your images, and editing your css with every little change.
If you change the image directly in the file system you need to do this when the designer is closed. Then reopen the designer res file and save it so the image is updated.
I have just started exploring the possibility of saving changes made to a page and it's styling in Chrome Dev Tools on the fly.
I've followed this short video tutorial on mapping the project files on disk to the Dev Tools via the Sources tab. Everything works fine until around the 5:17 point where he selects an element in the Elements tab and makes several CSS style changes which automatically persist to the file on disk.
This doesn't work for me. The changes won't save to the file and when I refresh the page reverts to the original styles. I have checked to see if there is an asterisk beside the corresponding CSS file in the Sources panel, to denote changes have been made, but there is nothing there.
I have also tried the solution posted in this SO question but I don't see the link to the stylesheet after editing the style in the Elements tab that will redirect back to the file in the Sources tab allowing the changes to be saved.
Can anyone tell me what I am missing? Thanks!
You need to make sure you map your Workspace to a Network Resource to persist changes automatically. I have produced the steps below to get this working correctly.
Select the folder in Sources and click 'Add Folder to Workspace'
If you open up our stylesheet in Sources and go to the Elements panel to make changes, upon coming back you will see a separate instance of the stylesheet opened with pending changes. The reason is that Chrome doesn't know how to map the URL to the file on your system yet.
Select 'Map to Network Resource...'. You will notice that 'top' disappears.
Make a change in the Elements panel now. When you go back to the Sources panel, the changes will automatically be shown without requiring any explicit save.
You can see exactly what was done by going to the Workspaces section of the DevTools settings panel. We've added a local Workspace, and then mapping the URL, which in my case is on my computer and accessed with the file:// protocol, to the relative path on the system.
I deleted mistakly my child theme in wordpress site.
Is there any way I can get CSS contant somewhere cached over internet?
I accidentally wiped a CSS file, the website was still cashed so I inspected one of the elements and viewed the cached css resource and copied it from there.
If you were using Chrome, and had open the style.css file at least once then you may use this method to recover the cache:
chrome://cache/
You will get all the list of cached data there. Then ctrl+f to find the style.css for the same.
Once you find it. Copy all the data => Go Here and paste it in the text box.
See if it works.!
or you can try to open cache:domain.com as well.
I have been using a central CSS file to build my site and have added to and modified it over time. I use cloudflare which caches CSS files every few hours, so to avoid this I change the number on the end of the file name each time and update it in my header template. This worked fine for months on two different servers.
But just recently it has decided not to allow this. If I change the CSS's file name and reference link, the CSS will not load. If I set it back to what it was before (site_main61.css) then it works just fine. I've even tried using different characters than increment numbers at the end and still end up with the same result.
This started happening out of the blue; no changes had been made to the server. Could this be a problem with Cloudflare? Something else?
I can provide more details if needed, but I can't think of anything that would be relevant right now.
The problem is not related to forgetting to update the link in html. I've tested this countless times to be sure.
You can add a query string the to end of the file name. It will be cached as a separate file, but it will be the same filename. It's basically a forced recache for the file. Just go to the link in the HTML and add something like this:
<link href="path/to/file/site_main61.css?version=1" ... />
This will work with most caching systems and you no longer have to change the file name.
So I'm writing a Django based website that allows users select a color scheme through an administration interface.
I already have middleware/context processors that links the current request (based on domain) to the account.
My question is how to dynamically serve the CSS with the account's custom color scheme.
I see two options:
Add a CSS block to the base template that overrides the styles w/variables passed in through a context processors.
Use a custom URL (e.g. "/static/dynamic/css/< website_id >/styles.css") that gets routed to a view that grabs all the necessary values and creates the css file.
I'm content with either option, but was wondering if anyone else out there has dealt with similar problems and could give some insight as to "Best Practices".
Update : I'm leaning towards option number 2, as I think this will allow for better caching down the road. So it's dynamic the first time, gets stored in memcache (or whatever), and invalidated when a user updates their settings in the admin site.
Update: Firstly, I'd like to thank everyone for their suggestions thus far. All the answers thus far have focused around generating static files. Though this would work great in production, it feels like a tremendous burden during development. If I wanted to add a new element to be styled, or tweak existing styles I'd have to go through and recreate each and every css file. Sure, this could be done with a management command, but I just don't feel it's worth it. Doing it dynamically would add 1 maybe 2 queries to each page load, which is something I'm not worried about at this stage. All I need to know is that at some point I will be able to cache it without rewriting the whole thing.
I've used option #2 with success. There are 2 decent ways of updating the generated static files that I know of:
Use a version querystring like /special_path.css?v=11452354234 where the v parameter is generated from a database field, key in memcached, or some other persistent file. Version gets updated by admin, or for development you would just make the generation not save if the parameter was something special like v=-1. You'll need a process to clean up the old generations after some time.
Don't use a version querystring, but have it look first for the generated file, if it can't find it, it generates it. You can create a cron job or WSGI app that looks for filesystem changes for development, and have a hook from your admin panel that deletes generations after an update. Here's an example of the monitoring, which you would have to convert to be specific to your generations and not to Django. http://code.google.com/p/modwsgi/wiki/ReloadingSourceCode#Monitoring%5FFor%5FCode%5FChanges
Could generate the css and store it in a textfield in the same model as the user profile/settings. Could then have a view to recreate them if you change a style. Then do your option 1 above.
Nice question.
I would suggest to pre-generate css file after colors scheme is saved. This would have positive impact on caching and overall page loading time. You can store your css files in directory /media/css/custom/<id or stometing>/styles.css or /media/css/custom/<id or sth>.css and in template add <link rel="stylesheet" href="/media/css/custom/{{some_var_pointing _to_file_name}}" />
You can also do the trick with some random number or date in css file name that could be changed each time file is saved. Thanks to this browser will load the file immediately in case of changes.
UPDATE: example of using model to improve this example
To make managing of those file easy you can create simple model (one per user):
class UserCSS(models.Model):
bg_color = models.CharField(..)
...
...
Fields (like bg_color) can represent parts of your css file. You can ovveride save method to add logic that creates css file for user (by rendering some template).
In case your file format change you can make changes in your's model definition (with some default values for new fields), make little changes in template and run save method for each exisintg instance of class. This would renew your css files.
That should work nicely.
I would create an md5 key with the theme elements, store this key in the user profile and create a ccs file named after this md5 key : you gain static file access and automatic theme change detection.