One of the cool things, we as software engineers get to do on a monthly basis, is to partake in what we call Dev Days.
On Dev Day we get to spend the whole day working on a passion project. There have been some great developments born during Dev Days. Here’s a few solid ones:
- gapGoals: Allows gappers to manage and track their yearly goals.
- Golden Ticket: Eliminates the office brawl for selecting San Diego Padres and Gulls tickets.
- SWAG: A simplified version of a planning poker tool.
- gapCon Mobile App: A mobile app that features a countdown until our annual gapCon event, the location, and a schedule of the day's events.
So one of the things that caught my attention when I was first hired here, for a bad reason, was that gap would store all its pictures from events on a network drive. Typically in a folder buried so deep, that you might actually find some treasure when you finally get there!
With the advancements of cloud technology I was kinda shocked that we didn’t have a better solution then:
"Hey gappers, go and check out the photos from our awesome gapCon event. The pictures are stored at "/some random network drive/random_folder/another random folder/gapCon/2016”. I think you get the point!
Image Credit: istockphoto.com
So….the light bulb came on and I thought….wouldn’t it be cool to store all of our photos on an internal site, like an intranet?
I decided to make it one of my SMART goals. Every gapper should create 2 or 3 SMART goals each year. For those that don’t know, SMART stands for:
Image Credit: J6 design Australia
S – Specific
M – Measurable
A – Attainable
R – Relevant
T – Time bound
Your goals can be inspired by anybody but ultimately you determine your own goals, as long as you meet the SMART criteria and they align with gap’s strategy. Using one of our Dev Day tools mentioned previously, gapGoals, we can enter and track our goals and eventually we will celebrate our successes!
Let the Coding Begin
We are a Ruby on Rails shop here at gap, so obviously I used Rails for what we dubbed as the Störhaus project.
With a lot of applications, a good starting point is to create an authentication layer so that folks can log into the site. We’ve used the Devise Authentication gem on many other projects, so I decided to use that. It plays nice with the Google OAuth Strategy, which allows our users the ability to log in with their google credentials. With that, this part was painless to setup.
So now on to the main functionality of the site. The goal was real simple here: Allow gappers the ability to upload media for the company's viewing pleasure. Our culture is everything and we have lots of photo ops at all of our awesome gap events. I wanted it to be easy to use, and easy to view lots of photos or videos.
The data model was straightforward: A user model of course. An event model, which you could attach videos & images to. So in Rails speak, an event could have many images and videos.
After creating my simple models, I needed to decide on a file upload library. I’ve used several throughout the years like paperclip, carrier wave, and dragon fly but I wanted to try something new. After all, this is Dev Day; I should be experimenting with new technologies. So I chose to try Refile. I was pleasantly surprised at how easy it was. It plugs in nicely with S3 where we already store images for other projects, so that was a plus and it seemed real effortless to set up.
So my next task was to figure out a way to display the uploaded pictures and devise a way to easily scroll through photos. I ran into an awesome jQuery plugin called Blueimp Gallery. Its a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
After uploading a handful of images to view using this awesome plugin, it was obvious that I was going to need to speed up the loading of the images. So I decided to use a CDN to give my images a nice performance boost. For those that don’t know, CDN stands for content delivery network or content distribution network, and it's a globally distributed network of servers deployed in multiple data centers. It can deliver content to a user based on their geographic locations. The goal of a CDN is to serve content to end-users with high availability and high performance.
I chose to go with a nice AWS service called Amazon CloudFront. After setting it up, the images were loading very fast and the experience became much more pleasant when scrolling through pictures.
The next decision that needed to be made was to find a video management tool to use. I tried a handful of services like YouTube, Vimeo, and Wistia but eventually settled with Cloudinary, which is primarily an image management tool, but also supports videos, and at a reasonable price.
So just like we can upload images to our event, we can now also upload videos!
And we can of course playback these videos:
The last bit of functionality I added was to give users the ability to remove images/videos. For now only Admins can delete the media files. (I used rolify gem for this).
For the video files, I made background jobs to remove the media from the cloudinary account so that we didn’t bloat the service with un-used videos. For the background jobs, I used one of my favorite background processing gems named Sidekiq.
The Future of Störhaus
So where do we go from here with Störhaus you ask?? Well there are some ideas in the pipeline that I will be implementing soon. One idea is to allow users to like photos and display the number of likes for each image. This will help with an upcoming photo challenge we’ll be holding over the holidays. We’ll just create an "Event" in Störhaus. All contestants will post their pics and the company can vote on them. Most votes win…easy as that.
Other than that, we’ll let gappers drive the future of this media tool. For now my SMART goal is complete and we now have a place to store our company media. DONE & DONE!
