In part 1 I examined the current WordPress cart plugin landscape and outlined a number of reasons I feel that PHPurchase is currently the leading solution for an e-commerce solution, especially with the arrival of Custom Post Types. I’d like to share how and why using Custom Post Types works so well for a WordPress shopping cart.

Setting up and prepping WordPress

The first step will be to get your WordPress 3.0+ install up and running. That’s the extent of detail we’ll cover there. The next step will be to obtain and install a copy of PHPurchase. There are a number of purchase options available, but this walkthrough will cover functionality available under all licenses of PHPurchase.

The installation of PHPurchase is as straightforward as any other plugin. Once you’ve uploaded the plugin files and activated the plugin, you’ll need to enter your PHPurchase order number on the Settings screen:

After validating your order number, the reminder to do so will disappear and you’ll be able to enter in your PayPal, Authorize.net, or Quantum Gateway payment settings. These details aren’t required at this point, but until that information is entered, the plugin won’t let you check out. For now, those are the only details we’ll cover as far as setup is concerned. Using the PHPurchase menu in the WordPress admin, you can begin adding products.

As it stands PHPurchase will automatically implement a number of system Pages it will use to handle the cart view and checkout process for purchases.

While these pages are an extremely important part of the overall e-commerce implementation, none of the products we just added are made available out of the box.

By editing the Store page, you can quickly add a number of products using the PHPurchase icon in the editor toolbar:

At this point, you can feel to proceed as normal. Using this Store page you could add every product you have available as well as apply some style and content using imagery, product copy, and links to relevant information. You could take it a step further and also create child pages with the Store as the parent and dedicate a product detail page to each of your products.

While helpful, you’ll quickly discover missing features that are very commonly found in other e-commerce platforms. Features such as browsing products by category and providing additional information about products in the form of multiple product shots and/or PDF downloads aren’t directly built into PHPurchase. The beauty lies in the fact that you can customize WordPress in all the usual ways to add these features as you see fit.

With the arrival of WordPress 3.0, however, there is an entire layer of additional functionality found in Custom Post Types that makes working with these features a breeze.

Using Custom Post Types for your PHPurchase Store

Custom Post Types are sometimes intimidating to more novice developers. Out of the box in WordPress 3.0 you need to manually register and set up your Custom Post Types. As with many developer-heavy tasks at hand, there is a plugin to make life easier when it comes to Custom Post Types; Custom Post Type UI.

Custom Post Type UI gives WordPress admins the ability to create, edit, and manage all of the Custom Post Types available within the WordPress Install:

Using the plugin you can easily create a Custom Post Type to handle all of your product pages in PHPurchase. You’re able to customize the phrasing used throughout and viewing the Advanced Label Options gives you even more to work with. On top of these Custom Post Type Settings, you can also set up custom taxonomies which can be used in this specific case for a set of categories limited to your store products and separate from your Post categories.

Once you’ve created your Custom Post Type, a new menu item will be made available in the main navigation:

Using the links available you can go ahead and set up your categories as well as add your products.

Once your products have been added to your Custom Post Type, you can view the page on the front end:

Integrating Custom Post Types into your Menu

Now that your products have been added, you’ll want to make browsing your products as easy as possible. There are a number of things you can do, the primary two being including links to your product pages within your site navigation and using your Custom Post Type taxonomy (product categories).

Menus were also a big addition to WordPress in 3.0 and the update comes in handy at this point in our PHPurchase setup. The Menus are smart enough to recognize your Product Pages and allow you to integrate them directly within your site navigation:

Using the Menus you’re able to mix and match your Product Pages, your Product Categories, as well as your WordPress Pages themselves. You can custom build any structure you wish using the menus and the available entries. By default, linking to a Product Category will direct readers to pages resembling those of your other category pages, likely using category.php from your theme. You can customize this to any degree as you would normally when developing your custom WordPress theme.

Integration with plugins

Another significant advantage to using Custom Post Types and PHPurchase to power your WordPress based e-commerce website is the direct integration with many of your favorite plugins. One of the downfalls to a number of other WordPress store plugins is a lack of attention to search engine optimization. When working with product pages powered by Custom Post Types you can continue to use the SEO plugin working to optimize the rest of your website.

Additionally, you’ll be able to use plugins that enhance your ability to make additional product assets available to readers. Plugins like Attachments will let you add multiple product images for use in a product image viewer, PDFs including additional product details, as well as any available product details that may exist.

This is just the beginning

These are just the basics of getting up and running with WordPress 3.0+, Custom Post Types, and PHPurchase in an effort to get the best possible e-commerce shop up and running quickly and easily. While it’s a bit more work to get a large volume of products added and available on your website, I really feel that PHPurchase is a great choice when considering available e-commerce solutions for WordPress.

Advertise here with BSA

Back when standards were standards if you were building anything that didn’t have a fall back plan in place for a lack of JavaScript, you were doing it wrong. Yes it took more time and it took better planning but that’s the point. When you’re a professional you’re supposed to be doing it right, right?

The rise of (my) Web standards

Back when JavaScript was reborn, when its use began transforming into what we know and love today, the rules were still being written. I remember thinking about how I should approach learning this skill I knew would soon be essential. My first stop when teaching myself something is Google. Of course back in the day Google was still polluted with DHTML tutorial sites and wretched implementations. After reading countless tutorials comprised mostly of “copy and paste this snippet here and that snippet there” I knew it was time to hit the books.

It took about four seconds of poking around to realize that there was more than meets the eye when it came to JavaScript for me. I needed to learn about the DOM before I tried to manipulate it. If there’s one thing that drives me batty it’s the notion of ’learning the framework instead of the language’ and this is no exception. JavaScript though, has a completely new layer to work with.

I won’t detail the issues I have behind learning a framework or platform as opposed to the language here, but it can be applied to every programming language, every markup language, CSS, and JavaScript as well. To sum it up: learning the framework gives the language a bad name. We’ll leave it at that and the rest for another article.

I grabbed myself a copy of DOM Scripting by Jeremy Keith and to this day I’m glad I did. DOM Scripting was instantaneously followed by Bulletproof Ajax, also published by Mr. Keith. If I had to choose two books as a suggestion to someone looking to learn proper JavaScript I think these two are it. There are of course subsequent, more advanced books that I’d also suggest, but these two works will help you to realize which blog posts are junk and which are gold.

The theory behind writing JavaScript, as I took it, can be taken from DOM Scripting:

Separate behavior from structure using unobtrusive JavaScript. Add dynamic effects with progressive enhancement. Ensure backwards-compatibility through graceful degradation.

I lived by those rules. I still do. But am I stuck in the past while everyone is moving forward?

The new Web

Has building a proper Web stack become old school? What I’ve been curious about lately surrounds the trend that requiring JavaScript for your Web app is something we hardly blink at. MobileMe has just recently relaunched with a new look:

Looks really great, but if you hit the page with a JavaScript-incapable browser it’s a bit different:

