Timelines

A reusable component to feature events over time

Before the heat of the election season started in 2016, my team was planning to create an overview of all the notable events in the election so far.

What began as just one timeline became several, as I took the designs for this page and carefully crafted the entire layout to be reusable and extensible from the beginning. I reused this component five times, and while the initial design took just about a month to complete, subsequent implementations took only a matter of days.

Screenshot of the Election Timeline page on AOL.com, displayed on an iPhone X

Ease of Reuse

I had to ensure that the styles and scripts for each timeline could be reused with minimal changes. To do this, I made sure to have consistent naming schemes in my CSS classes and mainly used attribute selectors in my JavaScript for each component. Doing it this way meant I only needed to include one script file, and that code would work for all of those particular components on every timeline page.

Screenshot of the Election Timeline page on AOL.com on desktop

Code Example

In my JavaScript code for social sharing, I was able to write this once and enable sharing for each module on every timeline page. Note the bolded attribute selector below.

$('#bon-cw').on('click', '.bon-grid-item[class$="timeline"] .share-mobile .share-btn', function() {

  var parent = $(this).parents('.share-mobile');

  if (!parent.hasClass('open')) {

    parent.addClass('open');

    parent.parents('.date-line').addClass('mobile-open');

  }

  animateShares($(this).parents('.share-mobile'), 'show');

});

Metrics

When looking at the data for the timelines, the most interesting thing is that users both spent a lot of time on the page and kept coming back. That absolutely makes sense. The way this page is designed means that content gets updated over time by the AOL editors, so users who keep coming back get to see updated stories and get to see those stories in context, too.

The Takeaway

The ability to make your code modular and reusable is integral to any software engineer’s workflow. I saw this firsthand, because putting in the extra effort the first time allowed me to reuse my work effortlessly.

Timelines

Ease of Reuse

Code Example

Metrics

The Takeaway

See more projects

AOL Navigation

Timelines

Met Gala Bracket

Trump Campaign Promises

One-A-Day Tumblr Theme

Custom Portfolios