November 1, 2011

Bacon Off

Dave Kaneda and I wandered along to the Facebook Mobile Hack last week. We spend a lot of time attending, speaking at, and sponsoring hackathons, but wanted to have a go at getting involved for ourselves. Consider it SenchaCon decompression or something.

The event as a whole was excellent – some great sessions and a strong focus on using HTML5 for mobile apps. Facebook’s new graph API, for example, encourages developers to think about how to semantically describe users’ contextualized activities (how many sedentary web users do you see in this video?). All part of an exciting mobile future for the web’s next decade.

Team Sencha was probably rather too ambitious. But after several frantic hours, we managed something that more or less worked.

Our app was to be BaconOff, a two player game to match actors from your Facebook-liked movies against each other based on their Bacon Number, Top-Trumps-style. The server-side, node.js, hosted and deployed easily to Heroku, and which handles the Facebook authentication, delivers a Sencha Touch app, containing an access token, to the browser. (No doubts at all this can be more elegant and secure).

The first thing the app does is pull a list of your favorite movies from Facebook. Once loaded, each movie record calls, a wrapper around IMDB’s database, and fetches four actors from each of your favorite movies.

Those actors are then created as a further type of model, each of which has a bacon-number-fetching method. We hoped to use YQL to get the values from Oracle of Bacon, but it was barred by a robots.txt condition. Slightly cheekily, we used our node backend to proxy a request to that server anyway, and then handle the common condition of there being more than one entry for each actor’s name.

In the meantime, and no thanks to me, we had a sweet UI and CSS3-animated loading screen – all Sass goodness from Mr Kaneda of course.

We’d hoped to avoid having state stored anywhere on the server or in the client, using the social graph alone. Eventually we figured it was unavoidable, and quickly had to write a game state storage layer on the server side. It uses a contemporary storage platform known as… the file system. Ahem.

From here on, with time running out, and with a flying visit required to my son’s (excellent!) school play on the other side of El Camino, code started sprawling as we dashed for something demonstrable.

APIs for starting, listing, and playing games quickly followed, and views on the client side emerged to allow competitor and actor selection, as well as the game’s home screen.

We added the Facebook JavaScript library relatively late in the day to allow competitor selection and request; (in retrospect we should have based the whole app around this library from the start – what were we thinking?). And then tried, and failed, to make the frictionless sharing of the game progress post to the timeline: I just couldn’t find the relevant permissions settings in the last 30 seconds before we went on stage. This was a shame, because we’d had the nouns and verbs configured ages before!

At somewhere approaching 1am, we finally got to demo the app, and for those two minutes it more or less worked. There was only one hack required to make the walkthrough work: I’d been working on the assumption that players would be keyed by name, while Dave (and, it turns out, Facebook) that they would be keyed by ID. A small hardcoded line covered that up – albeit at the expense of making every game ever appear to be against Dave himself. With that in mind, I’ll decline to link to a live running version. Screenshots only ;-)

So yes, in retrospect, far too ambitious. Hacking time was supposedly limited to 6 hours, and we’d needed a few more than that. I rather wish now that we’d just done a Social Compass app and stuck some avatars on top of a simple webkitCompassHeading event handler or something. We weren’t expecting to win anything (there’s no doubt the well-prepared entries were far superior ;-) ) – and let’s just say that this was an expectation firmly met.

But it was a lot of fun being on the other side of the stage for once. And it’s interesting to see how far you can get on something completely new in a short time period if you put your mind to it. I guess that’s the whole point; code quality be damned…

Comments (31)

  1. October 31, 2011
    Donovan said...

    Jim Gaffigan said it best:

    Wait for it…. 0:04:35… You’re not going to go see a Kevin Hotdog movie

  2. February 21, 2012

    Is the the beta sign up? I need into this!!

  3. March 12, 2012
    Shasta Groch said...

    When did it turn into a problem to be a small businessman and be successful? The little businessman – like my pops, or at all like me?
    The trick of business is usually to know something that nobody knows.

  4. August 15, 2012
    fahsodahwioa said...

    I’ve been surfing online more than 3 hours today, yet I never found any interesting article like yours Bacon Off James Pearce. It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the web will be much more useful than ever before.

  5. September 28, 2012


  6. January 8, 2014

    I merely could not depart your internet site before suggesting that I really cherished the regular information and facts any person source on your website visitors? Is actually gonna be once again consistently so as to check into brand new discussions

  7. January 11, 2014
    puchkofff said...

    Ваш сайт в опере не очень то корректо показывается

  8. April 14, 2014

    Whats up this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience.
    Any help would be greatly appreciated!

  9. April 14, 2014

    Hi, I read your new stuff on a regular basis. Your story-telling style is witty, keep it up!

  10. April 23, 2014

    Hmm is anyone else experiencing problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

    Feel free to surf to my web site … download for no good reason

  11. May 18, 2014

    Hmm is anyone else having problems with the pictures on this blog loading?
    I’m trying to figure out if its a problem on my end or
    if it’s the blog. Any feed-back would be greatly appreciated.

    Here is my web site; game of thrones season 4

  12. June 19, 2014
    jhondevera said...

    BaconOff seems to be an interesting game. I wonder how I can convert my game idea to this kind of app.

  13. July 8, 2014

    Υes! Finally someone writess about weight watchers.

    Feel fгee tto surf to my web page – garcinia cambogia Select Tm

  14. November 23, 2014
    watch movies said...

    It was just a simple funny game.

  15. September 28, 2015
    Best Laptops said...

    Pretty good stuff. I check the app BaconOff on github. Amazing work.

  16. October 18, 2015

    Regularly I appear to be learning a tad bit more about NodeJS. It really is definately the only framework to get familiar with long-term. Just fulfilled the BackSpace.Academy Amazon cloud Certified Developers course. It has displayed a brand new Arena of applications for me. Now I have to spare the time in order to get programming!

  17. November 24, 2015

    Natürlich mit eine ausführlichen Kurzbeschreibung damit ihr wist welchen Gratis Video ihr euch danach anschauen könnt und wo.

  18. February 22, 2016
    about said...

    garcinia vitamins hcg 0.500 green coffee yahoo acai vida mangosteen fruit buy oprah winfrey hoodia gordonii fiber 625 mg chitosan benefits bethel nutritional guar gum uses in mining google lipozene complaints konjac glucomannan pills

  19. February 22, 2016
    ago said...

    ms eva european skin care 80231 real estate

  20. February 27, 2016
    inquiry said...

    skin care with ross emergency

  21. February 28, 2016
    Click This Link said...

    eminence skin care peel

  22. March 22, 2016

    Hey terrific blog! Does running a blog like this require a large amount of work? I have very little expertise in computer programming however I was hoping to start my own blog soon. Anyhow, should you have any ideas or tips for new blog owners please share. I understand this is off subject nevertheless I just wanted to ask. Thank you!

  23. April 29, 2016

    der Wohnung legt ihr Gipsbein hoch und ich beginne, ihre süßen Füße und Zehen zu küssen Doch natürlich lasse ich mir zunächst nichts anmerken und bringe sie meine Wohnung, wo sie es sich bequem macht und ihr Gipsbein erstmal auf dem Tisch ablegt.

Leave a Reply