Kaizen Through Kanban: Simple Principles, Great Benefits

I recently attended a small presentation titled "Personal Kanban" hosted by the Seattle Software Craftsmanship group. The speaker was Jim Benson, who incidentally wrote a book titled Personal Kanban. The presentation focused on how we, as software craftsman, can use Kanban effectively to provide clarity in our work. We do this by prioritizing our development tasks in a backlog and tracking their progress all the way to completion.

However, the benefits of a Kanban board and its methodology aren't limited to software development teams. Heck, they aren't even limited to corporate offices or manufacturing warehouses. The principles can be tweaked, scaled, and applied to any "work task" present in our lives.

Basics of the Kanban Board

The history of Kanban is very deep and beyond the scope of this post. However, its principles are very simple. A Kanban board organizes work as a series of prioritized tasks. Any task can be placed in one of several states. The simplest of Kanban boards will have three columns:

To Do:	tasks that are prioritized and ready to be worked on
In Progress:	tasks that are currently being worked on
Complete:	tasks that are finished

The goal is to move each individual task in one direction across each state until it reaches it's final state: completion. Each column must have a limit on the number of tasks it holds at any given time. By organizing and visualizing work this way, we can effectively pinpoint slowdowns or breakdowns in the work process. As we find and eliminate such "bottlenecks", we are working to achieve Kaizen, or continuous improvement.

Benefits of Kanban

We've only recently adopted Kanban in the company where I work, but I've already noticed the positive effects its had on our workflow.

Rather than supplanting the old workflow, it provided Kaizen
The pleasant surprise of adopting a Kanban board was its ability to visualize the current workflow rather than replace it. Instead of re-educating the entire company on a new process, the Kanban board provided a visualization of the current process and where the holes were. This way, we made incremental changes dynamically over time, thus achieving Kaizen.

There is little or no reason to ask, "What do I work on next?"
If the backlog is prioritized properly, it is very clear which task a team member should pull next. Whether the priority is set internally or by other levels of management, the To Do column reflects the tasks that currently hold the most business value. This has improved the speed of the team because there is a more continuous flow of work, keeping everyone busy at any given time.

Complete transparency on the progress of work throughout the entire company
Since the board is in an open area of the office, everyone from the CEO to the junior developer can see who is working on what and when. Managers who request features can see the progress of their requests. Senior developers can see which tasks match their expertise and can offer to pair accordingly. Overall, this creates a company culture where getting stuff done is truly a team effort.

Social enforcement and accountability of each individual team member
Kanban doesn't strictly enforce deadlines. So, there is always the possibility of "lazy developer" syndrome. This is when a developer takes his or her sweet time on tasks that require minimal effort. Due to the transparent nature of the board and the ability to see the flow of each individual task, most teams will find that lazy developers suddenly disappear when Kanban is introduced. Nobody wants to be the bottleneck! To be fair, a long-sitting task doesn't always mean a developer is lazy or incompetent. Though, a it is an issue that should be addressed nonetheless. Either way, each developer is held accountable for getting to work or asking for help.

Useful E-Kanban Boards

Here are some handy tools I've used as electronic Kanban boards.

Greenhopper:	This is a Kanban board built on top of JIRA by Atlassian. It isn't free, but provides a wide range of features and tools for analyzing progress. If you're looking for something very "enterprise", this is a good bet.
Trello:	For smaller projects, Trello is one of the best tools out there for organizing workflow. The interface is very clean and simple. It's also free! Whether you're looking for an electronic Kanban board for your personal life or small business, Trello is an excellent choice.
QueueDo:	I also wrote a small task tracker in the form of a very simple Kanban board called QueueDo. Though it's not full of features, it's quick and easy for daily tasks. Shameless plug, I know.

How have Kanban boards improved the workflow in your workplace or personal life? I'm curious to know!

Disclaimer: I am not a Lean or Agile expert by any means. So, it's possible I've butchered the terminology. Feel free to correct me!

My Interview Questions for Potential Employers

By common definition, the purpose of a job interview is to allow an employer to screen candidates and find someone to fill an open job position. Each and every applicant must prove his or her worth to the potential employer. Many will apply, but only one (or very few) will be selected.

In the world of software, the overall hiring process follows the same sort of pattern. I always aim to impress any potential employer by showcasing my work and showing the best of my abilities. However, I expect any potential employer to reciprocate and make an effort to impress me. When the interviewer finally asks me, "Do you have any questions for me?", I like to conduct a little interview of my own. Here are some of the questions I like to ask potential employers:

"What's the most interesting thing you've worked on since you started at Potential Co.?"

Nobody wants to work on uninteresting things with uninteresting people. I want to know if the work is compelling and if the team finds it compelling. Even if the work doesn't sound too exciting, if the interviewer is genuinely enthusiastic about it, I'll be more interested to explore it. Passion and interest in work is always impressive.

"How does Potential Co. show that it values the professional development of its employees?"

