Origins

Tik Tok was born when we started to rethink another popular tool, Super Awesome Vertical Timeline, which was created a few years back by WNYC, with the help of a web firm. It provided code and templates for a well-designed, vertically oriented timeline. Around then, many of the popular timeline tools were horizontally oriented, so this was a great, one-of-a-kind resource, and it was adopted by newsrooms and non-newsrooms alike.

Tinkering with Timeline

Over the years, people began to customize Timeline. When I was at MinnPost, we worked on creating a more reusable codebase that was a bit easier to use and configure, but we kept the design mostly the same. Soon after that, Chris Keller over at KPCC took that altered code and made some really great design improvements—specifically allowing for a more mobile-friendly layout—and added some new features, too. You can see these changes in their Life of Nelson Mandela timeline. And, it’s probable that someone reading this has made her own improvements to this tool.

Recently we found some time to finally revisit this, trying to rethink and redesign Timeline. Talking things over with our team and KPCC, we decided to focus on mobile-friendly, simple, and easy as our main design goals. We also decided we actually wanted fewer features and just needed to start over, as far as the code was concerned. So, Tik Tok was born.

When starting over with the code, we wanted good practices and solid tools to ensure quality and ease development. Front-end project tools and methods are plentiful these days, and it can be difficult to choose the right ones. You can see our initial, general thoughts on project architecture on GitHub. We decided on a few different things as we started building, but here’s the basic list of tools and practices for the project:

• Code quality and standardizing tools are important to create consistent, stable code, so we use Editorconfig, JSHint, JSCS, and Recess.
• Build and workflow is handled with Gulp.js. Gulp does a lot for the project; check out the Gulpfile to see more detail.
• Tik Tok is also published on Bower and NPM for easy download and dependency management.
• There is support for module loaders like Browserify and RequireJS, since these are more efficient ways to include JS libraries.
• Unit testing is handled with Mocha which is run through Karma, allowing us to do automated, cross-browser testing with SauceLabs.
• Continuous integration is handled with TravisCI which helps us ensure that any commits don’t break things.
• And Tik Tok has minimal dependencies, just Moment and Underscore.

Using Tik Tok

Tik Tok is a code library, so developers are its main audience, but we’ve kept our definition of “developer” really broad. So, if you know a bit about HTML and have copy and pasted some JS code snippets before, you should be just fine. Also, feel free to call yourself a "developer,” along with your other roles like journalist, editor, or publisher.

The main project page describes how Tik Tok works using the library itself as an example. You give it some event data, maybe throw in a link to some media, and Tik Tok puts it all in order for you, groups it according to the span of the whole timeline, and spits out some pretty HTML.

The examples page is full of different ways to customize and use the library, and all examples tell you the JavaScript, HTML, and any CSS that was used. Examples include:

• Making major design changes with just CSS
• Using different data sources like Google Spreadsheets (via Tabletop) or a CSV file
• How to use the Tik Tok API

Check out the GitHub page for more technical information about installing Tik Tok, all of its many wonderful options and methods, as well as how you can contribute (which is very encouraged). Tik Tok works like most any front-end library, just include the JS and CSS files in your HTML page. Here’s a real simple example using CDN sources:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link href="https://cdn.rawgit.com/datanews/tik-tok/0.1.0/dist/tik-tok.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.rawgit.com/datanews/tik-tok/0.1.0/dist/tik-tok.min.js"></script>

<script>
  var t = new TikTok({
    el: 'example-tik-tok-container',
    entries: [{
      date: '2015-09-01',
      title: 'Tik Tok is great AND easy!',
      body: 'It totally is...'
    }, ... ]
  });
</script>

Tik Tok in Production

We’ve just started using Tik Tok in production. For a series looking back on the year since Eric Garner’s death, we put together this timeline.

We really encourage you to try this out, use it in your projects, and send feedback. We hope to keep iterating on this to make it better for everyone. If you have any questions or issues, just add an issue to GitHub.

And Finally…

We had a long, very important conversation about what Tik Tok’s mascot or theme would be, mostly waffling between the Oz robot character and the Ke$ha song. We decided on the robot, but there is a Ke$ha-themed Easter egg on the project page, if you look hard enough. The only clue is “$”.