djsipe.com | Web Development

Code FaceAfter a few posts where I wanted to include code examples, I quickly became frustrated with the standard <pre> display that the folks at WordPress recommend. I looked for a plugin that worked well, but didn’t like what I was seeing. So at the prodding of my colleague, Pat Doran, I decided to roll my own plugin.

The result is my “Code Face” plugin. It uses the YUI JavaScript framework to scan your posts and replace specially tagged <pre> blocks with rich code syntax highlighting via the syntaxhighlighter utility. Ninety-nine percent of the plugin is written in JavaScript using the concept of progressive enhancement. That means that even if your readers have JavaScript turned off or are using a screen reader, the content of your post is still highly accessible.

Check it out and let me know what you think. I’d love to hear your comments.

Until about 3 weeks ago, I had almost no idea what “polymorphism” meant—although I knew exactly how to do it. It’s one of those things you’re just going to eventually pick up if you play around with object oriented programming enough, whether you know that’s what it’s called or not. I remember bumping into the term a couple times but the nerd-power behind the lengthy volumes describing it defeated me time and again. Here’s stab at a crude explanation in terms I know I could have understood.

The basic premise of polymorphism, one might argue, can be likened to Plato’s theory of Forms. Plato believed that everything in the world was an imperfect representation of its true Form. A rock on the ground could be thought of as an inexact approximation of its true Form: “Rock”. Likewise, that chair in your room is merely mimicking the perfect, idealized form of a chair. So somewhere—perhaps not in physical form—there exists a pure, perfect, and authoritative version of a chair that all chairs here on Earth mimic, but never quite get 100% right.

It may sound a bit existential, but what Plato was really talking about (from a computer science point of view) was methods of categorization. Think about it. How hard would it be to get a computer to recognize that chair in your room as a chair and not a lamp? By the same token, it’s very easy for us to classify it as a chair. When we classify things on the spot like this, we’re comparing what we see with our own mental vision of what a chair’s “true Form” is.

What is its true Form? What makes a chair a chair, or a door a door? Well, a chair will typically have 3 or more legs, a place to rest your bum, and a back you can lean against. Doors are harder to pin down, but they are generally embedded in walls, and will open somehow to let you go through that wall.

For now, let’s take the example of a door and try to point this ship back towards the topic at hand: polymorphism. Suppose we wanted to build some code to mimic a door. What would it need to do? Ideally it would open. It should probably also be in a wall of some kind. Some basic height and width dimensions might be handy too. So, if I may, this might be your pseudo-code for a door:

door {
action: open();
property: wallType;
property: width;
property: height;
}

What we just pseudo-created is, arguably, the “perfect” Form of a door. Really, we just created a door that’s so generalized it’s pretty much useless. What we really need is an instance of this door, that we can use and go through:

supermarketDoor is-a door {
action: open(
action: slideOpen();
);
property: wallType = “glass”;
property: width = “12 feet”;
property: height = “8 feet”;
}

And that’s it. We just polymorphed. Did you feel it? We can now use our supermarketDoor object. But, from a programming point of view, what allows us to use this door is not that we know how it works. Rather, we can use this door because we know it is a door, and as such has certain characteristics that we know about. We know this door, or any other door for that matter, will be a predicable variation of our original “true Form” of a door. It will open, it will be in a wall of some type, and it will have height and width dimensions. The fact that this door slides open isn’t important, we just want it to open when we tell it to.

So now we can write a quick bit of code that tells a given door to open. And since we know all doors mimic the Form of a door, we can rest assured that our code will always work—no matter what kind of door it’s presented with. This allows us to create a million different types of doors, and never have to touch our original code that opens a door again. That’s the power of polymorphism.

Ever get that annoying “Click to activate and use this control” message in IE when you embed a Flash movie? I did and couldn’t find a solution that worked as well as I’d like. A quick browse of my Google results brought be here, but the solution there was kinda sloppy in my opinion. But with a few tweaks, I got things working…and with the added street cred’ of not introducing a single global variable.

