Integrating Google Web Fonts

.post-434 { font-family: ‘Jura’; }

Historically, web designers have been limited to the fonts they can use in live text. Enter Google Web fonts. This will allow you to integrate any website.

I have used the Google Web Fonts API to integrate the Jura font for this post by adding the following to my HTML:

<link href="" rel="stylesheet" type="text/css" />
* { font-family: 'Jura'; }

You can view more font options on the Google Web Fonts site.

Why did I choose this font? I wanted to use something that was easily differentiable from the surrounding content.

Siobahn has a more thorough article on using the Google Web Fonts API here:

Citi Mortgage UX Fail

CitiMortgage Payment Dates Recently I was on the CitiMortgage website ( and noticed a poor design decision in the date selector. The company policy prevents you from picking a date past the 16th of the month. The drop down list to select a date, however, presents the user with all date of the current month but will show an error message if the user selects any date past the 16th. Why even present the user with those options?

Source control strategy for WordPress sites

My background is more in software and web application development, not website development. So when I started doing a few websites on the side, I wanted to translate some of the tools and processes that I use everyday as a developer to this new role. As I compared the different CMS options, WordPress was the winner in my eyes with a good balance of usability, maintainability, and customizability.

Having chosen WordPress, my attention shifted to finding a version control mechanism for the works in progress. The look and feel for WordPress sites are managed by themes. WordPress allows your to create a child theme based on an existing theme by assigning the ‘template’ property in the header for style.css (the only required file in a child theme). You can read more about creating a child theme here:

The content is maintained in the WordPress database (MySQL) and WordPress has a good mechanism for managing historical versions. The parent theme (in my case the new Twenty Eleven theme that came with WordPress 3.2) can be downloaded at any time, there’s no point in adding it to version control. Developing the child themes, I now have my handful of modified files under source control along with a simple FTP upload that serves as my deployment. Branching also works because I can deploy the branch to a 2nd theme folder (lets say ‘twentyeleven_custom_branch’) and preview the site with the new theme without actually activating the updated theme.

Google Finance Web Service Fail

Google Finance AJAX Fail
I'm assuming this was due to a timeout

A couple weeks ago, I was checking out Google Finance and noticed something scary. One of two things had just occurred; either the whole world just went broke or (slightly more likely) the web service call to retrieve the data had failed or timeout.

While the scenario was quickly fixed by refreshing the page, these are the usability points that are commonly overlooked when designing for UX. What should happen in case of failure? In this case, the default value that’s used is a 0 (zero). When dealing with numeric values, I prefer to show “N/A” or “NaN” if the audience is mathematically inclined.

Migrating Multiple WordPress Sites to a single Multisite

Until recently, I have been using WordPress solely for more this blog. With the release of version 3.0, I decided to read through the release notes and noticed some great features. With the addition of custom post types introduced in version 2.9, WordPress makes a dandy content management system.

Discussing this with Morton (@mor10) at MIX 2011 only further solidified my decision to use WordPress as a CMS for production websites.

With all of the sites that I am building using WordPress, managing the different sites (each is installed as a standalone site) has become a hassle. Before I start on other sites, I am taking this opportunity to migrate all of my sites that I am hosting into a single Multisite implementation. WordPress has some documentation on how to do this; I will document any hiccups I come across and their resolution.

Further Reading

Production Sites

Here are a couple sites I’ve implemented using WordPress 3.1


jQuery Datatables with C# / .NET web services

I just completed a project where I integrated that jQuery Datatables plugin The documentation from the Datatables website was helpful but there were a gaps that needed extended documentation.

This particular implementation uses an ASMX service for the underlying service. The plugin is integrated with my <table> with the following call.

        bJQueryUI: true,
        sPaginationType: "full_numbers",
        bProcessing: true,
        bServerSide: true,
        sAjaxSource: '/Services/MyService.asmx/MyWebMethod',
        fnServerData: function (sSource, aoData, fnCallback) {
            var jsonIn = '{ delimiter: "|", delimitedTags: "' + strTags + '", pageSize: 100, skip: ' + aoData[3].value + ', sortColumn: ' + aoData[47].value + ', sortDirection: "' + aoData[48].value + '", echo: ' + aoData[0].value + ' }';

                contentType: 'application/json',
                dataType: 'json',
                error: ajaxError,
                type: "POST",
                url: sSource,
                data: jsonIn,
                success: function (msg) {

The ajax call is to an ASP.NET Web Service (.asmx) so the data needs to be sent as text.
fnCallback is the rendering function for the datatables plugin. The plugin requires the construct passed in to have the following properties:

  • sEcho
  • iTotalRecords
  • iTotalDisplayRecords
  • sColumns (optional)
  • aaData

Following Zack Owens’s advice, I created a server side class that wraps my web service’s response. The properties correspond to the data contract that this plugin expects. For the sEcho property, needs to be populated with the same value that is passed to the fnServerData handler via aoData[0].value otherwise your data table will experience any number of issues re-rendering when you sort or change pages.

    public class FormatedList
        public FormatedList()
        public int sEcho { get; set; }
        public int iTotalRecords { get; set; }
        public int iTotalDisplayRecords { get; set; }
        public List aaData { get; set; }
        public string sColumns { get; set; }
        public void Import(string[] properties)
            sColumns = string.Empty;
            for (int i = 0; i < properties.Length; i++)
                sColumns += properties[i];
                if (i < properties.Length - 1)
                    sColumns += ",";

Visual Studio Keyboard Shortcuts

As Visual Studio has evolved as a product, so has the plethora of keyboard shortcuts that are available. Using these shortcuts make certain tasks much easier and quicker by not requiring you to remember the exact location in the often deep and convoluted menu and icon structure.

You can download your own keyboard shortcut guide here:

Each binding refers to the Developer Settings option you choose when you open Visual Studio for the first time. The document also contains the instructions for changing your default setting.

Manually Installing WordPress on GoDaddy Free Linux Shared Hosting

  1. Log in to your GoDaddy account and create a MySQL database
  2. Wait for the database to be created. Log in to the database, and note the server address
  3. Download the latest WordPress packager The latest version is available here:
  4. Unzip/decompress the package and upload the “wordpress” folder within to
  5. Run the WordPress installer
    1. When prompted, enter the name of the database that was created.

Hiding the Ads

To hide the “free hosting” ads from your site, edit the CSS for your Drupal template and add this entry

  display: none;

As of writing this, I am running into an issue with the administrator environment. It looks like some of the javascript isn’t executing so the UI isn’t rendering correctly. The site renders fine, though. More on that as I work it out. Any suggestions would be greatly


I found a blog entry that details how to fix the javascript issue mentioned above.

Motion Capture, Kinect, and You

UPDATE 2: June 16, 2011

The Kinect SDK (beta) has been released on June 16, 2011. Download it here.

UPDATE: April 15, 2011

Scott Guthrie announced the SDK in his keynote speech at MIX 2011. Additionally, each attendee was also given a Kinect to start building new software with it.

For their annual April fools joke, Google introduced Gmail Motion in 2011. You can read more about it here:

Some laughed, others saw it as a call to action. A research team at USC (University of Southern California) called Google on their bluff and used their experimental FAAST engine to actually implement the functionality from Gmail Motion. Even better, Microsoft has announced that they are releasing the Xbox 360 Kinect SDK later this spring (2011). I have some ideas for this and will be writing about this separately.

Academics, Enthusiasts to Get Kinect SDK

User Stories to Requirements

Agile methodologies allow development teams to better handle multiple projects and deliverables. One issue I have with User Stories is the inability to specify hard requirements. Use cases, functional requirements, and cognitive walkthroughs.

As a user, I should be able to edit my content
As a user, I should be presented with the potion to save my content when I close

The Issue is that we have been using Epochs thinking they are User Stories and not breaking them down to smaller, testable stories.

Keeping all this in mind, I have recently started sketching ideas for a system that allows us to maintain our stories and epochs (and allowing stories to evolve into an epoch with it’s own smaller user stories) and apply true requirements to these stories.

Over time, the project may evolve with sprint breakdown and planning tools.