While putting together last week's promo video for Museum140 (a vote'd be awsm, btw), I knocked up a few tools to make my life easier. As I always say, if you find something you like, make a plugin for it. Seriously, I always say that. That might even be how I proposed to my wife, I'll have to check.

Anyway.

Play

This is a simple timing helper. It just provides a little array you can push slide durations into and at the end, you call 'play'. I can't see many uses for this other than in creating videos.

ImpressJS.play(3000);  //Set the first slide duration for 3 seconds
ImpressJS.play(1000);  //Set the second slide duration for 1 second
ImpressJS.play(); //Play from the start

Edit

This is much more useful.

If this script is included in the page (after the impress.js script), you can drag your slides around, rotate and scale them into exactly the position you want. Once you're happy, you can get the current HTML output onto the console for pasting back into your original slideshow file. I could have snuck in a drag-n-drop file handler but that would make it Chrome only.

Disclaimer

These tools rely on ImpressJS having a public API which it currently doesn't have. It's obviously high on the author's priority list (given the amount of discussion it's raised) but, as too many pull requests spoil the broth, I've made a little fork of my own, added the public functions the tools require and I'll update them once the main repository's settled down a bit.

Download

These are available in the tools folder of this fork of impress.js. Each one contains an example. Hopefully, these will be updated to use the public API as soon as it's available.

As regular readers are probably aware, one of my side projects is helping out Museum140 with tech and design support (building websites, designing stickers, etc). Jenni's the main driving force behind some of the coolest “Museums and Social Media” projects of the past year.

The Museum140 project is in the running for a Shorty Award so I thought I'd help out by making a promo video. Of course, it's always best to play to your strengths so I built the video as a web page…

ImpressJS

HTML5 slideshows are all pretty cool (I even used one myself a few months back) but most of them deliberately emulate traditional slide presentations. When I saw ImpressJS for the first time last week, I was astounded. Its style is based on prezi.com but built using CSS3 rather than Flash. As well as being an inventive way of giving presentations, it also gave me an idea.

A couple of hours coding later and we've got a simple but stylish video with every word and phrase positioned perfectly. I wrote a little helper function to assist in creating a consistent timeline and recorded it in Screenflow. After that, I spent 10 minutes with the other kind of keyboard and came out with a nice little piece of background music, too.

The Video

There you go, ImpressJS is not only good for slideshow but also promo videos. Not bad.

Vote?

It would also be remiss of me if I didn't ask those of you with a twitter account to at least consider voting.

I use whiteboards a lot. Whether I'm coding, explaining some concept or other, sharing the results of a meeting, wherever. If there's a whiteboard nearby, I'm quite likely to jump up and start drawing big diagrams with lots of arrows and wavy lines. When there's not a whiteboard, I still jump up but I tend to lean more towards big handy gestures drawing diagrams in the air (I recently watched a video of myself presenting with the sound turned down and I looked like an overenthusiastic mime artist dancing to 'Vogue').

To make sure I always have a whiteboard to hand, I roped in Jenni to help with a little home craft-making.

D.I.Y. Laptop-lid Whiteboard

Blue Peter style list of things:

You'll need scissors and/or a craft-knife, double-sided sticky tape, a measuring tape, a bit of sturdy white cardboard or a thing sheet of opaque PVC and some sticky-backed clear plastic. You'll also need a laptop and an grown-up to help you with the cutting.

• 

First, measure the top of your laptop and figure out how big your whiteboard can be and draw that on your cardboard or plastic (from now on referred to as 'white board').

• 

Next, cut your cardboard or plastic to the right size. Remember to measure twice and cut three times or something like that. I can't remember exactly but there some ratio of measuring to cutting. Do that.

• 

If you're using a piece of shiny PVC or something like that, you can miss this next bit. If you're using cardboard or something else, you'll need to cover it with the transparent sticky-backed plastic.

• 

The final preparation stage is to put the double-sided sticky tape on the back and position it on your laptop lid.

• 

Try not to take any photos one-handed while doing this step or this may happen:

• 

There you go. A portable, take-anywhere whiteboard in 10 minutes. Apart from needing a pen, of course, and a cloth to wipe it so you don't end up with smudges all over your laptop bag, we're done.

• 
• 
• 

I can now take my whiteboard with me everywhere I go for a meeting. Long may the diagramming continue.

What?!

Another port of the TextMate theme 'Cobalt' to Vim?

But there are already so many!

Yes. Yes there are. However, the other ones I found were all missing something. Some had the right colours but in the wrong places, some had most of the right things highlighted but in slightly wrong colours. None of them had coloured the line-numbers. I think this is the most complete port. The initial work was done automatically using Coloration and then manually tweaked and added to. I know I should probably have just picked one of the existing GitHub projects, cloned it and pushed to it but I feel it would be a tad presumptuous of me to just turn up in someone's repository one day saying "yeah, you did alright but mine's better". Besides, I've never tried making a theme for Vim before. I've probably done something wrong (see below). If it continues to work for a while without causing any major issues, I might look at pushing it to another repo.

This was done on top of a vanilla install of the excellent Janus configuration of MacVim so whatever plugins are installed by default may have an affect on this.

There are a few limitations in the syntax files enabled by default so this includes a couple of matches, regions and things that really shouldn't be in a colorscheme file but I've included them because I felt like it and it was the only way to really match some of the highlighting TextMate allows (this is the thing I was referring to above).

I haven't really touched the NerdTree colouring much as it's probably impossible to have different background colours in different panes. Can't guarantee that, though.

Installation

There are probably some conventions to do with how to organise a GitHub project so that it can be automatically installed but I've just gone with sticking it in a directory called 'colors' so it can be pulled in from the root of your ~/.vim directory.

If you're using Janus, add this to ~/.janus.rake, I think it'll work:

vim_plugin_task "Cobalt.vim", "git://github.com/thingsinjars/Cobalt.vim.git"

If you're not using Janus, you probably know what you're doing anyway.

The GitHub project is here:

• github.com/thingsinjars/Cobalt.vim

Screenshots

The first of each pair is Vim, the second is the TextMate original.

Editing CSS

• 
• 

Editing HTML

• 
•