It's great that EE provides a simple and robust contact form. However, as shipped the contact form's interactive presentation is not very modern-- you get temporarily redirected to a separate success page after you've submitted the form, then you get redirected back to your site. This provides a user experience which is not as responsive as I wanted, and didn't match the look and feel of the rest of my site.

There are some great custom form addons for EE, including the flexible and powerful Freeform from Solspace. Freeform does all kinds of useful things, including saving form submissions in the database. But what if all you want is a simple e-mail contact form that's more responsive and modern?

AJAX-ify it

Through the magic of JQuery and AJAX, you can AJAX-ify EE's built-in contact form to get a more responsive user experience. And you can do it with a minimum of hassle. All you'll need is some fresh JQuery and CSS to go with your ordinary EE contact form in your template. The approach I'll show you uses EE's regular contact form tag {exp:email:contact_form} inside a template as you normally would, but it uses JQuery to submit the form through AJAX instead of as a regular HTTP Post. So instead of displaying success or failure on a separate page before redirecting back to your site, you stay on your site's page the whole time.

After posting the form, the JQuery script receives EE's success or failure page as an HTML AJAX response which it parses to determine if the submit was OK or not. Finally it displays a success or failure message right on the original page. The result is a snappy, modern and seamless feel that maintains your site's design! Here is an example of the Javascript code you'll need, below. You'll combine this with EE's contact form template to generate your HTML form. 

Here's the Javascript code. Save this script as "contact-form-ajax.js" (or change the name of the script in the sample EE template shown later in this post):

NOTE: be sure to visit my Github repository to get the latest version of the script and EE template!

// This software is licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
// Copyright (c) 2012 High Integrity Design, LLC.    http://www.highintegritydesign.com
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
// and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or substantial portions
// of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
// TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
// CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.
// *************************************************************************************************************
//
// convert the standard ExpressionEngine contact form to use AJAX.
$(document).ready(function()
{
/* helper function to display a message describing the results of the form submit */
function displayAjaxMessage(message)
{
  $("#ajax-message").html(message);
  $("#ajax-message").fadeIn(1000);
}

/* attach a submit handler to the contact form. By default, EE generates the ID "contact_form" */
$("#contact_form").submit(function(event)
{
  /* stop the contact form from submitting normally */
  event.preventDefault();
 
  /* hide any left over message from a previous submit */
  $("#ajax-message").hide();

  /* send the form data using post and check the results for any errors*/
  $.ajax(
  {
   url: "/",
   type: "post",
   dataType: "html",  
   data: $(this).serialize(),
  
   /* If there was some kind of an AJAX error, display an appropriate message or take some other action of your choice */
   error: function(jqXHR, textStatus, errorThrown)
   {
    displayAjaxMessage("Sorry, there was an error submitting your form. Please call me at 999-999-9999 and I'll be glad to assist you.");
   },

   /*  parse the HTML returned by EE to see if they forgot to enter an email address or a message.
    If so, the HTML will contain a specific error string we can match, and then we can display our own message */
   success: function(html, textStatus, jqXHR)
   {
    if (html.match(/<title>Error<\/title>/))
    {
     var error = $(html).find('ul li:first').text();
     if (error == "A valid sender email is required")
     {
      displayAjaxMessage("Please enter your email address.");
     }
     else if (error == "Email Message is Required")    
     {
      displayAjaxMessage("Please enter a message.");     
     }
    }
    else
    {
     displayAjaxMessage("Thanks for contacting me!");
    }
   }

  });
});
});

And here is a simple EE template based on the standard EE contact form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->     
   
   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://www.yoursite.com/js/contact-form-ajax.js"></script>
     
     
      <style>
  body
  {
   width: 30em;
   margin: 2em auto;
  }
  #ajax-message
  {
   border: 1px solid #333;
   background-color: #FFEAEA;
   padding: 1em;
   display: none;
  }
</style>
<title>AJAX EE Contact Form Test Page</title>
</head>
<body>
{exp:email:contact_form user_recipients="no" recipients="you@yourwebsite.com" charset="utf-8"}
        <h2>Support Form</h2>
        <p id = "ajax-message">
        </p>
        <p>
                <label for="from">Your Email:</label><br />
                <input type="text" id="from" name="from" size="40" maxlength="35" value="{member_email}" />
        </p>
        <p>
                <label for="subject">Subject:</label><br />
                <input type="text" id="subject" name="subject" size="40" value="Contact Form" />
        </p>
        <p>
                <label for="message">Message:</label><br />
                <textarea id="message" name="message" rows="18" cols="40">
                        Support Email from: {member_name}
                        Sent at:  {current_time format="%Y %m %d"}
                </textarea>
        </p>
        <p>
                <input name="submit" type='submit' value='Submit Form' />
        </p>
{/exp:email:contact_form}
</body>
</html>

What you need to change

This post is more of a tutorial-- the sample EE template and JQuery AJAX script above are meant to be a good starting point which you can modify to better suit your needs. You'll need to modify the template to include your email address and you may want to change the location of the JQuery script, etc. You may also want additional or fewer form fields in your contact form, and you'll want to modify the CSS to match the style of the rest of your site. For my site, I chose to keep the form ultra-simple and have only a message field.

Which fields are required?

It wasn't entirely clear to me from the documentation, but EE's built-in contact form requires the "message" and "from" fields to be filled in if those fields are present in your form. And, there's no option to make other fields required. That's a limitation of using EE's built-in form, but again this solution is for a simple contact form. Solspace's Freeform addon allows you to specify additional required fields. For a longer discussion of required fields in EE's built-in contact form, see http://expressionengine.com/forums/viewthread/207460/.

Same origin policy problem

An earlier version of my script would work fine when I visited my site using the "www" prefix, but the contact form didn't work if I left out the "www". What was going on? It turns out I got bit by Javascript's "same origin policy protection". This is a built-in security measure that disallows AJAX requests to a site that's different than where the originating request comes from. Sounds reasonable, right? Well it is-- except in my case http://www.highintegritydesign.com and highintegritydesign.com were considered different sites! The result was the AJAX request failed.

This issue has been fixed in the current version of the script by using a relative path of "/". But, I decided to direct both URL's to go to http://www.highintegritydesign.com anyway. As a helpful fellow pointed out on my StackOverflow post about this, it's a good idea to normalize URL's for search engine purposes anyway. Here's what that section of my .htaccess file looks like in case you want to normalize URL's for your site:

	RewriteCond %{HTTP_HOST} !^www\. [NC]
	RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Other things that could go wrong

The script parses the HTML page returned by EE to see if the submit succeeded or failed. It does this by looking for specific text patterns in the HTML returned through AJAX. So, if Ellis Labs changes what their HTML or error text looks like for their standard contact form, you would have to update the script to parse their new HTML page. This is something to be aware of if you use this approach. However I doubt they would have a reason to change what their contact form returns, and the script would be easy to change if they did.

Also, you'll notice the script contains an error function that executes in case the AJAX request fails for some reason. In that case I decided to encourage the visitor to call me. But you could take another approach such as attempting the AJAX request again or providing a simple mailto link, for example.

