Chad Ritchie

Graphic Designer, Front-End Web Developer

Chad Ritchie

Web standards

By

“Web standards have advanced so much that it’s now possible to build almost anything using HTML, CSS, and JavaScript—almost anything.”

Excerpt From: Keith, Jeremy. “HTML5 for Web Designers.” A Book Apart, 2010-08

Simple Gzip setup

By

Speed up your web sites load time, enable Gzip compression.

What is Gzip?

Gzip is a compression algorithm. If you are dealing with uncompressed data, you can save lots of space and bandwidth by gzipping your files. A jpeg or png image file is already compressed, so, compressing it again with gzip won’t save you much. But if you have plain text, xml or html files, then you are in for a treat. Most people never think of it, because image files have always been so much larger than the HTML files themselves. But more and more, HTML files are growing larger, with more complicated page layouts and things like JavaScript(s), script libraries, CSS files, etc. Now when you think about what HTML is, most of the HTML file itself is HTML tags, the same tags used over and over again. This makes HTML one of the best things to compress. You can easily compress a 40K file down to 3K.

Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.

The .htaccess version

There are several methods to setup Gzip, but the method I prefer is to enable through the Apache server’s .htaccess file.
It is simple to setup.

Copy the following code and paste in the .htaccess file.

# BEGIN GZIP

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

# END GZIP

After you have enabled Gzip, use this tool to check to see if your server is sending out compressed data.

Check out the results from my Gzipped site.

The php version

Another option would be to add the follow code to the top of the WordPress header.php file.

<?php ini_set('zlib.output_compression', 'On'); ini_set('zlib.output_compression_level', '1'); ?>

Understanding Code Comments

By

Code commenting is the practice of writing short, normally single-line notes throughout your code.

These notes are called comments. They explain how your program works, and your intentions behind it.

Comments don’t have any effect on your program, but they are extremely helpful for others reading your code.

Comments in HTML or PHP pages (outside of the PHP code) look like this:

<!-- comment here about what is going on -->

Comments in CSS files look like this:

/* comment here about a style */

Comments inside of PHP code look like this:

<?php the_excerpt(); // Show excerpt and not full post content ?>

Or like this:

<?php /* This is my special hack.
         It's so special it requires a comment that spans multiple lines! */
my_special_hack();
?>