Decompress/Unzip Web Content with Content-Encoding: gzip (using PHP - file_get_contents() and gzinflate())

If you are using file_get_contents() to grab content from the web and process using PHP, you may bump into web contents that are compressed using gzencode.

Here's a solution to decompress those content (simplified for easy reference):

<?php $qdata = array('http' =>     array(      'method' => 'POST',      'user_agent'=> $_SERVER['HTTP_USER_AGENT']     )    ); $context = stream_context_create($qdata); $data = file_get_contents("http://www.urltograbmystuff.com", false, $context); $u = gzinflate(substr($data,10,-8)); . . . ?>

The trick is to use gzinflate() and do remember to change the URL to your target web address. Process your $u (string that contains the HTML codes of the target) afterwards.

Read More »

Compress External Javascript with gzip in PHP

If you are using an external Javascript, you can compress the content before sending it to the browser using PHP.

Here's the solution (simplified for easy reference):

<?php error_reporting(0); // make sure it is not reporting any warning that will ruin the output $js = <<<MYJAVASCRIPT . . . MYJAVASCRIPT; // Optional: The following three lines of extra codes are to downsize the Javascript further //$js = preg_replace('|//[^\r^\n]+(\r\n)|','',$js); // Remove Javascript Comment PC version //$js = preg_replace('|//[^\n]+(\n)|','',$js); // Remove Javascript Comment non-PC version //$js = preg_replace('/[\r\n\t]/','',$js); // Remove all the newlines and tabs $compressedJS = gzencode($js,6); // compression ratio = 6 header("Content-type: application/x-javascript"); header("Content-Encoding: gzip"); echo($compressedJS); ?>

You can check the final compressed size easily using Google Chrome Inspect Element (Network) tool:

Before Compression

After Compression

Please ignore the latency as it varies every time I run the page.

If your javascript/HTML/css size is huge, you can use this method to downsize the codes so that visitors from slow internet connection can benefit from this optimization.

Read More »

Javascript to Dynamically Change the Image Source of an Element for IE

Just like the problem of changing background color for IE via Javascript, changing the image source requires special treatment as well.

Here's the solution (simplified for easy reference):

Javascript: var ie = (navigator.userAgent.indexOf("MSIE") != -1); if (!ie) {    document.getElementById('MyImageID').src = 'myImageSrcName.jpg'; } else {    document.getElementById('MyElemID').innerHTML = '<img src="myImageSrcName.jpg">'; } HTML: <span id="MyElemID"> <img src="original.jpg" id="MyImageID"> </span>

This is a simple example of how to change an image source from original.jpg to myImageSrcName.jpg dynamically across major browsers.

Read More »

Javascript to Dynamically Change the Background Color of an Element for IE

You can change the background color easily in Chrome, Safari and Firefox.

But for IE, you cannot change it using the easy way like the other browsers are doing it.

Here's the solution (simplified for easy reference):

var ie = (navigator.userAgent.indexOf("MSIE") != -1); if (!ie) {    document.getElementById('MyElemID').style.backgroundColor = "#AABBCC"; } else {    document.getElementById('MyElemID').style.backgroundColor = "rgb('AA','BB','CC')"; }

Therefore, if you want to accommodate for all browsers, one needs to think of color as RGB components. You either break up the RGB component to suit IE's requirement or combine RGB components into a string to suit the need of Chrome, Safari or Firefox.

Updated on 4th of August 2013:
It is better to use rgb(170,187,204) instead of rgb('AA','BB','CC') stated earlier.

Read More »