Troubleshooting 

If the script isn't working on your site for some reason, it's very helpful add some console.log() statements to see what is going on. For example in the success() function you could add console.log(html); to see what the HTML page returned from EE looks like. Then you can open up the console in Firefox or Chrome to see what happened. If you haven't used console.log() before, it's a great debugging tool!

Why not AJAX-ify Solspace Freeform instead?

You could absolutely do this, and Fabian Socarras has a slide set showing you how. For my site, I wanted a very simple contact form. I wanted to avoid installing another addon, and I didn't want to save the form submissions in the database. So I opted to use EE's built-in contact form instead. However if you have a more complicated form, need more required fields, and/or want to save the submitted data, using Freeform with AJAX would be a great solution.

Credit where credit is due

I can't take credit for coming up with this idea-- EE community member Rob Sanchez stepped up and pointed me in the right direction on EE's forum which helped me tremendously in understanding how AJAX works. Thanks a lot Rob! You can view the thread here.

Your turn

OK, now you know everything you need to implement your own AJAX contact form in EE-- and it wasn't very hard! What about using this same approach for other interactions in EE such as a comment submission form? The good news is you can AJAX-ify your comment submission form in the same way. It's a bit more tricky because there are several error messages you can get back from EE which you have to deal with. But, I've done it for my site-- enter a comment to see how it works.

Now it's your turn-- take it away, implement something cool with EE and AJAX, and post back here so we can see it!

In this article, I'll continue my discussion of Phing by presenting you with a finished build.xml file you can customize for your own projects. With a build.xml file, you'll be able to automate minification of Javascript and CSS files so you don't have to type long command lines every time you want to run the minifer. But what is a build.xml file and how does it work?

how Phing uses a build.xml file

Phing is a PHP program you run from a command line in Terminal, that reads and interprets an XML file in order to perform menial tasks you don't want to type over and over! You write a build.xml file which tells Phing what to do, and Phing will read that file looking for tasks to perform. Phing can intelligently select sets of files to work on, manipulate those files, and perform many types of tasks on them.

Phing building blocks

The main building blocks for Phing are projects, targets, types and tasks. You define these in a build.xml file, which Phing reads in order to know what to do:

• a project is required, and it's simply a container with a name that wraps all the rest of the stuff in your build.xml file. You get to choose one project name for the build file.
• a target is a name you choose for a set of logically-related tasks you want Phing to do. For example, you might want Phing to make a separate output folder for your compressed files before running YUI Compressor on the original files. You could put both of these tasks into one target. You can have several targets in one build file. For example you might want one target for minification and another target for creating non-minified, debug output.
• a type holds a value or collection of values that you can perform tasks on. One of the most common types is a "fileset", which defines a set of files you want to operate on.  For example, you might define a fileset for all of your CSS files so you can compress them all at once.
• a task defines a specific action you want to perform. For example, you might have a task that runs YUI compressor.

I think the easiest way to explain how a build.xml file works, is to present a finished one and then talk about what each chunk of code does. The good news is, I've done most of the work for you and you only have to change a few things to have a working build.xml for your own projects. So without further ado, here is the build.xml file:

<?xml version="1.0" encoding="UTF-8"?>

<project name="MyProject" default="all" basedir="./">
    <!-- ============================================  -->
    <!-- Modify the following lines for your project:                       -->
    <!-- ============================================  -->
    <property name="yui-jarfile" value="/usr/local/bin/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar" />
    <property name="js-source-directory" value="./js-source" />
    <property name="js-output-directory" value="./js-output" />
    <property name="css-source-directory" value="./css-source" />
    <property name="css-output-directory" value="./css-output" />

    <!-- ============================================  -->
    <!-- Target: clean-css                       -->
    <!-- ============================================  -->
    <target name="clean-css">
        <echo msg="**** Creating output directory for CSS files." />
        <mkdir dir="${css-output-directory}" />
        <echo msg="**** Cleaning output directory." />       
        <delete>
         <fileset dir="${css-output-directory}">
          <include name="*.css" />
         </fileset>
        </delete>
    </target>

    <!-- ============================================  -->
    <!-- Target: clean-js                       -->
    <!-- ============================================  -->
    <target name="clean-js">
        <echo msg="**** Creating output directory for Javascript files." />
        <mkdir dir="${js-output-directory}" />
        <echo msg="**** Cleaning output directory." />
        <delete>
            <fileset dir="${js-output-directory}">
                <include name="*.js" />
            </fileset>
        </delete>
    </target>

    <!-- ============================================  -->
    <!-- Target: clean-all                       -->
    <!-- ============================================  -->
    <target name="clean-all" depends="clean-css, clean-js">
    </target>

    <!-- ============================================  -->
    <!-- Target: css                       -->
    <!-- ============================================  -->
    <target name="css" depends="clean-css">
        <echo msg="**** Minifying CSS files." />
        <foreach param="filename" absparam="absfilename" target="minify-css-file">
            <fileset dir="${css-source-directory}">
                <include name="*.css"/>
            </fileset>
        </foreach>
    </target>
<target name="minify-css-file">
  <exec command="java -jar ${yui-jarfile} -o ${css-output-directory}/${filename} ${css-source-directory}/${filename}" checkreturn="true" />
</target>

    <!-- ============================================  -->
    <!-- Target: js                       -->
    <!-- ============================================  -->
    <target name="js" depends="clean-js">
        <echo msg="*** Minifying Javascript files." />
        <foreach param="filename" absparam="absfilename" target="minify-javascript-file">
            <fileset dir="${js-source-directory}">
                <include name="*.js"/>
                <exclude name="*.min.js"/>                               
            </fileset>
        </foreach>
    </target>
    <target name="minify-javascript-file">
  <exec command="java -jar ${yui-jarfile} -o ${js-output-directory}/${filename} ${js-source-directory}/${filename}" checkreturn="true" />
    </target>

    <!-- ============================================  -->
    <!-- Target: debug-css                                 -->
    <!-- ============================================  -->
    <target name="debug-css" depends="clean-css">
        <echo msg="**** Copying CSS source files to output directory." />
        <copy todir="${css-output-directory}">
            <fileset dir="${css-source-directory}">
                <include name="*.css"/>
            </fileset>
        </copy>
    </target>

    <!-- ============================================  -->
    <!-- Target: debug-js                                 -->
    <!-- ============================================  -->
    <target name="debug-js" depends="clean-js">
        <echo msg="**** Copying Javascript source files to output directory." />
        <copy todir="${js-output-directory}">
            <fileset dir="${js-source-directory}">
                <include name="*.js"/>
                <exclude name="*.min.js"/>               
            </fileset>
        </copy>
    </target>

    <!-- ============================================  -->
    <!-- Target: debug-all                                 -->
    <!-- ============================================  -->
    <target name="debug-all" depends="clean-all, debug-css, debug-js">
    </target>

    <!-- ============================================  -->
    <!-- Target: all                                 -->
    <!-- ============================================  -->
    <target name="all" depends="clean-all, css, js">
    </target>
