<div class="rounded blue box_type_a">
    <h4>Rounded Edge Blue Background</h4>
    <p>This is a simple rounded edge <div>.</p>
</div>

function addRoundedCornersSupport() {
    var corners = new Array(
        "top_left", "top_right",
        "bottom_left", "bottom_right"
    );
    var divs    = document.getElementsByTagName("div");

    for ( var i = 0; i < divs.length; i++ ) {
        var classes = divs[i].className.split(" ");
        for ( var j = 0; j < divs.length; j++ ) {

            if (
                classes[j] == "rounded" ||
                classes[j] == "bordered"
            ) {

// for each <div> that has the class of either "rounded" or
// "bordered", embed four <div>s, one for each corner
for ( var k = 0; k < corners.length; k++ ) {
    var corner = document.createElement("div");
    corner.className = "corner_" + classes[j] + " " + corners[k];

    // this is where we prepare the corner <div> and
    // append it to the <div> that should have corners
    // (see below)
}

            }
        }
    }
}

// if the browser is IE6, the bottom left and right corners
// must have the image explicitly added using an embedded
// <img> tag instead of relying on CSS
if (
    navigator.appVersion.indexOf("MSIE 6") != -1 &&
    classes[j] == "bordered" &&
    corners[k].substr( 0, 6 ) == "bottom"
) {
    var borderImg    = document.createElement("img");
    borderImg.width  = "14";
    borderImg.height = "14";
    borderImg.alt    = "";
    borderImg.src    = corners[k] + "_border.gif";
    corner.appendChild(borderImg);
}
else {
    corner.appendChild( document.createTextNode(" ") );
}

divs[i].appendChild(corner);

// the following block causes the
// addRoundedCornersSupport function to run on
// page load without overriding 
// any other onLoad or attached events
if ( window.attachEvent ) {
    window.attachEvent(
        "onload", addRoundedCornersSupport
    );
}
else if ( window.addEventListener ) {
    window.addEventListener(
        "load", addRoundedCornersSupport, false
    );
}
else {
    document.addEventListener(
        "load", addRoundedCornersSupport, false
    );
}

div.rounded {
    background-color: #cccccc;
    padding: 15px;
    position: relative;
}

div.rounded div.corner_rounded,
div.rounded div.corner_bordered {
    position: absolute;
    width: 14px;
    height: 14px;
    /*
        prevents older browsers from 
        forcing a height > 14px
    */
    line-height: 1px;
}

div.rounded div.top_left {
    top: 0px;
    left: 0px;
    background-image: url( top_left.gif );
}

div.rounded div.top_right {
    top: 0px;
    right: 0px;
    background-image: url( top_right.gif );
}

div.rounded div.bottom_left {
    left: 0px;
    /*
        This removes a 1px
        underhang at the bottom
    */
    bottom: -1px;
    background-image: url( bottom_left.gif );
}

div.rounded div.bottom_right {
    right: 0px;
    /*
        This removes a 1px
        underhang at the bottom
    */
    bottom: -1px;
    background-image: url( bottom_right.gif );
}

<div class="rounded blue box_type_a">
    <div class="rounded bordered white">
        <h4>Rounded Edge Bordered White Background</h4>
        <p>
            This is a rounded edge blue bordered,
            white background block.
        </p>
    </div>
</div>

div.bordered {
    margin: -14px;
    position: relative;
}

div.rounded div.bordered div.top_left {
    background-image: url( top_left_border.gif );
    _left: -15px; /* IE6 only */
}

div.rounded div.bordered div.top_right {
    background-image: url( top_right_border.gif );
    _right: 1px; /* IE6 only */
}

div.rounded div.bordered div.bottom_left {
    background-image: url( bottom_left_border.gif );
    _left: -15px; /* IE6 only */
    _bottom: 1px; /* IE6 only */
}

div.rounded div.bordered div.bottom_right {
    background-image: url( bottom_right_border.gif );
    _bottom: 1px; /* IE6 only */
    _right: 1px;  /* IE6 only */
}

Five Stages of Ethical Erosion

Employee Compensation

Seeing is Believing

My Personal Favorites

• HTML Validator
• Web Developer
• Firebug
• YSlow
• JSView
• Live HTTP Headers
• ColorZilla
• CookieCuller
• MeasureIt

What we want is a small application that runs every hour by cron, checks an RSS feed from the Perl jobs web site, looks for any new jobs posted, and emails a summary.

First, the usual (and mandatory) intro block followed by four useful CPAN modules:

#!/usr/bin/perl
use strict;
use warnings;
use LWP::Simple 'get';
use XML::RSS;
use List::MoreUtils 'any';
use Mail::Mailer;

I need some way to keep track of previously seen job postings so I don't send duplicate emails. So I'm going to have a text file with the links to the job posts seen since each link is unique. So when the application starts up, I need to load all the previously seen links into an array.

use constant LINKS => '/some/directory/links.log';

open( my $seen_links, '<', LINKS )
    or die "Can't read from log $!";
my @links = map { chomp; $_; } ( <$seen_links> );
close($seen_links);

