How To Make A Snowball

Yeti: Start a Snowball Fight

Earlier I talked about why I created Yeti, the simple debt snowball calculator. Now I am going to talk about some of the technical decisions that went into the initial release.

Ingredients

To start off, here is my ingredient list for Yeti:

Simplicity

The main goal of Yeti is to be simple.

I have removed anything that is not essential to snowballing. There are a lot of things that I 'could' do that I won't because they would cause undue complexity.

Forgiving

One philosophy of form design that I strongly agree with is to be slow to anger and quick to forgive.

Even though there are many ways to have invalid input I try to only show error messages to the users when they have navigated away from an element so that they are not being bugged about something that they are in the middle of changing.

At the same time I tried to build in some unobtrusive functionality to make things a bit easier for data entry. Things such as automatically calculating the minimum payment for a loan and increasing the repayment amount when it is no longer enough to cover the minimum payments.

Repeat customers

The nature of Yeti is to be useful over a long period of time. Since most people will have debt that takes many months, even years, to pay off it would be annoying to have to re-enter the debt information each time they want to perform a checkup on their progress.

To that end, there is an option to save the information for later use. Rather than have a server setup to store the data and having to worry about overhead and privacy of storing the debt information Yeti is using localStorage to store the debt and payment information.

This makes the data specific to the browser, but it makes things a lot less complex and is completely optional for those who would like to use it.

Almost too fast

One of the awesome things about doing all the calculations locally is that they are done really quickly. In early tests it was calculating an entire strategy in about 3ms.

Part of the original design was to have a button that could be used to calculate the snowballing after you make changes. Since the calculations were so fast I removed the button and just listened for the input to change. Every time the input changes the values are checked to make sure they meet some basic rules then the repayment schedule is calculated and the results are updated. Since any change to the data updated the calculations you could watch as you change numbers and see the graph and numbers change almost instantly.

While it was awesome to watch, many of the modern browsers have built in spinners for the HTML5 number inputs. This allows you to press the up/down arrows to change the value of the field. With the calculations happening on the value change, you could hold down the up arrow on the repayment amount and watch the chart morph as the debt was paid off faster. It was quite fun to watch!

The down side is that when multiple large loans were added the calculations couldn't keep up with the constant stream of input changes so the browser would lag trying to catch up. This makes for a definite bad experience.

To prevent the browser from stalling a pause was put in place to only update the calculations when there has been no changes for 100ms. Now you can hold down the up/down arrows and the calculations will be only be updated when you take your finger off for more than 100ms and the browser stall goes away.

Try it.

So what are you waiting for? Go check it out: Ball of Snow.

Also checkout Yeti on Github!

Posted on 9 Dec 2011