articulate / master

Tree @master @masterview markup · raw · history

Articulate JS Tech Challenge

Matt Campbell's interpretation

Reference original repository for the original README.

Installing and Running

This assumes you have grunt-cli installed already. (See Grunt's Getting Started guide)

  1. npm install to install dependencies
  2. grunt to build the site and start a web server

Visit http://localhost:8888/ to see the app.

You can also run grunt test to run the test suite.


As required:

  • Dynamically powered timeline (go ahead, edit timeline.json!)
  • 3-state playback button (play/stop/replay)
  • 2-seconds-per-age pace

For funsies:

  • Circular progress bar that gives constant animated feedback
  • Event milestone markers within the progress bar
  • ... which are clickable and let you skip ahead! (or behind)
  • Delightful emoji icons!

Breaking the LAW

To add the emoji icons, I have consciously broken this rule:

You cannot change the supplied data at all, and the data must be used as-is as a JSON file.

My justifications:

  1. Your video and wireframes from your README are 404ing! Boo! :)
  2. The emoji feature is completely optional and if you use the original JSON file, the app will not break at all, it just won't be as fun.


It's been a while since I wrote a truly vanilla JavaScript app, but it was a nice change of pace. I'm mimicking React heavily by attempting to rely on conservatively updating UI directly from state updates rather than from specific function calls.

To that end, I created a Component class that provides a flow for either reacting to absolute current state as well as providing a state difference for components to selectively execute more expensive updates.

Future Improvements

At the moment there are some sanity checks for the Component class and data model, but there are no integration tests.

Specifically, the Timeline class (which relies heavily on a browser environment) has a large amount of state management and is in need of test coverage.

There's also no load-fail handling, so if the data fails to load/parse, the user would see nothing.

Other than that, I started toying with the idea of letting the user add/edit milestones and create their own timeline, but decided there wasn't enough time.