</project>

modify the top section for your project

At the top of the file, you'll see a section that says Modify the following lines for your project. This section tells Phing where to find the files you want to work with. You'll need to modify five lines in that section to point to the paths to your files. The file paths tell Phing:

• where to find the YUI Compressor executable jar file
• where your original, uncompressed Javascript files are
• where you want the minified Javascript output files to be placed
• where your original, uncompressed CSS files are
• where you want the minified CSS output files to be placed

These are the only lines of code you'll need to modify, in order to have a working build.xml file! If you followed along in Part 1, hopefully you'll know where the path to the YUI Compressor jar file is on your system. If you don't remember where it is, you can use Spotlight to search for the name of the jar file. Mine is at /usr/local/bin/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar, since I installed it in /usr/local/bin as Part 1 outlines.

As you can see, I specified the complete path to YUI Compressor in the build.xml file. That way, you can store the build.xml file anywhere on your system and it will know where to find YUI Compressor. I like to store my build.xml file one level above the folders that contain my Javascript and CSS source files.

I made the paths to the other folders relative. For example the line that says <property name="js-source-directory" value="./js-source" /> means "starting from the current folder, go down one level to a folder called js-source and look for the Javscript source files there."

It's a good idea to define separate folders for your original source files and your minified files, so you don't accidentally overwrite something you didn't intend to! Plus it keeps things nice and tidy. You are using revision control in case you mess up and overwrite a file, aren't you?

the "clean" targets

The clean-css, clean-js, and clean-all targets delete any output files from previous runs of Phing. I separated these out so you can choose to clean up only the CSS files or Javascript files independently, according to your needs. Here you can see how I used the Phing "depends" syntax to define that clean-all will first run the other cleaning tasks. In fact, that is all it does!

These targets will also create folders for their output files if those folders don't already exist. You can see how they define a fileset to work on. For example, clean-css defines a fileset "*.css" so all of the minified CSS files generated previously will get deleted. To delete all previously minified files, just type the following command (note that you need to be in the folder in Terminal where your build.xml file is):

phing clean-all

the "css" target

