Switch

I’ve been running Ubuntu on my home computer for a week and a half now. That’s right, I’ve joined the “A-list blogger circle-jerk”. For certain values of “A”. Specifically, the value “F”.

I’ve mostly found alternatives for all the programs I used. The only area where I’m not quite satisfied is a music player; I used foobar2000 on Windows, and I haven’t found one to match it yet. (I’ve settled on Quod Libet at the moment, though its UI is a bit lacking.)

WoW works, but I seem to be paying a ~10fps tax for running it under Wine. It’s a pain, but it’s still playable.

I still have XP on a partition, but I haven’t yet run into anything I need to boot into it for. This is a promising development.

I’m looking forward to Hardy Heron’s release. It’ll come with the newer nvidia drivers, which apparently improve performance. This will be appreciated, as I’ve been unimpressed by canvas in Linux-Firefox so far.

Topsy turvy

A bug report for maphilight lead to me becoming aware of a fascinating quirk in IE. A quirk in which IE holds to published standards with fanatical zeal, contrary to everything one might have come to expect, and far in excess of Firefox/Opera/Safari.

When you use the .innerHTML property to add an element to the DOM, IE will fire an “unknown runtime error” if that element is incorrectly nested. So trying to place a

inside a

(as was the case in the bug report) will error very unhelpfully.

Surprising behavior.

Anyway, this led to the release of maphilight 1.1.1. (Which also includes an official minified version of the file, for convenience’s sake.)

del.icio.us widget

I couldn’t find a WordPress widget that produced output similar to del.icio.us’s linkrolls script. (You can just put their script into a Text widget, but its output doesn’t always mesh well with WordPress themes – it hardcodes h2s, and so forth.)

The Automattic example widget came close, but was a bit lacking on the customization front.

del.icio.us for WordPress also came close, but I disagree with having your server fetch the RSS feed, instead of using the perfectly good JSON API.

So I took the Automattic widget, hacked some extra features into it, made it configurable, and you can now see it in my sidebar. Well, footer currently. It’s a theme thing.

If you want it yourself, here’s the link: del.icio.us plus

Edit on 2008-03-27: This is now in the wordpress.org plugins repository.
Edit on 2008-04-16: Version 1.1 released, granting multiple widget instances.

Code Markup plugin

As one naturally does, I noticed that my blog wasn’t validating. It turned out that I’d forgotten to escape the << in the Ruby on Rails PDFs example.

So I installed Code Markup, a plugin that does all that escaping for me when it notices a block.

It seems to Just Work, and lets me skip having to write &lt; all the damn time.

Creating an image map from SVG

I was asked how I made the map in my examples earlier.

I wrote a small script to do it. (The script is quite limited – I only made it complete enough to handle the SVG files I was using. Others might break it. Also, it requires pyparsing… and hoo-boy is that slow.)

Example!

Wikipedia is good for this, and has provided me with the example file I’ll use, a map of the USA. If you have some GIS data already, I believe that ArcGIS 9.2 has native SVG support, or it looks like you can convert ESRI shapefiles with shp2svg.

My example file is filled with all sort of crud that isn’t a definition of state boundaries, though, so I need to get just that. Perusing it (in a text editor or a SVG editor like Inkscape) reveals that all the state borders are in a group named “States”. Helpful!

So I run my script: svg2imagemap.py Map_of_USA_with_state_names.svg 960 593 States

(The “960 593” is the size of the image I’m creating from the SVG file.)

This creates an html file named [svg name].html, so Map_of_USA_with_state_names.html. It only contains the area tags, so I dump them into an image map in a page set up like the one in the other examples…

And we get: A map of the USA.

Just to disclaim again: That script is unlikely to be immediately useful for any particular SVG image. You would almost certainly need to tweak it significantly to make it work for your purposes. But it’s a good start, at least.

One last time: I make no guarantee of this script working on an arbitrary SVG file. At best it’s an example of an approach to take. If you use it, expect to have to debug how it interacts with your particular file.

maphilight: image map mouseover highlighting

UPDATE 2011-05-04: Version 1.3 released. Works in IE9. (There’s a pattern here.)

UPDATE 2010-05-22: Version 1.2 released. Works in IE8.

I just released maphilight, a jQuery plugin that turns image maps into wonderful graphical masterpieces.

Image maps aren’t so popular any more, for some strange reason. So a quick definition: an imagemap is an <img> with the usemap attribute, pointing to a <map> that describes polygons that link places within that image.

This sprung from me wanting to display pretty highlighting of countries on a map, but not wanting to mess with flash for it. It involves enough annoying fiddling with <canvas> (and VML, because IE is in the stone age) that I feel I’m saving other people a decent amount of work by releasing it.

Simple demo
Pretty demo using a world map
Documentation
Download (requires jQuery)

(Tools like “HTML-Image map Creator WYSIWYG” might be handy if you want to make image maps yourself.)