Antelope Love Fan

I’m sure most developers out there are familiar with The Daily WTF. I’m also sure most developers are aware of the dirty little secret that we all write bad code sometimes.

This is a chance to share some of my own personal horror stories.

It was 2000 and I was working at my second job after college. I was mostly coding for the PalmOS but dabbled a bit in Classic ASP (VBScript).

One day, I was given the task of writing a script to email several hundred people using an off-the-shelf COM object for email tasks.

The pseudo-code of the script went something like this:

dim emailList
dim emailSender 'The 3rd-party component

emailSender.StartSession()

for each person in emailList
  emailSender.From = emailList.email
  emailSender.Subject = "Whatever"
  emailSender.Body = "Foo"

  emailSender.Send
next

emailSender.EndSession()

Pretty straightforward, right?

What I didn’t realize was that, during a single session, setting the From address actually did an append rather than overwriting the current value.

That meant that, the first time through the loop, the email went to the first person. The second email went to the second person and the first person. The third email went to the third person, second person, and first person. And so on.

Luckily, I was on the list so I immediately noticed that I was getting multiple emails. Unfortunately it ran through half the list before I was able to get IIS stopped.
As you can imagine, we had a lot of really pissed of replies.

Today we’re going to learn how to manipulate the HTML <canvas> element at the pixel level.

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

One of the great things about jQuery is that it’s very easy to extend and has a great plugin ecosystem.

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