Don’t worry about your clothes.

Don’t worry about the weather. If it’s cold, you’ll warm up again. If it’s wet, you’ll get dry again.

Just get on your bike and ride it. Go as fast as you can. Or as fast as you want to.

You don’t need headphones.

Listen to the sounds of the world. The wind whistling in your ears. The sound of your heart pounding in your chest.

If you see someone else on a bike, wave to them.

Don’t worry about mountain bike, road bike, fixie, used, new, fancy brand, department store bike.

People should wave to other people on bikes.

We are brothers and sisters of the wheel and should acknowledge each other as such.

To start, we need a canvas element:

<canvas id=”canvas” width=”640″ height=”480>”
<p>Your browser doesn’t support canvas.</p>
</canvas>

Next get a handle to the canvas element and its 2d context.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Next, we create a ImageData element on the canvas that covers the entire canvas. This is we’re actually going to be drawing our pixels on.

var imgd = ctx.createImageData(canvas.width, canvas.height);

The ImageData element is basically just a big array. Each block of 4 array elements corresponds to a single pixel.

The array indices in each pixel block control the color and alpha transparency as follows:

• i = Red value
• i+1 = Green value
• i+2 = Blue value
• i+3 = Alpha

And here’s a simple function for drawing a single pixel given an x,y value and r,g,b:

var setPixel = function(imageData, point, r, g, b, a) {
    a = typeof a == 'undefined' ? 255 : a;
    i = (point.x + point.y * imageData.width) * 4;

    imageData.data[i  ] = r;
    imageData.data[i+1] = g;
    imageData.data[i+2] = b;
    imageData.data[i+3] = a;
};

Let’s say we wanted to draw a red pixel at 100,100. Given the ImageData element we declared above, we’d call setPixel like this:

setPixel(imgd, {x:100,y:100}, 255, 0, 0);

Notice we’re not passing a value for the alpha transparency. The setPixel defaults the alpha to fully opaque if a value is specified.

A more full-featured setPixel function can be found here. This version accepts HTML hex codes for colors and extends the Object prototype so we call it directly on the ImageData element like this:

imgd.setPixel({x:100,y:100}, ‘#f00’);

Here’s a sample that draws a Sierpinski triangle using the chaos game

But rather than rehashing last year, I’ve decided to go on record with my New Year’s Resolutions in the hopes that a permanent record will help me stay honest:

• Starting tomorrow, no alcoholic beverages until I’m under 200lbs.
• Write at least one blog post or poem (I reserve the right to keep the poems to myself) per week.
• Ride a century. The ideal would be 100-miles-to-nowhere in Cherokee.
• Play more D&D with the kids.
• Do something cool with my Freeduino
• Get a app published to the Android Market.

Today, we’re going to create a very simple jQuery plugin which will change the border color of an element.

Step 1: Protect the global scope

The first thing to do is wrap your plugin code in an anonymous function that calls itself so we don’t pollute the global scope.

(function($) {

})(jQuery);

Now any variables we declare inside that function will only exist within the local scope.

We also pass the main jQuery object to our function. This allows us to use the $ object even when jQuery is running in noConflict mode.

Step 2: Create our plugin function and make sure it’s chainable

We going to add a function called borderize to the jQuery object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
        });
    };
})(jQuery);

The return this.each(); is important because it allows our plugin to be chainable by returning the object the function is being called on.

That means we’ll be able to do things like this:

$(‘#Foo’).borderize().css(‘width’, ’500px’);

Step 3: Setup some default options for the plugin but allow the end-user to change them.

We set our default border color to red. If borderize() is called without any arguments, the border color will still be red.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }
        });
    };
})(jQuery);

We use the $.extend function to update our settings object with any options the user might pass in.

$('#Foo').borderize( { borderColor: '#000' } );

In the above, we’re passing in black for the border color. $.extend will overwrite the value of borderColor in settings with the value passed in via opts

Step 4: Make the plugin actually do something

Now that the scaffold of our plugin, we add a call to $.css to actually change the border color of the passed in object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }

            $(this).css('border', '1px solid ' + settings.borderColor);
        });
    };
})(jQuery);

Step 5: A final demo

Here’s a working jsfiddle demo

MeasureIt!

Web Developer

HTML Validator

Google Analytics Debugger

And let’s also not forget the Chrome Developer Tools that are built into Chrome. Once you turn on XMLHttpRequest logging, it can do everything Firebug does.