Month: March 2017

What is Minification?

Posted on by Mario

css minification

Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.

After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.

Minification Techniques and Tools

Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.

CSS minification

Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.

JavaScript minification

To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.

Example of Minification

The following code block shows an example of plain HTML and CSS:

<html>
       <head>
               <style>
                 #myContent { font-family: Arial }
                #myContent { font-size: 90% }
</style>
</head>

        <body>

                 <!– start myContent –>
                       <div id=”myContent”>
                       <p>Hello world!</p>
                       </div>
                 <!– end myContent –>

        </body>
</html>

Here are the same codes after minification:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Benefits of Minification

  1. As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
  2. Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
  3. Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.

Could Umbrella JS Become the New jQuery?

Posted on by Mario

umbrella-js

When writing for expeditious JavaScript, jQuery is one of the most trusted library. In fact, number of other libraries came out around the same time such as MooTools and Prototype. However, it seems that both of them still fail in surpassing jQuery popularity. Recently, there is new library, introduced as Umbrella JS. It is strongly influenced by jQuery with many similar methods, so you will be convenient in developing with Umbrella. It also offers you with tiny and clear features.

So, can Umbrella JS become the newest JS resource for, web developers, especially frontend developers?

It’s an open source library which basically, you can find many of the same features in jQuery or MooTools. It’s licensed under the MIT License and available for free on GitHub. For example, jQuery uses $(selector) while Umbrella uses u(selector). However, there are differences with some major functions like Umbrella’s ajax method.

You can see a live demo on JSFiddle showing a log output script with UmbrellaJS.

// Just a small logger
var i = 0;
function log(msg){ u(‘pre’).prepend((++i) + ‘. ‘ + msg + ‘\n’); };

u(‘.click’).on(‘click’, function(){
log(“Thanks! There are ” + u(‘input’).nodes.length + ” inputs”);
});

u(‘[name=”name”]’).on(‘change keyup’, function(e){
log(“Hey, ” + (this.value ? this.value : “John Doe”));
});

u(‘select’).on(‘change keyup’, function(e){
log(this.value + ” looks delicious”);
});

u(‘#checkable’).on(‘change’, function(e){
log(“Am I checked? ” + u(this).is(‘:checked’));
});

Moreover, you don’t have to worry that jQuery gurus will have problem picking up this library. Give it a test run as every major function is fully documented on Umbrella’s official website. But, right now, it is still difficult to make Umbrella uproot jQuery’s place in every developer’s toolkit. This is because there is much trust and support behind jQuery.

However, Umbrella does not support the older versions of jQuery while IE8+ supports the old version. In fact, Umbrella’s GitHub page openly states that IE11+ is the most recently supported MS browser, including Edge.

So could Umbrella beat jQuery’s place in developer’s heart? Maybe for right now, it is impossible to beat jQuery. However, Umbrella is totally worth it using in a live project. Actually, this tiny and simple library is perfect for work or for play. In fact, it can fulfill the role flawlessly.