Five Web Development Tricks I Wish I Learned Sooner

I’ve been involved in web development since 1997, when I built my first personal website (a table-based monster, by today’s standards).  In the years since, my skill has advanced considerably — I now build web applications using the object-oriented PHP-based Zend Framework.  In 14 years, you learn a lot of tips, tricks, and shortcuts.  Here are five that have made my life immensely easier (and will help you in your development projects, too).

Include files

Including files, rather than rewriting the same code over and over again, was the first huge time saver I remember learning.  Common parts of a site can easily be reused.  The syntax in PHP for including files is:

<?php include("your_file_path_here.php"); ?>

This is a really simple way to drop AdSense code into WordPress themes (put your adsense code in a separate file, then include it in the theme wherever you want it).  It allows you to segment your code out into smaller, reusable pieces and organize it better, too.  My extensive use of include files in this way made the transition to the MVC (model view controller) structure of Zend Framework much easier.

Local development and local hosts file changes

Learning about this was a real game-changer for me.  For the first few years I spent developing websites, I had to upload every single change I made to the server to see what it did.

Eventually, I learned that I could install WAMP, MAMP, or XAMPP on my machine (I prefer XAMPP) and have a site accessible via my localhost (which really helped speed up development).  But combining a local development environment (using a vhost) with a local hosts file change was amazing to me.  That did two things:

  1. Allowed me to develop a site without having settings saved with the wrong domain (requiring a later find and replace in the db to correct).  Perfect for WordPress installs, where file attachment information is stored using the full url, not the relative path.
  2. Enabled me to make sure a site was functioning properly on a new server before changing the DNS.

Some of you might be scratching your heads still.  I’ll try to clear up any confusion.  Your local hosts file tells your computer not to bother with a DNS lookup for a website, and instead to point that site to the ip address you specify.  I’m on a mac, so to edit my local hosts file, I just open Terminal, then type:

sudo nano /etc/hosts

After entering my password, I can edit the local hosts file.  In it, you just add a line with the ip address and the domain name like this:

127.0.0.1    flipwebsites.com

That tells my computer that when I type “http://flipwebsites.com” in my browser (or any other application that will require a DNS lookup for that address) to just route it to my localhost.

The great thing about this is that you can keep a copy of your site on your local machine, then when you want to make a big change, you can do it locally first.  Once you’ve worked out all the bugs, you can upload the good code and know it will work on your site.

Changing the local hosts file is also important when launching a new site or changing hosting companies.  You can setup the new account, upload all your files, then point your local hosts file to the new server’s ip address.  This allows you to see the site as if you made the DNS change (without having to make the DNS change).  Make sure everything looks the way it should, then flip the switch on the DNS, and you should have a seamless transition.

Firebug inspect element

Firebug (a Firefox plugin) is an indispensable development tool, because it allows you to quickly troubleshoot why a page is displaying (or functioning) incorrectly.  For CSS fixes, nothing beats Firebug’s “inspect element” feature.  You just put your mouse over the element on the page you want more information about, right click it, and select “inspect element.”

From here, you can see which styles are being applied to the element, and which lines from the stylesheet are responsible for those styles.  This plugin speeds up development / troubleshooting more than you could ever imagine.  I’d hate to have to develop without it.

WordPress Shortcodes

I’m a big fan of WordPress for simple sites — it provides a clean admin interface and is super-extensible.  Plugins make WordPress an amazing tool.  Frequently, I’ve wanted to be able to drop some sort of generated output in the middle of a post or page.  WordPress shortcodes make it extremely easy to do.

Here’s an example of a quick plugin with code commenting showing how simple it is to create a shortcode:

/*
Plugin Name: Say Hello
Plugin URI: http://www.flipwebsites.com
Version: v0.1
Author: <a href="http://www.flipwebsites.com/">Eppie Vojt</a>
Description: Just a shortcode example plugin */

// Create the shortcode [say-hello], which calls say_hello()
add_shortcode('say-hello', 'say_hello');

// Code executed by shortcode
function say_hello()
{
    return "Hello.";
}

You can enhance your shortcodes by accepting attributes, so instead of just looking like [say-hello], our shortcode could be [say-hello name=”Eppie”].  Our code to add a name to the Hello message would be:

/*
Plugin Name: Say Hello
Plugin URI: http://www.flipwebsites.com
Version: v0.1
Author: <a href="http://www.flipwebsites.com/">Eppie Vojt</a>
Description: Just a shortcode example plugin */

// Create the shortcode [say-hello], which calls say_hello()
add_shortcode('say-hello', 'say_hello');

// Code executed by shortcode -- note we added $atts as a parameter
function say_hello($atts)
{
    // Turn $atts into key-value pair. Set var key = value
    foreach($atts as $k => $v) $$k = $v;
    return "Hello $name.";
}

There’s a lot more you can do with shortcodes, but I think you can see how incredibly useful they are, and how easy they are to create.

Repositories / Version Control

If you’ve ever accidentally overwritten a file, had a server die (and not had backups of the files), worked with a team of developers, outsourced web development, or wanted to undo some changes you’ve made in the past, you’ll realize that repositories are a God-send.

A repository is a storage system that allows you to save multiple versions of files, along with descriptions for the changes that are made in each variation.  I use Mercurial, and host my repositories online via Kiln, which provides a nice online interface for non-technical users to utilize.

Using Mercurial, I can roll-back code to a previous revision, see a diff compare (which highlights the difference between two files), merge two different versions of a file into one, and much more.  It takes some getting used to, but once you get over the adjustment, you’ll never want to go back to not using version control.

What about you?

Do you have any great web development tips that I missed?  I’d love to hear the tricks you utilize to make your life easier.