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.
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.
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');
});
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 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.