We make awesome stuff for the internet, this is our blog!Tumblr (3.0; @okfocus)http://blog.okfoc.us/<img src="http://25.media.tumblr.com/tumblr_m48jy3zJTZ1rwn7kpo1_500.jpg"/><br/><br/><p>Jonathan’s post about the setup for the Google Hangouts project. It touches on our thoughts about making stuff in general at the beginning.</p> <p><a class="tumblr_blog" href="http://drawwithyourface.com/post/23308876869/geting-up-and-running-with-google-hangouts-api">drawwithyourface</a>:</p> <blockquote> <h1>Geting Up and Running With <br/>Google+ Hangouts API</h1> <br/><h2>Optimizing for Developer Happiness</h2> <p>At OKFocus, we think a lot about optimizing for developer happiness. It’s important to us that when we work we have the flexibility to experiment with different ideas without having to worry about the project at hand going up in flames or something terrible happening to the codebase. Since this is at the core of our philosophy around creating digital experiences, all of our code is tracked using Git. For those who aren’t familiar with Git, it is a very popular version control system that allows developers to work together without having to worry about stepping on each other’s toes. Furthermore, it’s important that developers can have the freedom to use their own tools (everyone on this project uses a different text editor) and work locally on their own machines.</p> <p>Our workflow goes something like this:</p> <ul><li>Write some code</li> <li>Commit the code to the Git repository</li> <li>Push the code to Github</li> <li>All team members are notified in HipChat</li> <li>Team pulls changes</li> <li>Repeat!</li> </ul><br/><p>If you want a closer look at the tools we use at OKFocus, check out <a href="https://github.com/okfocus/genesis">this project</a> on Github.</p> <p>Working with the Google+ API and the Hangouts API is new for us. Going into this project we knew we wanted to bring our development methodologies with us to help us get the boring stuff out of the way and make something cool. Even better, we didn’t want to have to deploy to a server every time we committed a bit of code. Let’s look at how to make an awesome development environment that will get you hacking on a Google+ Hangout in no time.</p> <h2>Hacking on a Google Hangout Locally</h2> <p>To get started you will have to have the following installed:</p> <ul><li><a href="https://developers.google.com/appengine/downloads">Google App Engine SDK</a></li> <li><a href="http://www.python.org/getit/">Python 2.7.x</a></li> <li><a href="http://">stunnel</a></li> </ul><br/><p>Most OKFocus projects happen using Rails or Express.js. Both of these frameworks have a very simliar workflow and let developers work in a test, development, or production environment. Running a local web server with both of these frameworks is quite simple. For Draw With Your Face, we knew we’d be hosting our application with Google’s App Engine which is new to us, so we created a development environment that feels similar to what we’re used to.</p> <h3>Setting Up Your App Engine</h3> <p>Our use of App Engine for this project is simply to serve static files, theres a good chance your Hangout App will only require this functionality from a web server. To set up an App Engine instance, log into <a href="https://appengine.google.com/">App Engine</a> and create a new application. Take a note of your application identifier.</p> <p>In your Hangouts API console, set your application URL to point to a path like <strong>http://[your-application-identifier].appspot.com/static/app.xml</strong>. This XML file tells your Hangouts App where to look for your app’s JavaScripts. Let’s worry about configuring it in a later section. Right now lets just configure your app.yaml for your App Engine instance to look like this:</p> <div class="gist"><a href="https://gist.github.com/2727368"><a href="https://gist.github.com/2727368">https://gist.github.com/2727368</a></a></div> <p>Note that we have set our Python runtime to use Python 2.7.x. When doing so, you must also set “threadsafe” to be either true or false. This also tells our app to serve all files in the “static” directory coupled with a little bit of Python from our main.py file.</p> <h3>Stunnel</h3> <p>Once we had our App Engine instance deployed and running, we were still running into an issue where Hangouts wouldn’t let us serve our JavaScripts from localhost. It looks like almost all Google products have switched over to HTTPS (which is a good thing!); however, the development version of App Engine only allows HTTP locally. Thankfully, the open source community has a tool called <a href="http://stunnel.org">stunnel</a> that allows developers to tunnel HTTP connections through a secure layer as if the web server supported HTTPS.</p> <p>After you’ve installed and built stunnel, you can set “accept” to 8001 and “connect” to 8080 for HTTPS. You’ll find this setting at the bottom of stunnel.conf. We keep a copy of stunnel.conf in our Git repository for this project. To start our servers, we simply type:</p> <pre>sudo stunnel stunnel.conf</pre> <br/><p>We run this command from the root of our project directory, referencing our customized stunnel.conf file as the first argument to the stunnel command from the command line.</p> <h3>Serving the App</h3> <p>Now let’s configure our Hangout App’s main XML so we are referencing our new stunnel configuration. Once everything is configured and looks okay, you can deploy to App Engine using the App Engine Launcher.</p> <div class="gist"><a href="https://gist.github.com/2727434"><a href="https://gist.github.com/2727434">https://gist.github.com/2727434</a></a></div> <p>Note that we are serving from port 8001 per our stunnel configuration. You’ll also note the link to the commented out path for production. Once we’re ready to start serving from App Engine, it just a matter of uncommenting that, removing our references to localhost, and deploying.</p> <h3>Hacking Locally</h3> <p>Now that your XML is referencing files that are being served from your localhost through stunnel, you are free to work locally and see changes immediately. This means you wont have to deploy to Google App Engine over and over. This also means that you can share code quickly with team members through Github and merge in changes with ease. Simply work with the JavaScript referenced in your main XML file, and visit the test hangout. You’ll see your changes immediately!</p> <p>One thing to note is that this setup allows for only one participant in a Hangout at a time. This isn’t a problem during early development stages but we will have to alter our environment next week to make multiple participants work. Look for a blog post early next week from Jules that will explore that and more.</p> <p>Happy hacking :)</p> <strong>Jonathan Vingiano</strong> — <a href="http://twitter.com/jgv">@jgv</a></blockquote>http://blog.okfoc.us/post/23315552624http://blog.okfoc.us/post/23315552624Fri, 18 May 2012 19:23:53 -0400<img src="http://24.media.tumblr.com/tumblr_m46vrwt5le1rwn7kpo1_500.png"/><br/><br/><p><a class="tumblr_blog" href="http://drawwithyourface.com/post/23254122646/today-we-worked-on-some-core-design-elements">drawwithyourface</a>:</p> <blockquote> <p><span>Today we worked on some core design elements. Getting the logo figured out was fun. We wanted to exploit the fact that all the words in the title are four letters as well as figure out a way to incorporate a face. A face mesh taken from a pic found on google image search (</span><a href="http://www.lysator.liu.se/~eru/research/"><a href="http://www.lysator.liu.se/~eru/research/">http://www.lysator.liu.se/~eru/research/</a></a><span>) was traced and simplified, and then overlaid on top of a heavily modified uppercase version of DIN font. The outcome is sort of old meets new, which we like.</span></p> </blockquote>http://blog.okfoc.us/post/23254343132http://blog.okfoc.us/post/23254343132Thu, 17 May 2012 19:00:54 -0400<img src="http://24.media.tumblr.com/tumblr_m46hw6sFWn1rwn7kpo1_400.jpg"/><br/><br/><p><a class="tumblr_blog" href="http://drawwithyourface.com/post/23236906528/hello-and-welcome-to-our-development-blog-were">drawwithyourface</a>:</p> <blockquote> <p>Hello and welcome to our development blog. We’re going on a two week journey developing <strong>Draw With Your Face</strong>, an experiment using the Google+ Hangouts API and you’re invited to join us…</p> <p><strong>Draw With Your Face</strong> is a fast-paced drawing game where you’ll compete with friends to guess each other’s drawings the fastest. The twist is, using the facial tracking features of the Hangouts API, you’ll be creating those drawings using YOUR FACE!</p> <p>On this blog, you’ll be able to keep track of our development over the course of Google’s Hangouts Hackathon. We’ll give you a peek into our process and share some technical code snippety stuff.</p> <p>To get things started let’s introduce the team:</p> <p><a href="http://aaron-meyers.com">Aaron Meyers</a><br/><a href="http://twitter.com/aarontweets">@aarontweets</a><br/><img src="http://aaron-meyers.com/drawwithyourface/aaron.png"/></p> <p><a href="http://jonathanvingiano.com/">Jonny Vingiano</a><br/><a href="http://twitter.com/jgv">@jgv</a><br/><img src="http://aaron-meyers.com/drawwithyourface/jonny.png"/></p> <p><a href="http://ryder-ripps.com/">Ryder Ripps</a><br/><a href="http://twitter.com/ryder_ripps">@ryder_ripps</a><br/><img src="http://aaron-meyers.com/drawwithyourface/ryder.png"/></p> <p><a href="http://pomme.us/">Jules Welter</a><br/><a href="http://twitter.com/scannerjammer">@scannerjammer</a><br/><img src="http://aaron-meyers.com/drawwithyourface/jules.png"/></p> </blockquote>http://blog.okfoc.us/post/23237120229http://blog.okfoc.us/post/23237120229Thu, 17 May 2012 14:02:45 -0400<img src="http://25.media.tumblr.com/tumblr_m46hu2ef8k1rsqxyoo1_500.png"/><br/><br/><p>OKFocus + <a href="http://aaron-meyers.com/">Aaron Meyers</a> just began working with a company called Google on a Hangouts API Experiment! See <a href="http://googleplusplatform.blogspot.com/2012/05/hangouts-hackathon-1-api-5-developers-2.html">Google’s Blog Post about it</a>. We’ll be posting updates on <a href="http://drawwithyourface.com"><a href="http://drawwithyourface.com">http://drawwithyourface.com</a></a></p>http://blog.okfoc.us/post/23236854732http://blog.okfoc.us/post/23236854732Thu, 17 May 2012 13:56:26 -0400<img src="http://24.media.tumblr.com/tumblr_m46epu7HP41rsqxyoo1_500.png"/><br/><br/><p>Checkout the new OKFocus jQuery plugin, <a href="http://okfoc.us/okvideo">OKFocus Video</a>, allowing for fullscreen video backgrounds! <a href="http://okfoc.us/okvideo"><a href="http://okfoc.us/okvideo">http://okfoc.us/okvideo</a></a></p>http://blog.okfoc.us/post/23234084942http://blog.okfoc.us/post/23234084942Thu, 17 May 2012 12:49:06 -0400<img src="http://25.media.tumblr.com/tumblr_m3pns4L30H1rsqxyoo1_500.png"/><br/><br/><p>Website launched for Nicola @Formichetti’s company, <em>Two Hustlers,</em> <a href="http://twohustlers.com/"><a href="http://twohustlers.com/">http://twohustlers.com/</a></a></p>http://blog.okfoc.us/post/22654782223http://blog.okfoc.us/post/22654782223Tue, 08 May 2012 11:45:40 -0400<img src="http://24.media.tumblr.com/tumblr_m3nxbbWh4c1rsqxyoo1_500.png"/><br/><br/><p>“Flat File” (on right) by OKFocus for Eric Wrenn - <a href="http://ericwrennoffice.com/"><a href="http://ericwrennoffice.com">http://ericwrennoffice.com</a></a></p>http://blog.okfoc.us/post/22593732086http://blog.okfoc.us/post/22593732086Mon, 07 May 2012 13:16:22 -0400<img src="http://25.media.tumblr.com/tumblr_m3erjbJFRm1rsqxyoo1_500.png"/><br/><br/><p>we like that GitHub makes their <a href="https://github.com/github/dmca">cease and disists public </a></p>http://blog.okfoc.us/post/22265168279http://blog.okfoc.us/post/22265168279Wed, 02 May 2012 14:33:10 -0400<img src="http://24.media.tumblr.com/tumblr_m3emmvaUuA1rsqxyoo1_400.png"/><br/><br/><p>drawing app in works</p>http://blog.okfoc.us/post/22260664326http://blog.okfoc.us/post/22260664326Wed, 02 May 2012 12:47:19 -0400<img src="http://25.media.tumblr.com/tumblr_m33ub5Bp2m1rsqxyoo1_500.png"/><br/><br/><p>emoji is beautiful!</p>http://blog.okfoc.us/post/21866935085http://blog.okfoc.us/post/21866935085Thu, 26 Apr 2012 16:59:29 -0400<img src="http://25.media.tumblr.com/tumblr_m302nud2iH1rsqxyoo1_500.png"/><br/><br/><p><a href="http://snu.lsc.org/">Science Near You</a> - a new site built on Google Maps we launched with Liberty Science Center</p>http://blog.okfoc.us/post/21730345017http://blog.okfoc.us/post/21730345017Tue, 24 Apr 2012 16:09:30 -0400<img src="http://25.media.tumblr.com/tumblr_m2ztnsuRby1rsqxyoo1_500.png"/><br/><br/><p>We were on BBC today, check it out here <a href="http://www.bbc.co.uk/news/magazine-17818359"><a href="http://www.bbc.co.uk/news/magazine-17818359">http://www.bbc.co.uk/news/magazine-17818359</a></a></p>http://blog.okfoc.us/post/21720621078http://blog.okfoc.us/post/21720621078Tue, 24 Apr 2012 12:55:04 -0400<img src="http://24.media.tumblr.com/tumblr_m2lgncECyu1qcr7fqo1_500.jpg"/><br/><br/><p><a class="tumblr_blog" href="http://lulinternet.com/post/21233083036">lulinternet</a>:</p> <blockquote> <p>got some business cards made ~finally~</p> </blockquote> <p>Nice use of Pixel Comic Sans, get yours here <a href="http://okfoc.us/pixelcomicsans/"><a href="http://okfoc.us/pixelcomicsans/">http://okfoc.us/pixelcomicsans/</a></a></p>http://blog.okfoc.us/post/21715610951http://blog.okfoc.us/post/21715610951Tue, 24 Apr 2012 10:46:00 -0400<a href="http://blog.wolffolins.com/post/20904588615/tug-of-store-is-a-new-project-by-okfocus-the">Wolff Olins Blog: Tug of Store is a new project by OKFocus, the digital agency...</a>: <p><a class="tumblr_blog" href="http://blog.wolffolins.com/post/20904588615/tug-of-store-is-a-new-project-by-okfocus-the">wolffolinsblog</a>:</p> <blockquote> <p class="p1"><a href="http://blog.wolffolins.com/tagged/future-patrol" target="_blank"><img src="http://media.tumblr.com/tumblr_lzt2krm42y1qzw39m.png"/></a></p> <p class="p1"><a href="http://www.tugofstore.com/" target="_blank"><img src="http://media.tumblr.com/tumblr_m2bks7RJ4f1qzw39m.jpg"/></a></p> <p class="p1"><a href="http://www.tugofstore.com/" target="_blank">Tug of Store</a> is a new project by <a href="http://okfoc.us/" target="_blank">OKFocus</a>, the digital agency responsible for <a href="http://dump.fm/" target="_blank">dump.fm</a>, <a href="http://istheltrainfucked.com/" target="_blank">Is the L Train Fucked?</a>, and other good web sites.</p> <p class="p1">Tug of Store is simple: A picture of an item pops up, and you click on the left side if it’s crap, on the right side if it’s cool,…</p> </blockquote>http://blog.okfoc.us/post/21339579156http://blog.okfoc.us/post/21339579156Wed, 18 Apr 2012 16:46:34 -0400<img src="http://24.media.tumblr.com/tumblr_m2p0aoyOlC1rsqxyoo1_500.png"/><br/><br/><p>Check out the Creators Project <a href="http://thecreatorsproject.com/blog/okfocus-thinks-your-web-design-sucks">post</a> about us!</p>http://blog.okfoc.us/post/21339480792http://blog.okfoc.us/post/21339480792Wed, 18 Apr 2012 16:44:48 -0400<img src="http://25.media.tumblr.com/tumblr_m2p082nBoj1rsqxyoo1_500.png"/><br/><br/><p>Nice use of our tumblr theme, <a href="http://www.tumblr.com/theme/34155">OKMove</a> from <a href="http://www.youngjerks.com/">Dan Cassaro</a> </p>http://blog.okfoc.us/post/21339392698http://blog.okfoc.us/post/21339392698Wed, 18 Apr 2012 16:43:13 -0400<img src="http://24.media.tumblr.com/tumblr_m2lg5e5Egy1rsqxyoo1_500.png"/><br/><br/><p>REAL LIKE BUTTON, FAKE LIKE COUNT!</p> <p>Use our new tool, <a href="http://likefake.com/">LikeFake.com</a> to front like you are really really popular :)</p>http://blog.okfoc.us/post/21232415337http://blog.okfoc.us/post/21232415337Mon, 16 Apr 2012 18:36:50 -0400<img src="http://24.media.tumblr.com/tumblr_m2bymeTGEN1rsqxyoo1_r1_500.png"/><br/><br/><p>Checkout our newest site, <a href="http://tugofstore.com"><a href="http://tugofstore.com">http://tugofstore.com</a></a> built on <a href="https://developer.svpply.com/">Svpply API</a></p>http://blog.okfoc.us/post/20916329349http://blog.okfoc.us/post/20916329349Wed, 11 Apr 2012 15:39:00 -0400<img src="http://25.media.tumblr.com/tumblr_m1i39v0dJG1rsqxyoo1_500.png"/><br/><br/><p>a study of other OK things we can think of, v2</p>http://blog.okfoc.us/post/19957140883http://blog.okfoc.us/post/19957140883Mon, 26 Mar 2012 12:32:18 -0400<img src="http://25.media.tumblr.com/tumblr_m1bbqeKaso1rsqxyoo1_500.png"/><br/><br/><p><a href="http://lemmetweetthatforyou.com/">http://lemmetweetthatforyou.com/</a></p>http://blog.okfoc.us/post/19759648519http://blog.okfoc.us/post/19759648519Thu, 22 Mar 2012 20:51:00 -0400