Back in the day we’d all have scoffed at such a thing, comparing it to a “This site looks best in IE6″ badge straight out of the 1990s. What’s changed since then? Why is this now an acceptable practice? I understand that Apple is a progressive company, bringing the web in its best form to the largest population possible, and making it look great, but that’s my point. Is this new school of thought going to transform itself into common practice?

The entire point behind breaking away from closed platforms such as Flash (yes, it’s a closed platform no matter how much marketing gets put behind it) is to build a universally accessible Web. Devices are advancing, yes. Browsers are advancing, yes. But does that give us the liberty to put the fruits of our labor on a back burner now that we’ve reached some sort of plateau in the evolution of the browser?

I’m not dogging Apple

Apple isn’t the only one producing Web applications that show similar messages if you’re using a JavaScript incapable browser. In fact, other more popular platforms are doing it even worse:

There was a time, if I remember correctly, where Google Docs gave a notification similar to MobileMe as opposed to loading a non working pseudo interface that does nothing but confuse a visitor. Gmail still retains its fully functional JavaScript-less implementation, albeit behind a quick message notifying you what you’re in for:

Depending on your choice, you can end up at a really well put together version of Gmail:

To me, Gmail remains to be one of the best implemented modern Web applications because of this very attribute.

Where are we headed, really?

I’ve tried to wrap my head around these poorly implemented Web applications to find out the real inspiration behind them. Are companies rushing JavaScript dependent platforms out the door simply to get things live before the competition? Are metrics showing that supporting JavaScript simply doesn’t make fiscal sense? Are we to a point where leading Web companies care more about dollars and cents than users?

What about the Web applications themselves? We’re working with the most rich implementations of JavaScript we’ve ever seen. Many times, it doesn’t even make sense to offer a degraded version of an application simply because the desired feature is built within JavaScript from the ground up; there’s nothing else to show. This is not a bad thing. I’m concerned in particular for those applications that could in fact have a decent degraded version. Does it change the opinion we have behind the modern Web though? I’m speaking from a front end developer point of view here, a conversation between us professionals, not as users.

Do we need to move beyond this self-imposed requirement of providing a gracefully degraded version of our application? If so, would it not be a (short) matter of time before that school of thought trickles all the way down to the Coda Slider we plan to implement? In essence, what’s the difference? We’d all be thrilled if we could just make that AJAX request and call it a day without having to first build an alternate version, but is it the right thing to do as professionals?

The groundwork has been laid by some of the best thinkers in our industry, and neglecting to build a proper stack, to me, pushes all of that hard work aside in favor of (too) rapid deployment. If your metrics show a 99% JavaScript enabled audience, are you willing to forsake that 1%?

I’m not only concerned about that 1%, I’m (perhaps) more concerned about how it affects the overall implementation. Working from your degraded version is going to result in a much more stable environment upon which to build your behavioral layer. Skipping that valuable step can and probably will result in a less structurally sound document.

I have a tendency to remain loyal to influential circumstances that have shaped me as a professional, but I’m curious how (if?) these events are affecting other designers and developers, if at all. Do you continue to be curious about degraded versions of modern Web applications? I could be way off base in even thinking about things to this level, and if that’s it by all means feel free to call me out on it, but there’s something under my skin about what’s going on. Thoughts?

Advertise here with BSA

Luckily enough, a client need came through which included such a feature. What better time to teach yourself something? Other programmers at my company had implemented proximity searches in the past, but I wasn’t involved on the projects and didn’t want to simply peruse their code and see what I could pull from it. I sat down with one of the guys as I began working on the feature to discuss past implementations. There were two ways to go about it:

1. Piggyback on Google Maps
2. Do things the hard way

It took me about zero seconds to determine that I wanted to do things the hard way. It’s not that I don’t enjoy working with Google Maps. Quite the contrary in fact. I just don’t want to depend on it too much in the day to day, especially for something as generic as a proximity search. Additionally, it just adds another layer of complexity with remote calls, API limits, and the other issues associated with using any other third party service. Hard way it is.

Pods setup

The first thing we’ll do is create a ‘stores’ Pod. If you’re not familiar with creating Pods, take a few minutes to read the beginner series, starting with Pods Basics: Installation and Setup. I’m going to use the following columns:

• name (txt)
• slug (slug)
• address (txt)
• city (txt)
• state (PICK state)
• zipcode (txt)

We’re also going to simply make this Pod a Top Level Menu. If you’re looking to make things even nicer, go ahead and include Pods UI where applicable.

I’ve made every column required data, as an address isn’t very useful without complete information. I segmented the addresses as such simply because the proximity search I’ll be implementing is based on ZIP code, and having that data in a separate column will help with server load. Lastly, I chose to use a txt column for the zipcode instead of a Number because many ZIP codes begin with one (or more) zeros, which would cause a bit of trouble.

As a last step, we’ll go ahead and add a few test store listings using various ZIP codes you’re familiar with. The more variance the better, as you’ll be able to see whether the proximity aspect of the search is working properly or not.

Once you’ve added a few samples, it’s time to integrate.

WordPress setup

For the sake of brevity, this location based search will sit on its own WordPress Page, using a template we’ll put together. We’ll continue working with the WordPress default theme, and add a new template; store-locator.php which includes the following:

<?php

/* Template Name: Store Locator */

get_header(); ?>

  <div id="content" class="narrowcolumn" role="main">

    <?php the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><?php the_title(); ?></h2>
      <div class="entry">

        <?php the_content(); ?>

        <form action="" method="post">

          <p>
            <label for="mbn_zipcode"><small>Your ZIP</small></label>
            <input type="text" name="mbn_zipcode" id="mbn_zipcode" value="<?php echo $_POST['mbn_zipcode']; ?>" size="5" tabindex="1" />
          </p>

          <p>
            <label for="mbn_distance"><small>Within (miles)</small></label>
            <select name="mbn_distance" id="mbn_distance" tabindex="2">
              <option value="5"<?php if( empty( $_POST['mbn_distance'] ) || $_POST['mbn_distance'] == "5" ) : ?> selected="selected"<?php endif ?>>5</option>
              <option value="10"<?php if( $_POST['mbn_distance'] == "10" ) : ?> selected="selected"<?php endif ?>>10</option>
              <option value="25"<?php if( $_POST['mbn_distance'] == "25" ) : ?> selected="selected"<?php endif ?>>25</option>
              <option value="50"<?php if( $_POST['mbn_distance'] == "50" ) : ?> selected="selected"<?php endif ?>>50</option>
              <option value="100"<?php if( $_POST['mbn_distance'] == "100" ) : ?> selected="selected"<?php endif ?>>100</option>
            </select>
          </p>

          <p><input name="submit" type="submit" id="submit" tabindex="3" value="Submit" /></p>

        </form>

      </div>
    </div>

  </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Nothing exciting happening here, we’re simply setting the stage with the basic form we’ll use to search our store directory by location.

Now that we’ve got our Page using our template, we’ll implement the location search functionality via Pods.

Setting up the location search

