How To Make A Snowball
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.
To start off, here is my ingredient list for Yeti:
- HTML5. Sugary, semantic goodness.
- CSS3. Makes things snazzy.
- jQuery. Fast, easy, and cross-browser. What else could you ask for?
- Google Web Fonts. Life looks better with a good font.
- LESS CSS. Makes CSS dynamic.
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.
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.
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.
So what are you waiting for? Go check it out: Ball of Snow.
Also checkout Yeti on Github!
Posted on 9 Dec 2011