code.mattcampbell.net articulate / e868c1caf4
Update README Matt Campbell 3 years ago
11# Articulate JS Tech Challenge
22
3This tech challenge is your chance to demonstrate all of your JS
4knowledge and show off how you structure and test your code.
3 ### Matt Campbell's interpretation
54
6You'll be building a small timeline application where you get
7some data about people and some various events in their lives,
8and then display those events on a timeline that can be played
9back, paused, and reset.
5 Reference [original repository](https://github.com/articulate/timeline-tech-challenge) for the original README.
106
11## Things we're looking for
7 ## Installing and Running
128
13- How well your app works, of course
14- How you structure your code
15- How you test your code and how thoroughly you test it
9 This assumes you have `grunt-cli` installed already. (See Grunt's [Getting Started](http://gruntjs.com/getting-started) guide)
1610
17Because we want to see your overall JS skills for this, we're
18limiting the tools you can use to the lightweight [Backbone][backbone],
19[Underscore][underscore] (or [Lodash][lodash] if you prefer), and [jQuery][jquery], plus [RequireJS][requirejs]
20for loading code. You can use any or all of these, but by all means
21write vanilla JS if you're more comfortable with that than these
22tools. We chose these because they're tools we use and because we
23want to see how well you structure your code outside of a framework.
11 1. `npm install` to install dependencies
12 2. `grunt` to build the site and start a web server
2413
25## General instructions
14 Visit http://localhost:8888/ to see the app.
2615
271. Fork this repo
281. Clone it to your computer
291. Build the app
301. Push to your repo
311. Email us a link to your repo when you're done
16 You can also run `grunt test` to run the test suite.
3217
33## Application Requirements
18 ## Features
3419
35You’ll be building a small application that plays back events from a person's life. The events are described in the [timelines.json](https://github.com/articulate/timeline-tech-challenge/blob/master/timelines.json) file. The application requires a simple UI that will display the text for the event and a play and pause button. The text of the event should read "At age [age], [firstname] [event]."
20 As required:
3621
37The rate at which the events should play back is 2 seconds per year of the person's life, and the event should be displayed at the correct time in that range. For example for a 50 year old man, it would take 100 seconds to play back all the events. If the second event took place at 10 years old, that event should be displayed at 20 seconds.
22 - Dynamically powered timeline (go ahead, edit `timeline.json`!)
23 - 3-state playback button (play/stop/replay)
24 - 2-seconds-per-age pace
3825
39When you press play, the events should start being displayed and the play button should turn into a pause button. Pressing Pause should act as expected. Once all events have played the button should change to a reset button and the user should be able to restart playback.
26 For funsies:
4027
41You will not be judged on visual design, although making it look nice won’t hurt. Here is a simple wireframe of the application. [And here is a short video showing the application in action.] (https://www.dropbox.com/s/tr3xy9l3yrv248b/quickcast-28-05-2014-08-36-34.mp4)
28 - Circular progress bar that gives constant animated feedback
29 - Event milestone markers within the progress bar
30 - ... which are clickable and let you skip ahead! (or behind)
31 - Delightful emoji icons!
4232
43![wireframe](https://cloud.githubusercontent.com/assets/637211/3095396/6179e2d2-e5c7-11e3-95a8-05189df377e5.jpg)
33 ## Breaking the LAW
4434
35 To add the emoji icons, I have consciously broken this rule:
4536
46### A few notes and requirements
37 You cannot change the supplied data at all, and the data must be used as-is as a JSON file.
4738
48- You cannot change the supplied data at all, and the data must be used as-is as a JSON file.
49- The timer should be as accurate as possible, including pausing. For example, if one second has passed in the "year" and the timeline is paused, the next "year" should come up one second after resuming.
50- Your app only needs to work in the latest Chrome.
51- All of your code should be thoroughly tested and all tests should be passing upon submission.
52- **You must have fun doing this** :dancer: :dancers: :smile:
39 My justifications:
5340
54[backbone]: http://backbonejs.org
55[underscore]: http://underscorejs.org
56[lodash]: http://lodash.com/
57[jquery]: http://jquery.com
58[requirejs]: http://requirejs.org
41 1. Your video and wireframes from your README are 404ing! Boo! :)
42 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.
43
44 ## Notes
45
46 It's been a while since I wrote a _truly_ vanilla JavaScript app,
47 but it was a nice change of pace. I'm mimicking [React](http://facebook.github.io/react/) heavily by
48 attempting to rely on conservatively updating UI directly from
49 state updates rather than from specific function calls.
50
51 To that end, I created a `Component` class that provides a flow
52 for either reacting to absolute current state as well as
53 providing a state difference for components to selectively
54 execute more expensive updates.
55
56 ## Future Improvements
57
58 At the moment there are some sanity checks for the Component class and data model,
59 but there are no integration tests.
60
61 Specifically, the `Timeline` class (which relies heavily on a browser environment)
62 has a large amount of state management and is in need of test coverage.
63
64 There's also no load-fail handling, so if the data fails to load/parse,
65 the user would see nothing.
66
67 Other than that, I started toying with the idea of letting the user add/edit milestones
68 and create their own timeline, but decided there wasn't enough time.
69
70 Enjoy!