Our first step will be to add a conditional that checks to see if the form has been submitted. In this case, I’ll simply add a hidden input to track the current action:

<input type="hidden" name="mbn_action" value="search" />

With this action in place, we can include our conditional:

<?php if( !empty( $_POST['mbn_action'] ) ) : ?>
  <p>List our results</p>
<?php endif ?>

Here’s where everything happens. Once we find ourselves in the conditional, we’ll need to do a bit of work:

1. Sanitize our data
2. Retrieve search results
3. Display data

Our conditional will expand to be:

<?php
  if( !empty( $_POST['mbn_action'] ) )
  {
    if( !is_numeric( $_POST['mbn_zipcode'] ) )
    {
      $the_zip = '0';
    }
    else
    {
      $the_zip = $_POST['mbn_zipcode'];
    }

    $the_distance = intval( $_POST['mbn_distance'] );

    $stores = mbn_get_stores_by_location( $the_zip, $the_distance );
    $stores_total = count( $stores );
  ?>

    <?php if( $stores_total > 0 ) : ?>
      <h3>Search Results</h3>
      <ol>
        <?php foreach( $stores as $store ) : ?>
          <?php $store_address = $store['address'] . ' ' . $store['city'] . ', ' . $store['state'][0]['name'] . ' ' . $store['zipcode'] ; ?>
          <li><dl>
            <dt>Name</dt><dd><?php echo $store['name']; ?></dd>
            <dt>Address</dt><dd><?php echo $store_address; ?></dd>
            <dt>Distance</dt><dd><?php echo $store['distance']; ?> miles</dd>
          </dl></li>
        <?php endforeach ?>
      </ol>
    <?php endif ?>

<?php } ?>

You’ll notice that there’s no reference to Pods anywhere in that conditional, but there is a new function to take a look at; mbn_get_stores_by_location().

Implementing the proximity aspect

This new function, mbn_get_stores_by_location(), will take care of all the work including:

1. Determine the latitude and longitude of the source ZIP code
2. Use triginomitry to determine which additional ZIP codes fall within the chosen radius
3. Retrieve all Pods entries matching the pool of ZIP codes
4. Return an array of results, ordered by distance

The quickest and easiest way to implement the function will be adding it to functions.php in your theme. Before we implement the function, however, you’ll need to add a new table to your database. This table is going to include a listing of all US-based ZIP codes and acts as an integral piece for this function. The table is used to determine the latitude and longitude of applicable ZIP codes, and is used with each search submission. There are a number of places to obtain a ZIP code database, the one I’ve used in the past is made available for free from PopularData.com. It’s made available as a CSV file weighing in at about 700k. There is a donation button available on the download page, and I’d suggest showing your appreciation to the provider should you use the database for any commercial work.

You’ll need to set up a new table in your WordPress database and be sure to name it something unique. You’ll need to remember both the table name and column names as you implement the location search. Once you’ve added the table and verified its integrity, we can go ahead and implement mbn_get_stores_by_location() in functions.php:

<?php

function mbn_get_stores_by_location( $zip, $radius )
{
  global $wpdb;
  $radius = intval( $radius );

  // we first need to get the source coordinates
  $sql = "SELECT `latitude`, `longitude` FROM `mbn_zip_codes` WHERE `zipcode` = '$zip'";
  $coords = $wpdb->get_row( $sql );

  // now we'll get the other ZIP codes within the radius, ordered by distance
  $sql = "SELECT mbn_zip_codes.zipcode, ( 3959 * acos( cos( radians( $coords->latitude ) ) * cos( radians( mbn_zip_codes.latitude ) ) * cos( radians( mbn_zip_codes.longitude ) - radians( $coords->longitude ) ) + sin( radians( $coords->latitude ) ) * sin( radians( mbn_zip_codes.latitude ) ) ) )  AS distance FROM mbn_zip_codes HAVING distance <= $radius OR distance IS NULL ORDER BY distance";

  $nearby_zips = $wpdb->get_results( $sql );

  // we need to store the zips in order to build the Pods query
  $target_zips = array();
  foreach ($nearby_zips as $nearby_zip)
  {
    array_push($target_zips, $nearby_zip->zipcode);
  }

  // we're going to store the results as we go
  $store_results = array();

  if( count( $target_zips > 0 ) )
  {
    $final_target_zips = implode(',', $target_zips);

    if( strlen( $final_target_zips > 0 ) )
    {
      // let's snag the data
      $stores = new Pod('stores');
      $stores->findRecords('id ASC', 9, 't.zipcode IN (' . $final_target_zips . ')');

      $store_data = array();

      while ( $stores->fetchRecord() )
      {
        $store_data['id']       = $stores->get_field('id');
        $store_data['name']     = $stores->get_field('name');
        $store_data['slug']     = $stores->get_field('slug');
        $store_data['address']  = $stores->get_field('address');
        $store_data['city']     = $stores->get_field('city');
        $store_data['state']    = $stores->get_field('state');
        $store_data['zipcode']  = $stores->get_field('zipcode');

        foreach ($nearby_zips as $nearby_zip)
        {
          if( $store_data['zipcode'] == $nearby_zip->zipcode )
          {
            $store_data['distance'] = intval( $nearby_zip->distance );
          }
        }

        array_push( $store_results, $store_data );
        unset( $store_data );
      }

      usort( $store_results, "mbn_cmp" );
    }

  }
    return $store_results;
}

?>

Quite a bit is going on in this function. Once our globals are set and our data sanitized, we’re going to query the new table we set up to retrieve the coordinates of the submitted ZIP code. Once we have those coordinates, we’re going to perform a lengthy query on that same table to determine what other ZIP codes fall within the submitted radius:

SELECT mbn_zip_codes.zipcode, ( 3959 * acos( cos( radians( $coords->latitude ) ) * cos( radians( mbn_zip_codes.latitude ) ) * cos( radians( mbn_zip_codes.longitude ) - radians( $coords->longitude ) ) + sin( radians( $coords->latitude ) ) * sin( radians( mbn_zip_codes.latitude ) ) ) )  AS distance FROM mbn_zip_codes HAVING distance <= $radius OR distance IS NULL ORDER BY distance

You will need to be sure that table and column names are appropriately updated. There are a number of formulas which use trigonometry to solve proximity equations, but I’ve found the above to suit my needs well in this application.

Once we’ve got our nearby ZIP codes ordered by date, we query our Pod for any entries with ZIP codes that match our results. Instead of using get_field() to echo the display directly, we’ll instead use it to store the data in an array consisting of all returned results.

Once we’ve processed the results, our last step will be to use usort to ensure our results are actually sorted by distance:

usort( $store_results, "mbn_cmp" );

usort uses a custom function to determine the comparison result, and we’ll need to add that to functions.php as well:

function mbn_cmp($a, $b)
{
  $a = intval( $a['distance'] );
  $b = intval( $b['distance'] );
  if( $a < $b )
  {
    return -1;
  }
  elseif( $a > $b )
  {
    return 1;
  }
  else
  {
    return 0;
  }
}

