This has worked great, but I noticed that some of the charts are using the same dataset, just charted differently causing the same data to be requested multiple times from the server. One way to handle the duplicate requests is to use the jQuery.Deferred() when making requests.

In order to group the requests together I needed a way to determine if I already have one just like the request going through. To make this simple I used a MD5 library and JSON.stringify() to create a hash of the data that I am sending to the server.

If the hash is unique then I add a deferred object and make the ajax call. Otherwise, I bind to the previous deferred object and wait for the request to finish. Since we are using the jQuery Deferred object the callback will still have the data even if there is a gap between the original ajax request.

Here is a simplified example:

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:

• 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.

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: Yeti.

Also checkout Yeti on Github!

I just released a simple debt snowball calculator: Yeti.

Since college I have had many conversations about the best way to pay off student loans, credit cards, and mortgages.

If you only have a single debt, the answer is simple, spend more–pay it off sooner and save interest. The more debts that you have, the trickier it is.

A common approach is to use a debt snowball to gain momentum by focusing on single loans at a time and keeping the debt repayment amount constant after each is paid off. This creates a “snowball” effect where the money you were spending on a loan gets added to the next loan repayment and the “snowball” gets larger–debts get paid faster. Simple idea and a good way to pay off debts quickly. But did you know that the order that you pay off debts changes how much money you can save on interest?

This project is not the first time that I have attempted to make a debt snowball calculator. It is my third attempt.

For my first attempt, I tried to learn how to use Adobe AIR to make a desktop application that people could use to track their debt and keep updating. I had a lot of plans for it: multiple accounts, nice, pretty charts, fancy interface, cool background articles, etc. That app didn’t make it very far. I got the basics done enough that I could show an amortization and simple chart, but there were some technical obstacles that I did not have the time or energy to work out and the desire to finish it floundered.

A year or two later I was out of college and starting my first job as a graduated citizen… with graduated student loans. This spurred my second attempt at a debt snowball application. Similar to the first attempt, I had grand ideas and visions for features. This time I decided to use a server side application and just run it as a normal web application. Things started out pretty good, but there were some major downsides that turned me off to finishing it. It was slow, I did not have a place to host it, and no time to make it into my ‘dream’ snowball application. So I used it to help get myself out of debt (going on 18 months without debt!) and that is as far as it went.

Since I have been debt free I have not really thought about the debt snowball idea for a while. It was a thing of my past, like a shed snake skin that I didn’t have a use for anymore. But I was talking with an old co-worker and friend about the idea of debt snowballing and it got my brain going again. Even though I do not need to use it on my own debt, I still talk to many friends and family about repaying their debt and I am excited when I get to help people save money, especially when it is something as simple as paying debt off in a different order.

Using this fresh batch of excitement I gave the snowball calculator another go. But this time I decided to approach it differently to avoid my earlier mishaps:

1. Simple. I wanted to shed a lot of the complex ideas that would make it a burden to develop and never get ‘done’.
2. Fast. My first attempts were a lot slower than I wanted them to be, taken many seconds to process each change. I wanted this project to be fast!
3. Scalable. If the service started getting heavy use I didn’t want to worry about the hosting strain from a successful project.
4. Simple. Did I mention simple?

With this in mind, I made a single page JavaScript debt snowball calculator. Since is a single page with no login, optional local storage, and a limited UI/feature set I could ignore a lot of the original complexities. With no dynamic server processing (everything is done with HTML5, JavaScript, and CSS in the browser) it would not have to wait for page submissions/ajax requests to show the calculations. And since I was able to use Github pages to host the site it was free, scalable, and quick loading.

With my third attempt, I hope to catch the great snow beast and make it easy to understand debt snowballing.

Its free, fast, and fun to experience. I hope you enjoy it as much as I enjoyed creating it!

So what are you waiting for? Go check it out: Yeti.

Testing directly through the modem the server was able to connect and was listed as reachable. But, going through the router it would be listed as not reachable. I double checked the ports, as indicated in the advanced network dialog (ports 7113, 7116, 7117, and 7118), were being forwarded in the router correctly.

