Kanban Board Application in One Html File

For some years I’ve been interested in lean software development and how to reduce waste. While introducing lean practices, I’ve needed a small, simple Kanban Board application. Thought I’d write one.

You can download a very first alpha here or see it in action here.

Suprised? The application is just one HTML file, no installation needed, no Java, Ruby or PHP. One HTML file, no other dependencies.

How to use the application?

Edit the source of the HTML file with an editor of your choice, preferably one which knows HTML. You will find a list of stories. The example contains those:

T_Q,S18,Checkout optimize
DE,S2,Build old shop
DE,S4,Rebuild with SOAP
DE_Q,S10,Rebuild with REST
P,S17,Do something with OpenID
D,S3,Make application faster
D_Q,S7,Credit Card Payment
DE,S13,Build something astonishing
P_Q,S17,Fix YSlow
R,S39,Google Page Speed fix

There are three columns for stories. The first column contains the state the story is in, the second contains an identifier for your story and the last column the name of the story. You can edit the columns, change states, change names, remove and add stories. You can also export form Excel to csv, then cut&paste into the application source.

The available states are described next in the file:

D,Design
DE,Development
T,Test
R,Release

They need to be available for the stories and match the states of the stories. You can add, remove or change states. Every state has a “sub-state” as a ready queue. For example the ready queue state for Design “D” is “D_Q”, for Test “T” it is “T_Q”. You do not need to describe the ready states, they are automatically created and a ready queue is shown in front of every state. For example “Test Ready” is shown left to “Test”, if there are stories in that particular state.

Customize the colors

The colors of each state are defined in a CSS block.

.box_P { background-color: #FFFF00  ; color: #000000;}
.box_P_Q { background-color: #F0F0F0; color: #606060;}

Feel free to change them to your taste. “.box_P” is for the “P” state box, “.box_P_Q” for the corresponding ready queue.

The main use case for this application is to inform a company about the stories which are in development and in which state they are. It’s an ideal information radiator. I plan to use it on a huge screen.

Future
I’m thinking about a CouchDB storage implementation for storing data and application logic. Or storing data in the file, with drag and drop, inlining Jquery, editing and storing like TiddlyWiki does.

Future features? Add WIP limits, add “From here” signs to display cycle time until live.

Have fun with this One-File-HTML-application. Tip: you can easily mail it around, no install needed.

You can leave a Reply here. Of course, you should follow me on twitter here.