This task minifies all CSS files in the CSS source folder (which is defined by the property name at the top of the file called css-source-directory. It will output the minified files to the location specified by the property name css-output-directory. Remember, you need to change the css-source-directory and css-output-directory paths to point where you want them! To minify all your CSS files at once, simply type:

phing css

Now wasn't that easy? You can see the benefit of using Phing to automate menial tasks like running the minifier on a bunch of files!

the "js" target

This task minifies all the Javascript source files found in the source folder defined with js-source-directory, and sticks the minified files into the js-output-directory. It's very similar to the css target, except it builds its fileset from your Javascript files. To run it, just type:

phing js

why no .min?

One thing you'll notice is my build.xml does not add the suffix ".min.js" to the minified Javascript files (which a lot of people do). So why did I do it that way? I decided to break with tradition because I want the files named the same whether they are minified or not. Then I can SFTP them to my site, going back and forth between minified and non-minified code (for debugging) without changing any HTML that points to those files.

so what about debugging?

If you look at minified Javascript or CSS, it's not very readable. So if you have a bug you'll want to work with your original uncompressed files so you can follow along in Firebug. My build.xml makes this easy by providing three targets, debug-css, debug-js, and debug-all. All these do is copy over the original source files to the folder you designated to hold the minified files.

Then, as mentioned above you can SFTP those files over to your site and debug to your heart's content with fully commented source code. Yay! When you've fixed the bug just run Phing again to re-compress your files and SFTP them to your site once more.

so why no SFTP target?

OK, you got me. I wish there was an SFTP task type for Phing, but unfortunately as of this writing there is no built-in SFTP task. There is an SCP task type, but my web host doesn't support SCP. That's really too bad. It would be great if I could include an SFTP task as part of my minification targets so all the files would automatically get copied over to my live site.

There may be an extension or a trick for Phing which provides SFTP, but if so I haven't found it yet. I'll probably end up with an exec SFTP command line in my build.xml file, but that's tricky to automate since SFTP requires authentication (and a password). Stay tuned for me to come up with a solution, or better yet, let me know how you solved it!

the "all" target

All this target does is clean up all previously generated files, then it minifies everything. Super easy and you can see how powerful it is to use the "depends" syntax in Phing. Hint: you can get the same effect just by typing phing and nothing else! To run it, just type:

phing

Phing can do a lot more

Well, that's pretty much it for my build.xml file. Phing is a very powerful build automation tool, and I've barely scratched the surface of what it can do. For example you can have your build script automatically run tests, and much more. Check out the Phing documentation and you'll see what I mean!

other compression tools

Finally, there are other great minification tools besides YUI Compressor. I actually use Compass most of the time rather than YUI Compressor. Compass is a fantastic tool that does much more than compression. It actually adds new syntax to CSS and pre-compiles it so you can do things like use true inheritance! I don't think I could get along without it. But that's a whole other post.

I hope this series of posts helps you learn and master Phing, creating your own build.xml files that do amazing things. When you do, please come back and share with the rest of us!

More importantly, research shows that real people hate waiting for slow page loads, especially on mobile devices. A lot of people simply abandon websites with slow load times. But, do you really need a study to prove that? I have little patience myself for websites that load slowly!

measuring page load speed

Using Chrome's developer tools or Firebug in Firefox, you can easily see just how much time it takes to load all that CSS and Javascript. You'll probably find like me, that it takes a significant chunk of time to load these resources.

So is there an easy way to reduce the load time on all those scripts and CSS? And will it really make a difference? The answers are Yes, and Yes! Using YUI Compressor, you can easily reduce the size of these assets by 50% or more, making a real-world noticable difference in page load times.

Minification tools such as YUI Compressor remove all unnecessary characters from programming code without changing how the code works. Stuff like white space characters and comments which add readability but are not required for the code to run. Minification tools will often change the names of programming variables, function names etc to be shorter as well.

Taking a look at Google's best practices for page load performance, minification of both Javascript and CSS files are listed as major ways you can improve your site's load speed. 

but does it really make a difference?

I tested load times for my home page using Firebug, gathering timings both before and after minification of javascript and css. I ran each test five times and took the average, clearing the browser cache between each run. My site doesn't use that much Javascript or CSS, and I was still able to reduce load times by .67 seconds which is a 24% savings. This is basically free speed. On a more complex site the savings would be significant.

but isn't it a hassle?

I knew I should have learned to do this a long time ago. But I didn't because I thought it would be too much hassle. But I discovered that using a build automation tool like Phing along with YUI Compressor, it's quite easy. There are several steps to set things up, but none of them is particularly complicated so I hope you'll give it a try. If you get stuck feel free to email me or enter a comment describing what isn't working, and if I have time I'll help!

I'm going to focus on Mac OS X for this article since that's what I use most of the time. But, much of it will apply if you use Windows as well. In part one, we'll install Phing and YUI Compressor. In part two, we'll write a Phing build script that automates the javascript and css minification tasks for us.

what is Phing?

Phing is an open-source build automation tool that executes tedious build tasks based on rules you give it in a build script. The kind of tasks you don't want to type manually over and over. For example, you could tell Phing to minify all Javascript files in your 'source' folder and save the minified Javascript files to a 'deploy' folder. You could even tell Phing to then FTP all of the minified files to their place on the server.

what is YUI Compressor?

YUI Compressor is a great open-source tool that minifies both Javascript and CSS. That's what we'll cover in this article. However, there are other good compression tools out there. My intention is for you to feel comfortable enough with Phing to explore it and write your own build script that uses whatever tools you like.

you'll need to use Terminal

Terminal is an OS X application which allows you to interact with your system by typing command lines. If you haven't used it before, don't be afraid because it's not a big deal. Phing and YUI Compressor run from a command line, so you'll need to use Terminal in order for these tools to work.

you need PHP, Pear and Java too

If you're using OS X, you're lucky because PHP and Pear are all installed already. Phing requires PHP to run. And Pear is a PHP tool which installs additional PHP components that are not on your system by default (and it's what we need to install Phing). Finally, YUI Compressor requires Java to run. Java is already installed on most versions of OS X, but it looks like it may not be installed on OS X Lion. So I'll cover installing Java on OS X Lion below.

OK, let's get to it

First things first, let's install Phing using Pear. Open a new Terminal session by using the Finder to go to Applications->Utilities->Terminal.

You'll need choose an install location for Phing. I chose to install it in the /usr/local/bin folder. That's the recommended location for tools such as this, and it will give all users of your machine access to Phing. Here's how:

cd /usr/local/bin
sudo pear channel-discover pear.phing.info
sudo pear install phing/phing

You will need to type in your administrator password in order to install Phing in /usr/local/bin. If you get the error "Notice: unserialize(): Error at offset 276 of 1133 bytes in Config.php on line 1050", you'll need to delete the bad Pear configuration file that was included in some versions of MAMP (note that your version number for MAMP may be different than mine). Then, re-run the sudo command again from above (make sure you've changed directories back to /usr/local/bin. Here's how you delete the bad Pear config file:

cd /Applications/MAMP/bin/php/php5.3.6/conf
rm pear.conf

Next, change directories back to /usr/local/bin and see if you can access Phing. In your Terminal window type:

cd /usr/local/bin
Phing -v

If you get an error that Phing can't be found, you'll need to change your PATH. Your PATH tells Terminal where to look for stuff on you computer. If Phing is found, you can skip ahead to "Install Java".

changing your path

When you type a command from a Terminal session in OS X, it looks for that command using the folders (also called directories) listed in your PATH as 'places to search'. If Terminal can't find the command on your machine, you'll need to modify your PATH to tell it where to look for that command. This is probably the most tricky part of setting up Phing and YUI Compressor.

You tell Terminal where to look for commands by editing your PATH variable in a hidden file called ".profile". This file is in your home directory, for example "/Users/Joe". To get to your home directory and display your .profile, in Terminal type:

cd ~
cat .profile
pwd

This will display your .profile as well as the current directory you are in. If you want to know more about each of these commands, check out Apple's developer docs.

First make a backup of your .profile:

cp .profile profile-backup

Now open your .profile in TextEdit with:

open -t .profile

Look in .profile for a section that says "export PATH=". If you find that section but Terminal can't find the commands, you need to add a piece to the end of your PATH that tells Terminal where to look for the command. If you don't have a PATH section at all, you'll need to add one.

If you installed Phing in /usr/local/bin, then that's what you need to add to the end of your path. For example, my PATH looks Like this:
export PATH=/usr/bin:/usr/sbin:/sbin:/usr/local/bin:$PATH

Make sure there are colons between path sections, and that there is a ":$PATH" at the end. This tells Terminal to tack on whatever PATH was already set up before .profile modifies it. Now save the file, close the terminal window and open a new terminal window so the new PATH will take effect. Again test to see if you can run Phing:

Phing -v

If you can get this to work, everything else will be easy! If you want to know more about how to modify your PATH in .profile, read this. If you really mess things up, just copy the backup you made to your .profile and start over:

cd ~
cp profile-backup .profile

install Java

First, let's see if you already have Java installed. If you have OS X prior to Lion, then you probably do. In your Terminal window, type:

java -version

This should tell you that you can run Java and what the version is. If you have OS X Lion but Terminal tells you it can't find the command, you probably don't have Java installed and will need to do so. Get it from Apple here. I suspect the Apple installer will do everything for you that needs doing, including updating your PATH so Java can be found. You may need to close your Terminal window and re-open it after installing Java though.

install YUI Compressor

Okay, next let's install YUI compressor. First download the tool. Open a finder window in /usr/local/bin by typing:

open -a Finder /usr/local/bin

Then unzip the downloaded YUI Compressor folder and copy it from your Download folder to /usr/local/bin using Finder. Finder will ask you to authenticate before it will copy the files. Check if YUI Compressor is working by typing:

java -jar /usr/local/bin/yuicompressor-x.y.z/build/yuicompressor-x.y.z.jar

Where x.y.z is the version of YUI Compressor you downloaded. This should give you the usage help information for YUI Compressor.

everything's installed - let's do some compression!

Finally, you've got everything installed, whew! Let's run YUI compressor on your files and see how much it reduces their size. Create a test folder in Finder and copy your original, uncompressed files there. Then in terminal, go to your test folder and type commands like these (but using the location of your test folder and the version number of YUI Compressor that you downloaded):

cd /users/north/desktop/test
java -jar /usr/local/bin/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar -o '.css$:-min.css' *.css

java -jar /usr/local/bin/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar -o '.js$:-min.js' *.js

This will compress all your CSS and javascript files in that directory, into files that are named the same but with "-min.css" or "-min.js". NOTE: this command will only work if you have multiple files to compress. Here's an example of a command to compress a single file called "script-setup.js":

java -jar /usr/local/bin/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar -o script-setup-min.js script-setup.js

Now upload those compressed files to your site and see how much faster your pages load!

what comes next

We covered a lot in this article-- you can now compress javascript and CSS files manually any time you want, and we installed Phing. However, the real power comes when you use Phing to automate the process instead of typing a long command every time. Stay tuned for part two to learn how to make this a piece of cake!

Recently, I needed to create a horizontal navigation list of text links, with the links being equally spaced. Also the links needed to be variable-width. Finally, the links needed to line up with the edges of their fixed-width <ul> container for a "justified" look, like this:

You can see from the green container border how the first nav link lines up with the left side of the container, the last nav link's right edge lines up with the right side of the container, and the links are equally spaced.  The overall effect would look similar to Pottery Barn's top nav links (only they used images for their links!). The HTML code looks like this:

<ul id="main-nav">
<li><a href="#">item one</a></li>
<li><a href="#">longer item two</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">another item</a></li>
<li><a href="#">5th item</a></li>
</ul>

easy, right?

Well, that's easy to do in CSS, right? Unfortunately, I don't think so. It's tricky to get equal spacing with the first and last links lining up with the edges of their container, when each link is variable-width. I Google'd far and wide for solutions on how to do this, and surprisingly I came up empty. The closest solution I found is this article on CSS-Tricks. However, I think the article solves a slightly different problem than I was trying to solve.

I even posted a question to StackOverflow and got a few answers. But, it doesn't look like people understood my question. They even down-voted it-- ouch!

so, how do you do it?

After thinking about how to do this in CSS until my brain hurt, I realized I could do it pretty easily in JQuery-- we just need a little math. Here is the algorithm:

X = the sum of all of the rendered widths of each link as calculated by JQuery.
Y = the width of the container the links are in.
Z = (Y - X) / (number of links - 1), rounded down. This is the spacing we need between each link!

I rounded down so the script wouldn't cause the spacing to be off by a pixel (too big) which would cause the list of links to overflow their container. All that's left for the script to do is give each link a margin-right equal to "Z".

Well, actually it's a bit more tricky than that. We have to remove the margin-right from the last link, so it will line up with the right edge of the container without overflowing.

algorithm != reality

There was one more problem I had to fix. For some navigation lists, the last link was not lining up with the right edge of its container. Instead, it overflowed the container and wrapped to another line.

I had rounded down on the link spacing calculation, and the links had no additional padding or margin other than the margin-right my script gave them. So what the heck was going on? Not acceptable! After scratching my head on this, I couldn't figure out what might be wrong with my algorithm.

So I screen-captured the navigation links as rendered in the browser and brought them into Photoshop to measure their widths, comparing those rendered widths to the width JQuery calculated for each link. Their actual rendered widths were different from what JQuery calculated for some links! Sometimes JQuery was off by a pixel, plus or minus. Double what-the-heck?

I can only conclude that somehow JQuery wasn't measuring the full rendered width of the links correctly-- though that is hard for me to believe. It's very unlikely that I found a bug in JQuery or in the browser DOM, but I just don't have any other explanation. Do you?

how I fixed it

I realized the fix was pretty easy. Just remove the margin-right from both the last link and the second-to-last link, and then float the last link right. This will force the last link to line up with the right side of its container. And removing the margin-right on the second-to-last link will create a "shock-absorber" between it and the last link. The "shock-absorber" will allow a little bit of pixel-flex between the two links, which will make up for any small errors in width calculations.

This is hard to explain so I encourage you to look at the CSS my script tacks onto each <li>, in FireBug. Here's a picture that may help:

the jquery.justifyNav.js plug-in

Without further ado, here is the final script. I am licensing it under the MIT license, so you can use it for commercial purposes if you want. You should check my respository on GitHub to see if there is a newer version of this script!

// jquery.justifyNav.js plug-in
// This software is licensed under the MIT License
// Copyright (c) 2011 High Integrity Design, LLC.    
// highintegritydesign.com
//

(function($) {
$.fn.justifyNav = function() {
  return this.each(function() {
   var $this = $(this),
    $children = $this.children(),
    containerWidth = $this.width(),
    linksWidth = 0,
    count = $children.length;
   $children.each(function() {
    linksWidth += $(this).width();
   });

   // Don't give the last item or the 2nd to last item any right margin, then float the last item right.
   // This will account for small errors in JQuery's calculation of the item widths.
   // Otherwise the list can overflow the container!
   var linkSpacing = Math.floor((containerWidth - linksWidth) / (count - 1));
   $children
    .css('margin-right', linkSpacing + "px")
    .filter(":last")
     .css({"margin-right":0,"float":"right"})
     .prev()
      .css({"margin-right":0});
  });
};
})(jQuery);

Here is an HTML example of how to use the script:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
    <script src="jquery.justifyNav.js"></script>
<script>
  $(document).ready(function(){
   $('ul#main-nav').justifyNav();
  });
</script>
<title>jquery.justifyNav example</title>
<style>
  * {margin: 0; padding: 0;}
  #main-nav {width: 500px; margin:50px auto; border: 1px solid green;  overflow: hidden; *zoom: 1;}
  #main-nav li {display: block; float: left;}
  #main-nav li a {display: inline-block;}
</style>
</head>
<body>
<ul id="main-nav">
<li><a href="#">item one</a></li>
<li><a href="#">longer item two</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">another item</a></li>
<li><a href="#">5th item</a></li>
</ul>
</body>
</html>

fallback for no-javascript

What if the visitor doesn't have JavaScript turned on? Then they will get a bunch of links all smashed together with no spacing between them. I decided to deal with this by providing an arbitrary default margin-right for links in my style sheet. Then if there's no JavaScript, the links will still have a margin-right. The links won't line up with their container edges, but they will still be usable.

am I making this too hard?

After writing the script, I'm still wondering if I'm missing something obvious, and if there is a simple way to do this in CSS. Perhaps I simply mis-understood either the article on CSS-Tricks or the answers people gave me on StackOverflow. It seems a pretty serious omission in CSS if there's no way to do this.

If you know of a way to achieve equally-spaced navigation links like this in CSS, please let me know! I'm willing to have egg on my face if there's an easier answer.

first impression - not so good

It's rare to find a bike like this in stock, so I lucked out! Or so I thought. I explained to the shop employee ("Joe"), that it was more than a one-hour drive to the shop so I confirmed with him that they had the bike on the floor. Then I drove to the shop eagerly anticipating my test ride.

• Details count! Be aware of details that may impact the customer, and check them if the cost of not checking them is high.
• First impressions matter!
• Every interaction forms the basis of the customer's opinion of you.
• Trust is hard to gain and easy to lose.

second impression - more broken promises

Well, it turned out that the shop also sold the Santa Cruz Chameleon, which on paper should fit me pretty well. Joe offered to order one in for me to test ride without my putting down a deposit. Great news! So I asked him to Make It So.

• Make promises and set expectations carefully-- then make every effort to keep your promises!
• Know what you are promising and articulate it clearly.
• When you cannot deliver on a promise, think about ways you could make it up to the customer.
• Face your errors and apologize-- don't just gloss over your failure to deliver as if it's not important.
• If you don't have policies for common circumstances, create them.
• Know your polices and communicate them (and make sure all your employees know your policies).

third impression - still waiting

I went ahead and gave them my deposit. More than two weeks went by and no call from the shop. So, I called them to find out what was up. Joe wasn't available and no one else (including the manager) knew the status of the order.

• Have a system in place so that everyone can look up the status of an order. This doesn't have to be in a computer; it can be on paper.
• Make everyone responsible for follow up on an issue if need be-- not just the person who initiated it.
• Keeping your customers informed is your responsibility, not theirs!
• If you let too much time go by on an open issue without contact, your customers will assume you don't give a Flying Kangaroo about them.
• Have a way to track when you should call customers.
• Don't be afraid to deliver bad news. The customer will appreciate knowing what's going on.

final thoughts - am I asking too much?

I wanted to create image captions for my blog using HTML5, so I was excited to find out that HTML5 provides the new <figure> and <figcaption> elements. The HTML5 spec says that's exactly what these elements are intended for. After doing a bit of reading up on how <figure> and <figcaption> work, here is an example of the code I wanted to use:

<figure>
    <img src="http://www.highintegritydesign.com/uploads/kona-bike.jpg" alt="Kona Cinder Cone mountain bike" />
    <figcaption>Kona Cinder Cone mountain bike</figcaption>
</figure>

And here is what it looks like:

Looks simple enough, doesn't it? But, I soon found out that making image captions work in the real world was harder than I thought. Things get more tricky when you're using a content management system and you want to make it easy for clients to insert an image with a caption into their page. Read on to see what I learned and how I solved the problems that came up.

the solution - a JQuery script

I wanted clients to be able to easily upload an image into their page using a content management system, then mark the image as "having a caption" using a CSS class. I realized I needed to write a JQuery script which would grab the "marked" image and automatically generate the code for <figure> and <figcaption> around the original image. The script would use the image's ALT attribute to supply the caption text. For example, the image caption code above should be generated from the following <img> tag:

<img class="caption" src="http://www.highintegritydesign.com/uploads/kona-bike.jpg" alt="Kona Cinder Cone mountain bike" />

Most modern content management systems allow the user to specify a CSS class(es) when embedding an image into their page. I'm using ExpressionEngine with the WYGWAM extension, which bundles in the popular WYSIWYG CKEditor. Here is what CKEditor's dialog box looks like for embedding an image using a class:

first attempt - code that works but doesn't validate

I wrote the script and everything seemed to work OK. But, I always like to validate my code so I took the code in the modified DOM that my script created and ran it through the W3C HTML validator. To my dismay, the code wasn't valid. That's because CKEditor always embeds images inside of a paragraph tag.

The problem with this is wrapping the <img> with a <figure> creates a block level element. And, it isn't valid HTML to nest a block-level element inside of a paragraph. Does it really matter that the script-generated HTML code isn't valid? It's just in the DOM, so no one will ever see it. Frankly, as long as it renders correctly in modern browsers it probably doesn't need to be valid HTML. But, I took this as a challenge to learn how to better use JQuery.

second attempt - valid, yummy HTML

So I modified my script to construct a <figure> and <figcaption> around the <img>, then move the entire construct to be placed just before the paragraph it was formerly embedded in. Like this:

<figure>
    <img src="http://www.highintegritydesign.com/uploads/kona-bike.jpg" alt="Kona Cinder Cone mountain bike" />
    <figcaption>Kona Cinder Cone mountain bike</figcaption>
</figure>
<p>The image was originally contained inside this paragraph.</p>

This should always work with CKEditor (and other WYSIWYG editors) that embed images inside of paragraphs. At this point the script worked, and produced valid HTML! I was feeling pretty proud of myself, until I started using it on my site and realized I didn't account for images that are contained in links. Oops. So I modified my script yet again to generate slightly different code in the case of an image link.

final code - introducing the "Image Caption-ator" script

Here is my final code. This code works with either images or images inside of links. I call it the "Image Caption-ator." To use the code, see the example HTML in my GitHub repository. Use it and let me know how it works for you! If you find any bugs or think of any useful enhancements, please let me know in the comments. Otherwise, enjoy! I have some additional notes about how the script works, below.

NOTE: I updated this code on 7/15/2011 so please check my respository on GitHub for the latest version. Also I licensed the code with an MIT license so you can use it for commercial purposes. The script was updated for efficiency, as well as becoming a JQuery plug-in.

// This software is licensed under the MIT License, opensource.org/licenses/mit-license.php
// Copyright (c) 2011 High Integrity Design, LLC.   highintegritydesign.com
//
(function($) {
  $.fn.captionate = function() {
  return this.each(function() {
           
            var   $this = $(this), // save a reference to the current img.caption element
                    altText = $this.attr('alt'), // grab the value of the image ALT attribute 
                    imgWidth = $this.width(), // grab the width of the image
                    classList = $this.attr('class'); // save any classes attached to the <img>

            $this.removeAttr('class'); // remove any classes from the original <img> element
           
            // check and see if the image is contained in an immediate parent anchor link.
            // if it is, construct a <figure> wrapping the anchor link instead of wrapping the <img>
            // add the <figcaption> after the link, using the ALT element
            // set the <figure> width to be the same as the <img>
            // add back in any classes from the original <img> to the new <figure>
            // finally move the new <figure> to be just before the paragraph it was contained in.
            var $parentAnchorLink = $this.parent();
            if ($parentAnchorLink.is('a')) {
                $newFigure = $parentAnchorLink.wrap('<figure></figure>').parent();
                $parentAnchorLink.after('<figcaption>' + altText + '</figcaption>');
                $newFigure.width(imgWidth);
                $newFigure.addClass(classList);
                $newFigure.parent('p').before($newFigure);               
            }
            // or else it's just an image tag, not wrapped with an anchor link.
            // so do all the same as above except wrap the <img> instead of an anchor link
            else {
                $newFigure = $this.wrap('<figure></figure>').parent();
                $this.after('<figcaption>' + altText + '</figcaption>');
                $newFigure.width(imgWidth);
                $newFigure.addClass(classList);
                $newFigure.parent('p').before($newFigure);               
            }
        });
    };
})(jQuery);

And here is the CSS I used:

figcaption {
    display: block;
    text-align: center;
    font-size: 0.8em;
    font-style: italic;
    font-weight: bold;
    padding: 5px 0 0 0;
}

notes on the script

What if the width of the caption is greater than the image? In this case the caption would look kind of funny since it would extend past the end of the image. So, I set the width of the caption to be the same as the image width. This will make the caption text wrap lines if it is too long. The script also takes any CSS classes that are assigned to the <img> and re-assigns them to the resulting <figure>. That way, if you have a class which gives the image a border or floats it left the resulting <figure> will preserve that styling.

I also learned something valuable about JQuery. When you give JQuery a reference to an HTML element and tell it to place that element somewhere else using add(), before(), after() etc, it will move the element rather than creating a new copy. That was exactly what I wanted for this script, but it may not be what you want in all situations. To make a deep copy you need to use the JQuery clone() method. See http://www.elated.com/articles/jquery-removing-replacing-moving-elements/ for more info.

Is there any way this script could break? If the image isn't contained inside a paragraph, it could break (I later tested this and images outside of paragraphs seemed to work ok). But we already established that's the way CKEditor does it, so it should be safe with any WYSIWYG editor that sticks images inside of paragraphs. Is there any other way it could break? If you think of something, let me know!

I also want to publicly thank T.J Crowder over at StackOverflow, for helping me modify my script so it's more efficient. StackOverflow is a fantastic resource with extremely knowledgeable, helpful people. If you have a tough question about anything programming related, there is probably someone at StackOverflow who is willing to help.

No styling in IE8

Finally, I noticed that for some reason the <figcaption> element wasn't accepting CSS styling in IE8.  So you just get regular looking text no matter how you style it. Looking into this further I discovered that HTML5 elements cannot be styled in IE8 when they are dynamically generated in the DOM by JQuery. This is true even when using the HTML Shiv script, which adds support for HTML5 elements to IE.  There is a solution called the innerShiv script. I played with that script a little and it worked well for simple test cases. But it turned out to be difficult to make it work with my script and it wasn't worth the time. So, I decided to simply let image captions remain unstyled for IE8.

That's it, let me know how it works for you!

This year my goal is to celebrate life, celebrate good health, and get in lots of miles on my bike. Some changes I made include commuting to work by bicycle like I used to, meditating every day, and reducing my work schedule to 32 hrs/week. Oh, and I need to buy a new mountain bike. Well, I don't actually "need" a new mountain bike. I have a perfectly serviceable, good handling, 14 year old mountain bike that fits me well. But, I wanted a new one with disc brakes and a modern suspension design. 

I thought it would be pretty straightforward to find a new bike that was right for me, but it turned out to be a lot harder than I thought. As I got into it, I realized there are some great lessons in web design, economics and bike shopping here-- so I wanted to share my thoughts with you. I hope you'll share your thoughts with me in the comments too.

lesson #1 - what's popular may not be what's best for you

My budget was $1500, which sounds like a lot for a bike. But, most of the bikes in local shops were either expensive full suspension rigs, or inexpensive entry-level hard tails with lower grade components and heavy frames. There were hardly any bikes in the price range I was looking for.

It seems that most enthusiast riders these days want full suspension. However, I decided to go with a hardtail. Why? In my younger racing days, I rode a 19 lb road bike and I knew I wouldn't be satisfied with the weight, braking and shifting of an inexpensive, entry level mountain bike. So that meant either spending $3,000-$4,000 on a quality full suspension bike, or finding a good hardtail that was within my budget. Easy decision! A hardtail represents the best combination of light weight, high performance components, and affordability for me and for the type of riding I do.

The lesson I noticed is, sometimes the popular and easily available solutions do not meet my needs. That's why, as a web designer I think it's so important to have in-depth conversations with customers about their needs before choosing technologies and solutions. And, just because a technology is popular is not reason enough to choose it. As a client, what this means is, it pays to get clear up front on what your needs are now and in the future. A good web designer will use specific questions and discussions to help you develop that clarity.

lesson #2 - newer is not necessarily better

Most of the new mountain bikes have 29" wheels compared to the older standard of 26". I'd never ridden a 29er so I decided to try them out. I test rode a couple of them on different days, comparing them back-to-back with my old 26" mountain bike...and I have to say I was unimpressed. The larger wheels felt too big and ponderous to me, and not as maneuverable at slow singletrack speeds. What did work well are the disc brakes-- far superior to the V-brakes on my old bike. Perhaps I could have gotten used to a 29er, but I believe a good bike should feel like an extension of your body. There are plenty of people who love 29ers, and that's OK. But what works well for them apparently doesn't work well for me.

The lesson here was, be open-minded about newer solutions you may not have tried-- but just because it's a newer idea doesn't mean it is better for you. I'll stick with a 26" wheeled bike, thank you. How I apply this to web design: I stay on top of new developments in web design and I constantly try out new ideas and technologies. But, I pick out the stuff that I think works well rather than everything that is cool and new.

lesson #3 - companies sell what is profitable (or, sometimes it sucks to be real short or real tall)

Well, it seems that most bike companies build frames that fit people in the mid-range of height. And it turns out that at 5'5" tall, I'm among the shortest 10% of adult males in the U.S. The bike companies probably just don't sell enough frames for tall or short people to justify the expense of design, tooling, extra production runs and testing to make sure everything works together.

Bah! I wanted a bike that has 2-3" of clearance between my crotch and the top tube-- otherwise known as "standover height" clearance. If you're a guy and you've ever done an "unplanned emergency dismount" on a mountain bike, you know why you want this clearance! And if you ride a mountain bike at the limits of your abilities, you will at some point have to do such a dismount. Some people debate how important this is, but to me it seems pretty important.

At my height, that means on a modern mountain bike frame I need about a 14"-14.5" size. Cool. Only, hardly anyone makes a production frame in that size! Trek and Specialized make a 15.5" or 16", which is just too big (I test rode a couple just to make sure-- not enough clearance). Marin and a few others make a 13", but that's too small. Kona makes one in the right size but not with good quality components.

Making things more complicated is that the top tube length is proportionately sized to the frame. The top tube length has to be real close to spot-on, or else you will feel scrunched up or too stretched out. Some people think top tube length is even more important than standover height.

So what about riding a women's mountain bike? Some manufacturers, to their credit, make higher-end women's hardtail bikes in a 14"-14.5" size. The frames are proportionately sized to fit womens' bodies, which are generally shorter. Unfortunately they also have very short top tubes, which would make me way too scrunched up on the bike. I have shorter legs and a longer upper body. So no dice again.

precise fit equals a good user experience

Why am I so hung up on frame size? Because I know from experience that having a precise and proper fit makes all the difference in better handling, better confidence, and in general a better experience. I can't blame the bike manufacturers-- they want to maximize their profits in a highly competitive industry.

The adult male population who needs a smaller bike has got to be a pretty big number, but it's just not enough for the bike manufacturers to build smaller frames. For them, it's simple economics. But for me, I am left without a good solution.

How does this relate to web design? I think it is a reminder of how important it is to know our audience and how they want to use our site. If we make cost or feature decisions that leave people out (for example requiring Javascript to work, or not supporting IE6)-- make it a conscious decision.

Do your research on how many people will be impacted and if they are likely to be users of your site. Be aware that you may lose some customers. I believe this is where the up-front work of developing personas and a target audience description can keep your design on track. And, testing your site with real users can quickly reveal if you made mistakes in your assumptions.

so what about the bike?

So what bike did I end up with? Well, I'm still looking. The ideal solution would have been to order a custom-built bike. I've ridden custom bikes and they are truly awesome.

There are some fantastic bike builders in the U.S. that produce functional bicycle art that is a joy to behold and to ride. Unfortunately, they don't meet my budget goals right now. So, I kept looking and found that Santa Cruz Bicycles makes a 14.5" hardtail bike (the Chameleon) with a standover height of 28.2" and a top tube length of 21.5". On paper, that should be just about a perfect fit for me. I'm currently trying to find a dealer who is willing to bring one in for me, and I'll keep you posted.

I think the lesson here is, if you don't find the solution you need, keep looking! I think this is true for both web designers and clients. As a designer, don't give up if you don't find the technical or creative solutions you need to create a fantastic result. The solution is probably out there.

If you are a client, be patient about finding the right web designer to work with, and be honest with your designer if your relationship isn't working for you. Sometimes just being honest with each other can cause a breakthrough.

Do you have a similar shopping story to tell, where you felt left out? Let me know in the comments section below!

If you read my earlier post about HTML5, you know why I chose to use it for this site. In this post, I'll talk about which specific HTML5 features I used and how I used them.

new structural page elements

<section>
  <header>
    <h1>My First Header</h1>
    <h2>My Subtitle for First Header</h2>
  </header>
</section>
<section>
  <header>
    <h1>My Second Header</h1>
    <h2>My Subtitle for Second Header</h2>
  </header>
</section>

<textarea placeholder="Don&rsquo;t forget your name and email!" cols="20" rows="10"></textarea>

that's all folks

So, there you have it. That's all of the new HTML5 goodies that I used. A pretty small chunk of what's in HTML5 actually. You can see it doesn't take much to get your feet wet-- you can make your code more semantically meaningful and easier for your site visitors to use without much effort. I learned a lot about HTML5 just using some of the new structural elements. I'm really curious about how other people are using HTML5, so I hope you'll let me know in the comments below. Thanks for reading!

You’ve probably read a lot of hype about using HTML5 and CSS3. I know I have! I kept on seeing articles pop up all over the place. At first, I thought, why bother? It will be years before HTML5 and CSS3 are implemented by most browsers, and I can do nearly everything I want today using XHTML and JQuery. There is a widely repeated quote with Ian Hickson, where he mentions that HTML5 is expected to become a “proposed recommendation” in the year 2022! Are you kidding me?

But, the articles kept popping up and wouldn’t leave me alone. So I started looking into HTML5 in more detail. I found out some interesting things:

• The “real” date we should care about is 2012 - That’s when the specification is due to become a “candidate recommendation”, meaning discussions and changes are done. The 2022 date is the estimated date when two complete browser implementations of HTML5 are done, which didn't happen for HTML4 for a long time (is it even true now?).
• HTML5 is a collection of features, which are being worked on at different rates by the different browser manufacturers. Many useful features work right now in modern browsers.
• You can often use Javascript to provide a “fallback” if the visitor is using a browser that doesn’t support the new HTML5 features you are using.  Several awesome people have written good, open source JQuery scripts that make it easy—all you have to do is drop them in.

So, after looking into it, I decided to rebuild my site using HTML5. This post contains some goodies and resources I learned about that will help you get started with HTML5. If you're using HTML5, I hope you will describe your experiences in the comments so I can learn something too.

can we and should we use HTML5 today?

Well, my opinion is, “it depends!” As much as I like shiny new stuff, I honestly don’t think there is a lot of practical value you can deliver today using HTML5 that you couldn’t deliver in HTML4 or XHTML if your site needs to work on older browsers. But, if you know your audience will be using newer browsers, there is definitely a lot more you can do with HTML5.

My focus is on building modern websites so I’m choosing to use HTML5. The point is that you need to know who your audience is, and decide based on that. However, there are still some good reasons to start using HTML5 today even if your users are on older browsers:

• New page elements like <section>, <header>, <article>, <aside>, and <footer> are ready to use right now. This leads to better semantic richness. According to articles I’ve read, Google doesn’t actually care (yet) but my opinion is they will likely care in the future. And, I suspect screen readers will benefit from the new elements.
• It gives you more semantic “hooks” to use in your styling (CSS). For example, you can style <article> differently than <div>. Using the new elements makes it easier to read and understand both your HTML and CSS files.
• The new elements already work in every modern browser except IE. And older versions of IE have easy fixes available through Javascript. Further, IE9 will support HTML5.

There is a great article on Smashing Magazine with further reasons to use HTML5 today.

changes in syntax, and some good reading

a simple, valid HTML5 document

A minimal HTML5 document for you to play with is below-- this is absolutely minimal; I do more than this in my production code. 

Of course, this means visitors must have Javascript enabled for your site to work in older versions of IE. To me, this is no big deal since I focus on modern websites and nearly everyone has Javascript turned on. But, it may be a deal-breaker for you depending on who your visitors are. By the way, you can validate your HTML5 code using the same familiar W3C validator that you've always used-- it will recognize the HTML5 doctype and validate accordingly. You do validate your code, right? OK, here's the code:

<!doctype html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>blah</title>
</head>
<body>
    <p>I'm the content</p>
</body>
</html>

Recently, there have been a number of articles showing the link between sitting down for several hours at a time and poor health. This has long been my gut feeling, but I thought I wouldn’t be affected much since I work out several days a week.

Well, I was blown away when I read about the new studies showing there are pretty bad consequences even if you work out regularly. One of the best articles on this subject is the New York Times story. As the article says:

“If you spend most of the rest of the day sitting — in your car, your office chair, on your sofa at home — you are putting yourself at increased risk of obesity, diabetes, heart disease, a variety of cancers and an early death. In other words, irrespective of whether you exercise vigorously, sitting for long periods is bad for you.”

So, I’m reading this and I’m thinking, “what the heck am I supposed to do about this—change careers?” A lot of us spend our day sitting down at a desk and a computer. One thing we could do is work less. But, that’s the subject of another post.  For now though, it turns out there is something else we can do. We can stand up while we work.

the stand-up desk

The New York Times article goes into the physiology, but basically standing is a lot better than sitting. And it can help you lose weight. So, I did some searches on Google and Amazon. It turns out there are a number of adjustable-height stand-up desks designed for office work. If you have an awesome boss, perhaps he/she will buy one for you (I’m trying that option first). But if not, they aren’t as expensive as I imagined.

One thing to watch out for: an adjustable-height desk is not necessarily a stand-up desk (which has a work surface minimum height of around 35 inches). I’m not much of a do-it-yourself-er, but if you are you could build your own as well. Here is one I found that looks pretty good. It would be nice if it were a bit wider, but it’s not bad at all. If my boss won’t buy me one, this is probably the one I’ll get.

the sit-down chair for the stand-up desk

Okay, but you still need a chair. Or at least I do. I’m not going to stand every minute of the day, especially at first. And especially after a weight-lifting workout. And it needs to be extra-tall to work with the stand-up desk. After a bit of fruitless searching for the wrong type of chair, I figured out what I needed is a drafting chair. There are a lot of them available; here’s one I was looking at.

the rubber mat

Finally, I’m going to get a rubber mat because that makes a huge difference in comfort when standing so much. One of the first things I learned in my career was standing all day on a hard cement floor at a trade show really hurts! I’m still looking for a good mat, but I saw one at the local bike shop they bought for their mechanics (which by the way, is an awesome way to treat your employees). Hats off to you Peak Sports.

adding it all up, and what you can do

Hmmm, when I add it all up it gets to be more expensive than I thought. Total cost is around $400-$600. That’s not cheap, though I’m willing to pay for it when I consider the health benefits. However, I’m still troubled. For me this is a significant expense, but I can afford it. But a lot of people live paycheck to paycheck. And there are jobs which require sitting down all day, such as the truck drivers who deliver our food to us. What about them?

I wish I had a good answer for helping everyone, but I don’t. However, I can do my part to model positive change by showing my boss the research. And, in a non-adversarial way, by buying a stand-up desk or convincing my boss to buy one for me. And so can you. Perhaps together we can begin to change the cultural expectation that we have to trade in our health for our job. Is your job worth dying for? Mine isn’t, and I can do something about it. So can you.