Note that the comparison function uses a specific array key to generate a result. If you change the distance key, you’ll need to update this function as well.

That takes all the magic out of it. If we return to our submission form and search for a ZIP code that is known to produce results, we’ll see the functionality at work:

I realize the explanation is a bit lengthy, but I hope it helps to explain how a proximity search can work on a smaller scale.

Alternative implementations

As I researched location based proximity searches, I found a number of alternative solutions using PHP and MySQL. Some of which included stored procedures, and other advanced uses of MySQL. I’m nearly positive other implementations would require less computing power and run a bit faster, but I chose not to take that path because I wanted to keep the functionality as lightweight and portable as possible.

The queries used in the search function are performing quite a bit of math, and probably won’t scale extremely well. If you’re only looking to implement a location search on a smaller set of data (under 10,000 or so) I think using something like this will work for you as well.

Other uses

With Pods making a location based ZIP code search so easy, I’m hoping to implement it on more client projects since it won’t affect the budget very much. Some initial use cases that come to mind are:

• Member directory searches
• Service area searches
• Geographic zone searches
• Event listings

The next step I’d take with an implementation such as this would be to remove the requirement of entering your ZIP code manually altogether and instead use geolocation to automatically generate a starting point for the visitor.

Advertise here with BSA

I’m having an honest-to-goodness back and forth with myself on this issue because I sympathize with two opposing sides to the same issue. I’ve thought about it so much that I’m not sure it’s as much of an issue I’m making it out to be, but would definitely love to have a targeted conversation about it.

I’d like to review the four rules I’d more than love to use without a second thought on every project I work on for the rest of my life, and explain the issues I’ve come up with (so far) regarding each.

Before (and after) I get to the list, however, I’d like to make my stance on CSS3 clear. I love the fact that it directly helps us as designers make a project go that much more smoothly. It helps us reduce the time we take to engineer the front end, allowing us to spend more time designing. I understand that if people are not able to, or choose not to upgrade their browser, it’s something they’ll have to deal with as the Web continues to mature and grow. It makes perfect sense that the faster we all adopt these “bleeding edge” technologies, it puts that much more pressure on the browser makers to implement things properly.

There’s an element of realism, however, that I feel sometimes takes a back seat to the wonderful things CSS3 (and HTML5) are currently offering us.

Border radius

By far the most popular design treatment you’ll find on the Web is rounded corners. I’d be willing to bet that there are more (completely different) ways to achieve rounded corners on the Web than any other design treatment, if such a statistic existed. The creativeness that has gone into the dozens of ways to best round the corners of a div blows my mind. The point here, though, is that it shouldn’t be such a pain to accomplish. With such a popular and generally accepted design treatment, there should be an easier way. Many designers have taken comfort (and a sigh of relief) through border-radius.

As a quick review, border-radius will automatically provide rounded corners on the referenced element. You have independent control over each corner, giving you a wide range of possibilities when adjusting your borders.

Being able to round the corners of a design element using a quick CSS3 rule is inspirational as it stands on it’s own. Combine that with my arguably favorite ability for border-radius to easily round the corners of images as well as elements with background-images and I’m head over heels.

Taking a step back and examining it, I don’t see a tremendously huge problem with using border-radius today on a production website. I’m not able to take advantage of it on client work, however, because no matter how hard I try to convince a client that visitors with less capable browsers won’t know any different, they’re still going to see a less elegant design. And that’s something I completely agree with.

I am not yet comfortable with putting a client site out there that degrades to the point, although completely accessible and usable, it looks unfinished and utilitarian.

Text shadow

The rise of OS X Leopard brought us the wildly popular text inlay effect achieved through a clever drop-shadow treatment to text. Tons of tutorials cropped up rather quickly with instructions to replicate the effect, and it’s something we see fairly consistently in new designs from both big names and small. We can all understand why, it’s a nice looking, elegant treatment that can improve things both aesthetically as well as improve readability when used properly.

Moreover, text-shadow can help on many levels when it comes to readability, and that’s one of the major reasons I’d like to start using it consistently today. It’s something that can be implemented on a very subtle level, and at the same time return some really excellent results without many people noticing.

Truth be told, unless the absence of text-shadow will morph type into something more difficult to read, I think using it is just fine on a client production site.

Multiple background images

If there are any two opportunities CSS3 brings that I would most like to use, it’s border-radius and multiple background images. I can’t begin to fathom the number of divs I could have saved over the past year alone.

CSS3 gives us the ability to layer multiple background images on a single element which can build upon any existing background properties. It’s useful on so many levels, I can’t begin to explain how excited I’ll be when it becomes standard practice to use.

Unfortunately, this is a property I only use on a select few personal projects simply because the degraded result produced is far too different to deem acceptable in my opinion. That is of course unless you’re simply adding just another layer of very subtle refinement. While some intentional results can be put in place with a clever combination of cascading background properties, in my opinion (at this stage) your time is better spent accomplishing your goal the “old fashioned” way.

Pseudo selectors

Pseudo selectors rock. It’s great that they’re so old, many have been implemented in modern browsers, but you can’t become too comfortable with them quite yet. Of anything CSS3 has to offer, pseudo selectors are something I use on nearly every project.

When it comes to pseudo-selectors, I still think of them as a method of progressive enhancement. The way I use them, the selectors provide that extra level of detail to a design that brings it to the next level. Using that approach, I think using pseudo-selectors is absolutely acceptable, and I’d even go so far as to fully recommend that they be used to tighten up the front end on any project. The changes they provide will definitely not be missed by viewers with non-supporting browsers unless you’re so aggressive with implementation, the render is drastically altered by their absence.

While I do tend to use pseudo-selectors, I find myself only relying on a few for the fine details I’m looking to apply.

When it comes to clients

Again, just to reiterate my stance here; these observations should be taken with a grain of salt. I’m only looking at the big picture, not taking into account the nearly endless variables and circumstances that come with every project that graces our monitors.

The biggest hill to climb by far, in my opinion, is getting the blessing of your client to go ahead with this more aggressive approach. After all, we were hired to produce a certain caliber of work. Unless your client is extremely Web savvy, and is somehow opinionated on the topic of how limited we are when it comes to CSS, their main concern will be that the investment they’re making with you will reach the widest audience possible.

The latest argument to skirt this issue is to simply present your comps after you’ve already began front end development. That is to say, some designers feel that presentation of a static comp is no longer applicable directly as a result of wanting to use progressive features such as CSS3. The idea behind it is this: if your client is using a substandard browser, the production site will look exactly like the approved comps simply because they’re using the same underpowered browser the whole time. Meanwhile, visitors with modern browsers will be graced with the much more pleasant version. As the client upgrades their browser, they’ll be elated that this new browser made their website look that much better! Although I’ve never tried that approach, I can’t quite stand behind it.

In my experience, clients are extremely detail oriented. They’re going to ask for more should they see the design in IE6, even if you took the time to beautifully degrade. At that point you have two choices; you can revert to the old school, or you can trek down the path of explaining CSS3 and why they need to trust you on this one. All the while eating those hours.

