A handy middleware utility for node.js and express to queue scripts and styles to be rendered later. Supports supplying javascript via anonymous functions to avoid multi-line string issues and also has built-in minification, which can be enabled when you render the scripts.

Chattan

This is the expanded source of the chat demo I made for my Node.js presentation at OKDG. I added CouchDB user persistence, S3-backed file uploading and also inline media embedding via another open-source project of mine called Embedify.

Jquery-droploader

A jquery plugin for xhr-based upload management with support for drag-and-drop regions. I used this for handling file uploads to S3 in Chattan.

Eventually I made it to San Francisco, but the problems still hadn’t ended. From the airport I took a shuttle…to the wrong hotel. Then I caught a cab to the right one. Finally at my hotel, I checked in and went up to my room. Much to my dismay however, their internet login system doesn’t work with Linux so my “complimentary” internet went entirely to waste. I had to resort to my Galaxy S for checking emails–no doubt my next bill is going to be scary expensive. In typical hotel fashion, they charge you to do pretty much anything but sleep, so I slept.

The next day was somewhat better. I was to meet at the Yammer HQ, in the same building as TechCrunch, for a few hours at 10AM. Checkout time at the hotel was noon, so I had to pack my luggage along with me. I quickly packed up my things and took a cab over to their offices, which were just a few minutes away.

The interview seemed to go pretty well, hopefully I can get the job because they’d be a pretty awesome crew to work with. There was several sets of interviews with people from the various teams at Yammer. They asked me various questions about Javascript to test my knowledge, which was refreshing–sometimes I just get disregarded because of my lack of formal training. Most of the questions were pretty easy but there was a few things that they were a bit vague about so it took a bit of prodding to figure out what exactly they were fishing for. Overall the interview seemed to go over pretty well though. I got to share a tasty catered lunch with them too.

After the interview I basically stepped outside the office, jumped into a cab and went straight to the airport. It was a much smoother exit from San Francisco than the entrance. There was a stop in Seattle though that was a bit on the long side. I sat at the gate for my next flight for about 3 hours. Fortunately there is plenty to do at the Seatac airport, so I managed to keep myself entertained. I got to try out a PlayBook while I was there, which was neat. I can kind of see where people are coming from about the complaints of it being “incomplete”, but it’s still a pretty neat piece of tech. I think application development should make it a pretty exciting platform.

Anyway, eventually I got back to Kelowna and finally got the sleep I had been longing for since Monday morning. I slept until almost noon on Wednesday, which I haven’t done in awhile. But eventually I felt compelled to get up and get some programming in. I wanted to get some more work done on the game engine I’ve been working on for a web game I’ve been making. I made a few updates to my Actor class to add RM2K support and animations, so I decided I’d do some benchmarks. I managed to get 484 unique Actors on a grass-tiled screen at 1920×968 before it the rendering started to drop below 30 fps. That’s some pretty decent performance. Now I need to work on layer grouping and pre-rendering so I’m not drawing each tile of each layer for every frame. I’m convinced I can actually make an infinite scrolling tilemap render fast enough to be viable for large scale game development.

Thursday morning was the second Evoke Game Group meeting. Unfortunately there was only three of us this time–the weather was a bit ugly and I think there was a bit of confusion with moving the meet to Thursday because of Good Friday. It should pick up again for the next meet though. I’ve got a few people who’ve invited some programmers to join us, so I’m optimistic that I can get a hacknight going soon. I’ll keep my fingers crossed.

Today was more game dev stuff and deploying Chattan to DuoStack. Hopefully I can get Cloudant working too so I can deploy another secret project I’ve been working on. Cloudant was one of the many SaaS companies hit hard by the EC2 outage today. Hopefully they recover soon, it’s a pretty awesome service. I also got a few more calls from some web companies in San Francisco, including Opzi; one of the startups presented at this years TechCrunch Disrupt. They are somewhat smaller than Yammer, but it sounds like they are trying to do some pretty neat stuff. I can’t wait to see where that goes.

I’ve made many changes including;
- Moved module system parts into a separate Utils library, which can easily attach the module system to any object
- Changed Peint.image.load() to allow for multiple loading in the same way as Peint.require()
- Changed Peint.require() and Peint.image.load() callbacks to use arguments, rather than this.property
- Add region module to allow defining of events based on regions of the screen. Used for buttons and such.

As usual, the current demo is viewable at peint.stephenbelanger.com and the code is available on Github.

No documentation yet, but you can look at the updated sample code at peint.stephenbelanger.com to get an idea of what this thing is capable of. It’s pretty neat.

In the previous post, I showed you the viewport module, which allowed me to dynamically resize the canvas to cover the entire viewport and adjust itself automatically whenever the window is resized. This time I’ll be introducing part of the draw2d module. Canvas uses the fillRect() method to fill a rectangular area with a particular color, but it only suppports the standard pixel coordinates from a top left origin. I decide that wasn’t good enough for me.

In the example below, we fill the background with a pleasant blue color, and we draw 2 boxes using a mix of numeric pixel coordinates, css-style ’100px’ coordinates and even percentages. In addition to that, it also demonstrates positioning from a non-top/left origin! The canvas.coords() positioning system dynamically tranforms the input values using their key names and the current dimensions of the canvas, allowing lots of flexibility in element positioning. I have a neat demo showing the fill() and image() methods online here; peint.stephenbelanger.com

// Initialize our canvas screen.
var screen = Peint.init('#screen');

// Load draw2d module for basic 2D drawing tools.
Peint.require('draw2d', function(){
	var canvas = this;

	// Draw our background color.
	canvas.fill(canvas.rgb(0,100,130));

	// Draw some boxes...
	// This one is statically positioned with pixels.
	// 'px' is optional, it will assume that on numbers.
	canvas.fill(
		canvas.rgba(150,200,0,0.8)
		, canvas.coords({
			right:150
			, bottom:150
			, width:'100px'
			, height:'100px'
		})
	);
	// This one is dynamically positioned with percentages.
	canvas.fill(
		canvas.rgba(200,150,0,0.8)
		, canvas.coords({
			left:'2%'
			, top:'5%'
			, width:'15%'
			, height:'50%'
		})
	);
});

First of all, canvas doesn’t play nice with CSS width and height dimensions. Rather than adjusting the usable area like one might expect, it stretches the element while retaining the buffer size of the render area. That means making it “100%” width/height becomes needlessly difficult. That is one of the many things the library I’m working on is meant to handle. Here’s a code sample to show it forcing the canvas dimensions by using a “resize” event in my library.

// Load viewport module.
Peint.require('viewport', function(){
	var viewport = this;

	// Initialize our canvas screen.
	screen = Peint.init('#screen');

	// Create onresize handler.
	var resizer = function(){
		// Get current viewport dimensions.
		var size = viewport.size();

		// Position and resize it.
		screen.position().resize(size);
	};

	// Attach handler to resize and load event of window.
	this.bind('resize', resizer);
	this.bind('load', resizer);
});

What this does, is create a callback function to attach to window.onresize and window.onload (Actually, window.onload doesn’t exist, so it fakes it). Every time this event is called, it repositions the element on the screen and resizes it to match the viewport size. As you’ve probably figured out by the Peint.require() with the callback, this library supports loading external modules with callbacks to run when the code is ready. It’s pretty neat. I’ll share more as I complete the modules.

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