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.

function Test(name){
    this.test = function(){
        return 'This will only work through the "new" keyword.';
    }
    return name;
}

var test = new Test('test');
test instanceof Test; // returns true
test.test(); // returns 'This will only work through the "new" keyword.'
test // returns the instance object of the Test() function.

var test2 = Test('test');
test2 instanceof Test; // returns false
test2.test(); // throws TypeError: Object #<Test> has no method 'test'
test2 // returns 'test'

As Andrew kindly pointed out; if you return an object the resulting value will be an instance of the returned object rather than the constructor.

function Test(name){
    this.test = function(){
        return 'This will only work through the "new" keyword.';
    }
    return {name:name};
}

var test = new Test('test');
test instanceof Test; // returns false
test2.test(); // throws TypeError: Object #<Test> has no method 'test'
test // returns {name:'test'}.

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.

Not only that, the chat demo created in the presentation will remain live for all to play with. In addition to what was covered in the presentation, it also has a basic message filtering system to convert URLs to embedded content. Try posting a URL to an image, Youtube video or PDF and you can see it in action. Check it out!

Download as PDF

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.

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