As I mentioned, this is something I’ve been going back and forth with for some time now, and I think having a conversation on the subject using realistic circumstances and case studies would be superb. What’s your stance on the issue, specifically when dealing with clients and not your personal projects? Do you think CSS3 is simply ready for prime time given the many repercussions involved? At what point will it be acceptable to implement CSS3 and not have to focus on fallbacks and graceful degradation?

Advertise here with BSA

Pods is a CMS framework for WordPress. It’s a plugin that sits on top of WordPress, allowing you to add and display your own content types.

Calling Pods a ‘plugin’ is an understatement. It’s one of those WordPress plugins that does so much more than provide some functionality to work with that makes your life a bit easier or makes WordPress that much more useful. Pods has changed the way I work with WordPress. Pods has allowed me to truly use WordPress as the content management system it was born to be. While a ton of great stuff is happening in the core, Pods is giving us what we need to work with today, and it’s spectacular.

Over the next few months, I plan to divulge all I know about Pods in a series of tutorials and articles meant to act as my own personal user guide for Pods. Pods is a big enough system where you can actually work with it in your own style, and I think I’ve done that to an extent. Pods has an entire level of author features that I don’t particularly make use of simply because I prefer to get my hands even dirtier than Pods requires.

An introduction to Pods

As it is defined, Pods is a content management plugin for WordPress. Many people may wonder why a plugin is needed to make WordPress a content management system, doesn’t it do that already? Absolutely, but out of the box, WordPress specifically caters to a few types of content; Posts, Pages, Media, Comments, and Links. WordPress does a ton more (such as categories, tags, users, etc.), but as far as the average user is concerned, those are the major content types you’re able to work with. Themes bring all that managed content together to share with the world, and plugins build on top of that even more.

Many plugins exist to provide you with a new type of content to manage, most often a specific type of content aimed at achieving a specific goal. That’s awesome, and helps tons of people to make that change they’re looking to update on their site. Pods, however, thinks about things in a different way.

Pods provides a platform on which to build your own content types to manage, all the while providing some really advanced functionality having to do with that content. From the User Guide, a Pod is a group of input fields. You can add and arrange any number of the various available input fields to any number of Pods, essentially creating your own custom CMS for each website you build in WordPress.

Finding the happy medium between WordPress core and Pods

So if WordPress is a CMS, and Pods is a plugin that acts as a CMS framework for WordPress, how (and why) can you use them at the same time?

While you can technically accomplish the same functionality with an out-of-the-box copy of WordPress using a crazy blend of nested Pages, categorized Posts, and a ton of Custom Fields, Pods helps abstract that desired ‘next level’ of functionality you’re looking for as a WordPress developer.

Trying to explain what Custom Fields are and how to use them to a client isn’t something I look fondly upon. While it’s super for developers, to the rest of the world it’s terribly bulky and unintuitive. I think Custom Fields are an awesome available resource for plugin developers, but they’re one of those things better left unseen to the novice user. Pods brings the ability to work with custom pieces of data to the client, all the while giving developers a terrific extended platform to build upon. If you find yourself repeatedly using custom fields within your WordPress sites, especially for clients, you’re probably ready for Pods.

The Pods CMS Series on MBN

This article is the first in a series for Monday By Noon dedicated to Pods CMS.

1. An Overview of and Introduction to Pods CMS for WordPress
2. Pods Basics: Installation and Setup
3. Pods Basics: Pulling Pods Data to your Theme
4. Pods UI: The Latest and Greatest Addition to Pods
5. How to use Pick Columns (Relationships) in Pods
6. The Last of the Pods Basics: Pagination and Sorting

Advertise here with BSA

I’m going to infer that what resulted was not Nathan’s intention, but a small powder keg went up in flames. He was hit with instant recoil from the massive troll population plaguing both our community and the rest of the Internet. Without taking the time to find out his true intention, people instantly felt Nathan was bashing both WordPress and Dreamweaver, and felt the need to express a targeted response. I’m all for debate, but there are certain ways of going about it. The odd part about this occurrence, however, was that people on both sides of the fence were being quite overzealous about their home turf.

The philosophy of content management

I think a major talking point throughout this conversation needs to be the premise of content management itself. How is content management defined? To me, a content management system is something that manages content. It can be “enterprise level” content management (whatever that may mean), blogging, or the one page site your aunt asked you to put together for her.

Much of the support “in favor” of Nathan’s opinion surrounded the stigma WordPress has as a blogging platform. Nate Klaiber made a great point throughout the back and forth; that custom fields != CMS. That’s more than true. I absolutely 100% agree with that sentiment. It was at this point I learned that what we’re dealing with is again the mass adoption issue with WordPress. More on that later.

WordPress has its roots in blogging, that is the founding purpose without a doubt. The continuation of the story, however, is that WordPress has essentially conquered blogging. WordPress moved beyond blogging on the order of years ago. Since then, WordPress has begun to accommodate a nearly endless combination of site types it can handle. Not to toot any horns, and not that it’s the end all be all, but over the past years WordPress has worked its way up the Open Source CMS Award rankings to take it home this year.

How WordPress fits in

Nathan’s primary argument regarding WordPress was the fact that to him, while it makes a decent blogging platform, to call WP a proper content management system would be pigeonholing. Many rejoiced, many took offense. Surprising to me, a number of designers I’ve come to respect went so far as to say that if you use WordPress as a CMS you’re doing your client a disservice. That was tough to hear, not because I’m defensive of WordPress, but because that’s quite a dig to take at a large population of what I feel are talented people.

I’m a huge fan of WordPress. I use it for 98% of my projects and it’s worked out swimmingly. I’m not dumping dozens of custom fields into every Post and Page though, I’m using a set of plugins I’ve come to know, trust, and work with for an extensive amount of time that helps me provide terrific content management platforms for my clients.

That’s where a light bulb went off for me through this back and forth amongst my peers. The people supporting WordPress know it on a higher level than those who were bashing it. I then continued to process the discussion by justifying some comments by realigning them to target an out of the box installation of WordPress, sans plugins. But then I went on to think about some of the content management systems suggested as alternatives to WordPress. The primary of which being ExpressionEngine and Drupal.

That’s where it got interesting to me, and where I felt zealotry was taking over a bit. I respect both ExpressionEngine and Drupal, and although I’ve never used either beyond a basic installation and run through, I can see that lots of time and effort has gone into both. I also know and respect the large, talented, and knowledgeable communities surrounding both platforms, but I also know that I’m turned off by both systems for daily use. I’m not here to start another flame war, but my trials with both ExpressionEngine and Drupal have shown that they’re not the system for me, not at this time. I say ‘at this time’ because I fully intend to explore both systems in full detail for an extended amount of time before officially signing either off as incompatible with the way I want to present a CMS to my client. Drupal also won big this year in the unofficial CMS Awards; it took home the Hall of Fame Award, and has a long standing streak of winning Best Overall Open Source CMS in past years.

