bootstrap · developer · JavaScript · mapbox · Quad City Times

Day 4 and 5: First Project!

I’m on my 3rd week of work, and things couldn’t be going more amazing!  Everyday I’m learning, helping, and growing as a developer and life-long learner!  In case you missed my last post about my first 3 days of work, please do check it out before reading on!

My Challenge to Myself

After a 3 day struggle, I made it my goal to get a project up and running before the end of the week!  After I put out my welcome email to the team, I got my first bite!  The premise was as follows:  There were 118 shootings in Davenport, IA in 2014 and 167 in 2015.  In addition, in the month of January 2016, there had been 19 shootings.  Most were police calls to shots fired, but one incident involved a woman being shot 3 times and left in the street until a pedestrian called the cops!  There was a map already used to feature the shootings, but as the scale increased, it was found that the user had a poor experience by 1) having to leave the page to visit the map, and 2) having to cycle through shootings one by one.

Though the scenario is quite unique, the situation I found myself in, as I’ve come to learn, is typical:  I’m presented with a story or preexisting problem, I filter the data, and I provide a visual so that the reader can better comprehend what’s happening.  My job isn’t to interpret the data, or steer the reader in one way or the other.  Tone and style rest on the shoulders of the reporter.  My job is to present the facts in a way that the reader can understand.

Tara–the assigned reporter, after contacting the local police department, was able to present me with a brief summary, location, time and date of each shooting incident.  The rest was up to me.

My Game-plan

Being my first job assignment to help out a reporter and get my name on the company website, I wanted to take my time and think hard about the best way to present this information.  I let my mind ponder, and as is custom with my thinking, I started to draw what I had in mind:

initial map sketch

Not much, but it got the concept across.  Essentially, in case my drawing is sketchy (sorry couldn’t resist!), I’d have a map on the right, and each marker would be linked to a photo(or gallery)–on the right, so that when the user clicked a given location on the map, the relevant mug shot, or location photo would appear.  Beneath those two is article content giving a brief summary of the associated shooting. On the far right, in asterisks, I made a quick feature list:

  • Give each month a different colored marker
  • Include a legend (as featured on the top) to display the months
  • Tapping on a given month would show all the relevant shootings for that month

Alright, I felt confident I was off to a good enough start to start putting something together.  So I popped open Sublime and started to get a working prototype up to show the reporter.

**I have to take a moment here to digress.  This is where I was really thanking myself for all of the prep work I did before I got hired, and even afterwards.  I wanted to know more about the CMS the company uses; specifically how it was built.  During that time I came across a video on YouTube .  I’ll save you the hour and just say that  all I learned was that the foundation of the CMS is built on HTML5, CSS3, and *drumroll* Bootstrap 3! With this information in hand, I knew a couple things: We weren’t targeting older browsers, I could say something like “class =’btn-danger’ “, or “$(#someID).toggle()” without ever importing Bootstrap, or jQuery! It just goes to show how important it is to really be hungry when it comes to wanting to be great at your job!**

Back to my prototype, here is a short 2 minute video of what I came up with (self-high-five for debugging on the fly!) :

Gathering feedback

When you spend a fair amount of time playing God and creating something from nothing, it can be hard on the ego to hear it’s not quite what they had in mind.  I realize this daily and make a conscious effort to keep my resolve and wear my “big-boy pants”.  We’re a team, our goal is to get readers to the story, but at the end of the day, it’s her story.  With that said, Tara was subtle in what she didn’t like, and I picked up on her tones (an attribute I credit from my years as a waiter/bartender). Essentially, she wanted something that could be used in any article, not just this one.  In addition, she wanted  the photos to be part of the pop-up instead of something on the side.

Back to the Drawing Board and Compromise

Hmmm…well, she wants something that can be used across several articles.  Ok.  A widget of sorts.  Also, she wants the photos tied to the marker.  After a quick chat with another developer to explain options available, I found myself talking to…well..myself..

“Well, a bunch of photos matched to a set of markers sounds like it could either be loaded from A) an array containing all the photos, B) Some sort of JSON file, or as an object attached to the marker somehow, or C) a database.”

Loading a bunch of images from the browser seems less than optimal (remember January alone had 19 incidents, so at least 19 photos).  So option A is out.  I haven’t–still, had the time to mess around with back-end scripts, so option C is out.  That left option B.  I scrambled with how to best accomplish this and unfortunately I ran out of time. Had I had more time, I would’ve realized the following: each marker in mapbox (a top layer to leafletjs) is stored and accessed in GeoJSON.  I could’ve simply added a photo property to each object and assigned the appropriate image data.  Though this would’ve solved the issue, I feel like my solution was a bit more modular. And such, as developer, and reporter, trying our best to write and visualize a story, we compromised:

final shooting sketch

As such, after I quick(er) prototype, I came up with the following:


The final product presents a nice mashup between both of our concepts and reality. Something I purposely didn’t talk about until now is the harsh reality of having a deadline.  Perhaps not the case for other career paths, at least to the same extent, but in my career the pressure of wanting to push out the latest breaking story is constant! I could’ve spent days, weeks, fleshing this out and tested, and filled it with features, but again, that’s just not possible in my work environment.  I had a day and a half, keep in mind, it was my first week! Looking back there’s things that I’ll be adding over time.  I completely took out the picture feature since I made the widget modular enough so that it could be included in every shooting article we publish–my logic is that each article will already have the associated pictures with it.   In the end it was fun to collaborate with another person on a project!  It’s definitely something new to me since most of my nights learning stemmed from listening to videos on Treehouse, or coding my heart out on some random project I had given myself.  Below is a link to the final project.  One feature I’m proud of adding, is that the map will automatically default to showing shootings for the current month, thus lowering maintenance on my end, and in my opinion, improving the user experience.  Sometimes it’s the little things.

(Assuming most of you aren’t subscribers to the paper, you may be presented with a 1 or 2 question survey before viewing, I promise it’s quick and painless!)

Well, it was my first project with the Quad-City Times, and I have to say I’m proud of my work considering the deadline and the my time with the company.  Since then I’ve made a couple more additions, but I’ll cover them another time 😉

So how’d I do?  How could I make it better?  Feel free to leave a comment, or contact me with any other questions or comments!

As always, happy coding and thanks for reading,


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s