Howto minify your theme sources

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Howto minify your theme sources

Post by Timbalu » Thu Mar 19, 2015 5:08 pm

To "minify" your themes html (compiled) sources the Smarty way you need:
  • At least Serendipity 2.0.0
  • A theme using a config.inc.php file
Place

Code: Select all

$serendipity['smarty']->loadFilter('output', 'trimwhitespace');
to your templates config.inc.php file and check into your Backends Maintenance section.
Purge your Template-Cache (which are your themes compiled files) by button click.
Thats it!
Now check your frontent html source.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Howto minify your theme sources

Post by yellowled » Thu Mar 19, 2015 5:30 pm

Timbalu wrote:To minify your themes html (compiled) sources
While this is nice to have, note that a “true” HTML minifier would do more than remove whitespace (remove comments, collapse boolean attribute, remove empty attributes, remove attribute quotes etc.). It would also be more prone to error because quite a bit of what a “true” minifier could remove could break functionality. (I'm not a huge fan of minifying HTML altogether, but as I said it is nice to have.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Howto minify your theme sources

Post by Timbalu » Thu Mar 19, 2015 5:37 pm

Well yes. I just thought to note this here.
Maybe we can add: If you want help from us developers, minified sources are a no go! :)

Disclaimer: Please don't understand this as a good pratice hint from my side. I personally always want to see the structure unminified!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Howto minify your theme sources

Post by Don Chambers » Thu Mar 19, 2015 5:53 pm

Can't see myself ever using this, for the same reason I do not minify css... I like to be able to read and understand the source. Comments are often there for debugging or other reasons. I am as efficient as I feel necessary when writing the tpls, but sometimes extra space, and the other things YL mentioned that this doesn't remove, are valuable.

I do like, however, that you are always thinking of new features for s9y!!! Keep doing so!

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Howto minify your theme sources

Post by yellowled » Thu Mar 19, 2015 6:17 pm

Let me emphasize again that I did not mean to diminish using it, I just wanted to clarify that this is technically not a minification. :)
Don Chambers wrote:Can't see myself ever using this, for the same reason I do not minify css... I like to be able to read and understand the source.
I see where you're coming from, and while I'm not a fan of minifying HTML myself (because I'm one of those old farts who learned a lot from view:source), not minifying your CSS or JS is not the same.

Minifying CSS and JS is way simpler (less prone to error) and even more beneficial. The percentage that you can save on CSS and JS files is really significant, and it is a performance matter. Yes, even on small sites. Plus, both are pretty easy to “unminify” in a text editor, and you can view minified CSS in the browser's dev tools without any problems. (Of course, the same is true for HTML.)

As for comments, well, few people tend to comment their HTML, CSS or JS as extensively as for instance PHP coders do. Also, leaving comments in HTML/CSS/JS is another performance issue since it blows up the files significantly. A good solution would be to include the unminified sources with a theme, e.g.

/templates/THEME/style.css
/templates/THEME/style.original.css
/templates/THEME/main.min.js
/templates/THEME/main.js

I, for instance, minify all CSS and JS in non-s9y projects these days. I don't always do it in s9y projects because it is harder to work with a build script (which takes care of the minification) in a s9y environment. Which is why I still would like a mechanism in s9y that minifys all CSS and JS used in the system.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply