Mortgagevista Mortgage Calculator

My job (real job) sometimes requires me to calculate mortgage payments or lookup loan amortization schedules. I often just google “Mortgage Calculator” and just pick one of the results on the first page. After visiting and using several of the these top results I was underwhelmed.  They tended to be hard to understand and usually did not display the results in an easy to consume format. I decided that I wanted to try and build something better. So was born the inspiration for my next project, the MortgageVista mortgage calculator.

 Over a year and a half later, a lot of significant effort, and numerous revisions, the calculator is finally to a state that I feel it is ready for release. In reality I see the current version more as a minimum viable product than a fully finished and polished version. But, I think it prudent to release it out into the wild and see if I see any success/demand before pouring anymore time into the project.

 Absurdly as it may sound, this project started out as a competition between me and my brother to see who could make the most successful website with just 24 hours. Yes, that very same project took me over a year and a half to get it this far (on a side note my brother has not yet finished his project either so I guess I won the competition). It is important to note that the scope of the project has increased significantly since that 24 hour competition, also, I was very busy with work and life [spent 3 and a half months backpacking Europe]. Needless to say this has never been a full time endeavor, but I do estimate I put at least three or four hundred hours into the calculator by the end of it. [I really do wonder how long it would take a seasoned web developer to complete something similar].

For better or worse, the mortgage calculator will be the next installment to my growing list of web properties. I do have hope that the internet world will find the tool to be useful (and hopefully shareable too). It includes several different modes so people can simply explore/visualize a single mortgage, compare two different mortgages, or examine early payoff scenarios for their home loan. The tool offers numerous display options and was built so I might be able to easily expand it should it prove to generate a lot of traffic. Also, the state of the calculator is saved into a bookmarkable URL. I feel this to be a very significant feature as it will allow users to save the details of the mortgages they are working with or give them the ability to create a link that they can share with others to show them specific mortgage details or information. Please let me know if you have any feedback or find any bugs with the site.

No module named lxml.html error on Google App Engine

This morning I decided to do a quick update on my Diablo website. I have not touched the site for a while and thought it would be a painless little update. Problem was I could not get the app to work in my local test environment. The app is hosted on the google app engine and in the GAE SDK I kept on getting this error “”No module named lxml.html”. I fooled around with my app.yaml for a bit trying to see if somehow that was the issue, it wasn’t. I was worried that somehow I corrupted my test environment or something like that because I know I had it working at some time in the past. It was driving me batty.

And once again stack overflow saves the day.

Per this post here: lxml.html error Turns out that the windows distro for python 2.7 does not include the lxml library. I am not sure why my Python installation no longer had the library as it was working in the recent past. I am wondering if with my most recent google app engine SDK update I re-installed Python. Either way, if you are getting a similar error the easy solution suggested by one of the posters in the above stack overflow is to install lxml from the below site.

The confusing business of rounding individual cell corners within a HTML table

So, I it took me some time figuring this one out and figured would write it down so I won’t forget  For one of my projects I was trying to add rounded corners to individual table cells. However, it was not working as expected and it was not clear to me why. I came across a hint found here in this post:  Turns out the trick is that you must add: “border-collapse: separate;” to your table or trying to round your individual table cells will not function as expected.

Pinterest Board to Promote a Site Experiment

It kinda seems to me that Pinterest is the new up and coming social media site. It offers a really convenient way to keep track of and share images. You are also able to share and keep track of links to websites which is what I am interested. Currently the main demographic that is using the site seems to be primarily females in their 20-30’s . In a way it almost seems like a reddit but for girls. However, having said all that I am predicting that the site will eventually expand and all the guys will start joining as well.

What got me started on pinterest is I noticed that the search engine results for a keyword I am targeting for my html5 game site had a pinterest board ranked well ahead of my site in the results. So, natural I created my own board to try and help promote my site. Check it out here . If you do a search for pinterest to promote your site or something like that you will find all sorts of blogs and experts telling you how important it is, but I am still not convinced it will really do all that much good. But, since it was a pretty small time investment I figured to try it out anyways. If by any chance I notice any significant benefit I will either update this post or create another one.

Adding php to and HTML page: application/x-httpd-php5 vs application/x-httpd-php

Yes there is a difference. I was trying to parse php code in a file with a .html extension. So I do what I always to and look to the web for the syntax on how to edit my .htaccess file. However, pretty much every website will tell you to add one of the following lines:

AddHandler application/x-httpd-php .html .htm


AddType application/x-httpd-php .html .htm

