CINXE.COM
instagram for fun and profit – Phill MV
<!doctype html> <html lang="auto"> <head> <base href="http://okayfail.com/2013/instagram-fun-profit.html"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://okayfail.com/stylesheets/application.css" rel="stylesheet"> <title>instagram for fun and profit – Phill MV</title> <meta property="og:title" content="instagram for fun and profit"> <link rel="alternate" type="application/atom+xml" title="ATOM" href="https://okayfail-com.translate.goog/atom.xml?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http"> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="en"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=corsproxy" data-sourceurl="http://okayfail.com/2013/instagram-fun-profit.html"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="http://okayfail.com/2013/instagram-fun-profit.html"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=navigationui" data-environment="prod" data-proxy-url="https://okayfail-com.translate.goog" data-proxy-full-url="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http" data-source-url="http://okayfail.com/2013/instagram-fun-profit.html" data-source-language="auto" data-target-language="en" data-display-language="auto" data-detected-source-language="en" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://okayfail.com/2013/instagram-fun-profit.html&anno=2" data-client="tr"></script> <header> <div class="shortbio"> <h1><a href="https://okayfail-com.translate.goog/index.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http">Phillip Mendonça-Vieira</a></h1> <h3>See <a href="https://okayfail-com.translate.goog/archive.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http">more of my writing</a> or <a href="https://okayfail-com.translate.goog/atom.xml?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http">subscribe via rss</a>.</h3> <hr> </div> </header> <section> <div class="post-wrapper"> <div class="post"> <h1 class="title"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http">instagram for fun and profit</a></h1> <h5 class="date"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http">October 22, 2013</a></h5> <p data-sourcepos="1:1-1:292">Back in December 2011, I was approached by <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://mwjoffe.tumblr.com/">Michael Joffe</a> to make something happen for the early 2012 installment of his <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://www.thegridto.com/life/society/the-nocturne-back-in-the-new-york-groove/">dance party art things</a>, this one being called “Oui Paris”.</p> <p data-sourcepos="3:1-3:164">So, I stuck together some bits of ruby and javascript and made “audiogram”, an instagram feed that updates in real time, and Michael threw a dance party around it.</p> <p data-sourcepos="5:1-5:127">The folks at the <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://brocktoncollective.com/">Brockton Collective</a> were awesome and created a timelapse of the whole thing:</p><iframe width="480" height="360" src="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://www.youtube.com/embed/QKBF3a6bkbw?rel%3D0" frameborder="0" allowfullscreen></iframe> <p data-sourcepos="9:1-9:177">A couple of times I had to <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lV_V7/">drunkenly climb a ladder</a> and troubleshoot it. (Here is more proof that <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lUq-X/">I was there</a>).</p> <p data-sourcepos="11:1-11:251">Michael longed for something deeply interactive that would directly engage with the crowd. I’d always wanted an excuse to play with the instagram api and the rest was covered in <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://www.nowtoronto.com/music/story.cfm?content%3D184963">NOW Magazine</a>:</p> <blockquote data-sourcepos="13:1-13:405"> <p data-sourcepos="13:2-13:405">In order to do so, the organizers have implemented an interactive element that they’ve deemed “the world’s first Instagram music visualizer”. With the help of developer Phillip Mendonça-Vieira, they’ve created a display wall that will project partygoer’s pictures in real time, in the ersatz nostalgic haze of the Instagram photo app. All you need to participate is a smart phone<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-yayinsta" id="fnref-yayinsta" data-footnote-ref>1</a></sup>.</p> </blockquote> <blockquote data-sourcepos="15:1-15:296"> <p data-sourcepos="15:2-15:296">“Instagram has become a huge part of sharing life experiences… and in a way it tells much more of a story than a status update,” Joffe explains. “So with this party we wanted to do an experiment wherein a tool that is used to share experiences becomes the reason for the event itself.”</p> </blockquote> <p data-sourcepos="17:1-17:189">The event was a success; apparently something like 400 people<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-instatruefact" id="fnref-instatruefact" data-footnote-ref>2</a></sup> showed up on a cold January night. The whole thing ended up being one of the coolest things I’ve done to date.</p> <p data-sourcepos="19:1-19:285"><a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lUud_/">Most</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lW80X/">importantly,</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lXoWc/">people</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lXXOZ/">seem to</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lX2hv/">have had</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lWrgz/">a good</a> <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lVoKX/">time</a>.</p> <h2><a id="neat-what-did-the-app-look-like" class="anchor" href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#neat-what-did-the-app-look-like" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Neat. What did the app look like?</h2> <p data-sourcepos="23:1-23:62">I’m glad you asked. This video will give you the general idea:</p><iframe width="480" height="360" src="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://www.youtube.com/embed/Q-J17YcFsic?rel%3D0" frameborder="0" allowfullscreen></iframe> <p data-sourcepos="27:1-27:228">The reason I am writing about this now, in 2013, is because I never got around to making the above recording until a few months ago. I don’t understand why, or what overcame me, it really wasn’t that much work<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-instaarcheology" id="fnref-instaarcheology" data-footnote-ref>3</a></sup>.</p> <p data-sourcepos="29:1-29:361">Some people really took a liking to it, and the app has since been used in a <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://throneofjs.com/parties/%23parties">conference party</a>, a corporate holiday party, a wedding, a <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://lookingforgold.blogspot.ca/2012/12/long-winter-three.html">winter music festival series</a>, and a sexy aids fundraising dance party<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-instanopantsnoproblem" id="fnref-instanopantsnoproblem" data-footnote-ref>4</a></sup>.</p> <h2><a id="cool-what-did-you-use-to-make-it" class="anchor" href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#cool-what-did-you-use-to-make-it" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Cool. What did you use to make it?</h2> <p data-sourcepos="33:1-33:306">I wrote a little sinatra thing that spat out new instagram photos when asked. I put down a layer of <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://masonry.desandro.com/">masonry</a> and wrapped it together with <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://jmpressjs.github.io/jmpress.js/">jmpress.js</a>. It works surprisingly well: new photos show up within five seconds of being posted.</p> <p data-sourcepos="35:1-35:275">The waterfall effect was achieved by prepending new instagram thumbnails in a div taller than the screen; masonry does the rest. I also remove elements a couple rows below the fold as a crude form of garbage collection. Without it, Chrome quickly starts to run out of memory.</p> <p data-sourcepos="37:1-37:318">I was reticent to accept Michael’s invitation. I wasn’t sure if I could put together something that was cool enough<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-instasob" id="fnref-instasob" data-footnote-ref>5</a></sup> and as a result it only really came together the week before the party date. Overall, I spent about five nights poking at it and one long evening and an afternoon frantically making it work.</p> <p data-sourcepos="39:1-39:325">In the process I wrote some of the most terrible javascript ever committed to disk. I’ve since rewritten all the ruby a couple of times over, but that javascript remains inscrutable because I really don’t want to touch it. That javascript is why I haven’t linked to the github page. I’ve gotten a lot better at it since then.</p> <h2><a id="what-did-you-learn-from-this-experience" class="anchor" href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#what-did-you-learn-from-this-experience" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>What did you learn from this experience?</h2> <p data-sourcepos="43:1-43:120">Telling the bouncer to let your friends <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://instagram.com/p/lV7hv/">skip a huge line</a> feels pretty cool<sup class="footnote-ref"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fn-instalol" id="fnref-instalol" data-footnote-ref>6</a></sup>.</p> <p data-sourcepos="45:1-45:205">I think to this day, event and location apps are underexplored. Something to facilitate documentation and increase serendipity. I think my phone could someday output significantly more whimsy into my life.</p> <p data-sourcepos="47:1-47:173">The barrier to making something neat can be surprisingly low; the important thing is to play with it and see what you can make. I’ve been terrible at following this advice.</p> <p data-sourcepos="49:1-49:88"><strong>tl;dr</strong> if someone asks you to write software for a dance party, say yes.</p> <section class="footnotes" data-footnotes> <ol> <li id="fn-yayinsta"><p data-sourcepos="51:14-51:235">It was the beginning of 2012; smart phones were common but not yet ubiquitous and instagram had only recently become a thing and it was cool and exciting and and no one thought it was going to be worth one billion dollars. <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-yayinsta" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> <li id="fn-instatruefact"><p data-sourcepos="53:19-53:217">Per the <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://brocktoncollective.com/oui-paris-event-coverage/">Brockton Collective’s writeup</a>. Michael wrote about it <a href="https://translate.google.com/website?sl=auto&tl=en&hl=auto&u=http://mwjoffe.tumblr.com/post/16653348653/instagram-music-visualizer">here</a>. <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-instatruefact" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> <li id="fn-instaarcheology"><p data-sourcepos="55:21-55:412">Oh, and the <code>#ouiparis</code> photos that pop up are obviously not from the dance party. In the preceeding year and a half, other people have begun to use <code>#ouiparis</code>. I love this kind of stuff, unique and obscure events buried away in tags. I feel there is one great short sci fi story in me where a crucial bit of plot stems around a 14 month old foursquare checkin someone made at a house party. <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-instaarcheology" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> <li id="fn-instanopantsnoproblem"><p data-sourcepos="57:27-57:132">It was seriously overshadowed by the burlesque, the vigorous dancing, and the fact that nobody wore pants. <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-instanopantsnoproblem" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> <li id="fn-instasob"><p data-sourcepos="59:14-59:178">Without any advance notice, he put my name on the facebook event and the event listings he got into the alt-weeklies, and by then it was too late for me to wuss out. <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-instasob" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> <li id="fn-instalol"><p data-sourcepos="61:14-61:130">Me, pointing: “Would it be cool if they came straight in?”, <br> Extremely Nice Bouncer Guy: “Dude, it’s your party.” <a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http#fnref-instalol" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p></li> </ol> </section> <p class="date"><a href="https://okayfail-com.translate.goog/2013/instagram-fun-profit.html?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=auto&_x_tr_sch=http"># 2013-10-22</a></p> </div> </div> </section> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('en', 'en', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=auto&client=wt" type="text/javascript"></script> </body> </html>