Canvas Loading Image Replacement Plugin

I know I mentioned this before, but I've recently released a simple jQuery plugin that replaces the standard ajax loading images with a canvas version that works in places where animated GIFs do not (read: Android WebKit).  Well, after posting about it in a certain Google Group to do with Mobile Web Development I received a lot of feedback, mainly that JQuery is a hefty requirement for a mobile website, so I re-wrote it without JQuery. The results can be found here:
http://jamund.com/canvas-loader/no.jquery.html

Here's how it works:

 window.onload = function() {
  var img = document.getElementById("imgLoader");
  var span = document.getElementById("spanLoader");
  canvasLoaderReplace(img, {color:'red'});
  canvasLoaderReplace(span, {backgroundColor:'red', radius:'40'});
 };

• Before
  
  X
• After
  
  X

NodeJS Based IM server

Goal

Simple and fast messaging over web sockets.

Approach


I recently developed an AJAX-based messaging client for a large social networking type website I am developing for a client at Rain. It works fine, but using AJAX to constantly poll the server is slow and creates a fair amount of overhead for the browser. Using web-sockets with a flash back-up for older browsers combined with NodeJS on the server side should create fast and simple solution for my messaging problem. It would also make it easier to separate the messaging server from the web application server to increase scalability.

Results


After getting lost in a la-la land of non-supported NodeJS 1.x based web socket and chat clients, I stumbled on Socket.IO, a library that contains both front-end and back-end code for delivering high speed chat over web sockets using NodeJS 2.x.

Getting Started

Following these simple steps in terminal got me a working chat server up and running in about 5 minutes.

# install node
cd ~/dev;
git clone git://github.com/ry/node.git;

cd node;

./configure;

make;

sudo make install;

# install socket io

cd ~/dev;

git clone git://github.com/LearnBoost/Socket.IO-node.git;

# start socket io

cd Socket.IO-node/example;

node server.js;

cd ~/dev;

# install the socket io web client

git clone http://github.com/LearnBoost/Socket.IO.git;

# copy the javascript over to the example directory
cp Socket.IO/socket.io.js Socket.IO-node/example/client/;

Witness the awesomeness here: http://localhost:8080/chat.html

Moving forward


I love how easy it is to get started with NodeJS and Socket.IO. I intend to put it to use to build my messaging client. One key feature that might provide a problem is logging the messages. Currently Ithey are being stored in MySQL on a separate database server. Because the storage doesn't need to be real time, only the messaging, I could continue using AJAX to log messages. I might also be able to hook into MySQL directly from the socket.io-node server in a way that does not slow down communication. More research will be needed to determine how practical an approach this will be and how it competes with AJAX/PHP on resources, scalability, and browser support. At the moment I'm excited about the potential and hope to write more about it if I get it up and running!

Resources

http://nodejs.org/ - Server-side Javascript engine.

http://socket.io/ - A great module for NodeJS that adds support for web-socket communications.

http://thechangelog.com/post/456659159/socket-io-multi-transport-socket-server-for-node-js  - A good tutorial on how to get started with Socket IO for NodeJS.

psd2html.com form element mis-hap

When PSD2HTML.com cuts up your HTML, don't assume that just because a form has a submit button that that button will submit the parent form element; It might have some inline javascript that directs it to submit some other random form on the page. #fail

SVG saga

I made some really good progress on a site I was working on using embedded SVGs.





This was for a mobile web project I am doing for work. Unfortunately Android's webkit (<2.2) does not support SVG, so I had to go back to using PNGs.

BOO!