Now it's time to go fetch the RSS XML, parse it, and find all the jobs that are new. What I'm doing here is taking all the "items" in the RSS feed and checking their links against the links I've already seen. If I haven't seen a link yet, I'm going to store off the item in an array.

my $rss = XML::RSS->new();
$rss->parse( get('http://jobs.perl.org/rss/standard.rss') );

my @new_jobs = grep {
    my $link = $_->{'link'};
    not any { $link eq $_ } @links;
} @{ $rss->{'items'} };

Finally, the fun part. Once I have a list of new job postings (assuming there are new postings), I'm going to create an email and send it off with all the new job postings summarized.

if (@new_jobs) {
    my $mailer = Mail::Mailer->new();
    $mailer->open({
        'From'    => 'somebody@example.com',
        'To'      => 'user@example.com',
        'Subject' => 'Job' . ( ( @new_jobs > 1 ) ? 's' : '' ),
    }) or die "Can't open mail $!\n";

    open( my $new_links, '>>', LINKS )
        or die "Can't write to log $!";

    foreach my $job (@new_jobs) {
        my $attrib = sub {
            return
                $job->{'http://jobs.perl.org/rss/'}{ $_[0] }
                || 'Undefined';
        };
        print {$new_links} $job->{'link'}, "\n";
        print {$mailer}
            $job->{'title'}, "\n",
            $job->{'link'}, "\n\n",
            ' Company: ', $attrib->('company_name'), "\n",
            'Location: ', $attrib->('location'), "\n",
            '   Hours: ', $attrib->('hours'), "\n",
            '   Terms: ', $attrib->('employment_terms'), "\n",
            '  Posted: ', $attrib->('posted_date'), "\n\n\n";
    }

    close($new_links);
    $mailer->close();
}

You'll notice that I use a closure just inside the foreach loop. I did that because I wanted to avoid writing the nested data structure call and "or undefined" stuff five times. I'm kind of OCD like that. I guess it would have been fine to leave it in the last print statement.

So that's it. Less than 50 lines of code. Of course, it needs comments, POD, and better error checking and reporting, but it'll do for something quick and dirty.

function TestScript_displayListings() {
    TestScript__buildStuff(
        "place_to_put_stuff",
        "Some stuff and things"
    );
}

First, JavaScript has no concept of namespaces, so there are bound to be conflicts between libraries unless you get lucky and all your JavaScript library authors picked different function and global variable names.

Second, and perhaps more annoying, are the times when multiple, independent libraries need to set the window.onload event. When you’re writing your own application, where you are starting from scratch or are the architect, this isn’t a problem. You just design around it. If you’re building a new JavaScript central library system, this also isn’t much of a problem because you can implement a “window.onload registry” where each library that needs access to the event just pushes a function name or reference to an array. Then there’s only one library that calls window.onload, and that library executes each function in the array. Easy.

But what if you’ve got an existing site with random JavaScript libraries in various patterns across various pages? Some libraries need window.onload, but others don’t. And you now need to write a new library or two (or three) that may each need to register with window.onload, but you don’t want to overwrite existing library calls to window.onload, and you want to ensure your call doesn’t get overridden.

Well, there’s a two-part solution. For all non-stupid browsers (i.e. everyone except IE), register a DOMContentLoaded event. For the most popular stupid browser, use the <script> tag’s “defer” attribute along with a creative use of the onreadystatechange event.

Suppose you have an XHTML file like so:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Page Title</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h2>Page Header</h2>
        <ul id="place_to_put_stuff"></ul>
    </body>
</html>

What you want to do is have a function contained within script.js execute after page load is complete that will push some data into that empty <ul>. Of course, you could just inline all your JavaScript inside the <ul>, but that’s ugly, bad, and evil. (If you don’t know why, stop reading now and go buy a good elementary programming book like Code Complete.)

Looking at this particular example, the code in script.js is very simple:

function displayListings() {
    _buildStuff( "place_to_put_stuff", "Some stuff and things" );
    _buildStuff( "place_to_put_stuff", "More stuff and things" );
}

function _buildStuff( id, text ) {
    var li = document.createElement("li");
    li.appendChild( document.createTextNode(text) );
    document.getElementById(id).appendChild(li);
}

You just need to get the browser to run displayTVListings() at the right time but without resorting to setting window.onload. One solution is to add the following to the bottom of script.js:

if ( document.addEventListener ) {
    document.addEventListener(
        "DOMContentLoaded", displayListings, false
    );
}
else if ( document.all && ! window.opera ) {
    document.write(
        '<script type="text/javascript" id="displayListingsLoader" ' +
        'defer="defer" src="javascript:void(0)"><\/script>'
    );
    var contentLoader = document.getElementById("displayListingsLoader");
    contentLoader.onreadystatechange = function () {
        if ( this.readyState == "complete" ) displayListings();
    }
}

This will register the DOMContentLoaded event for all non-stupid browsers. For IE, you have to resort to using the “defer” attribute of the <script> tag.

I found this idea when reading a few blogs on the subject:

• The window.onload Problem - Solved
• window.onload (again)
• a better DOMContentLoaded

So that solves the window.onload problem, but what about the namespaces issue? Well, more on that in a later post.