I'm constantly looking to improve my ability to build software. The best software developers are the ones who are driven by curiosity and strive to learn more about their craft. I think it's common for software developers to switch jobs because of mental stagnation. For me, it's important to work in an environment where developers are encouraged to improve themselves and their team. Whether it's attending conferences or hosting meetups, a company that mitigates mental stagnation makes that much more of an impression.

"Are you satisfied with the process and workflow of the team?"

While I try to steer clear of any sort of micromanagement, I also try to steer clear of programmer anarchy. In any case, this question tells me if the team has adopted a process for tracking progress on clearly defined goals. I have no strong preference on a development process, as long as the whole team diligently adheres to one. It's a pretty good indicator of how efficiently my skills would be utilized within the team.

"Does the team share any interests or hobbies outside of work?"

This is about as personal as I like to get during interviews. The goal is to get a better understanding of the people I plan to collaborate, discuss, and debate with for eight hours each day. Do they enjoy hiking and camping as much as I do? Will they laugh if I quote something from Office Space? I'd like to fit in as a person as much as I would fit in as a coworker. While I don't expect to become best friends with anyone, it's nice to be able to have conversations about something other than work throughout the day.

Do you have questions you absolutely have to ask a potential employer? I'd be glad to know about them!

Quick Review: CSS Positioning

For web designers and developers, it is important to understand how to lay elements out on a page. Anybody can hack together a gorgeous looking webpage, but it's important to write clean code along with it. It's amazing how a basic understanding of HTML and CSS can make web projects more clean and maintainable. This is a little primer on the basics of CSS positioning.

Moving with the Flow

Before we get right to positioning, we have to understand how browsers display content. Normal flow is the way a browser renders un-styled (no CSS) elements on the page. It starts from the top of the viewport and works its way to the bottom. Each element is displayed in the order it appears in the HTML. Elements can have one of two basic display properties: block and inline.

A block element will have a line break above and below it. Simply put, it will always display on its own line. For example, div elements are block by default. So, they will appear on the page stacked below each other:

Div 1

Div 2

An inline element will display on the same line as other inline elements on the page. If they reach the end of the viewport, the elements will continue on the next line. For example, span elements are inline by default and will appear side-by-side "in line" with each other:

Span 1 Span 2 Span 3

Using only normal flow, it's possible to build very simple layouts. To construct more creative designs, we need more control over the positions of the elements on the page. This is where CSS and the position property come in handy!

Position: Static

By default, positions for all elements on the page are static. So, it is unnecessary to specify this. An element can be set to static if its current position needs to be overridden. Any statically positioned elements will conform to the normal flow.

Position: Relative

Relative positioned elements conform to the normal flow of the page, but we are able to move them around using the top, right, bottom, and left properties. Although the elements move according to our specifications, the space they originally inhabit will continue to be respected by any surrounding elements.

div {
  height: 100px; 
  width: 100px;
}

.static {
  background-color: #99FFFF;
}

.relative {
  background-color: #CCFFCC;
  position: relative;
  left: 25px; /* 25px from left of normal position */
  bottom: 25px; /* 25px from bottom of normal position */
}

Static

Relative

Static

Position: Absolute

Absolute positioned elements also use the top, right, bottom, and left properties for specific placement on the page. These elements are completely taken out of the normal flow. Instead of moving the object from its original position, we are moving it relative to the viewport.

div {
  height: 100px; 
  width: 100px;
}

.static {
  background-color: #99FFFF;
}

.absolute {
  background-color: #CCFFCC;
  position: absolute;
  left: 25px; /* 25px from left of the viewport */
  bottom: 25px; /* 25px from bottom of the viewport */
}

Note: Assume the border around the example is the viewport.

Static

Absolute

Static

Position Context
What if we want to adjust an absolute positioned element with respect to a container rather than the viewport? This is known as changing the position context of an element. We do this by giving the parent a position value other than static.

div {
  height: 100px; 
  width: 100px;
}

/* the parent of our elements */
.container {
width: 300px;
  background-color: #EEEEEE;
  position: relative; /* position != static */
  margin: 50px;
}

.static {
  background-color: #99FFFF;
}

.absolute {
  background-color: #CCFFCC;
  position: absolute;
  left: 25px; /* 25px from left of parent container */
  bottom: 25px; /* 25px from bottom of parent container */
}

Static

Absolute

Static

Position: Fixed

Fixed and absolute elements are very similar. Both are positioned with respect to the viewport. However, the position context can never be changed for fixed elements. Also, the distinct feature of fixed elements is that they are stuck in their position, even when the page is scrolled. For an example, check out this jsFiddle.

Summary

Here is a quick list of "things to remember" when working with CSS positioning:

Static

• the default position for all elements
• conform to the normal flow of the page

Relative

• all surrounding elements respect its original normal flow
• can be moved using top, right, bottom, and left

Absolute

• completely taken out of the normal flow of the page
• can be moved using top, right, bottom, and left
• the position context can be changed by giving the parent container a non-static position

Fixed

• completely taken out of the normal flow of the page
• can be moved using top, right, bottom, and left
• will stay fixed with the viewport, even on scroll