Victory![1] I’ve been noticing that this blog has been attracting bandwidth thieves for some images hosted on zzzbot.com (particularly ones that happen to be on the first page of Google Image search results[2]). And the time has come to kick some ass among them.

Don’t get me wrong, it’s not as if the bandwidth is what really concerns me, but it ticks me off that someone could be lazy enough to link to another site rather than to host an image themselves. And not because I believe that as an ethical matter you shouldn’t mooch from other people, but because you are opening yourself up to being exploited by them.

In short bandwidth theft(aka hotlinking) involves finding an image that you like on another site and directly placing its URL(its address) in your own site. This causes the image to be displayed in your site but downloaded from the server that hosts the site where you are ‘stealing’ the image from. Doing this saves the hotlinker from having to host the image themselves and generally makes life easier for them. But this laziness comes at a price. By hotlinking to another site you are, essentially, making real estate from your site available to the hotlinked site. If the site that you are linking to is savvy enough to detect the fraudulent image download it can substitute if for anything it wants and your site will happily display it. And this is just too good an opportunity to let by without having some fun with it.
Some sites ‘punish’ hotlinkers by displaying an image advertising the hotlinked site or an offensive image outing the hotlinker as a bandwidth thief. I prefer taking the satanic route.

If someone is going to give you the opportunity to mess with their site then why not do it properly and scare the bejeezuz out of them and their visitors? It’s both funny and effective. After looking around for a while I decided to use this approach, mainly because I could understand it. My weapon of choice is Tool – a genuinely, seriously hardcore esoteric metal band. The last track on their 10,000 days album is entitled Viginti Tres – a short garbled moan of horror whose lyrics contains no trace of irony.

I love Tool; they are one of the few bands that I know of who are really serious about their drugs[3] and their esoteric philosophies. And while I myself do not ascribe to their vision I do admire the integrity and dedication with which they pursue it[3]. Their music also rocks – explosive, cutting metal.

Back to the story. I had to frame the lyrics to Viginti Tres on a suitable canvas so set out to find the most evil album cover on the internet. And forget about the cheesy covers featuring blood-dripped skulls and slathering demons ripping humanoids apart – I mean really, really dark. In the end I settled on this, truly evil image from a combined metal album by Gestapo 666 and Satanic Warmaster.

Truly Evil

Finally I added some scrappy teenage shock horror(for that authentic edge) and some cheap advertising and compressed the whole thing into an ugly, grainy GIF. The result is this

The response has been immediate. The zzzbot.com logs show that within a few hours of redirecting moochers to this image at least one chick removed the hotlinked image from her MySpace profile. Shame, I hope she didn’t get too freaked out by my gentle hack; bless her soul.

To tell the truth I like the idea of being allowed to inject whatever I want into someone else’s site so much that I kinda hope that the hotlinks aren’t removed.

Update: 11 March 2008

After testing my bandwidth thief hater script on the thecages archives I have promoted it to the current thecages images as well. The result has been great! Several sites now sport my satanic message and in one particular case some poor fool used an image hosted by zzzbot.com as the background to their MySpace. The magnificent result of my defacement of Reddy‘s profile is preserved for posterity here. I wonder how long it will take him to notice it?

Some time ago I wrote about a short-lived fad to hack Garfield cartoons by removing all of the cat’s speech bubbles – thereby rendering him ordinary. The result is a subtle yet subversive twist on Jim Davis’s bloopy take on the relationship between humans and the cats they live with. I’m really not into Garfield anymore but these hacked cartoons have something wonderfully existential[1] about them. Now I’ve found another source of existential cartooning – the fridge at work.

It appears that the Dilbert merchandising behemoth produced Dilbert fridge magnet kits – like the fridge poetry magnets that we all know but in the form of individual panels of Dilbert cartoons that can be shuffled around. As with fridge poetry the magnets invariably end up being clumped together and ignored while people hunt for milk and Tuesday’s lunch. But while waiting for the shiny espresso machine in the kitchen to expertly steam my half-cap-single-americano[2] I’ve started reading the cartoons as individual panels. It turns out that they’re funny in an entirely different way to a complete cartoon strip.

In an interview some time ago[3] Scot Adams was prompted into some comments on the existential nature of Dilbert.

Reason: Dilbert has emerged as the new workplace Everyman. This is a change from the traditional workplace Everyman, who was often an assembly line worker and whose greatest obstacles were the pace of the machinery and grinding repetition. Dilbert’s biggest problem is basically bosses who keep him from getting his work done.

Adams: It’s about futility and absurdity. But he’s got a different problem, too. If you’re on the assembly line, at least you’ve made something. Whereas Dilbert is like I was in my career: work 17 years and never do anything for anybody. Nothing tangible came out of anything I ever did. There’s a lot of people in that boat. They’re working on something which, if it were ever actually completed, it would be tangible. But nine times out of 10, things get canceled or delayed. You change jobs before it’s finished. You never really get the feeling that you’ve done anything useful. You feel like you’re bluffing all the time. It’s the big difference.

