Side Projects

I hadn't done a satisfying side project in a long time. The last one that springs to mind was some simple PyGame typing games I made for my daughter when she wanted to play a computer game but couldn't get the hang of a mouse.

She's a little older now and is in first grade. We have a great home-school/tutoring co-op setup going and really only have to worry about the curriculum for first grade social studies. Recently my wife asked me to put together some worksheets for the "Symbols, Icons, and traditions of the US" portion of the California State Standards for 1st grade social studies.

True to my usual form I took the opportunity to play with software - I wrote a little script that takes directories of YAML files and runs them through some Jinja2 templates to produce a little website. You can see the resulting educational website and check out the code on github.

I took the opportunity to play with some html5 and css3 and didn't even try to shoehorn support in for IE - Chrome and Firefox both support the <audio> element, CSS gradients, CSS transitions and rotations, etc so the site looks quite spiffy in modern browsers but results may vary dramatically in older and less standards compliant browsers.

PDB Howto

Thanks to the good folks at Marakana for whom I am doing some teaching I have some videos posted. See Max's awesome video editing skills render my pdb howto relatively stumble free!

More than 4Gb RAM on Ubuntu 32 bit

I recently grabbed some more RAM since my desktop PC had only 3Gb. I'm running the most recent LTS release by Ubuntu, Lucid Lynx 10.04.

I removed a 1 Gig stick and added two 2 Gig sticks I bought from Newegg. My bootup POST showed 6 gigs recognized but when I got back into Ubuntu top and `cat /proc/meminfo` agreed that I had less than 4 gigs.

Of course I immediately figured out that this was because of the 4 gig limitation on addressing memory common to 32bit operating systems. I wasn't up for updating to 64bit Ubuntu over my lunch break so I googled to see if there were any other options and Ubuntu's own documentation pointed me in the direction of Physical Address Extension - a different kernel that would allow addressing more than 4 gigs of memory. There are various limitation so I may yet go x64 but this sounded like something I could still get done on my lunch break. A quick

sudo apt-get install linux-generic-pae

and a reboot and I had a new kernel that recognized all 6 gigs of my RAM. Of course... now my Nvidia drivers didn't work. I didn't discover till later that there's an easier way to solve this (see this thread) but what I ended up doing was manually downloading the drivers from Nvidia and recompiling them (see this post for instructions on compiling the Nvidia drivers). For future reference it apparently works to remove the linux-headers-generic package and install linux-headers-generic-pae, than use System -> Administration -> Hardware drivers to reinstall the Nvidia packages. Either way - it is possible to end up with more than 4 Gigs of RAM on a working 32bit Ubuntu

Switching images with jQZoom

... or thank goodness for stackoverflow. I have an image magnifier working with the jQZoom jQuery plugin. Setting it up was easy but when I wanted to switch the image I'm magnifying I got stuck - calling the initialisation function on the large image again produced weird results. The answer, thanks to this helpful hint at stackoverflow is to call unbind on the target element (unloading the jQZoom event handling code), change the image, and reinitialize jQZoom. Simple...

Raphael is really cool

Even if I don't know what character that "e with dots over it" character is supposed to be.

I'm talking of course about Raphael JS - a Javascript library for drawing svg based vector graphics in the browser. I'd seen Raphael a bit ago and was thinking about it for some charting I had to do for a client's web app. Raphael wasn't exactly the right fit but I've been meaning to learn it forever so I added it to a little side project.

learnchordmelody.com is a site I made to keep track of resources I find online about Chord Melody/Jazz Guitar playing and theory. I partly made it to clear out my bookmarks folder and partly because I wanted to make a clean slate site - It's html5 (I LOVE doctype html - finally a doctype I can remember) with some CSS3 features like rounded borders, drop shadows, multi-column layout, and embedded fonts. I used a handrolled microframework in PHP that makes it easy to update. I don't really have design chops but I sketched an outline of a Jazz guitar for the header, picked a handwritten font from Google's Font API and I think it looks decent.

I added the touch of Raphael to replace the sort of thing people use Flash for - a bit of animation. If you visit the site and mouse over the menu items using a decent browser the little treble clef morphs into an eighth note. (This works in tested IE7, Chrome, and Firefox 3 - your results may vary). The animation even worked in IE6 (Raphael uses VML in IE) but it created a layout bug I'm too lazy to fix so I disabled it for IE6. This wasn't rocket science but it's kind of cute (really Mom, check it out!)

Working with Raphael was fairly easy - I got copyright free svg drawings from WikiMedia Commons, scaled them and copied and pasted the svg path information from Inkscape into a javascript file. I then drew a little canvas in each menu item and started the animation on mouseover. I wanted to animate back to the treble clef on mouseout but Raphael doesn't have an animation queue built in and the quick solution I hacked together looked too abrupt. Besides - I wanted to keep this short and (excluding the svg path info) I've only got 14 lines of JS.

The only other issue I ran into was getting the canvas objects (Raphael calls them "Paper" as it isn't an html5 canvas) from the mouseover event on another DOM object. Using Jquery I would typically select a DOM object and manipulate it. I could select the dom node representing the svg object but I couldn't figure out how to get back to the Paper (Raphael object with animation methods) from the DOM node. I ended up making a javascript list of Paper objects and matching the menu item that had the event to the ith item in the Javascript list - there might be a better way of doing this...

Anyways - take a look - If I can come up with a better use case than animated icons I'll definitely revisit Raphael.