Capturing #LoveWins in one place. The making of Lovewins.camera

Why #LoveWins matters

Friday our nation took a momentous step towards love and community. In a 5-4 decision in Obergefell v. Hodges, the Supreme Court took a huge step forward in our progress toward a more perfect union. To quote whitehouse.gov:

We're really passionate about this step towards a better world and a few members of our team quickly asked themselves the question: “how can we capture this love in one place”. With the #lovewins hashtag exploding on social media, we just had to make something to celebrate this historic moment.

Our solution, lovewins.camera, is a fast little microsite that pulls together all the great content happening around #lovewins into one place.

Our Forward Obsession with moving Fast and Making things

We quickly started sketching out ideas with speed and shipping being our number one goal. Our lead creative technologist @chambaz approached me with the idea to poll instagram and create the “love wins” aggregation. He snagged the domain lovewins.camera with the idea that this site could potentially be a view through the lens of #lovewins instagram for everyone to see. With so much happiness being pulled together around the hashtag #lovewins aggregating it into one place was something that we couldn't pass up.

As he started hacking together a prototype we worked on roughing out a quick light-weight design that would pull it together in one place. What better way to encapsulate all these images than the rainbow flag, which symbolizes the lesbian, gay, bisexual, and transgender (LGBT) social movements.

How'd you do it so fast?

Great question! At Digital Surgeons we're all about not letting rudimentary tasks getting in the way of awesome ideas. We have something we call “DS Boilerplate”, which is our homegrown micro framework and development environment that allows us to move at breakneck speed. We are constantly iterating on the platform, ensuring we have the tools that we need at our disposal and providing the rapid development that we all love. NPM, Bower, Browserify, Sass, and Gulp to name a few. This modern development environment is heavy on the dev ops side but allows us to spin up micro sites and applications like the #lovewins camera in a flash (pun intended).

Using Instagram's powerful API and the awesome Instafeed.js library we were able to quickly fetch Instagram images tagged with #lovewins. Instagram limits the number of images you can request at a time so some clever recursive trickery had to be applied to fetch enough images to fill the users browser window, taking into account responsive and the shift in images per row. Once we had the images required to fill the screen, we make further requests to the Instagram API and update the source of random images on the screen. CSS transforms and transitions add the finishing touches to this constantly evolving experience.