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:

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:

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.

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.

193 thoughts on “Kanban Board Application in One Html File”

  1. Pingback: best
  2. Pingback: fucoxanthin
  3. Pingback: geniux pills
  4. Pingback: intelligex
  5. Pingback: intellux
  6. Pingback: radian c
  7. Pingback: supreme antler
  8. Pingback: genius reviews
  9. Pingback: testomax
  10. Pingback: alpha f1
  11. Pingback: alpha fuel
  12. Pingback: alpha man pro
  13. Pingback: alpha peak
  14. Pingback: alpha xtrm
  15. Pingback: caralluma extract
  16. Pingback: anabolic rx24
  17. Pingback: cognifocus
  18. Pingback: garcinia melt
  19. Pingback: max synapse
  20. Pingback: nerventrax
  21. Pingback: nutra forskolin
  22. Pingback: premium cleanse
  23. Pingback: testorip
  24. Pingback: testoroar
  25. Pingback: pro forskolin
  26. Pingback: forskolin slim
  27. Pingback: garcinia cleanse
  28. Pingback: garcinia xt
  29. Pingback: forskolin fuel
  30. Pingback: vitapulse
  31. Pingback: Vita pulse
  32. Pingback: vitapulse reviews
  33. Pingback: vitapulse review
  34. Pingback: pure colon detox
  35. Pingback: somnapure
  36. Pingback: perfect biotics
  37. Pingback: reviews vitapulse
  38. Pingback: vitapulse vitamins
  39. Pingback: vitapulse scam
  40. Pingback: vitapulse
  41. Pingback: vita pulse
  42. Pingback: probiotic america
  43. Pingback: man in love
  44. Pingback: traits
  45. Pingback: Destroy Depression
  46. Pingback: Panic Away pdf
  47. Pingback: T90 Xplode Reviews
  48. Pingback: Maxtropin Reviews
  49. Pingback: Fungus Key Pro
  50. Pingback: Tea Tox Review
  51. Pingback: Tai Cheng Workout
  52. Pingback: Test X180 Review
  53. Pingback: Test X180
  54. Pingback: Breast Actives
  55. Pingback: vita pulse
  56. Pingback: recapture 360
  57. Pingback: probiotic america
  58. Pingback: Perfect Biotics
  59. Pingback: niagen anti aging
  60. Pingback: official site
  61. Pingback: Source
  62. Pingback: check over here
  63. Pingback: great post to read
  64. Pingback: news
  65. Pingback: Check This Out
  66. Pingback: Bullet Proof Home
  67. Pingback: click site
  68. Pingback: find more info
  69. Pingback: Source
  70. Pingback: this content
  71. Pingback: read this article
  72. Pingback: Source
  73. Pingback: this contact form
  74. Pingback: official site
  75. Pingback: see this
  76. Pingback: Clicking Here
  77. Pingback: check it out
  78. Pingback: original site
  79. Pingback: more info here
  80. Pingback: find more
  81. Pingback: additional hints
  82. Pingback: original site
  83. Pingback: Read More Here
  84. Pingback: dig this
  85. Pingback: Forex Trendy
  86. Pingback: anchor
  87. Pingback: dig this
  88. Pingback: her latest blog
  89. Pingback: anchor
  90. Pingback: check my site
  91. Pingback: look at this site
  92. Pingback: my site
  93. Pingback: dig this
  94. Pingback: click here
  95. Pingback: tires
  96. Pingback: rims
  97. Pingback: wheels
  98. Pingback: read more
  99. Pingback: read more

Comments are closed.