Reason: That’s the existential angst of the knowledge worker?

Adams: Yeah. You have no traction with the real world and you lose any correlation between your efforts, your paycheck, and what you are doing in the world. Those three things are thoroughly unconnected.

While I’m not a regular Dilbert reader I relate to this in a big way. The closest thing that the knowledge working team that I work in produces are internet banking sites hosted on far-away servers and marketing glossies printed on far away presses. These individual panels reflect my working days more closely than the cartoon strip; there are no punchlines in my day, just a series of mundane or absurd panels that blend together into a fridgeful of passing time. Reading Dilbert panels individually more closely reflects the disconnected nature of an average office work day[4] where no build up or payoff is guaranteed.

I really don’t do this sort of thing. I’m not a geek. But this might be useful to someone.
I tend to use a lot of footnotes (since I’m big on tangents) and the mechanism that I’ve been using up until now (collecting the footnotes at the bottom of the post) is jarring as the reader is scrolled down and back up with each footnote. I’ve been looking around for a clean pop-up note implementation for a while and have finally found one that is relatively clean and behaves consistently on Firefox and IE. However, there is still a bug in the Firefox implementation which I need to find and fix – more on the bug below.

But first some examples using good ol’ Lorem ipsum. Click on the 3 footnotes in the following text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit[1], sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[2]. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga[3]. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Neat huh? Those readers who don’t run their own site/blog or never use footnotes can safely skip the rest of this post and simply rest assured that future posts will bring the joy of scroll-free tangents to your browser of choice (except possibly if that choice is Safari on which I’ve not tested jack shit).

For the remaining few(?), on to the code.
The pop-up uses javascript and CSS, which is a staple combination for the web in its current form. There are pop-ups that use pure CSS, but they are a little clunky in terms of events – most of them only work with mouse movement (hover) and not actual clicks. I don’t want to annoy the reader with pop-ups that they aren’t interested in[4] so had to opt for an implementation that requires javascript as well. After trying a few I settled on an implementation from Apple.

The pieces that you will need to make this work are:

• the javascript file – here
• some CSS to style the notes
• an HTML document with which to test it

But before we get on to that, first the bug. The current implementation does not position the notes correctly on Firefox if you identify your document as strict XHTML. The notes still appear and close correctly, they just don’t move to the correct location on the page. The bug has to be in the javascript but I’ve just not taken the time to try and find the problem. Maybe I will, maybe I won’t. This means that I have had to downgrade thecages from XHTML to not quite XHTML in the sidebar below. Frankly I’ve never submitted it to be verified and very much doubt whether it would have complied even before I added the pop-ups. So what this means for you is that if you want to use this pop-up with the current bug you cannot have the following DOCTYPE declaration at the top of your HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I also doubt whether it will work for xhtml1-strict. I’ve also found that it doesn’t work for HTML 4.01 strict or HTML 4.01 loose, so I’m not sure what exactly that leaves available to use as a declaration. For the time being I’m commenting the XHTML1 declaration in thecages and will re-instate it once I’ve found the bug – do I really care?

Back to the code[5] – the code! the code!
I’m including the CSS in the HTML document, but you would probably(hopefully) want to pull it out into a linked .css file.

    <html>
        <head>
            <script src="applepop.js" type="text/javascript"></script>

		<style>
		    div.footnote {
                      cursor:                          pointer;
                      border:                          none;

                      padding:                        3px;
                      z-index:                        10;
                      position:                        absolute;
                      visibility:                        hidden;

                      color:                           #000000;
                      background-color:          #CCFF99;
                      layer-background-color:  #CCFF99;
                }
		</style>
        </head>
        <body>
            <p>Hello, here is a note<a href="#" class="cite" onclick="return !togglePopup('c1', event);">[1]</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit etc</p>

            <div id="c1" class="footnote">Voila!</div>
        </body>
    </html>

Finally, some qualitative comments. I don’t like the fact that the showPopup() function requires the event to be passed to it; it makes the whole thing longer than what I would like. If it bothers me enough I’ll look into removing the need for it.

I’m back from Austin and am fighting off a jet lag-induced cold. I’ve been meaning to finish several posts that I have in the works but haven’t been able to get together the motivation to lift myself off of the couch towards a cold, dead notebook. It is definitely still summer in South Africa but the transatlantic flip from summer to winter and back has left my immune system dented. So in lieu of actual content I’ll hand over to Frank O’Hara[1]

July is over and there’s very little trace
of it, though the Bastille fell on its face–

and August’s gotten orange, it will drop on
the edge of the world like a worm-eaten sun.

The trees are taking off their leaves. So
the purity of the streets is coming, low

in white waves. In summer I got good and sunburnt,
winter, so I wouldn’t miss the wet brunt

of your storms. Then it was sand from the surf
in my bathing trunks; now snow fills up my scarf.

Frank O’Hara

[1]The image he was most enamored of was his own – sound familiar?