HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Bypass visitor cache after CSS-Development

phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP
edited February 2015 in General Banter

Hi all,

I'm regulary working on my themes and as visitors and users tendencially have caching on in their browser, they sometimes have problems when i applied changes, they are not yet seeing or that is throwing their HTML and CSS through the wind.

There is this idea of adding for example a date to CSS files for one day or two days so that they will be cached newly and then change back to a regular filename.

<link rel="stylesheet" type="text/css" href="style.css?Monday 12th of February 2015 04:45:21 PM" />

It can be created by adding following to the insertion of style.css in the HEAD.

style.css<?php echo date('l jS \of F Y h:i:s A'); ?>

But in Vanilla, the Style.css is created in different files in the core. What would you suggest to bypass a visitors and users browser cache. Is this a solution? Would it be good to factor the style.css into one file instead of lying around in different files?

I guess you have smarter thought on this. :awesome: )

  • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
  • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla

Comments

  • Options
    hgtonighthgtonight ∞ · New MVP

    You can bust the cache on assets by changing the application version.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP
    edited February 2015

    @hgtonight: True thing, but how can this easily be done. For example: If i add v1.5 to style-v15.css it would crush the design. I could add another css in the theme, but when it comes to SEO and pagespeed more CSS files are downturn on that (i even deleted custom.css and packed everything into the style.css).

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • Options
    ngakaksngakaks London, UK New

    CSSRefresh JS

    When you're coding a website, nothing can be more frustrating than having to switch from the texteditor to the browser over and over again, just for small changes to occur. With CSSrefresh installed, all the included stylesheets are automatically refreshed directly after you save them.

    Using CSSrefresh is easy. You can either include the javascript-file in your webpage, or use the bookmarklet.

    Get the script:

    (Download CSSRefresh.js here)

    and include it in your theme:

    <head>
       <link rel="stylesheet" type="text/css" href="css/site.css" />
       <script type="text/javascript" src="js/cssrefresh.js"></script>
    </head>
    

    Note: Only CSS-files included before the CSSrefresh-file will be refreshed.

  • Options

    @ngakaks This is very useful for development, but @phreak asked about breaking the cache for users of the website.

    If you had a custom.css, it would be much easier, because the theme version is appended as a querystring.
    e.g. on this forum, the theme version is 1.5.3:

    <link rel="stylesheet" type="text/css" href="/themes/vforg/design/custom.css?v=1.5.3" media="all" />
    

    When this is changed, browsers will re-download the file.

    Generally I would use some kind of asset minification, because the number of javascript and css files included by vanilla is ridiculous (let alone the uncompressed jquery-ui library), especially if you have a lot of plugins.

    http://vanillaforums.org/addon/consolidate-plugin

    Consolidate also lets you purge the cache manually.

  • Options

    Consolidate is good way, not to blow my own trumpet. All you need to do is clear after minor change.

    Otherwise Tbh if a theme needs to use style.css you are probably best excluding then including in a theme hooks file. Implicit inclusion is nice, but in fact explicit inclusion often trumps.

    You can control the version of your assets in themehooks, and would generally recommend tying to the theme version.

    grep is your friend.

  • Options
    hgtonighthgtonight ∞ · New MVP

    @phreak I wasn't clear. Change the application version and the cache will be busted since, as @Bleistivt pointed out, the version gets appended to the query string.

    If you don't want to change the version all willy-nilly, you could write an addon that appends a hash, or go @x00's route with consolidate.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    If you don't want to change the version all willy-nilly, you could write an addon that appends a hash, or go x00's route with consolidate.

    It is only really concerning style.css, you could simply use the themehook method as mentioned.

    grep is your friend.

  • Options
    phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP

    Thank you all for your inputs. Actually it's quite easy and nice to accomplish it. I tried it by going to the index.php in the root folder of Vanilla and changed line 3

    define('APPLICATION_VERSION', '2.0.18.14');

    to

    define('APPLICATION_VERSION', '2.0.18.14v1');

    Whenever i want to refresh, i will add v2, v3 or anything behind it.

    Thank you all guys. For me thats a pretty good solution.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
Sign In or Register to comment.