Ad Hoc

I’ve started working on a fun “little” hobby project: urlpixie.com.

At it’s heart, it’s a tinyurl clone with heaps of JavaScript and AJAX sugar. But I’m hoping I’ll have the time to continue to add features to it, to make it more than just a clone of tinyurl. At the very least, it’ll be a place where I can store links to interesting sites so that I have a way of recalling them months later. (Bookmarks have never worked well for me.)

If you give a URL to the pixie, (and you’re using a browser other than IE 6), you’ll see an animation of pixie dust transform your URL into a short URL. What others may find interesting about this animation, is it’s relatively simple implementation. It doesn’t use <canvas> at all; it’s just a div, a transparent background PNG and a bit of JavaScript to change the background-position CSS property to point to different frames inside the PNG at short intervals. This works surprisingly well.

Perhaps a more naïve implementation would load each frame of the animation as a distinct image. (Or use an animated GIF instead of PNG, but the boolean transparency of GIF is a deal breaker.) This method however allows all the frames to be downloaded in one, ~150KB, shot. With a JavaScript preload of the image, it should be completely downloaded by the time the user submits the form and the animation needs to play.

One of the more interesting things I learned while doing this is that indexed color PNGs (PNG8) actually have support for a pseudo alpha channel! An RGBA-palette, as it’s called, where each color in the palette can also have an alpha value. For some reason, I had always thought that indexed PNGs were limited to boolean transparency the same way GIFs are. The Gimp gives this impression, as it doesn’t seem to be able to support anything more than boolean transparency in indexed color mode.

I doubt that there are many graphics packages that will save a PNG with an RGBA-palette. It’s a real shame, because with some proper optimization PNGs are can be made smaller than GIFs. If you’re interested in creating these types of PNGs you’ll likely need to use pngquant. And while we’re on the topic of optimizing PNGs, OptiPNG is a must.

Another side project I’ve been working on is unallocated.com. I’m not entirely sure what I’m going for with it, but currently it aims to tell you as much about your IP address as it possibly can. One of the recent additions is a bit of AJAX to allow for a much faster page load. Getting the reverse DNS, geolocation, and ARIN whois lookup of an IP all take too much time to hold up the downloading of the rest of the page. The AJAX additions allow parallel XMLHttpRequests to download the parts of the page that are too slow to do inline.