Using this amazing new system I was able to integrate support for the new WebSockets specification that Google recently added support for in Chrome, and I used this to make a simple real-time chat application with emoticon support and translation of image links to inline images and youtube links to inline videos.

…and the best part? This only took me about an hour!

There are some simple architectural differences that make it vastly more powerful that most any other popular web programming languages. One of my favorite characteristics of it’s unique design is that variables assigned in a global scope can be accessed across all requests…that means regular database querying becomes completely unnecessary! You could create a json object where you store your data, then check it over every once in awhile, and apply any changes to the database. It’d work as a query queue of sorts that would greatly reduce database interaction overhead and it wouldn’t require setting up some other incredibly complex software to proxy the requests!

I’m also quite fond of the branching design. There is a module called ‘http’ for running web servers, but it’s really just routing everything through the tcp module, which essentially does the same thing. The ‘http’ module just simplifies the interface and makes common actions like sending headers more elegant. It’s a clever design really; supply varying levels of complexity in control to match varying levels of complexity in application–not everyone is going to want the ability to create a mail server, so why would they want to have to access tcp directly? Inversely; not everyone is only going to want a web server, so why would you only supply access to http-related code?

Have a look at this sample code I ripped-off from the homepage of node.js;

var sys = require('sys'),
   http = require('http');
http.createServer(function (req, res) {
  setTimeout(function () {
    res.sendHeader(200, {'Content-Type': 'text/plain'});
    res.sendBody('Hello World');
    res.finish();
  }, 2000);
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');

Isn’t it so simple? You just include a few modules, run http.createServer() with a callback function passing in the request and response objects and tell the server to listen on whatever port you want and whatever domain you want. In the callback you can branch of by breaking apart request.url to find the user’s query and use that to redirect via a switch block or whatever other means you see fit. Best of all, it’s asynchronous, so you don’t need to halt execution for every little thing. It’s even compatible with many common Javascript utility libraries such as Underscore

That’s fixed now and I did a few minor structural changes to reduce the character count a little and make things ever so slightly speedier. I also created a fancy tutorial page type thing for it, which you can check out here.

Example

Downloads:
Minified – 2.03 KB
Non-Minified – 4.35 KB

• Class inheritance
• Src inheritance from href for easy conversion of links
• Built-in support for allowfullscreen parameter
• Minor fix to dimensions inheritance
• Added availattrs and availparams to settings object allowing anyone to add support for any extra attributes or parameters they might need!
• Moved lots of code around to use as little characters as possible, allowing optimal minification. All this new functionality and it got even smaller! It’s now down to 1.91 KB.

Available options and their defaults:

$(this).flash({
    // As always; all settings are entirely optional.
    id			: $(this).attr('id'), // ID
    class		: $(this).attr('class'), // class
    width		: $(this).attr('width'), // Width
    height		: $(this).attr('height'), // Height
    src			: $(this).attr('href'), // Path to swf
    flashvars		: null, // JSON structured flashvars data
    bgcolor		: null, // Background color
    quality		: null, // Quality
    wmode		: null, // Window mode
    allowscriptaccess	: null, // Set to "always" to allow script access across domains
    allowfullscreen	: null, // Allow fullscreen viewing.
    classid		: 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000', // For IE support.
    codebase		: 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=', // Ditto.
    pluginspace		: 'http://get.adobe.com/flashplayer', // Download Firefox plugin if missing.
    // Custom attributes and parameters are added like this;
    // ['someattributename','someotherattributename']
    //
    // Then add it to the settings just like the ones above were added.
    availattrs		: [], // These are the attributes we should attempt to add.
    availparams		: [], // These are the parameters we should attempt to add.
    // Version is used for flash version detection in conjunction with the express install swf value below.
    version		: '9.0.24', // Minimum Flash version
    express		: null // Path to express install swf
});

jquery.flash.js – Uncompressed
jquery.flash.min.js – Minified

Why use it? Well for starters it minifies to just over 2 KB, rather than the 10 KB of swfobject! How about automatic plugin and version detection? How about complete cross-browser compatibility? If jquery.flash isn’t a perfect fit for your flash embedding needs then you are just asking for too much.

How do you use it? Just like this;

<script type="text/javascript">
$(document).ready(function(){
    $('.flash').flash({
        "src":"your_flash.swf",
        "width":100,
        "height":100,
        "vars":{"name":"value"},
        "color":"#fff",
        "quality":"high",
        "wmode":"transparent",
        "access":"domain",
        "express":"express_install.swf",
        "classid":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
        "codebase":"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=",
        "plugin":"http://get.adobe.com/flashplayer",
        "mime":"application/x-shockwave-flash",
        "version":"9.0.24",
    });
});
</script>

All arguments are optional and will just be left out if you don’t use them unless they have a default. Everything from classid down has a default. Width and Height, when not declared, will use the current dimensions of the element that is being replaced. Flashvars are passed as a json object to ‘vars’ and are automatically serialized into a query string. If there is demand for it I may add a check to allow already made query strings to be used instead of a json object, but it wasn’t really of any importance to me.

If you have any questions feel free to ask.

jquery.flash.js
jquery.flash.min.js