Here’s the code:

(function()
{
    var clear = function(a)
    {
        for(var i=0; i < a.length; i++)
        {
            a[i].outerHTML=a[i].outerHTML;
        }
    };

    clear(document.getElementsByTagName("object"));
    clear(document.getElementsByTagName("embed"));
})();

The original code I found only applied the fix to object tags. But since use of the object tag is becoming deprecated, we also need to touch the embed tags as well. The code above does both and is wrapped in an anonymous function to keep all is private bits private.

Finally, since this is an IE-only fix, we should make use of IE’s conditional comments so other browsers don’t have to be bothered by the script. Assuming we placed (a minified version of) the code into a file named controlFix.js, we then add the following code at the end of the source code:

<!--[if IE]>
<script type="text/javascript" src="controlFix.js"></script>
<![endif]-->

If you’d like to use this on your site, you can download the minified JavaScript here.

On of the best tools around for helping you speed up your page load times is Yahoo!’s YSlow Firefox extension. I’ve been using it for a while and found it has some interesting insights on page load performance. Its recommendations come from Yahoo!’s “Exceptional Performance Team” 14 recommendations for speeding up page load times. If you’d rather hear it right from the horses mouth, have at, otherwise you can watch the conveniently embedded video below.

Briefly, the 14 recommendations are:

  1. Make fewer HTTP requests
  2. Use a CDN (like Akamai)
  3. Add an “Expires” header
  4. Use GZIP compression
  5. Put CSS at the top
  6. Put JavaScript (JS) at the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Configure ETags
  14. Make AJAX cacheable

Since the video can probably explain each of these points better than I can, I’ll let them speak for themselves for the most part. Lately though, I have been thinking a lot about two of them, namely #1 and #10: Make fewer HTTP requests and Minify JavaScript. Bit by bit, I’ve been trying to get all our JavaScript files at work “minified” but, it’s an uphill battle with so many files being edited semi-frequently by people other than myself. Since minified JavaScript is almost impossible to read without getting a headache, you’d have to keep the un-minified versions on tap somewhere and leave step by step instructions on how to minify them and then get them on the site. Having people then copy and paste the minified versions into a single aggregate file is simply asking for trouble.

Then I found a key part of the solution: a port of Crockford’s JSMin to PHP. This PHP version, allows you to do something very powerful that the original JavaScript version did not. Now you can use aggregate and minify all your JavaScript into a single HTTP request by calling a PHP script in your script tag which gathers and minifies all the JavaScript for the page.

So, say you wanted to aggregate and minify the JavaScript for your menu and rich text editor of choice. In your HTML, you might use a script tag like this:

<script type="text/javascript" src="/jsaggmin.php?features=menu/richtexteditor"></script>

On the server, jsaggmin.php would do look something like this:

require "jsmin.php";

foreach (explode("/", $_GET['features']) as $feature)
{

    switch ($feature)
    {
        case "menu":
            echo JSMin::minify(file_get_contents("menu.js"));
            break;

        case "richtexteditor":
            echo JSMin::minify(file_get_contents("rte.js"));
            break;
    }

}

Granted, this isn’t the complete solution, but it’s a leap in the right direction. What is needed next (in addition to a caching mechanism) is a way to run the equivalent of JSLint on the server before the files are minified. As a rule of thumb, if a JavaScript file can’t pass JSLint, it will blow up when minified. So the PHP script would need to verify the JavaScript, and echo it as is if it fails to validate. Otherwise, you’ve just minified and aggregated all the scripts on your page and can focus on the other 12 recommendations.

I wish I could say that getting my site converted over to actual blogging software was my new years resolution, but I’ve always found new years resolutions to be a little lame. Let’s just say I’ve been meaning to make the switch off of Drupal and onto WordPress for a while now and the turn of the calendar seemed as good a time as any.

Let me know what you think. I built this theme from scratch, so if you see anything weird going on let me know.

Posted in PSA | 3 Comments »

© 2008 Donald J Sipe | Powered by WordPress | RSS Feed