Express 3.0 + Socket.IO working example !

Server code ( app.js )
var express = require('express');
var app = express.createServer();
var socket = require('socket.io');
app.configure(function(){
  app.use(express.static(__dirname + '/'));
});
var server = app.listen(8081);
var io = socket.listen(server);
io.sockets.on('connection', function (socket) {
 console.log("connnect");
 socket.on('disconnect', function (socket) {
  console.log("disconnect");
 });
});

Client Code ( index.html )

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:8081');
</script>

put these files in the same directory and install all dependencies.
run server !!
you can also download/fork the code from the link below.
https://github.com/sreekumar-kr/Expree3.0---Socket.IO

Getting started with HTML5 canvas

HTML5 canvas element is a simple HTML tag. It allows dynamic and script-able rendering of 2D and bitmap images. Canvas consists of a drawable region defined in HTML code with height and width attributes. Javascript code is used to access the area through a full set of drawing functions.
In this tutorial I'm going to explain the basics of canvas element and how it can be used to draw a line. So in order to use the canvas element , you'll need to place the canvas element somewhere inside your html.
<!DOCTYPE HTML>
<html>
  <head>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("canvas_area");
        var context = canvas.getContext("2d");
             //code here 
     
      };

    </script>
  </head>
  <body>
    <canvas id="canvas_area" width="600" height="300"></canvas>
  </body>
</html>
The code above will be the base template for all of your future HTML5 Canvas projects. We can define the height and width of the canvas tag using the height and width attributes, just like we would with any other HTML tag. Inside the initializer function we can access the canvas DOM object, and then get a 2-d context using the getContext() method.

How to draw a line

<!DOCTYPE HTML>
<html>
  <head>
   <style>
    #canvas_area{
    border:solid 1px #999;
    }
   </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("canvas_area");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(100,150);
        context.lineTo(400,250);
        context.stroke();
      };

    </script>
  </head>
  <body>
    <canvas id="canvas_area" width="600" height="300"></canvas>
  </body>
</html>

A little explanation

beginPath() -  defines a new drawing path.
moveTo() -   creates a new subpath for the given point. This point becomes the new context point. You can think of the moveTo() method as a way to position your drawing cursor.
lineTo() -  draws a line from the context point to the given point.
stroke() -  assigns a color to the line and makes it visible. Unless otherwise specified, the default stroke color is black.



zwibbler.com allows you to make stick figures appear to be hand-drawn.

Zwibbler is an HTML5 application that allows you to make stick diagrams appear to be hand-drawn..
Features:
  • Box, circle, lines, and curve primitive shapes
  • Shadows when supported by browser
  • Text in several hand-drawn fonts rendered on the server
  • Rotate & scale shapes individually or in groups
  • Save drawing to a browser bookmark
  • Select colours using an HSV colour wheel.
  • Unlimited levels of Undo/Redo
You can also add zwibbler to your own web application by adding a single line of code to your html file.
<script src="http://zwibbler.com/component.js#width=700&height=400" type="text/javascript"></script>


Zwibbler on this blog.

You can change the width and height to fit into your web page. The dimensions are the size, in pixels, of the entire Zwibbler.com editing frame, including all of the controls. It is not possible to set the size of the resulting image, because it is always the size of the user's drawing.






How to add a Dislike button to your Facebook status updates!!

Like buttons are everywhere on facebook and they are everywhere on the web also.  But what if you want to update your status or share something that your friends can dislike ??
Status magic is a Facebook application that allows you to add a dislike button to your updates via the application. And if you want to really mix it up, you can actually customize the second emoticon (dislike) to anything, such as "Love", "Hate" etc.
 
Status magic : http://apps.facebook.com/statusmagic/

Hope you like this :)
Please share your thoughts in comments

How Inception Should Have Ended

Make yaaar status updates walk the plank.!!!!!! Change the language of Facebook to English (Pirate) BETA.!

Have you ever tried Facebook English (Pirate) ?
A Bunch of Pirate fans have created a language dubbed English(Pirate). It adds an overall fun to the Facebook profile by changing the words such as Home to Home Port, Friends to Mates Y’might Know, etc.
To change the language scroll to the bottom of the facebook page and click English(US).








Finally from the list of languages, select English(Pirate) and you are done.












Share your thought in comments!!

Download complete facebook albums in a single click !!!!!


This time I'm gonna tell you how to download facebook albums in a single click. All you need to do is to install a Firefox add-on called FacePAD .Its one of the best add-on's of firefox which will allow you to download complete photo album on facebook in a single click.

  1. Install FacePAD add-on
  2. Navigate to the Photos page
  3. Right click on the album cover and you will get something like "Download with FacePAD" from the menu.
  4. Clik it and facePAD will download all pictures for you.
:)