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'}.

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.

So I stumbled upon a neat little plugin for the Firebug plugin I’ve been using with Firefox for awhile now. It’s called YSlow and what it does is analyze various aspects of your pageload and compares it to Yahoo’s Exceptional Performance criteria and gives each aspect a letter grade rating. Nerd Culture was an F yesterday–Now it’s averaging between D to B for me, depending on the page. I reduced the total page load of the homepage from 784 KB to 345 KB, less than half what it was before! Even better; Primed Cache was reduced from 440 KB to 18 KB! Why was my server set up so that the users would download images they already have in their browser’s cache? >.>

Tomorrow I’m thinking of going on a full-scale safari, hacking through WordPress’ code with my Dreamweaver machete until I slim this fatty down a little. >.<

Anyone else hate that WordPress places all the javescript in the header and that they didn’t think to try using php to merge all the js files and all the css files into one big js file and one big css file, so you don’t have 50 HTTP Requests on every pageload? >.>