After several emails with support there didn’t seem to be any resolution coming so I decided to dig a bit deeper and see what it was actually doing when it was successful.

Using tcpdump I noticed that there were some requests going through to some ports from the Switchboard server that were not one of the listed public IPs of the Advanced Network Dialog in the BPS. Specifically it was trying to talk to ports 60525, 60526, and 60527. I added those to my port forwarding on my router and all the Billings Pro Server is now listed as `reachable`.

In the example, the author uses png images and repeats them. I wanted to try and do something similar but done purely in CSS. I found some really good resources dealing with CSS 3 and backgrounds, specifically this one dealing with patterns and a pattern gallery.

These may not work depending upon how new your browser is. See the note about browser compatibility on the pattern gallery.

So naturally I wanted to combine them both into a pure CSS version of the Cicada pattern:

And since it is is all generated with css there are no images and you could get fancier with the colors, gradients, and opacities if you want.

Here is an example of one that takes a single base color (#026873) and adds highlights to it:

Here is the css:

You can see the full examples in the gist.

This post mentions that you can use the <base target='_blank'/> to make all links open in a new window. The big with that is that ALL of your links now open in a new window, not only the links that are external links. Makes for a lot of windows/tabs if you are browsing the site a bit.

I was thinking that it would be better if you could inspect each of the links and determine if they should be opened in a new window or not. But I also wanted to support multiple types of links, such as ./, /, //, http://, https://, etc.

So I did a little morning exercise and this is what I came up with:

Example of sortable element copying between connected sortables.

The example that got me started was from a question by Peter Boughton on stackflow. In his question/example, Peter was trying to control what happened with a sortable based upon where it was being dragged to/from. My use case was slightly different but the example brought the receive event to my attention.

Using the receive event for the sortable I was able to check to see if the ctrlkey was pressed and use that to trigger the copy functionality. If the ctrl key is pressed I can trigger the cloning, if it is not pressed I just leave it alone and let it act as normal.

The hard part was to determine just where to place the cloned item. I wanted the original sortable to keep the same ordering and the item to still be placed where it was dropped in the new sortable. The receive event itself does not stop the element from being placed into the new sortable, hence the clone would need to be placed back into the original sortable in the previous index slot.

To accomplish the correct ordering I use the updateAreas() to update the index of the sortable items before anything happens and after every update is complete. This gives me the previous index for clone positioning since it happens before the update triggers.

Here is the source behind it all:

Here is the message I was seeing:

ERROR: Error cloning remote repo 'origin' : Could not clone https://username@github.com/username/repository.git
ERROR: Cause: Error performing git clone -o origin https://username@github.com/username/repository.git /srv/hudson/jobs/repository/workspace
Trying next repository
ERROR: Could not clone from a repository
FATAL: Could not clone
hudson.plugins.git.GitException: Could not clone
at hudson.plugins.git.GitSCM$2.invoke(GitSCM.java:587)
at hudson.plugins.git.GitSCM$2.invoke(GitSCM.java:535)
at hudson.FilePath.act(FilePath.java:753)
at hudson.FilePath.act(FilePath.java:735)
at hudson.plugins.git.GitSCM.checkout(GitSCM.java:535)
at hudson.model.AbstractProject.checkout(AbstractProject.java:1038)
at hudson.model.AbstractBuild$AbstractRunner.checkout(AbstractBuild.java:479)
at hudson.model.AbstractBuild$AbstractRunner.run(AbstractBuild.java:411)
at hudson.model.Run.run(Run.java:1257)
at hudson.model.FreeStyleBuild.run(FreeStyleBuild.java:46)
at hudson.model.ResourceController.execute(ResourceController.java:88)
at hudson.model.Executor.run(Executor.java:129)

To solve the problem we need to create an ssh key for the tomcat user so that it can access the repository.

cd /usr/share/tomcat6
sudo mkdir .ssh
cd .ssh/
sudo touch known_hosts
sudo ssh-keygen -t rsa -C "tomcat@forthedeveloper.com"

When creating the key pair save the key to /usr/share/tomcat6/.ssh/id_rsa.

I don’t know how to tell tomcat the passphrase for a ssh key, so I just left the passphrase blank.

Once the key has been created we need to add the github site to the known_hosts file. If you have already setup your normal account for working with github and have xclip installed you can run the following to copy the github ssh host information:

ssh-keygen -F github.com | xclip -sel clip

Edit the /usr/share/tomcat6/.ssh/known_hosts file and paste in the copied host information.

To finish things up:

sudo chown -R tomcat6:tomcat6 /usr/share/tomcat6/.ssh/
sudo /etc/init.d/tomcat6 restart

You can copy the new ssh key for tomcat to your clipboard if you have xclip installed with:

cat /usr/share/tomcat6/.ssh/id_rsa.pub | xclip -sel clip

If you are only using hudson for one repository you can just add the public key to the one repository in the repository admin (ex: https://github.com/username/repository/edit) under the ‘Deploy Keys’ area. Otherwise you can add it to your account’s ‘SSH Public Keys’ to allow the tomcat server access to all of your repositories.

Now when you run hudson against your private github repository it should have the proper access.


Caused by: hudson.plugins.git.GitException: Command returned status code 128:
*** Please tell me who you are.

Run

git config --global user.email "you@example.com"
git config --global user.name "Your Name"


I was a little confused to see this message since I had already configured git to have my user name and email. Then I remembered that hudson is running on tomcat which is running with the tomcat6 user. I needed to configure the tomcat6 user to have the git configuration necessary to tag on the git repositories.

[UPDATE: 24 Jun 2010]

I was working on repeating this process on Ubuntu 10.04 and was getting permission errors running the command to set the git config for the tomcat6 user. Here is an updated method:

First we need to create a .gitconfig file for the tomcat6 user:


sudo touch /usr/share/tomcat6/.gitconfig
sudo chown tomcat6:tomcat6 /usr/share/tomcat6/.gitconfig
sudo nano /usr/share/tomcat6/.gitconfig


Place the following in the .gitconfig file:


[user]
name = Hudson
email = hudson@myDomain.com


Once the file is saved–you may need to restart Tomcat–it should pick up your git configuration.

[/UPDATE]

[ORIGINAL: see updated instructions above]

Setup the git configuration for the tomcat6 user by doing the following:


sudo -s -H -u tomcat6
git config --global user.name "Hudson"
git config --global user.email "hudson@mydomain.com"
exit


As a note, if you are using hudson to commit and push to another repository these configuration settings will be used for all commits done by Hudson.

The next step is to let hudson know where the HOME is for the tomcat6 user. On the hudson/configure page there is a checkbox for defining environment variables. Once it is checked you will be able to put in a key-value pair. Add the following pair and save your configuration:


name: HOME
value: /usr/share/tomcat6/


The next time a hudson project is built you should see the following line close to the top of the console output:

Env: HOME=/usr/share/tomcat6/

[/ORIGINAL]

The git plugin should now be able to successfully tag the repository and continue with the build.

Specifying a version of “1.8.2″ will select the obvious version. This is because a fully specified version was used. Specifying a version of “1.8″ would select version 1.8.4 since this is the highest versioned release in the 1.8 branch. For much the same reason, a request for “1″ will end up loading version 1.9.1.

Google AJAX Libraries API Developer’s Guide

For example, if I were linking to jQuery I would normally have used the following and updated semi-regularly:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

But if I just want the latest for the “1.3″ version I could reference:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Or if I was feeling really risky and trust jQuery not to break between versions:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Hope its as useful to others as I found it!

For this example, we are going to add a virtual host for the snow.ftd host.

Jetty Setup

Jetty makes it really easy to configure virtual hosts for a context.

The configuration file in Railo Express at {railo-express-directory}/contexts/railo.xml already has the configuration setup to start us off:

<!-- virtual hosts
<Set name="virtualHosts">
	<Array type="String">
		<Item>www.myVirtualDomain.com</Item>
		<Item>localhost</Item>
		<Item>127.0.0.1</Item>
	</Array>
</Set>
-->

Uncomment the block of code and change the item to match the snow.ftd host name like so:

<!-- virtual hosts -->
<Set name="virtualHosts">
	<Array type="String">
		<Item>snow.ftd</Item>
	</Array>
</Set>

Local Host Setup

I already posted instructions for adding local hosts to your Snow Leopard. You can follow the directions there to setup your desired host. In linux you can modify your hosts file in a similar fashion. There may even be a way to change your hosts file on windows, although I have never done so.

Testing

Once the Jetty config and the local hosts have been updated, restart Railo—if it is running—and go to snow.ftd:8888 in your browser. You should see the same page available at localhost:8888.

And you are done! You can now add as many hosts as you need!

Using the dscl Utility

With the wonder of Google searching and the generous comments of others I found out about the dscl utility.

Listing Host Entries

To see what is listed for your hosts at any time just run this command:

dscl localhost -readall /Local/Default/Hosts

Adding a New Entry

In this example I am going to have the snow.ftd host point to my 127.0.0.1 IP address:

sudo dscl localhost -create /Local/Default/Hosts/snow.ftd IPAddress 127.0.0.1

You should now be able to ping snow.ftd and have it resolve to your local computer.

Removing an Existing Entry

If you decide you do not want an entry anymore just run this command to remove it:

sudo dscl localhost -delete /Local/Default/Hosts/snow.ftd

Reading the BSD Flat File

It was also noted that you can read the BSD flat file using this command:

dscl localhost -readall /BSD/local/Hosts

To me, the ternary operator is what the IIF() method call always wanted to be.

Unfortuately I was testing some CFML code, written and working on Railo, on a ColdFusion 9 server and had this error pop up:

Unable to find an operator implementation for coldfusion.compiler.ASToperator

Turns out the the ternary operator works great… unless you are using it in a default value for an argument. Fail.

Here is an example, that should run fine if the ternary operator was doing what it is supposed to:

<cffunction name="testing" access="public" returntype="void" output="false">
	<cfargument name="test" type="string" default="#(1 EQ 1 ? 'Hi' : 'Bye')#" />

	<!--- Anything --->
</cffunction>

I have filed it as a bug if you would like to vote on the issue.

Step 1: Download Needed Files

The first step is to download all the files you will need. Since the downloads usually take some time we’ll get them out of the way first.

For my installation I wanted to get more familiar with the Server edition of Ubuntu and to require fewer resources. You should be able to do a similar installation with the Desktop edition.

• Download VirtualBox – The official VirtualBox download page.
• Download Ubuntu – To download the Server edition you will need to find a mirror that hosts the installer images. Once you find a mirror navigate to the 9.10 directory and find the download link for the ubuntu-9.10-server-i386.iso file.
• Download ColdFusion – The official Developer Edition Download is available on the Adobe ColdFusion page. Download the Linux 32 bit installer.

Step 2: Install VirtualBox

Once you have downloaded all the files, run the VirtualBox installer.

If you would like to learn more about VirtualBox the installation comes with a user manual or you can download a pdf copy from their download page.

Step 3: Create an Ubuntu Virtual Machine

Click the New icon in VirtualBox to start the wizard for adding a new VM.

1. Click Next to start the wizard.
2. Enter Ubuntu CF for the Name of the VM.
3. Select Linux and Ubuntu in the OS Type drop downs.
4. Click Next.
5. Click Next to accept the default amount of RAM. (You can adjust if you want to…)
6. Click Next to create a new hard disk image to use for the VM.
   1. Click Next to start the wizard .
   2. Click Next to create a dynamically expanding storage.
   3. Click Next to accept the default name and size.
   4. Click Finish to accept the choices for the disk image.
7. Click Finish to end the wizard.

Step 4: Install Ubuntu

Now that there is a VM setup to hold the guest Ubuntu system we need to install Ubuntu on it.

In VirtualBox Double Click on the Ubuntu CF listed in the left column to start up the VM. Since this is the first time you are starting the VM it will bring a up a First Run Wizard to guide you in setting up the new VM.

1. Click Next to start the wizard.
2. Change the Media Source to Image File and click the Other... icon.
   1. Click the Add icon along the top.
   2. Select the ubuntu-9.10-server-i386.iso file we downloaded earlier.
   3. Click Select with the ubuntu-9.10-server-i386.iso item selected.
3. Click Next to continue.
4. Click Finish to end the wizard.

The VM should now startup and bring up the installation the Ubuntu. I’m not going to go into the details of installing Ubuntu here, so just continue with the next step once Ubuntu installation is complete. Also, since we are going to be using apache you may wish to have the setup create a LAMP server configuration when choosing features or you can install it manually afterwards.

Step 5: Setup Guest Additions

In order to have the Shared Folders work we will need to install the Guest Additions.

Before we install the Guest Additions we will need to install dkms:

sudo apt-get install dkms

To mount the Guest Additions disc image to the VM press Command + D or select Devices > Install Guest Additions... from the VM menu. Then install the Guest Additions by running:

cd /cdrom

sudo sh ./VBoxLinuxAdditions-x86.run

Step 6: Setup Shared Folders

One of the goals when creating the virtual machine was to be able to edit the files natively but run them on the guest operating system that reflects the production environment.

With shared folders we are able to use a local directory as a share on the guest VM.

Before we add the shared folder we need to have a folder to share. For this example I’m using the directory I created at /Users/randy/Documents/cf9/.

With the VM powered off edit the Settings and select the Shared Folder icon.

1. Click the Add a new shared folder definition icon on the right side.
2. Enter the Folder Path (/Users/randy/Documents/cf9/) or select Other... from the drop down and locate the directory.
3. Enter the name you would like the share to be referenced as in the Folder Name field. In this case I am going to call it cf9.

Now that we have the shared folder available to the VM we want it to mount the share each time the VM starts. To do this we startup the Ubuntu VM and edit the /etc/fstab file and add the following line at the end of the file (note that you will need to change the username to match your user):

cf9	/home/randy/Documents/cf9	vboxsf	uid=randy,gid=users	0	0

You will also need to create a blank directory at /home/randy/Documents/cf9 that the share will mount to.

The next time your VM is started it should have access to /Users/randy/Documents/cf9 on the host machine at /home/randy/Documents/cf9 on the guest machine.

Step 7: Enable Port Forwarding

To setup the port forwarding you will need to stop the VM. In the terminal run the following commands to setup the port forwarding. (Note that "Ubuntu CF" needs to match the name of the VM created above.)

VBoxManage setextradata "Ubuntu CF" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/guesthttp/Protocol" TCP
VBoxManage setextradata "Ubuntu CF" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/guesthttp/GuestPort" 80
VBoxManage setextradata "Ubuntu CF" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/guesthttp/HostPort" 8580

This will change the VM settings to have the guest port of 80 (which is the default apache port) of the guest forwarded to port 8580 on the host. Without this you would not be able to talk to the guest operating system.

Step 8: Install ColdFusion

Since we already downloaded the installer for ColdFusion we just need to get that file to the VM. Luckily we already setup a shared folder so if you move the installer to the /Users/randy/Documents/cf9/ directory it will be available in the VM.

To run the ColdFusion installer:

cd /home/randy/Documents/cf9/

chmod +x ColdFusion_9_WWE_linux.bin

sudo ./ColdFusion_9_WWE_linux.bin

This should start the installer. During the installation, apache should be configured to run with ColdFusion.

Step 9: Test Environment

To test that the development environment is working correctly you should be able to place an index.cfm file in your /Users/randy/Documents/cf9/ directory. Make sure that you place some CFML in the file to test that ColdFusion is doing it’s thing. Then visit http://localhost:8580/ in a browser on your host to test out the new development environment!

I found out that it is quite simple to upgrade:

• Download and unarchive the version of Jetty you are upgrading to (ex: 6.1.20).
• Stop Railo Express.
• Delete the old jetty and jetty-util jars from the Railo Express /lib directory (ex: jetty-6.1.2.jar and jetty-util-6.1.2.jar).
• Copy the jetty-6.1.20.jar and the jetty-util-6.1.20.jar from the jetty lib/ directory to the Railo Express lib/ directory.
• Start Railo Express.

Not much too it, but it seems to be working just fine and the MXUnit ant tasks are now running as expected.