My first project for EightShapes gave me a chance to immerse myself in JavaScript and contribute to a remarkable new way to experience the Constitution of the United States.

EightShapes has already told the story of how this project evolved. What it doesn't cover however was the amount of work that went into actually building the design. My experience in creating and managing technical plans at Microsoft & Tellme were critical to the success of the project.

Heritage Constitution home page screenshot at wide viewport dimentions
Heritage Constitution essay medium viewport screenshot

The design boiled down to a one page application with a few states and transitions between those states. While we could (and perhaps should) have used an existing MVC-based JS framework, all of those I evaluated seemed too heavy for the task at hand. I ended up writing my own lightweight framework to pull and process the JSON data, handle state changes, and provide a fast, seemless experience on all devices.

Heritage Constitution home page screenshot at narrow viewport dimentions

On this project

  • JavaScript
  • Animation
  • Production Build

Tools

One of the challenges of the project that the design did not forsee was ordinal search. The Constitution is filled with numbers (Article 1 or I, Section 2, Amendment 21) and ordinal numbers (1st Article, Twenty-First Amendment). The autosuggest functionality needed to handle both across articles and amendments. Unfortunately for me there was not a JavaScript library to handle this. Thus I ended up porting parts of the Ruby Linguistics::EN module to JS.

NOTE: I don't personally share the views or opinions of the Heritage Foundation.

Doing the numbers: Ordinal search

I (1, first)
Heritage Constitution ordinal search, I
Twenty
Heritage Constitution ordinal search, Twenty