I continued on with my thought process to realize that many of the people who know and love ExpressionEngine and Drupal also have their secret weapons in the form of plugins or mods that make the CMS work the way they want. For example, I can’t count the number of times I’ve heard people say that they’d never build an EE site without Structure. I’ve also heard that Structure completely changes the way you work with EE. I use Pods for every WordPress project I build. It completely changes the way you work with WordPress.

What does that say about each respective platform? What does that say about the plugin architecture? What does it say about the people using the systems?

My final remarks on the issue

As I mentioned previously, I feel that a major aspect of the WordPress vs. “CMS” ordeal is mass adoption. As with PHP in general, people do lots of stupid crap with WordPress. I admit that fully. When it’s so readily accessible and open, it’s an impossible thing to avoid. There are also, however, people doing some amazing things with WordPress, and it’s got nothing to do with shoehorning or pigeonholing.

I also feel that the minor aspect of the debate is (for lack of a better term) ignorance tied in with a touch of overzealousness. It’s hard to become intimately involved with every CMS in an effort to find a fully encompassing opinion on it. That takes quite a bit of time and even more effort, a resource everyone in the world ran out of long ago. If your initial experience with a CMS didn’t work out in the way you had hoped, you’re going to move on to the next until you find something that does. Once that project goes smoothly and you’ve covered the basics, you’re going to learn even more on the next project, so on and so forth. Before you know it, even considering the original CMS was a laughing matter as you’ve become so accustomed to what worked for you. Why, if that original experience was so lacking, would you keep up with development, keep up with new plugins, or even bother reading up on the system at all? You’ve got work to do and you want to get it done with the system you know to be effective.

In the end, I’d just like to conclude this opinionated piece by reminding everyone that it’s not always the tools you use to get the job done, it’s the end product itself. While content management is a unique case in that your client will see the tool you’ve chosen, it’s about education. Instead of talking bad about one system or another, how about we build some websites? Let’s tout the good things we’ve come to know and love about our choice content management system, and leave the rest to the wayside.

Advertise here with BSA

I sincerely doubt that you’ve come across a fellow [Web] designer who talks about his job as though it only pays the bills. I find that extremely endearing about our industry. We’re all here by choice, and apart from unavoidable frustrations found in everything, we love what we do.

People in our industry are often overly inspired to a fault, resulting in becoming burnt out. The trouble lies with inspiration. We’re often so inspired in the daily goings on, we’ll become burnt out before knowing it. I can’t count the number of times I’ve been super excited to work on a project, only to be itching to work on anything else by the time a push to launch comes about. It’s not because the project became less interesting, not because the client bipolar’d himself on to my “Ugh” list, but because I put everything I’ve got into it for weeks on end and it eventually runs out, no matter how devoted you are.

Retain your inspiration

I’ve thought a lot about my inspiration lately. I can’t say for sure that I’ve got any solid, noteworthy results for myself, but I can say that both SuggestRSS and jchristopher.me are a direct result. I’d like to chat a bit about how I’ve approached things lately, in hopes that it strikes a chord somewhere.

When I speak about inspiration here, I won’t be focusing on design inspiration per se, I mean the inspiration to have fun with your work and enjoy it. That is to say, I won’t touch on having design block on a current project and give a list of the Top 10 Sites and Galleries I Use for Inspiration. In fact, that note right there brings up my first suggestion.

Look in new places

There’s plenty of inspiration flooding the Web at any given time. Whether it’s a design article from the people you look up to, or something you randomly stumbled upon, it’s almost trivial to find a new article that gets you thinking about Web design in a slightly different way.

That’s all well and good, but lately I’ve started to get inspiration from different sources, and it’s downright addictive. If you’ve got creative interests outside of Web design, focus on them and keep the Web out of it.

I’ve been devoting a lot more time to studying photography over the past year or so. I’ve been studying not only the art of shooting a photo, but the science behind it as well. On top of that I’ve made an active effort to talk to other photographers (Kevin and P.J.) specifically about photography and photography only, without the conversation turning to the Web, with both being designers themselves. Not only because they know more than me and that’s one of the best ways I like to learn, but also because it inspires me to go out and take more photos, to try to better what skill I have.

Another place I’ve been gathering inspiration is Xbox. That’s right, Xbox! There is some really slick design work in video games, tie that in with the experience of playing and your creative can go into overdrive. If you follow me on Twitter you’ll already know that I’m a huge fan of DiRT 2. Not only is the game itself (rally racing) wicked fun, everything right down to the menus look great. On top of that, Codemasters integrated the soundtrack in a really neat way that gets you excited to race. The menus in that game, for one reason or another (and hard as it is to see) actually had a bit of an effect on the design of jchristopher.me.

The final outlet I’d like to touch on is super generic and probably obvious, but the other place I’ve been gathering much of my inspiration is away from the computer. As a result of an entire series of circumstances in my personal life, work and design took a huge back seat for nearly two months. There were events both good and bad that helped provide an entirely new perspective on things for me personally, and that became inspirational over time. I think what I mean to say is that one of the most inspirational things you can do is get out and live life, as cliché as that sounds. People, circumstances, situations, and surroundings can be tremendously inspirational in the strangest of ways. The point to the anecdote, though, is that I found inspiration through prevention. Not living and breathing Web design helped me to enjoy it more once things settled down and got back on track.

Outside unconventional outlets for inspiration, there are some that remain more tied to the industry itself.

Actively ignore the junk, because there’s lots

Quit looking at “CSS” design galleries. Seriously. Take other designs for what they’re worth, but unless you want to get away with blending in and at the same time do nothing for your personal growth, peruse them in your free time, not to jump start your creative. I do feel there can be inspiration gathered from these sites, but little more than checking out what trends and novelties have filtered through the entire spectrum of Web designers.

Along those lines: push the linkbait, “Top 13″, design trend, monetary-inspired articles as far away as possible. Those pieces exist for little more than click-through percentage boosts and hitting the front page of Digg. What good is that to you? There’s a very fine line between information and linkbait, and it’s very important that you’re critical of everything you read. In my opinion, there’s quite a bit of junk out there, all backed by a lot of “leading” design sources. That’s not the place to find inspiration.

As closure to this section, one of the most important things to do is surround yourself with the proper people all the while doing what you can to remove yourself from The Others. I mean in person, not virtually. I’m also not speaking about strictly other Web designers either, I mean in general. People are extremely influential, and it doesn’t take much for the Human Factor to completely throw you off. I don’t mean to suggest playing favorites, being outwardly rude, or anything along those lines. I just mean to say that the people around you directly effect you, no matter how focused or introverted you may be.

If you’re surrounded by those with an equal interest and investment in Web design, you won’t be able to help yourself from becoming inspired. Not only are you provided valuable insight, you’re provided a new angle, which is super important.

Don’t sweat the small stuff

Stress and anxiety are by far the quickest inspiration killers for me. Do what you can to let as much slide off your back as possible, especially if you’re in a position where there’s a lot going on outside design work itself. If you’re a freelancer, this may not apply as much, but if you work within a company of people, it’s probably a different story.

I’m not saying stop caring. I’m not saying that at all. What I am saying is that everything is not an emergency, don’t make rash decisions on the spot because you’ve got a lot on your plate.

When working within a company there’s not only the general day-to-day activity going on, but there’s also company strategy, client issues, deadlines, concurrent projects, and email to deal with. Even if your company is well structured and you’re low in the ranks, things will absolutely come up at some point, no matter how big the company is.

Inspiration can be delicate, so be nice

I think the big Take Home lesson I’ve learned throughout the past few months is that my inspiration can be fragile; it doesn’t take a whole lot to throw everything off track for the day. There are things, however, that can be done to ensure that inspiration-destroying bits of life can be pushed the wayside until it’s appropriate to handle. There’s nothing wrong with that; hop in low gear and ride it out.

Advertise here with BSA

In the case of lightboxing, it came down to displaying images either by using target="_BLANK" or simply dealing with a full page refresh. For what? Clearly both the latency and resources involved were too taxing both for the user and her experience, even if she didn’t know it.

Lokesh recognized the problem and developed a very elegant solution that took the Web by storm. As with all great things on the Web, his implementation was first widely accepted, and then widely copied forked. The technique was applied to every JavaScript library and/or framework under the sun, in multiple cases, and the technique of lightboxing really took hold.

So what’s the problem with lightboxes, gramps?

Don’t get me wrong, I’m a huge fan of lightbox! To me, the trouble isn’t with lightbox as an entity or technique, the trouble surfaces when it’s put into production. I can’t remember a client project in which a lightbox variant was used where we didn’t need to take time to explain what it is and how it works.

That’s not to say that the lightbox used odd controls or was modified beyond recognition, no. It was simply because the average Web user doesn’t understand what’s going on. At all. Here’s where the problem comes up, and it’s a deal breaker. (Most) lightboxes break the Back button.

In every case of showing a client a development site using a lightbox, he would examine an image and disregard the controls put in place to return to the page, and always go for the Back button in his browser. Even after explaining the reasons we implemented lightbox for image viewing (user experience improvement, etc.) it was very apparent that the client was turned off by the technology.

A proposed fix

To our benefit, such technology exists to assist us with such problems. SWFAddress was written to tackle this problem specifically. Originally written for the benefit of full Flash websites, SWFAddress works wonders with JavaScript implementations as well.

Combining SWFAddress with your favorite lightbox variant would solve this very common problem with its use. A potential issue arises on a couple fronts. First, you’ll need to teach yourself how to use and implement SWFAddress. Beyond that, you’ll need to learn how to integrate SWFAddress with your lightbox.

As an example, I’ve taken those very steps and combined my choice lightbox implementation Shadowbox.js with SWFAddress and used jQuery to bridge the two.

Lightbox (Shadowbox) and SWFAddress integration demo

Please view the source for documentation.

You’ll notice that the Back/Forward browser buttons should retain expected functionality. Additionally, if you were to bookmark a SWFAddressed URL, hitting that URL should automatically invoke the Shadowbox and display the image. Users without JavaScript wouldn’t see the SWFAddress URLs at all, so it’s important to remember your alternative version for those users. But that was already in place, right?

Mind your audience, that’s the deciding factor

As per usual, the important thing here to consider when determining what technologies to use on your current project is to remember the target audience. Are they going to accept lightbox as an acceptable image display technique? Are you better off just doing things the old school way and firing a page refresh? Just be sure you’ve got reasoning (and fallbacks in place) when opting to go with such technologies.

Advertise here with BSA

I often challenge my own stance on handling IE6, and have found what I consider to be a happy medium between both sides of this argument. I can’t in good faith stand behind the abrasive method of completely blocking (or severely limiting) access to a site based on user agent. Another way of handling things is to serve a completely alternate stylesheet, or remove the styles altogether. I prefer that solution over a roadblock.

At the other end of the spectrum, designers will do anything and everything to make the best of the situation, including tracking and billing time specifically for IE6 support. These designers seem to be most irritable when it comes to IE6, and understandably so. There’s a better solution. There is middle ground.

Support IE6, but don’t cater to it

I (and my company) support IE6. We do it because we have a strong feeling about accessibility, and supporting IE6 is really not a big deal.

The biggest calling to roadblock IE6 is by far its CSS “support” — that’s what gives the biggest headaches and leaves everyone running for the hills. The thing to remember, though, is that you’re a professional. With each project, working with IE6 is going to get easier. You’ll remember the disaster happened last time, and you’re going to remember how you fixed it. You’re not going to be faced with that problem this time around, or ever again. Get a couple years of that under your belt and you’re on Easy Street.

I’m not saying that your fixes need to go above and beyond a level of reason for the sake of IE6. The markup and style we’re writing is solid, right? There’s no reason we can’t quickly gracefully degrade a document either out of the box or by force. If that drop shadow is giving you trouble, tell IE6 it’s not there and continue with the next task. This design uses a series of PNGs to bring it to the next level? Don’t bother with PNG fixes; use a choppy GIF or nothing at all. Next.

Another major reason for roadblocking IE6 is JavaScript support. Even though we’re working with superb JavaScript libraries, things sometimes just don’t work out the way we expect. Here’s the answer for that:

JavaScript enhances the document viewing experience by adding an additional behavioral level, right? We’re talented professionals who have already built a fallback version of this document to directly compensate for the absence of JavaScript, right? Our problem is solved: IE6? Don’t fire our JavaScript. If it’s going to be a headache, why bother? We have a perfectly good version of the document that was only progressively enhanced by the JavaScript. IE6 can’t hack it, so just shut it off. Deliver the reduced experience because your viewer, for one reason or another (it doesn’t really matter, does it?) is using a terrible browser.

My point is, that the frustration regarding IE6 comes from forgetting about the medium in which we work. Pixel perfection is a lost cause, and that not only deals with off-by-one-pixel situations, that expands to include the bigger picture including both design assets and behavior enhancements. Don’t try to replicate the beauty of the original design in IE6, just make it accessible and move on.

Aggressive Graceful Degradation

I’ve come to call this view of IE6 support Aggressive Graceful Degradation. Instead of relying on your implementation to fall back to a working version of something, you instead force the changes through gateways provided by IE6 itself.

My experience has taught me how to avoid any catastrophic issues as far as the box model (and therefore main document structure) is concerned, so the IE6 issues I deal with on every project are minimal at best. My IE6-specific stylesheets are mostly just a few declarations replacing PNGs with GIFs (or removing the image entirely) and li fixes that I already expected to implement.

There are a number of other tips that I’ve come to learn in my career that make IE6 less than a bleep on the radar on any project. I documented a number of these tips in Fear not. I have Conquered IE6, and You Can Too, hopefully there are some things that will help you out if you’re having a bit of trouble tackling IE6.

The other main factor to which I can attribute the success of Aggressive Graceful Degradation is that I employ conditional comments to target each version of Internet Explorer in such a way that my fixes are implemented quickly and directly with no side effect other than a few extra bytes of bandwidth for standards-based browsers.

Conditional comments is a subject by itself, one that has been discussed up down left and right, and I’m hard pressed to find a negative stance that really takes hold with me. I’m more than thankful that Microsoft implemented conditional comments so long ago, as it is the single most important enabling feature of Aggressive Graceful Degradation.

Preparing your clients

Taking an Aggressive Graceful Degradation stance is the easy part, the hardest part by far is conveying both the cause and effect of this decision to your client and what it means for his project. To tackle this issue directly, my company has started including an additional document with our contracts, explicitly stating our stance when it comes to Internet Explorer.

We try to teach our clients as much as we can from the kickoff meeting through (and beyond) a site launch. More often than not, a client will appreciate the fact that you’ve taken the time to share your knowledge, and explain it in such a way that the information is useful.

This extra document is referenced in the contract copy and the client is required to sign, acknowledging that he knows his website may in fact render in a very different way, but retain full accessibility. I’d like to extend this document to the community, in hopes that it helps you to take a stance of Aggressive Graceful Degradation when it comes to IE6 as opposed to taking on an abrasive solution such as roadblocking the project.

If you’d like to find out more information regarding the Internet Explorer Contract Addendum please feel free to review and use the addendum in your own contracts, it is released under a Creative Commons Attribution-Share Alike 3.0 United States License. Suggested revisions are encouraged. A formal area for suggestions has not yet been established, but please feel free to contact me directly and we can all work together to make the addendum commonplace in project contracts.

Advertise here with BSA

This was before the days of the Gedit implementation of snippets so I did my best to replicate TextMate in SciTE. It was awesome. Incorporating snippets changed the way I worked by orders of magnitude, and the implementation found in TextMate is the bar to which I compare every other editor I’ve tried.

What’s great is that snippets seem to have hit the mainstream. Besides OS X specific editors such as Panic’s Coda and MacRabbit’s Espresso, platform independent editors and IDEs have their own implementations as well. Apart from E TextEditor on Windows, however, I haven’t seen an editor implement snippets to the full effect of TextMate.

The big deal about snippets

The deciding factor for me is the ability to have multiple stops per snippet. This gives you the ability to not only share snippets (through Bundles or otherwise) but also very easily write your own. Every designer/developer has his or her own set of tricks, and a generic bundle isn’t going to cover you 100%. The great thing about a solid implementation of snippets puts the power in your hand to finish the job and add the final touch of customization you need.

I’m always on the hunt for a newer, better editor. It’s a curse I’ve had for years and one that will never go away. To be brutally honest, snippets are the only thing holding me to TextMate at this point, as there are a number of strong contenders on the market now, targeted specifically toward Web developers. They’re also gorgeous to boot.

I was to the point where I was simply waiting for the various editors to publish a few dot releases including a solid snippets implementation a la TextMate. That is until I discovered zen-coding. My mind was blown all over again.

zen-coding takes snippets to a new level

zen-coding touts itself as a “set of plugins for HTML and CSS hi-speed coding” and my gosh it lives up to the name. The snippets implementation provided by zen-coding are based on specification drafts, and a heck of a lot has been included by default.

• HTML elements (based on the HTML5 draft spec)
• HTML selectors
• CSS properties (based on the CSS3 draft spec)

Instead of going over the documentation here, I’d just like to call a bit of attention to the HTML selectors linked above. This is truly what made my jaw drop.

The biggest calling point for zen-coding for me is its implementation of HTML selectors as snippet triggers. zen-coding includes an entirely new angle to writing markup, and it facilitates the feature by letting you write HTML based on CSS selectors. It’s so simple it’s confusing at first. I think it’s best explained by doing a quick before and after. If you were to type:

div#name.one.two

and follow that with the zen-coding plugin keystroke (CMD+E in TextMate), the plugin will reformat the line as:

<div id="name" class="one two"></div>

Let’s get a bit more advanced, typing:

ul#name>li.item

will result in:

<ul id="name">
    <li class="item"></li>
</ul>

Last, but not least:

p.one+p.two

will result in:

<p class="one"></p>
<p class="two"></p>

It doesn’t stop there. zen-coding has included an even more elaborate set of possibilities on top of valid CSS selectors.

Element multiplication and variables

A really fascinating feature of the CSS selector abilities comes from element multiplication. Perhaps one of the most tedious things to mark up (when not working from existing copy) is a list (or eight). zen-coding does its part to lighten the load, quite a bit:

ul#name>li.item*3

provides:

<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

By including a multiplication modifier, you can control how many child elements are included in the snippet!

The other really interesting implementation deals with variables in snippet output, which is neat:

select>option#item-$*3

gives you:

<select>
    <option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>
</select>

By including the dollar sign, you can include a reference to the index of the element you’re multiplying. Although really specific, it could (and probably will) come in very handy from time to time.

I mean if you’re not impressed yet, I just give up!

See it in action

There are a few screencasts referenced on the Google Code page for zen-coding which illustrate the above really well:

• Zen HTML features, 1.х branch, screencast
• Zen CSS features, 1.х branch, screencast
• Aptana Zen HTML features, 2.х branch, screencast

Definitely check them out if my explanation is still a bit foggy, as the screencast really helps display what this plugin is capable of.

Compatibility

One of the finer points of zen-coding is the fact that the developer(s) are taking the time and effort to publish this genius for multiple editors both for OS X and cross-platform. Currently, according to the Google Code page, the plugin has versions for:

• TextMate
• Aptana
• Coda
• NetBeans
• Espresso

Unfortunately, I didn’t find a download link to the Espresso Sugar, but I will keep my eyes open for that as well. Update: the lead developer, in his comment below, let us know that the Sugar is included by default in Espresso releases. I’ve checked out the plugin both in TextMate and Coda and I can say that this plugin alone makes Coda a true contender for more advanced developers looking for a better implementation of Clips (until Coda natively supports snippets (fingers crossed for 2.0 bigtime)).

Note: to fully install in TextMate, you’ll need to download three bundles. At the time of this writing, the three download links are titled as:

• Zen.Coding-TextMate.v0.3.zip (implements zen-coding)
• TextMate.Zen.HTML.1.3.zip (implements HTML functionality)
• TextMate.Zen.CSS.1.3.zip (implements CSS functionality)

Be sure to install each bundle you need!

Non OS X users may find a bit of luck in that the plugin is released for both Aptana and NetBeans, two very popular IDEs as of late. Windows users should be able to use the TextMate bundles in E as you’re accustomed. While there is definitely activity on the Google Code page, I’m not positive that other editors will be supported in future releases.

I love Web design.

This is the line of thinking that really gets me excited about what I do. zen-coding has again completely changed the way I approach writing code, and has raised the bar to a new height. What else is great is that this functionality was provided out of someone else’s love for the industry as well. Their great idea is now making my life even easier, and that cycle will definitely continue in the Web design community.

Advertise here with BSA