Frequently Asked Questions: December 2011

Friday, December 30, 2011

HTML Printing & Page Breaks

<html>
<head>
<style>
@page { size 8.5in 11in; margin: 2cm }
div.page { page-break-after: always }
</style>
</head>
<body>
<div class="page">Page 1 Here</div>
<div class="page">Page 2 Here</div>
</body>
</html>

Thursday, December 22, 2011

Optimize Your Site With GZIP Compression

In Apache, enabling output compression is fairly straightforward. Add the following to your .htaccess file:


# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Apache actually has two compression options:

mod_deflate is easier to set up and is standard.
mod_gzip seems more powerful: you can pre-compress content.

Deflate is quick and works, so I use it; use mod_gzip if that floats your boat. In either case, Apache checks if the browser sent the "Accept-encoding" header and returns the compressed or regular version of the file. However, some older browsers may have trouble (more below) and there are special directives you can add to correct this.
If you can't change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top:

In PHP:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

We check the "Accept-encoding" header and return a gzipped version of the file (otherwise the regular version). This is almost like building your own webserver (what fun!). But really, try to use Apache to compress your output if you can help it. You don't want to monkey with your files.

Verify Your Compression

Once you've configured your server, check to make sure you're actually serving up compressed content.

Online: Use the online gzip test to check whether your page is compressed.
In your browser: Use Web Developer Toolbar > Information > View Document Size (like I did for Yahoo, above) to see whether the page is compressed.
View the headers: Use Live HTTP Headers to examine the response. Look for a line that says "Content-encoding: gzip".

Reference: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

Creating image thumbnails using PHP

Sometimes restricting images size is required. Following function is very useful to create images of certain sizes on the fly

function createThumbs($source, $dest, $requiredWidth, $requiredHeight, $fileType='')
{
    $size = getimagesize($source);
    $givenWidth = $size[0];
    $givenHeight = $size[1];

    if ($givenWidth > 800)
    {
        $requiredRatio = $requiredWidth / $requiredHeight;
        $middleWidth = ceil($givenHeight * $requiredRatio);
        if($middleWidth>$givenWidth){
            $requiredRatio = $requiredHeight / $requiredWidth;
            $middleHeight = ceil($givenWidth * $requiredRatio);
            $middleWidth = $givenWidth;
            $y = ceil(($givenHeight - $middleHeight)/2);
        }
        else{
            $middleHeight = $givenHeight;
            $middleWidth = ceil($givenHeight * $requiredRatio);
            $x = ceil(($givenWidth - $middleWidth)/2);
        }

        $new_im = imagecreatetruecolor($requiredWidth,$requiredHeight);

        $extention = strtolower(substr($source, strlen($source)-3, strlen($source)));
        if ($extention == "jpg" || $extention == "jpeg") { $im = imagecreatefromjpeg($source); }
        elseif ($extention == "gif") { $im = imagecreatefromgif($source); }
        elseif ($extention == "png") { $im = imagecreatefrompng($source); }
        else
        {
            //echo("ERROR: Unknown image source file format");
            return;
        }

        imagecopyresampled($new_im,$im,0,0,$x,$y,$requiredWidth,$requiredHeight,$middleWidth,$middleHeight);
        imagejpeg($new_im,$dest,85);
    }
}