Tangerine Development

Play the A More Perfect Union Vocabulary Challenge

A More Perfect Union is a fascinating video produced by George Washington's Mount Vernon that explores why our country's revolution was successful. I highly recommend watching it if you have a half hour. In order to complement the video, Mount Vernon's staff wanted to create a web interactive that helps 8th graders tackle the vocabulary.

Quatrefoil Associates and Haley Wakefield did the interaction design, and I did the programming using Vue.js. Creating this game was really, really fun because Vue.js is a delight to work with. I am using it for another project that hasn't yet launched, and the more I use it, the more I like it. Because my first real programming experience (other than scientific programming) was from C#, I am used to strongly typed languages and reusable components. The advent of libraries like Vue.js and the like (React, etc) has bought the joy of desktop development to the web.

A More Perfect Union's landing page in action

All of the data of the interactive is saved in a JSON file that's bundled, minified, and uglified with the rest of the program. That makes the program itself an extremely tiny package that only amounts to about 4 MB.

The difficulties I had on this project all had to do with browser compatibility and mobile responsiveness. The beautiful design that Haley created was both too simple and too complicated to use something like Bootstrap as the backbone. I wound up doing all of the SCSS from scratch, which I now regret. There were a lot of animations and finicky bits that wound up being an utter nightmare to debug in other browsers. (Looking at you, Safari...) But all in all, I'm very happy with the result and grateful that I got the chance to be involved with the project.