Case Study

Collaboration takes complex jQuery feature from prototype to production

The client

The client provides human-powered health search results.

The problem

The client's designer and HTML/CSS developer had prototyped a complex JavaScript interaction for the site's redesigned homepage. The interaction worked for demonstration purposes, but adding new features or adjusting the behavior was proving unacceptably cumbersome.

How we met

The client engaged with me to contribute my front-end skills to the site as they sought to make a round of improvements.

My solution

I analyzed the feature, outlined a new approach that leveraged the Document Object Model, and then collaborated remotely with the HTML/CSS developer to create more semantic markup for the JavaScript to latch on to. I rewrote the JavaScript from the ground up using the jQuery library, segmenting behaviors via object literal notation and eliminating the many redundancies of the prototype code. I provided a simple method for configuring the UI behavior of the feature, and intentionally crafted both the markup and the jQuery such that it could be reused on other pages with minimal effort.

The outcome

The rewritten feature paved the way for easy extension and customization once the feature was launched; my use of object literal notation made the feature easier to understand, adjust, and debug than the original prototype, and promoted easy reuse.