Tag: minify

TallyStick, ViMbAdmin and a CSS/JS Minify Tool

It’s been a busy few weeks:

  • We launched TallyStick – a time tracking and billing tool – two weeks ago and have pushed some bug fixes and updates. So far so good!
  • IXP Manager, an open source web application to assist in the management of Internet Exchange Points (IXPs) that we built over at INEX, got a complete UI refresh thanks to Twitter’s Bootstrap;
  • Similarly, our open source email domain / mailbox / alias management tool called ViMbAdmin got a major version bump, lots of new features and a UI refresh also;
  • We also just open sourced (BSD) our (admittedly small) Minify tool which makes minifying, bundling and versioning the manner JS and CSS files that make up websites these days a breeze. Check it out on GitHub: https://github.com/opensolutions/Minify.

“Go Faster” Websites – Introducing Minify

We’ve been minifying and bundling CSS and JS for years to ensure quick page loads of the applications we build. We’ve now generalised, documented and packaged the tool we use for this and released it under a BSD license so others can benefit.

Most web developers know that including lots of JS and CSS files in their sites slow page load times down. Most also know that these files should be minified and bundled into one file on production sites. Most developers don’t do this though. It’s a lot of extra steps in putting your new changes live.

Also, using CDNs or setting expiry times into the future for mostly static files such as CSS and JS also significantly improves page load as clients will grab these files once and use their local cache until their expire. This also poses issues for web developers that is easily overcome by versioning these files – literally adding a version number to the bundles – for example min.bundle-v6.css would be version 6 of the CSS minified and bundled file.

We’ve been doing both of these for a long time with the sites we build. We’ve now generalised, documented and packaged the tool we use for this and released it under a BSD license so others can benefit. See our page on GitHub to download this tool and for examples of its use:

https://github.com/opensolutions/Minify

This tool will:

  • automatically find all CSS/JS files in a given directory named xxx-blah.css where xxx is a three digit ordering / sequence number;
  • minify these files and create a single file bundle including them in the correct order;
  • automatically generate template include files allowing production / development mode (i.e. use individual CSS/JS or bundles based on an application option);
  • versioning for those using CDNs, future expiry dates, etc to ensure clients load fresh JS/CSS bundles.

If you use it, please drop us a note to let us know how you get on!Â