Build high level roadmaps easily with Roadmap.js

As a program manager, I often need to show high-level milestone charts in my presentations.  These “roadmaps” usually contain dates for events, key development milestones, and other dependencies related to the project or program.

I previously used Powerpoint to manually create roadmaps and make them somewhat pleasing to the eye and easy-to-read.  This was pretty painful – because every time a date changed, I needed to hand update the milestone markers, labels, and overall chart.  When we started to use html to build our presentations, things got even more time consuming.  So I started looking for a JavaScript library that could help me easily create and update html-based roadmaps. I found a couple of projects that looked like they had potential, including Timeline, but these are focused on reviewing material that happened in the past, and usually more about being interactive – with pictures and/or very small text.  That doesn’t necessary work well for a presentation.

When @brianleroux tweeted about Envision.js, a library for creating fast, dynamic and interactive HTML5 visualizations, I took a look. Envision.js is built on Flotr2, a very cool visualization library.  Envision.js didn’t do exactly what I wanted, but I figured that with some modifications I could modify it to do what I wanted.  So I forked it and gave it a try! It’s still a work in progress, but I’ve got it to a place where it can practically be used, although it’s still not as elegant as I’d like.  Below is a screenshot.

Since this is based on Envision.js, you can also interact with the roadmap – by zooming in to certain areas of time, or zooming out to get a bigger picture of what’s going on.  Here’s a quick screencast of the interaction.



You can play with the work-in-progress by forking it on Github. My next steps are to deal with marker labels when the markers are too close together. Also, I want to make sure that most, if not all, of the visual attributes can be controlled via CSS, or at least in CSS + one JavaScript file. Please let me know what you think, and feel free to contribute!

Setting up Emacs key mappings on Windows Outlook

I’ve had all I can stand and I can’t stand no more.

It’s been four months since I moved from a Windows to a Mac machine.  I really like the macbook air.  But Outlook 2011 for the Mac is driving me crazy.  It keeps giving me incomprehensible error messages like “unknown error” or “end of file was reached”.  It mangles my meeting invites.  It looses attachments.  It makes me restart every time I change networks otherwise it’s “Not connected”.  It’s terribly slow. It kept me from doing my tax return (okay, that’s not Outlook’s fault. I was just procrastinating).  And for some inexplicable reason it was always 10-15 minutes behind my actual inbox – my mail in Outlook on a VMWare machine always gets mail faster than the Mac version.

Continue reading…

New Mac Set Up (by a Windows User)

A little history

Many moons ago I was a Mac user.  I used to be the system admin for a printing company in Japan, and all they used was Macs.  That was long before Mac OS X.  When I switched companies and was developing software, I used Linux (Debian) and Windows.  After I joined Adobe, I started using Windows everyday. I had to do a lot of travelling, and Windows Laptops were the lightest around (I couldn’t give up Emacs, though, so I used Meadow).

When I was recently looking for a new laptop, I took a look at the new MacBook Air.  The battery life, screen size, and weight seemed to hit the right spot, so I decided to give it a try.

Continue reading…