Smaller – Batch minify HTML, PHP, CSS and JavaScript on the Mac

Honestly, I was looking into JavaScript, HTML & CSS minifiers for my production usage, definitely my preferences were not to visit online-minifier’s website every time I need some minification, something has faster usability, something sells soft obfuscation (‘Packer’ is slow!), something does the work in a batch, merges all in a one (save HTTP requests!), something replaces the original (I don’t want renaming the file with “.min” etc.).

You know, some unplanned tweaking in the CSS/JS occurs at the last moment to/after deploy and non-automated minification of your static files really sucks that time. Better we may use some kind of automatic or semi-automatic automation for those repetitive tasks to buy some time.

Something about the other minifiers bothered me that, those were not ready for production usages like elimination of conditional HTML statements (IE hacks!), non-batch, some were only for JS or CSS etc.

Later I found Smaller, I drag and drop my entire template/layout directory and have my contents minified replacing the original, found handy in my case and a recommended app for Mac.

BTW, I found some backward compatibility issue with it and was not being able to use their latest version (1.3.5) in my Snow Leopard 10.6.8. I call for a support, the lead dev Chen Luo promptly responded “Smaller 1.3.5 was built with Xcode 4.4 but Apple removed OS X 10.6 SDK since then”.  So, 1.3.4 is working for me and haven’t missed much from 1.3.5.

Disclosure: I have written this review in exchange of a license of “Smaller”.

Precaching images with JavaScript

Most of the time images on your page take extra seconds to download from web server. Again if you want to load some images on some user action, you most likely want the fast image load i.e. instant with the user clicks..
Or in case you want to create an image gallery viewer by clicking ‘Next’ / ‘Previous’, you usually don’t want waiting your user for some extra seconds for each image loading.

JavaScript helps you to load images into the browser’s memory cache without displaying them.This technique is the hilarious precaching images. And this technique preload the images into the browser cache when the page initially loads.

In order to precache an image we need to construct an image object in memory. Image object created in memory is dissimilar from the document image object aka <IMG>tag.

Here we go

var myImage = new Image(width, height)

Parameters to the constructor are the pixel width and height of the image we want to precache.
So the image object exists in memory. Now you can assign a filename or URL to the src property of that image object:

myImage.src = “someImage.jpeg”

Such above statement assigning image src loads the image into the browser image cache.

Now you can use this cached image wherever you like instantly.
You may assign this precached image src property to the actual document image tag src property.

document.images[0].src = myImage.src

Here is the detail example:

<title>Image viewer</title>
<script type="text/javascript">

//precache four images
image1 = new Image(480, 320)
image1.src = "1.jpg"
image2 = new Image(480, 320)
image2.src = "2.jpg"
image3 = new Image(480, 320)
image3.src = "3.jpg"
image4 = new Image(480, 320)
image4.src = "4.jpg"

//loads an image from cache
function loadFromCache(img){
	document.imagePlaceHolder.src = eval(img + '.src')


<div align="center">
<img name="imagePlaceHolder" src="1.jpg">


<a href="#" onClick="loadFromCache('image1')">Image1</a>
<a href="#" onClick="loadFromCache('image2')">Image2</a>
<a href="#" onClick="loadFromCache('image3')">Image3</a>
<a href="#" onClick="loadFromCache('image4')">Image4</a>


In the above example four images are precahced into browser memory and used in the page <IMG> tag src property oncilck on the four links instantly updates the document <IMG> tag src. Try the example and feel the difference in image loading. 🙂

Download this example code with some sample images