Skip to Main Content
×
Freshbooks
Official App
Free – Google Play
Get it
FreshBooks is Loved by American Small Business Owners
FreshBooks is Loved by Canadian Small Business Owners
FreshBooks is Loved by Small Business Owners in the UK
Dev Blog

Large, Simple Shapes

by Corey on December 13/2010

At FreshBooks, we like bright colours and large, simple shapes. Also short sentences. Or even sentence fragments.

Anyway, the development team at FreshBooks works on a variety of applications. While most of our users just see a single application taking care of their invoicing, behind the scenes there’s an array of independent applications, all working together to make things happen. We deploy this application eco-system every two weeks, so the team needs to first off, be clear on the status of the current release (are we going to be ready for the upcoming release or is the avalanche of work killing us?), and second (off), know right away when a given app is failing to build properly in the development environment.

At FreshBooks we use Hudson to manage our builds, and run all the unit tests on every commit. If the unit tests don’t pass, the build is “failed” and stays “failed” until the offending commit is fixed and the unit tests pass.

At first, Hudson just sent out an email whenever a build failed. Then Hudson started posting failure notes into the FreshBooks developer chat room. But we wanted something better than that. Something, of course, with bright colours and large, simple shapes.

Behold the FreshBooks development Statusboard!

This lovely display (up on the wall in the midst of the development team) shows the information needed so that the team knows what it needs to know from day to day (even moment to moment!). The top half of Statusboard shows the progress on tickets for the key apps that we’re working on in this release. Green indicates tickets that have been verified by QA, orange is for tickets that are currently under test, and red is for tickets that need development work. As we get closer to the release date for the two-week iteration, we like to see more and more green.

In the middle you can see the name and release date of the previous iteration, and below that the name and release date of the current iteration. There’s also a “Days Until” number for the current iteration. It used to only show the current iteration, but for some reason we find ourselves often answering the question “What was the name of the last release?” So now we just point.

Yes, our releases are named after song titles. In 2011 we’re going with video game titles.

All the green boxes on the bottom show the various apps that our Hudson server builds. If you see green boxes, it means all the unit tests for that app passed on the latest commit. All green boxes means that every app is currently in a “good” state — where “good” means “at least the unit tests passed”. That’s not quite the same as “Ready to Release”, but it means that testing can proceed and in general, things work. This piece is powered by a cool Hudson plugin called Radiator.

You can also see a picture of Vinegar up on the wall, because we miss him, and a picture of troll face, because it makes us laugh. I suspect you can figure out which is which.

It’s not always green boxes, however. Sometimes a well-meaning developer makes a commit and for whatever reason,

THE UNIT TESTS DON’T PASS.

When that happens, Statusboard gets angry. It stops celebrating all the good, and instead shouts and rants about the bad. A big red box pushes all the green boxes aside, demanding attention. Until that build is fixed, no green boxes are shared with the rest of the team.

This puts pressure on the team to fix that build, get the unit tests running again, and restore our lovely view of soothing green boxes.

Statusboard is just an HTML page that draws data from our ticketing system and the Hudson build server. We just bought a reasonably cheap flat-screen TV, and connected it to a wee little EeePC that hooks into our wireless network and displays the page.

We got a little excited early on and considered hooking up a klaxon to Statusboard, but calmer heads prevailed. As it is, it’s a simple display that helps to keep the team focused on making sure all our myriad applications are in good shape and close to release-ready, and helps us to watch the progress of each iteration as we approach the two-week release date.

And it puts bright primary colours in large, simple shapes on the wall, and as I mentioned, we like those.

And to be honest, we really really really like Panic’s status board. Ours isn’t nearly as pretty.