Some Basic Resources

• New to javascript?  Have a look at the Javascript Guide from the Mozilla Developer Network
• Interested in browser support?  Read this post and checkout Quirksmode, Modernizr, HTML5 Polyfills
• Looking for coding standards and best practices?  Checkout Isobar
• Not a fan of the javascript syntax?  Checkout CoffeeScript
• Want to write a html5 mobile app that can run natively?  Checkout Phonegap
• Wondering where the core libraries are hiding?  Checkout the CommonJS project
• Want to write code in the cloud?  Checkout the Cloud9 IDE from Ajax.org
• Already an expert?  Maybe you’ll find CouchDB, Nodejs, and jslibs interesting

Those links lead you to some really cool javascript projects and communities and I highly recommend exploring the ones that interest you.  However, if you’re like me and you’re looking for a solid foundation for building client side applications then read on.  I’ve assembled a list of some of the most common and/or most intriguing frameworks and libraries that I’ve come across, in no particular order.

Frameworks

• jQuery + jQuery Plugins + jQueryUI (see: jQuery’s Best Friends, jquery-startr)
• Dojo Toolkit (see also: Cujojs, Dojo Foundation)
• Moo Tools
• Sprout Core
• Google Web Toolkit
• Yahoo User Interface (YUI3)
• Sencha
• Backbone
• JavascriptMVC
• Prototype
• Echo Web Framework

Libraries

There are a vast number of plugins for jQuery and other frameworks that I encourage you to explore. I’m not going to list any of them here.  However I have listed a somewhat random assortment of stand alone libraries that are useful to know about.

If you’re interested in testing frameworks, checkout stackoverflow for a great discussion on your options.

These lists are absolutely a work in progress so if you’ve got any suggestions for me please post in comments.  I’ll also continue to add to them as I discover new and interesting libraries.

Core

• ECMAScript (engines, benchmarks)

Markup, Animation, Media

• HTML5 (semantic markup, canvas, audio, video, forms, etc…)
• CSS3 (advanced selectors, transitions, transforms, animations, etc…)
• SVG
• MathML
• WebGL

Interaction

• DOM3 Events (state/history, mouse, keyboard)
• Device Orientation
• Web Events (multi-touch support)
• Speech Input (Google blog)

Process Threads

• Web Workers (map/reduce library?)

Storage

• Web Storage (session storage, local storage)
• Web SQL Database
• Indexed Database

Network Interface

• XMLHttpRequest (cross-origin resource sharing)
• Web Sockets
• Web Notifications

Sensors, Awareness

• Geolocation

Widgets

• Widgets

I will probably continue to make edits to this so continue to check back if it interests you, or post in comments if you’ve got feedback or things you think I should add.

Graded Browser Support

Yahoo has published their Graded Browser Support for the last 3 years and it makes a great starting point for any web application project.  More recently jQuery Mobile published their Mobile Graded Browser Support which emulates Yahoo’s approach. Both of them have divided browsers into tiers, Yahoo choosing to provide different experiences to users in different tiers, and jQuery Mobile choosing to only support the top tier.

The tiered approach is a great way of thinking about the browser landscape and outlining a strategy for Progressive Enhancement or Graceful Degradation.  However there are still significant variances in the APIs of the browsers within a single tier, especially if you want to use any of the newer technologies.  Developers address this variance by writing Patches, Shims, and Polyfills(?) in the hopes of creating a baseline API on which to build the rest of their application or library.  Generally your baseline API should target current W3C and related specs.

Building Patches, Shims, and Polyfills

If you’re Google and you have unlimited engineering resources you can write sophisticated browser plugins like Chrome Frame and Google Gears to update older browsers.  For the rest of us, the best way to go about writing patches, shims, and polyfills is to use feature detection (as opposed to user-agent detection). Peter Michaux has a great article on how feature detection balances false positives and false negatives.  You can also learn about feature detection techniques from Dive Into HTML5.  There are a number of feature detection libraries such as jQuery.support and Modernizr.

So once you write a feature test that returns a meaningful boolean, the question is how you address the lack of a feature (a false).  If you can implement the feature using javascript and other supported technologies then you’ve got yourself a shim!  If your shim conforms to a W3C or related standard, even better!  People will disagree on what they consider “implementing” a feature, and often times shims don’t perform as well as a native browser implementation would, but even bad performance is usually preferred to no performance.

A Polyfill is essentially a shim that replicates the real API as defined by the standard/spec.

• It generates traffic back to the publisher of the content
• It generates brand awareness from the text and images in the feed
• It enables rich demographic analytics

I’m going to walk you through how I’ve implemented the Like Button on the popular fashion blog Honestly WTF so that you can publish something like the following to a users feed:

The Like Button interacts with Facebook’s graph based API using a protocol they call the Open Graph Protocol.  The quickest integration is to use their little code generator widget that spits out a snippet of javascript.  However this approach doesn’t allow for the second and third values listed above.

We’re going to use the second approach which requires that you register a Facebook Application.  Once you’ve registered your application and gotten an appid you can load Facebook’s Javascript SDK into the page and turn on Facebook’s markup language XFBML.  Let’s go ahead and walk through how that’s done.

Facebook XFBML Setup

First let’s start with a little theme organization.  I put all of my javascript in a theme subdirectory called /js so if your theme doesn’t already have this directory, I suggest you add it now.  Once you’ve added the js directory, create a file in it called init.facebook.js and just leave it empty for now.  In order to get the Like Button working we’re going to need to load the following three scripts:

• jquery.js
• http://connect.facebook.net/en_US/all.js
• /js/init.facebook.js

WordPress provides two useful methods for loading scripts called wp_register_script() and wp_enque_script(). Add the following code to the functions.php file in your theme to get these scripts loaded:

Now let’s walk through what’s going on here.  First we load the jQuery script which is often already loaded anyway since a lot of plugins use it.  Then we check to make sure we’re not in the admin screen because chances are we won’t need to add Like Buttons there. We then register and enqueue our Facebook scripts.  Finally we add our facebook_sdk_init() method to the WordPress init() callback.

The Facebook SDK requires that you add namespaces and an anchor in every page you want to use it.  I’m going to add them using WordPress callbacks which requires that your theme calls both the language_attributes() function and the wp_footer() callback. If your theme doesn’t call these functions I would highly recommend adding them. With those in place, here’s what we add to our functions.php file.

Now that we’ve got these functions added we’re ready to move on to initializing the app itself. We have to wait until the document is ready to call the FB.init() function to ensure the script dependencies have been loaded and the anchor markup has been added. So open up the init.facebook.js file that we created earlier and add the code below. Make sure to add your appId to the script, otherwise it won’t work.

Once you’ve done that, you can start adding XFBML tags into your theme.  In order to add the like button, try adding this within the loop on the index page:

<!-- Add to any loop in your theme -->

<fb:like href="<?php the_permalink() ?>"></fb:like>

You can find all of the attributes to customize the button on the Like Button page.  Now that we’ve got XFBML parsing working, it’s time for Facebook Open Graph optimization.

Facebook Open Graph Setup

When a user clicks a like button on a page, Facebook needs to determine what it is that the user is “Liking” in order to build the feed entry they publish to the users feed.  You provide Facebook with this information by adding special meta tags to the header of your html document.  Information on these meta tags can be found on the Open Graph Protocol page.

There are probably a lot of ways to configure these meta tags for blogs, and I don’t know if there’s a right way.  That being said, here were the things that I wanted to accomplish:

• Add individual like buttons to every article (post) on every page
• Include a thumbnail image, the article title, the blog url, and a short excerpt when posting to a users feed
• Use default metadata for pages that don’t represent a specific article (post)

Post thumbnails have only been supported since WordPress 2.9 and need to be explicitly turned on in your theme (see next code snippet). In order to generate thumbnail images for every post on the blog, I used a great WordPress plugin called Auto Post Thumbnail.  There are other plugins that also generate thumbnails, and you can always add them manually to your posts from the create/edit post screen.  You do this by setting the featured image:

I decided to write a function that would create the Facebook graph meta tags for me.  That way I could automatically add them to all of the pages on the blog.  So here are the last two functions and callbacks we need to add to functions.php:

This function first defines the default attributes for your blog.  It then overwrites the page specific attributes if it detects that you’re on a single post page.  Finally it generates all of the meta tags and echos them into the page. We attach it to the wp_head() callback function to insert it into our documents.

And that’s it folks, you’ve essentially built yourself a WordPress plugin that does a proper integration of the Facebook Like Button.  Hopefully you’ve found this tutorial useful.  If you have any questions or feedback, please feel free to post in the comments.  If you want to download the test theme click on the github link below.

I currently manage the technology side of the popular fashion blog HonestlyWTF which is penned by my wife and her friend.  Through a combination of great content and search engine and social media optimization, we’ve been able to grow the site to 1,000,000 pageviews a month in less than a year.  Most of my work on this project continues to be WordPress theming and optimization.  This has included the following:

• Intelligent social media integrations (i.e. Facebook Like Button)
• Advanced server side caching using the WP Super Cache plugin
• General search engine optimization
• Implementation and optimization of ad units
• Feed and Newsletter management (integration with Feedburner)

• Make the data entry as easy as possible
• Do as many validations as I could on the client side
• Use jQuery

Date’s are always tricky for people to enter into forms and the best solution really depends on the situation.  Birthdays present their own unique features:

• You always know the exact date you’re entering
• The date is always in the past, and often many years in the past

Because of this a common date picker such as the jQuery Datepicker, which works great for things like airline reservations, isn’t quite as suited for choosing a birthday.  Instead most people end up creating an empty text field and adding validation to it, either on the client, on the server, or both (I strongly recommend both).

<form id="myForm" method="post">
  <input id="birthday" name="birthday" type="text" />
  <input type="submit" value="submit" />
</form>

This is where something like the jQuery Validation plugin comes in really handy.  With very little effort you can ask it to ensure a valid date is entered.

$("#myForm").validate({
  rules: {
    birthday: {
      required: true,
      date: true
    }
  }
});

This is a pretty easy solution, and probably sufficient in almost all cases.  If you go this route I would suggest adding a placeholder to the input field to show the user a sample date in the format you’re expecting.

<input id="birthday" name="birthday" placeholder="10/17/1980" type="text" />

However if you want to be especially picky, this solution does allow invalid birthdays because you can enter a future date.

So I decided to continue my search to see how other people had solved this. The first place I looked was Facebook, and behold, they had their own implementation. If you’re interested you can have a look at their homepage (you must be signed out). The basic markup is as follows (with slight modifications and option menus omitted):

<select name="birthday[month]"></select>
<select name="birthday[day]"></select>
<select name="birthday[year]"></select>

I think if you were a user interaction purist you’d quickly find the faults with this solution. It requires three different fields, all of which are dropdowns, ugghh! That being said, it does have some things going for it. The format is forced which means the user should almost always get it right on the first try. It also allows you to restrict the date range which can solve the future date issue.

So I decided I might give Facebook’s implementation a try and quickly realized it is not without some complexity.  For it to be worth anything it requires that the dropdown menus dynamically update themselves in the following ways:

• The number of days in the day select menu should reflect the chosen month
• The number of days in February should account for leap years
• The dropdowns should selectively reset to prevent display of an invalid date

After giving it some thought, I decided this would be a good opportunity for me to learn how to write a jQuery plugin to mimic this implementation.  While writing the plugin I decided it would be fun to add some additional options which are all outlined on the plugin page, github, and the demo page.  But as a quick guide to how it works, you can make the following call on any block element in the page:

$("div#birthday-picker").birthdaypicker();

By default this will generate the following markup (with option menus of course):

<fieldset class="birthday-picker">
  <select class="birth-year" name="birth[year]"></select>
  <select class="birth-month" name="birth[month]"></select>
  <select class="birth-day" name="birth[day]"></select>
</fieldset>

I believe that I’ve solved the requirements I listed above.  And, as mentioned, there are a number of options that give the plugin some flexibility, both in the range of dates it will support, and the markup it will generate.  I think there are still many ways it could be improved, but I’m going to hold off on those until/unless people ask for them.

As a final thought, this is probably not the best solution.  In fact I would lean toward using the basic text field with client side form validation.  However I have to assume that Facebook takes a critical look at their usability, and since they’re still using this implementation it must be working.  Post in comments if there are any implementations that you particularly like.  I’d love to find more.

I updated the plugin to include support for a default date. I also added a hidden text field called “birthdate” that gets updated as the select lists change. This single date field is easier to handle on the server.

Please visit the Github repository for the latest discussion on this plugin. There you can clone the repo and submit fixes. Cheers!

On this project I worked with the founders of The 2 Bandits to design and build their website, blog, and online store. They wanted a minimalist aesthetic so that the primary focus would be their products.  The project included the following key components:

• A custom PHP / MySQL backend to manage their product catalog
• Advanced integration of Google Checkout to allow online purchases worldwide
• A custom WordPress theme so that their blog matched the website
• Heavy use of jQuery and jQuery plugins for image browsing

Project Notes

• The collection page is a custom jQuery script that loads each of the images via ajax before displaying them on the page.
• The stores page makes use of Paul Irish’s Bulletproof @font-face: Smiley variation for using custom fonts
• The product pages make use of the MagicZoom script for zooming in on images
• The Google Checkout integration included setting up different shipping costs based on the shipping address

This project focused on creating an online portfolio that would effectively communicate the design aesthetics of Rebecca Coffman Landscape Architects.  Most of the site’s design and layout was done by Erica (my wife), while I focused on usability and implementation.  My energies were primarily directed towards the portfolio section which implemented the following:

• A client side json database of project information
• A convenient method of loading project images via ajax
• Back button support using hashtags and Ben Alman’s Back Button and Query Library

Project Notes

• I made use of Kevin Luck’s jScrollPane plugin for the custom scrollbars on the portfolio page
• I used simple ModRewrite rules to make the urls prettier (remove file extensions)
• All of the custom fonts were implemented using Dave Shea’s CSS Sprites Method