Announcement

Collapse
No announcement yet.

Template-Based JS & CSS Management

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Template-Based JS & CSS Management

    It would be nice to be able manage Javascript and CSS files within store templates. I know this can be done today using URI management, but that would sacrifice features like consolidation and minification. Plus, there would be a performance penalty to running all of those requests through Merchant instead of serving static files.

    My theory is that Merchant could allow editing the JS and CSS in templates just like other pages, but on update, write a new minified, consolidated file to the server. On update, pages with JS or CSS content could also run syntax validation (usually done during minification anyways). If there's an error, it won't save. It should also track a version number that is available as a variable to other templates for appending to the script or css URL to facilitate correct browser caching.

    This would offer the convenience and power of template-based code management while retaining the performance benefits of traditional workflows. I'd love to hear feedback from others on this idea.

  • #2
    Many, if not most of the ReadyTheme's already use a Minifier to compress the file on demand. The file itself remains human formatted. Furthermore, at least with CSS, one SHOULD NOT MODIFY the js supplied by readythemes. Instead, one should use their own custom css file (which is likely to be relatively small) and call that file last to override the rules in the previous CSS file. This is harder to do with js files, true (but majority of changes would be extremely minor), but any additional js features should in a separate file as well.

    Lastly, we do have a module called Edit This! (http://www.phosphormedia.com/product/pm_edit_this.html) which allows you to access all (any) js, css, html, text file etc, easily and quickly from the admin. (Also allows you to save and restore backups, provides one click validation and can even create a file). Access to Edit This! can appear on every template page so its always a 'click' away.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • #3
      Bruce,
      For starters, I think the Edit This! module is very interesting. I was not previously aware of it and like what you've done with that.

      Also, your point about editing JS and CSS files for ReadyTheme sites is definitely valid. If a feature like I've proposed is ever offered, it might be wise to require enabling it on a site-by-site basis, with a warning that you need to know what you're doing before you poke around in those templates. Admittedly, I made fairly extensive modifications to the CSS and JS files that shipped with Suivant, but that's not for the faint-hearted.

      Regarding the compression provided with the ReadyThemes, does that apply to JS files? I thought that was only for CSS. You're definitely correct that this is a partial solution to my request that can be used today, although it is done using PHP (or at least it used to be -- I haven't looked at the more recent themes in detail). This type of consolidation and compression is simpler with CSS, but for JS, I was thinking about functionality more like Closure Compiler. Also, my ideal scenario would generate static files.

      I think my end goal extends a bit beyond this, though, because a fully template-based style sheet would allow using variables to control key elements, like colors. Imagine if ReadyThemes used template-based CSS files that let you swap out the variables for a few defined colors to completely personalize a theme to your brand. You could end up with functionality like Less. When you save changes to a template, it would be parsed by the engine and written to a file.

      Similarly, you might be able to schedule website updates, including corresponding style and script updates, by writing date-based conditionals for blocks of code, combined with a scheduled task to process those templates and update the server files at a specific time simultaneously. Being able to stage updates that apply to multiple templates would minimize maintenance down-time.

      I'm sure there are other potential benefits, but these were just a few ideas that came to mind off-hand.The consensus may very well be that the use-case for this is too narrow, but I thought it might be a good fit for a V10 feature.

      Thanks for the input. It's good to see what other options exist and think through ramifications of these ideas.

      Josh

      Comment


      • #4
        One could very well use a template to create CSS/JS files on the fly or upon certain conditions. But, IMHO, doing it from a standpoint of pure customization from site to site would be vastly easier just with a SET of static CSS files containing the different layouts...unless I'm missing something here. Oh, and yea, I don't think they are compressing JS files dynamically across readythemes as that would be a bit harder.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment

        Working...
        X