Mothereffing GIFSockets!!!San Francisco, CA

  • 573 Commits
  • 265 Pushes
  • 50 Deploys
Launch Site

Mothereffing GIFSockets!!!

By console.log

Screencast
Quick Intro

Talk to others through a never-ending animated GIF.

Description

Our server accepts requests for GIFs and leaves them open so we can write additional frames. When someone submits the form, we draw and collect the pixel values via canvas (in PhantomJS), encode a new frame, and send it down to the open connections.

Judging Instructions

To submit a new frame, enter some text into the text area below the GIFSocket and press 'Submit'. You can optionally set the background/foreground (see fillStyle documentation for all options), font size (pixel value), and font family.

This was developed against Firefox so that would be the ideal browser. However, it should work in all browsers (even IE6).

What they Used

The server uses a fork of gif.js (GIF encoding), PhantomJS (convert text to pixel values), fork of phantomjssmith (PhantomJS library), express (server routing), raw-body (low-level request body parsing), jade (HTML simplified), marked (HTML really simplified), request (communication layer between PhantomJS server and gifsockets server).

The website uses jQuery (cross-browser event bindings and XHR made easy), Bootstrap (page styling), Subtle Patterns (background), GitHub ribbons ("Fork me on GitHub" image), filereader.js (drag and drop file reader), grunt (task runner), grunt-zip + grunt-curl + grunt-contrib-copy (asset downloader).

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • contestant

    It didn't really work for me, and is a port of an existing project.

    I could see this being really fun for social circles though under certain circumstances.

  • judge

    Samsung

    Very creative!

  • judge

    Joyent

  • judge

    Yahoo!

    Nice pile of tech used to complete this, love that you used forks to get the functionality that you needed. It worked relatively well for me, it did not work with DnD of an image on my Chromebook. But the text and such worked as expected.

  • contestant

    I saw your demo on UStream, great work! +1 for IE6 support haha

  • contestant

    Australian Antarctic Division

    You've solved one of the main problems I had with the original GIFSockets implementation. A JavaScript port has been long overdue. Nice work! :)

  • contestant

    Fagbokforlaget

    It looks complete, it's sort of fun and innovative :) The design could be improved though.

  • contestant

    The idea of using a gif as an open connection is awesome and I think this is a good demo for demonstrating this but you could have made more out of it like a little chat instead of this "Hello World" example.

  • contestant

    IOKI

    An old idea - but yeah - it works! :)

  • judge

    tenXer

    Utility/Fun: I'm very uncertain why I would need this as opposed to an actual chat or IRC service.

    Design:Appears very Bootstrap.

    Innovation: PhantomJS seems a bit heavy-handed for this use-case. Couldn't you have just used an image drawing library like GD or ImageMagick? GIFSockets have been around for a while as well, and I've yet to see a strong use-case for them.

    Completeness: It does what it says it does, but I'd be really interesting in seeing this pushed a bit further and showing something new that makes me really want to use it.

  • judge

    Nodejitsu

    Very cool Todd. I remember seeing the gifsockets thing in clojure and just wishing it was in JS!

  • contestant

    This is really nice and I'll definitely use this at some point where I might need this (you never know what you end up doing). The usefulness is obvious with regard to accessibility for developers.

    Great job man! Saw you on stage too with the IE6 demo.

  • contestant

    eff yeah!!

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors