After much delay, we’re happy to announce the Node.js Knockout winners!

Overall / Solo: Observer

by Speedo

Observer allows you to watch your application users in real time, and see in your browser what they are doing, all the events are duplicated and emulated.

If a user clicks on a button that triggers an alert or a other javascript interaction, the same interaction will happen on your page. You can see what the users are typing or what keyboard shortcuts they are using.

If you want to interact with the following user you can press the chat button at the top of the menu bar to start a anonymous chat with them.

Don’t have time to follow all your users? No problem, all session are stored in our database so they can be re-played at a later point of time.

Team: Eight Bit Beats

by somethingCoded

A collaborative, social beat and melody sequencer.

Popularity: Driv.in

by Go Horse Brazil

Driv.in is an YouTube battle party in a virtual drive in. You can create rooms to share with your friends and watch videos together in real time. When your friends enter in the middle of the video, they will be positioning at the point that everybody is viewing, so everybody will be at the same video time. When the current video ends, the next video will be played automatically.

This app is great for being a VJ for a day: create and share a playlist of your favorite artist from YouTube. You and your friends can also suggest new videos, throw tomatoes at the bad ones and chat along!

Utility / Fun: Doodle or Die

by opower

The game of telephone with drawings!

Design: ACROnode.com

by rochester-js

ACROnode is a wordplay game where players are given a random acronym and are challenged to create “backronyms.” For example, when presented with NBAM you might play Narwhal Bacons At Midnight.

Loosely based on the original Acrophobia IRC game, players score each other’s backronyms and are awarded points based on the number of votes, for being the first to submit your backronym, etc.

Innovation: Blue GPU Lava

by Minimason

Blue Lava is a small demo showing the node-webgl library written during the first half of Node.js Knockout.

The entry is not the visualization itself, but the library that allows it to run on node directly without the help of a browser. The library specifically targets the HP TouchPad, but it runs on other platforms as well.

The visualization is a fairly simple OpenGL scene with fairly complex GLSL shaders that push most the computation on the GPU. The animation is 100% procedural and rendered in real-time.

You can see a demo here: http://creationix.com/minimason.m4v

Using this library, a developer can create very advanced video games for just about any modern platform and use node to write it.

The library can be found at https://github.com/creationix/node-webgl and will be licensed under MIT. It’s published to npm under “webgl”. Patches are welcome after the contest to keep this alive and well.

Completeness: Chess@home

by Joshfire

Let’s break the Guinness world record for largest chess AI !

Do you think you’re good enough to beat the cloud? Give it a try.

Not a Chess GrandMaster? Join the machine uprising! To be a part of the compute grid, just visit Chess@home or any page with a <script> we provide (include it in your blog!). People with a few idle CPUs can also launch a worker with npm.

(We plan to invite an actual GrandMaster along with a Guinness official in a few weeks and coordinate online so that we all break the current 2070-world record and make Node.js a part of history! ;-) Follow @chess_at_home to be kept updated).

Congratulations!

Congratulations to all who participated. There were a ton of great entries this year!

We will be following up with winners directly over email shortly.

You can pass CSS to the Vote KO badge using a query parameter. This is particularly useful if you have a dark background:

<iframe src="/iframe/fortnight-labs?css=https://raw.github.com/gist/1176404/e336c0efd7c6d78fa1f49fda2f5e813ab747f580/ko-button.css"></iframe>

Early access program for the Pusher Pipe

In case you haven’t heard of Pusher before, we are a hosted service for adding realtime features quickly and easily to your web and mobile applications. Our main transport mechanism is WebSockets, and we think WebSockets are the bomb.

We have specialised in building a scalable infrastructure that can handle tons of connections, and making it easily accessible to developers. Our aim is to allow people to focus on building awesome stuff, rather than figuring out how to build distributed asynchronous systems.

The traditional mechanism for interacting with our service has been through a REST API. However, we have recently been working on a new interface that allows much deeper integration with the service. The working name for it is the Pusher Pipe, and we are allowing some early access during Node Knockout for people who are interested in giving it a spin.

What is this Pipe?

The Pusher Pipe allows you to create a single bi-directional connection to our service, which relays messages to and from your end users, as well as information about how and when they are connecting. You could think of our Pipe as a cloud-based WebSocket loadbalancer/multiplexer, but with an awesome Node.js library to go with it.

Maybe you like deploying your Node.js code to Heroku, but their lack of WebSocket support makes you cry?

Getting started

  1. install the npm module:

    npm install pusher-wsapi
    
  2. Make a file called test.js, put in the following code (with your api keys) and run it

    var Pusher = require('pusher-wsapi');
    
    var pusher = Pusher.createClient({
      key: 'yourkeycbfc8e5c02e22',
      secret: 'yoursecretc1d6a1b4b',
      app_id: 4,
      debug: true
    });
    
  3. create an html page with this in it (substituting your keys)

    <html>
    <head>
        <script type="text/javascript" src="http://js.pusherapp.com/1.10.0-pre/pusher.min.js"></script> 
        <script type="text/javascript">
            Pusher.host = "ws.darling.pusher.com"
            Pusher.log = function(message) {
              if (window.console && window.console.log) window.console.log(message);
            };
            var pusher = new Pusher('cbfc8e5c02e22cd6307a')
        </script>
    </head>
    </html>
    
  4. Open up your html page in a browser and look at the output of your node process. You should see a new client connect!

  5. Add the following to your node script and restart it:

    pusher.sockets.on('event:eventFromBrowser', function(socket_id, data){
        pusher.socket(socket_id).trigger('acknowledge', {message: 'Rodger'})
    })
    
  6. Refresh your html page, and open up a javascript console. Type in the following and hit return:

    pusher.back_channel.trigger('eventFromBrowser', {some: 'data'})
    

WTF just happened?

  • The html page that you created established a connection to Pusher.
  • Pusher told your node process that there was a new connection (as shown in the debug output)
  • The browser connection sent an event to Pusher that was relayed to the node process
  • The node process responded to the event and sent it back to the browser via Pusher A more detailed reference is also available in our overview.

How can I kick the tyres?

To get involved, you’ll need to be invited by us, so get in touch with support@pusher.com if you want access.

This is alpha software

The Pipe is not deployed to our production cluster, and we are actively looking for feedback at this stage. You may find that it works awesomely — some sample apps we built this week went swimmingly. However, it may blow up and kill your kitten. You can decide on the level of risk you prefer.

Node Knockout: Getting Started with MongoHQ

We are happy to provide the full MongoDB infrastructure for the Node Knockout competition this year. Here are some brief instructions for how to get started with using our service.

  1. Create a MongoHQ account.

    Go to https://www.mongohq.com/signup and create a MongoHQ account for you and your team. This will log you into MongoHQ.

  2. Add your Node Knockout Database

    Assuming you are still logged into MongoHQ, visit this link: https://mongohq.com/databases/new?promo=nodeko and from there, you will see one of the database options is for a Node Knockout database. Select the database, give it a name, and click the green “Create” button.

  3. Get your Connection Info

    Now that your database has been created, MongoHQ will present you with your connection strings. You can also access them from the “Database Info” tab. Now you can add the connection string to your application settings and you are ready to go.

Drivers

Now that you are good to go, here are some popular drivers that you can use when running your projects. Please note that there is not an officially supported 10gen driver for Node and MongoDB. All these are community-supported.

Native Node Driver

Node MongoDB

Here’s a quick overview of how to get your Node.js Knockout app up and running correctly. Please review the overview section of this post, as it contains essential information for the contest.

Overview

  1. Set up a server with the NKO npm module.
  2. Push to your team’s GitHub repo.
  3. Deploy to Joyent, Heroku or Linode.
  4. Verify your app is marked as deployed.

Instructions

For these instructions you will need two keys, both available on your team page:

Slug and secret

  1. your team slug - in this example, your-team-slug
  2. your team secret - in this exmaple, yourteamsecret

Step 1. Set up a Server

Create Project Folder

You want to make sure you have a folder for everything before you get started.

$ mkdir your-team-slug
$ cd your-team-slug

Set up Dependencies

Install npm.

$ curl http://npmjs.org/install.sh | sh

Then set up your package.json and dependencies:

$ npm init
$ npm install --save nko

Create server.js

// server.js
var http = require('http')
, nko = require('nko')('yourteamsecret');

var app = http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('Hello, World');
});

app.listen(parseInt(process.env.PORT) || 7777);
console.log('Listening on ' + app.address().port);

Require the `nko` Module

Make sure you require the nko module or else your site will not be voted on:

require('nko')('yourteamsecret')

We use the nko module to determine where your site has been deployed, so we can send judges to the right url to evaluate it.

Step 2. Push to GitHub

Instruct git to ignore your npm dependencies.

$ echo node_modules > .gitignore

Then create a git repository and add everything to it.

$ git init .
$ git add .
$ git commit -m 'first commit'

Finally, set GitHub as the origin for the repository.

$ git remote add origin git@github.com:nko2/your-team-slug.git
$ git push -u origin master

Step 3. Deploy Your Server

Joyent, Heroku, and Linode are providing free, private instances for you to deploy your code during the competition.

The choice of service for your submission is up to you (kinda like Pokémon):

  • Joyent provides a full VPS with root-level access combined with the ease of git push deployment. But note that Joyent only provides Solaris (ZFS!).
  • Heroku is crazy easy and fast to get up and running, but has some limitations (non-writable disk; XHR long-polling, but no WebSockets).
  • Linode is also a full VPS, with your choice of Linux distro and root-level access. It offers flexibility, but requires the most configuration and UNIX skillZ of the three hosting services.

You cannot deploy to your own private server no matter how face-meltingly awesome it is.

Joyent (no.de)

Detailed instructions for deploying to no.de are available here.

The no.de hosting service has just launched! Please send support inquiries to node@joyent.com.

  1. Create an account at no.de (or login).

  2. Click “Order a Machine” button in the upper right hand corner.

    • In the following instructions, we will assume you name your smart machine your-team-slug.
  3. Click on the smart machine you ordered.

  4. Follow the instructions on the smart machine page to add the host to your ~/.ssh/config file.

  5. Add joyent as a remote on your git repo:

    $ git remote add joyent your-team-slug.no.de:repo
  6. Now you should be able to deploy with a git push:

    $ git push joyent master
  7. Load your app in a browser to verify that it works.

    http://your-team-slug.no.de/
  8. Check your app is marked as deployed correctly on your team page.

Heroku

  1. Follow the invitation link in the invitation email you received from Heroku. Create a password in the invitation page.

  2. Install the heroku gem on your development machine.

    gem install heroku
  3. Configure your heroku login credentials, using the same email and password you supplied in step 1. Answer yes when prompted to use your existing ssh key.

    $ heroku login
    Enter your Heroku credentials.
    Email: user@domain.com
    Password:
    Found existing public key: /Users/user/.ssh/id_rsa.pub
    Would you like to associate it with your Heroku account? [Yn] y
    Uploading ssh public key /Users/user/.ssh/id_rsa.pub
    
  4. Configure a Procfile, to instruct Heroku how to serve your app.

    $ echo 'web: node web.js' > Procfile
  5. Install Foreman and test your app locally (on port 5000 in this example).

    $ gem install foreman
    $ foreman start
    13:52:16 web.1     | started with pid 83853
    13:52:16 web.1     | Listening on 5000
    
  6. Configure your remote Heroku repository.

    $ git remote add heroku git@heroku.com:nko2-your-team-slug.git
  7. Deploy to Heroku.

    $ git push heroku master
  8. Load your app in a browser to verify that it works.

    http://nko2-your-team-slug.herokuapp.com/
  9. Check your app is marked as deployed correctly on your team page.

Linode

  1. Login to the Linode Manager.

  2. Enter the credentials from your team page.

  3. Follow the Deploying to Linode blog post.

  4. Deploy your app.

    ./deploy linode
  5. Check your app is marked as deployed correctly on your team page.

Verify Your App is Marked Deployed

Once you deploy, you should visit your node knockout team page and verify that your app is correctly marked as deployed.

If your app is deployed correctly, you should see a nice green checkbox.

Deployed Correctly

Additional Notes

All entries will be hosted at least until the competition winners are announced. During judging, we will require remote access to your instance via an SSH key to make sure there is no cheating. We will compare your deployed code with the code in your git repo.

After the 48-hour competition deadline, you will still be allowed to restart processes, free up disk space, and perform other general sysadmin tasks (including playing lots of StarCraft 2).

This is the 23rd in series of posts leading up to Node.js Knockout about how to use everyauth to manage logins. This post was written by everyauth author and Node.js Knockout contestant Brian Noguchi.

Introduction

So you want to add logins to your web app? Assuming that you are using Connect or Express (and who isn’t these days?), then everyauth can get you up and running within minutes.

4 Steps to Get Up and Running

Setting up everyauth comes down to 3 steps with Connect and 4 steps with Express:

  1. Step 1 - Choose and configure what one or more logins you want

    Currently, we support 19 different login types including password, Facebook, Twitter, GitHub, and more. For a full list, see the everyauth github page.

  2. Step 2 - Specify a function for finding a user by id

    The function configuration here will depend on how you are storing your data — i.e., in memory or via a database. For in memory storage of users, this would look like:

    
       var usersById = {};
    
       everyauth.everymodule
         .findUserById( function (id, callback) {
           callback(null, usersById[id]);
         });
       
  3. Step 3 - Add your middleware to Connect/Express

    This automatically will set up routes and views for your app. For example, if you chose to set up password authentication, then you can now navigate to http://localhost:3000/login, http://localhost:3000/register, and logout with http://localhost:3000/logout.

    In connect, this looks like:

    
       var everyauth = require('everyauth');
       // Step 1 code goes here
    
       // Step 2 code
       var connect = require('connect');
       var app = connect(
           connect.favicon()
         , connect.bodyParser()
         , connect.cookieParser()
         , connect.session({secret: 'mr ripley'})
         , everyauth.middleware()
         , connect.router(routes)
       );
       

    In express, this looks like:

    
       var everyauth = require('everyauth');
       // Step 1 code goes here
    
       // Step 2 code
       var express = require('express');
       var app = express.createServer(
           express.favicon()
         , express.bodyParser()
         , express.cookieParser()
         , express.session({secret: 'mr ripley'})
         , everyauth.middleware()
         , express.router(routes)
       );
       
  4. Step 4 (Express only) - Add view helpers to Express

    
       // Step 1 code
       // ...
       // Step 2 code
       // ...
    
       // Step 3 code
       everyauth.helpExpress(app);
    
       app.listen(3000);
       

Configuring Facebook Connect

This is how you would configure configure Step 1 from above to set up Facebook Connect.

First some boilerplate for creating and storing users in memory:

var nextUserId = 0;
var usersById = {};

function addUser (source, sourceUser) {
  var user;
  if (arguments.length === 1) { // password-based
    user = sourceUser = source;
    user.id = ++nextUserId;
    return usersById[nextUserId] = user;
  } else { // non-password-based
    user = usersById[++nextUserId] = {id: nextUserId};
    user[source] = sourceUser;
  }
  return user;
}

Now for the configuration (Step 1) that sets up Facebook Connect.

var usersByFbId = {};

everyauth
  .facebook
    .appId(YOUR_APP_ID)
    .appSecret(YOUR_APP_SECRET)
    .findOrCreateUser( function (session, accessToken, accessTokenExtra, fbUserMetadata) {
      return usersByFbId[fbUserMetadata.id] ||
        (usersByFbId[fbUserMetadata.id] = addUser('facebook', fbUserMetadata));
    })
    .redirectPath('/');

Get YOUR_APP_ID and YOUR_APP_SECRET by registering a Facebook app.

findOrCreateUser takes an incoming session object and the data returned from Facebook’s OAuth2 process as accessToken and accessTokenExtra, and fbUserMetadata. This function should find or create a user object and then return it.

redirectPath tells you where to redirect your user after a successful Facebook Connect login.

With this code, you can now include links to /auth/facebook in your views.

For detailed instructions to set up any of the 19 login strategies, please see the README

Other Resources

This is the 22nd in series of posts leading up Node.js Knockout, and covers using PostageApp to send email in your node app.

Given the time crunch for Node.js Knockout, there’s barely enough time for anything. Getting your app configured to send email is one of those things that can prove to be far more time-consuming than you expect, especially if you’re not prepared.

Here’s a quick-start guide for getting your Node application set up and ready to roll in just a few minutes.

1. Install the Module

With Node, there are two really easy ways to bring a module into your app: using the Node Package Manager (NPM) or a manual download.

Using the Node Package Manager (NPM)

Using the Node Package Manager is by far the easiest and quickest way to get a module installed into your Node app. All you have to do is run this command in the root of your application:

npm install postageapp

Manual Install

Manually installing is just slightly more tedious than installing via NPM, but it’s just as simple!

  • Download the module files from our GitHub account
  • Unzip the file you just downloaded, and copy the contents over to your app’s node_module folder
  • Rename the folder from postageapp-nodejs to postageapp

2. Get a PostageApp API Key

Log in to your PostageApp account and make sure you create at least one project. Once you have a project associated with your account, you should be able to see an API key specific to that project. Once you have the API key, you can include the PostageApp plugin into your Node.JS app by using the following code:

var postageapp = require('postageapp')('YOUR API KEY GOES HERE');

3. Creating a Parent Template

It’s not hard to send great looking email messages if you have the right tools. Email clients are notoriously particular about what kind of HTML they accept, and even support for CSS is extremely limited. One big feature of PostageApp is that you’re able to create a nice HTML template, add in a CSS file, and the two will be combined in an email-friendly markup format that you can preview before sending to ensure it’s working properly.

Every new project comes with a sample layout you can customize with your own logo, CSS theme, and of course content. A parent template can be used to establish common headers and footers without having to cut and paste these to every type of message you’ll be making. These are available under the Message Templates tab of any project page.

To explain how this works, let’s create a very simple parent template by going to the Message Templates tab and clicking on the Create a New Template link just above the list of templates. You’ll get an empty editor screen you can use to create it.

Add a simple layout that looks something like this in the HTML tab edit area:

<h2>Awesome Web App</h2>

<hr>

<div>
    {{ * }}
</div>

<hr>

<a href="http://yoururl.com">Awesome Web App Page</a>

The mysterious double-curly symbol-with-a-star-in-it {{ * }} in the middle is the location where the template content will go.

You can preview the template at any time and see how it should look in a regular email client. Warnings about your HTML and CSS are reported here, so if you’re making use of exotic, cutting-edge features like background images that some ornery email clients like Outlook don’t support, you’ll get a heads up here. You can always use the Send test email button located just below the editor to see how the email looks in your own client, or through an email previewing service if you use one.

Without some CSS this is going to look really plain. As you design your app, it’s easy to snip key styles and paste them into the CSS tab of the template editor.

Before you can save this template, you have to give it a template slug. For layouts, this is really just a descriptive name you can use to remember what layout it is. In this case call it something like default_layout so it’s easily identified later.

The Subject and From fields generally only apply to child templates themselves, not parent templates.

Save your template and you should be ready for the next step.

4. Create a Child Template

Having a parent template is great, but without something to go into it, you won’t get much use out of it. A message template can be created as you usually would, within your Node application, but it’s usually far easier to have the templates within PostageApp so you can edit them without having to redeploy your application. Think of this as CMS for your email messages where you can make changes at any time and see the results immediately.

A typical application sends out dozens of different messages to its users. When you sign up, when you confirm your registration, when you forget your password, when you haven’t been active in a while, when you invite someone, when you receive a message from someone, or even for general announcements or special offers. It can be difficult to maintain these if you have to check in and deploy your application to make even the smallest change.

A good example is an invitation email sent by one user to someone else. Create a New Message Template again. This time we’ll use the parent template created in the last step to give an otherwise boring email some style.

Here’s a sample invitation that can be pasted into the HTML tab edit area:

<p>You've been invited to join {{ app_name }}!</p>

<p><a href="{{ signup_link }}">Sign up</a> now and receive five free invites you can share with your friends!</p>

There are two variables here you can customize with user data when sending the message, {{ app_name }} and {{ signup_link }}. Through the API you can set some of these the same for everyone, or customize each field individually for each recipient.

Set the parent layout to be the parent template created in the earlier step.

You can set the default From address here, or assign it later when making the API call. The same goes for the Subject. You can also use template variables in the subject to personalize it. In this case, set the subject to:

{{app_name}} - Invitation from {{user_name}}

If you preview the message now, you should see the template wrapped neatly inside the layout.

Set the Template Slug to be invitation and save the message.

You’re now ready to set up something to trigger this message.

5. Sending an Email with Node

To send emails through PostageApp using the Node plugin, you have to create a hash with all of the arguments that you need, and then make the API call using the payload which we assembled. Here’s an example of what assembling a payload looks like:

var options = {
    recipients: 'email@address.com',

    subject: 'Subject Line',
    from: 'sender@example.org',

    content: {
        'text/html': '<strong>Sample bold content.</strong>',
        'text/plain': 'Plain text goes here'
    }

    template: 'sample_template_slug',

    variables: {
        'global_variable_1': 'First Name',
        'global_variable_2': 'Username'
    }
};

For a better idea of how to use the arguments, take a look at the Node.JS plugin’s GitHub page for further examples and elaboration.

Once you have your arguments set up, all you have to do is make an API call.

postageapp.sendMessage(options);

Recap!

From here you can go and customize this as required, add other notifications, and create new templates.

Hopefully this saves you a bunch of time so you can make an even better application this weekend.

More detailed documentation is available on our knowledge base.

Good luck with Node Knockout!

This is the 21st in series of posts leading up Node.js Knockout, and covers using Spreecast during to collaborate with your team and share with other participants around the world.

What is Spreecast?

Spreecast lets groups share video experiences in real time. With Spreecast, you can broadcast your live video to the world, pulling in viewers to share the experience when it suits you, and dismissing them when they’re done. It’s a fun format for sharing at event locations and an awesome new way for Node.js Knockout teams to coordinate their coding.

For Node.js Knockout you will be able to sign up and get exclusive early, pre-beta access to Spreecast and unlimited live video during the competition. Spreecast is pre-beta and working hard to squash bugs and tune user experience. We’d love to hear feedback on any bugs or issues that you encounter.

Getting Started

Here is the URL for node knockout: URL: beta.spreecast.com. Credentials for the basic auth prompt are on nodeknockout.com/services.

Once you are on the site, login and create an account. To create a Spreecast click the green Spreecast Now button at the top of the page.

Spreecast home

When you are done with a Spreecast, click on the red “On Air” button. This ends the spreecast and brings you to a page where you can view the archive.

Sharing and Tagging

Be sure to tag your Spreecast with “nodeknockout”, so the Spreecast will show up in beta.spreecast.com/tags/nodeknockout. When you create a new Spreecast, click on “Add Details” to add tags before starting.

Spreecast tags

Feedback

There’s a feedback link at the bottom of the page. We’d love to hear what you think.

Have fun Spreecasting!

Here’s a quick tip: you should link to your team’s page to get as many votes as possible.

Alternatively, if you want to let people vote from your app directly, you can use our “Vote KO” widget:

Vote KO widgets

Here’s how to use it:

<iframe src="http://nodeknockout.com/iframe/YOUR_TEAM_SLUG" frameborder=0 scrolling=no allowtransparency=true width=115 height=25>
</iframe>

You can find your slug from your team’s page. The slug is the last segment of the url (e.g. http://nodeknockout.com/teams/fortnight-labs)

Once you’ve deployed your widget, link to your app in the comments so other people can see how you integrated it.