Mapping Tool

  • CoffeeScript
  • Heroku
  • Jasmine
  • jQuery
  • jquery-ui
  • mock-ajax
  • Sass
(2/16-2/16)
  • Frontend
  • Prototyping

Summary

Given a high-res mockup by Design, re-purposed an existing drag/drop example as a custom feature for facilitating data management.

Achievements

  • researched JS libs having comparable functionality
  • ultimately selected jQuery Draggable for implementation (as it would represent least-departure from current tech stack)
  • iterated with Product and Design to ensure parity with desired requirements
  • started in a static page environment, eventually moving into production codebase and architecture

Overview

Given only the following mockup from Design (created using InVision):

hi-res mock

I did research until I found this.

example

I knew there would be a fair deal of work to do to re-purpose the idea to realize what Design had proposed so I started out small in my iterations.

First, I tried to standup the simplest POC using jQuery Draggable that I could in a single, local page.

POC v1

Then, I added Bootstrap (the styling paradigm of the eventual target codebase) and continued to refine interactions:

POC v2

To get Product and Design's feedback, I deployed the protoype on Heroku.

prototype

I was getting close to integration and that would eventually prove the most challenging (given pre-existing styling interactions and positioning.)

I incorporated my work into the main codebase and iterated on styling and interaction from there. Also, I created a CoffeeScript spec for covering the main features.

Here's the final product:

finished product


anthony at bluxomelabs dot com