XP-rience

Minification is the process of removing all unnecessary characters from source code such as
white space characters, new line characters, comments and block delimiters
without changing its functionality. [read more...]

Minified code reduces the amount of data that needs to be transferred through the web server (bandwidth saving).
It may also be used as a kind of obfuscation.

My favorite minification tool is YUI Compressor.
Mostly for CSS (Cascading Style Sheets) and JS (JavaScript).

Let us taka a look what happen when a simple code get minified.

JavaScript - Original Code

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}

function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}

JavaScript - Minified

function startTime(){var b=new Date();var d=b.getHours();
var a=b.getMinutes();var c=b.getSeconds();a=checkTime(a);
c=checkTime(c);document.getElementById("txt").innerHTML=d+":"+a+":"+c;
t=setTimeout("startTime()",500)}function checkTime(a){if(a<10){a="0"+a
}return a};

CSS - Original Code

body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}

CSS - Minfied

body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}

Just to share here, since YUI Compressor don't provide any GUI, I've created one with Java Swing. It has been compiled together with yuicompressor-2.4.2.jar.
You need to have Java installed in order to run this executable JAR.


Download (MD5 : 210176c93d331c50dc19a2dda0ae1c89 JsCssMin.jar)

Below are the example of a simple auto-refresh webpage using meta refresh and javascript. Meta refresh is a method of instructing a browser to automatically refresh the web page with a given time (second). While javascript is used to make the counter running.

Just make sure both bold value is same, 10 for example.