LRR.org Version 5

This month I completed a major software development and web design milestone: launching a completely re-designed and re-built web site for Labrador Retriever Rescue. I’ve been the webmaster for LRR for around eight years, and this is my fourth major revision for the site, both from a design and software standpoint. This revision took about a year to achieve, and I’m thrilled with the end result.

LRR.org Version 5: February 2010---

I had a several high-level goals in mind during the process.

• Make the site more attractive and modern looking
• Organize the content better and make navigation easier and more intuitive for visitors
• Make the page URLs more user-friendly (for example: http://lrr.org/reading-room/why-adopt)
• Create a simple but powerful administrative back-end to allow volunteers to easily add and update content on the site
• Develop the software to be easily extendable with new features in the future

Many of the goals were meant to address shortcomings of the fourth generation of the web site, which was live from early 2007 until early 2010. Version 4 was developed as a custom wiki application in PHP. I decided to develop Version 5 with Ruby on Rails in order to put some structure around the code for future extensibility, abstract out database record management, and to stretch myself to learn new programming techniques.

While the publicly viewable web site is what most people see, the more interesting code lies in the administrative interface that only Volunteers see. Some of the many “behind the scenes” features are:

• Role-based user accounts allowing specific volunteers to edit pages, dogs, users, etc.
• An AJAX group calendar for volunteers and foster homes to record their availability
• A multi-faceted interface for tracking dogs, including their photos, status, foster home journals, stories from adopters, etc.
• An interface for adding and editing web pages using the Markdown language
• Simple interface for adding news updates to the home page
• Interactive image uploader with feedback, and JavaScript image cropping functionality

The experience was very challenging at times, both from a programming and visual design standpoint, and there’s still much left to be done now that the site is launched. I plan to extract a few learning experiences from the project for future blog posts. Until then, enjoy a trip “back in time” via a look at some older LRR.org iterations. Notes: Versions 1 and 2 were created before I became a volunteer and started managing the web site; the Version 2 picture is missing its navigation menu images; many thanks to The Internet Archive’s WaybackMachine.

LRR.org Version 4: January 2007---February 2010

LRR.org Version 3: September 2001---January 2007

LRR.org Version 2: March 2000---September 2001

LRR.org Version 1: December 1996---March 2000

Automatically activating a form field with JavaScript

I’m a firm believer that software developers should do everything possible to make the end-user experience as simple as possible—in other words, make the software do the hard work so I don’t have to. You probably come across negative examples of this all the time without thinking twice: the web form that requires you to enter a date in a specific format; the phone number field that complains when you insert hyphens in your phone number, and the other one that complains when you don’t insert hyphens. Let the user enter their information any way they want (within reason), and let the software figure it out!

Let’s start off easy, with a short code snippet that demonstrates a very easy way to improve the usability of a web site:


// Activate form input that has class of "focus"
$(document).ready(function() {
$('.focus').focus();
})


Normally, web forms are not activated after a page is loaded—the user needs to mouse into the form and click in the first text box before they can begin typing. Including the above simple bit of jQuery JavaScript in my application lets me add the “focus” class to any form field on any page, and that field will automatically be activated when the page loads:

It’s a very small gain, but many small gains like this can significantly improve the overall end-user experience on the web.

Welcome to The Last Pixel

I’ve been maintaining a personal web site since May 19, 1993. At that time, I served my “home page” via a CERN HTTPd server I’d set up for my job at the State University of New York at Stony Brook, and NCSA’s Mosaic was the only web browser in town.

The intent of The Last Pixel is to provide a new home for my technology and software development posts, so that my personal blog can remain just that—personal. On The Last Pixel you can expect to find articles on software development, systems administration practices, management insights, and a variety of other technology-related topics. In addition to providing me with an outlet for these thoughts, I also hope that some of you find something useful here!