However some web-hosts (including mine) require you to define specifically  that you are using php5. So instead of the above lines of code you have to include one of the following

AddHandler application/x-httpd-php5 .html .htm


AddType application/x-httpd-php5 .html .htm


If you don’t include the php5 (for my host at least), it will not work. It is an incredibly frustrating nuance that not many posts and forums do not cover. So, if you are trying to execute php inside of a html page using your .htaccess file and are having problems you might try adding the 5 to the end of php. Funny thing is I am pretty sure I had the same problem a while back but forgot the solution.

A great post which goes into detail regarding which code you should be using can be found here

Centering A Div – Quick Reference Guide

I have been designing web pages using CSS for years now I have to admit, I still have to regularly look up how to center a div. It seems simple enough (maybe I am too used to the old HTML <center> tags), but I as am constantly struggling with it I decided to write a quick reference guide.

Center a Relatively Positioned Div

.centeredDiv {
width: 500 px;
margin-left: auto;
margin-right: auto;

Note: You must set a width for this to work

Center Absolutely Positioned Div

.centeredDiv {
width: 100px;
left: 50%;
margin-left: -50px; /*half of the width*/

Note: This will center the div relative to the first parent element that is not positioned static or the <html> block if no element is found.

As I was figuring all this out (again) to write it down, I think I am realizing the reason why I always seem to get it wrong. You have to employ different strategies depending on whether or not the element you are trying to center is absolutely position or relatively positioned.



Little surprises for the uninitiated

AsteroidsInc is pretty much the first game I have ever programed so there have been lots of surprises along the way. Probably one of the bigger surprises I have come across so far is the amount of time it has taken me to program the menu system. I was expecting that to be one of the easier/simpler parts, but has taken me quite some time to get everything working correctly. I have tried to take a OOP approach to make everything as organized as possible, but it is still quite complicated, is requiring a massive chunk of code, and in truth has been quite boring. Quite possibly this is due to me doing stuff the “hard way” or flat out the “wrong” way (like everything else), but I cant think of any easier way to accomplish what I need. I guess the moral of this story is that sometimes the little things take a lot longer than expected. I am finding that it takes quite a bit of perseverance to push through the “little” things that are turning out to be “big” things. Hopefully the finished product will be worth it…

Along the same note, I think that focus is also becoming an important factor in bringing this project together. I keep on coming up with other projects/ideas/tangents that sound more interesting in the moment and the temptation is to work on those. However, time I have to work on this is limited and if I am ever going to finish my game, I am going to have to focus on it.

HTML5 Canvas performance for scaling sprites

Well…This is likely a nobrainer for most, but for some reason it took me quite a while to figure this one out.  In my latest game asteroidsInc I have been designing I was experiencing some pretty awful frame rates, and so I started to try and optimized the code for better performance.  I was using the JavaScript drawImage function to scale the images I was using as sprites in order to achieve a retro pixely effect.  While it did accomplish the effect I was looking for it turns out the frame rate took a big hit due to the scaling.  To improve the performance I simply used Photoshop to enlarge my images (in order to retain the retro effect) and then used the drawImage function using no scaling. The performance boost was quite significant. In hindsight it seems quite obvious that using the scaling was a bad idea on sprites and would require more resources to render, but hey…sometimes the obvious just takes a little longer.


In recap, if you are are trying to animate multiple objects on the canvas it appears that resizing the images themselves has performance advantages over using the drawImage to scale the images.

Safari not liking the HTML5 Audio

 Well this one threw me for a loop….

 I never use Safari, but in an attempt to make my latest HTML5 Game compatible in all the major browsers I downloaded the PC version of Safari to do some testing and trouble shooting to see if it would work. The game worked well in Chrome, Firefox, and I.E. so I assumed it would just work in Safari. But no, to my surprise it started throwing the following error every time I tried playing one of the audio elements.

 TypeError: ‘undefined’ is not a function (evaluating ‘’)

 After much frustration I came across a post which indicated that HTML5 audio and video tags will not work in Safari without QuickTime. So much for HTML5 not requiring any plug-ins. I installed QuickTime and to my dismay Safari was now giving me the following error when I tried to start it up.

This application has failed to start because QTCF.dll was not found. Re-installing the application may fix this problem.

After trying to reinstall the the browser (this did not work) I found the QTCF.dll file in the Program Files/QuickTime/QTsystem made a copy of it and put it in Windows/System32. This solve the problem and Safari now started up. I was able to load my game with no more errors playing the audio objects. Safari seemed to handle the canvas object fairly well (although the frame rate on seems to be fairly poor).