Magic Eight Ball with the Raphaël JavaScript Library (1.5.2)

Wrigley’s Magic Weight Ball is my first project using the Raphaël JavaScript Library and it just went live. I used Raphaël JS version 1.5.2 which you can download from GitHub. The project requirements came through as only being an iPad version that responded to a shake event. Getting to use a new technology for a front-end project where you only have to support one resolution and one browser is an excellent opportunity to try new things. I knew in the back of my head that they would want a non-shakeable static version as well but they just didn’t ask for it yet. Internet Explorer still came into consideration when I was evaluating technology solutions because I was certain it would come up eventually.

When I saw the Nissan Leaf site I was blown away by the heavy JavaScript animations being used. It really reminded me of the early Flash animations and sites in a way. The Hacker News submission I saw the site from pointed out that the animations were being handled by the Raphaël JavaScript Library. This was still fresh in my mind when I got this project so I loaded up the Raphaël demos pages in a ever browser I test on, IE6-9, Safari, Firefox and Chrome and they all worked! This was the library for this project.

I finished up the iPad version of the site which requires iOS 4.2 or higher and was pretty happy with the results. It responds to a full shake event to give you another tip, the tip will bob lightly in the water when moved a little bit and the tip orients to the iPad. When the tip is touched it provides a little modal with more details. The site even supports landscape and portrait viewing.

About half way through developing the iPad version the email I was expecting arrived. “Oh no!” they said, “We need a static non-shakable version for desktop users to visit.” I was already prepared though. When I though about a desktop version I first defaulted to Flash but I wanted to give Raphaël a try first. With a IE6 PNG alpha transparency fix and a small work around for IE to get the Raphaël image src it was up and running on the desktop.

You can visit to see the result and if you happen to hit the page in an iPad you will get a slightly modified version that still responds to the shake events, always giving the best experience possible.

The weight ball interface itself is a series of 3 layered PNG images. The top most image is a 24bit eight ball and the rest of the tips, triangles and back black images are all 8bit PNG images with the a properly picked matte color. The total site size was reduced as much as possible and the designers loved the look. I reduced the number of colors where ever possible and used a pattern dither, it really seemed to look the best even though it bumped up the file size a bit.

For this animation interface the Raphaël JavaScript Library was a perfect fit and I was able to provide a cross platform and cross browser experience that I was very proud of.

Post-mortem report of my free online dating service; Part 1 of 2

I registered the domain for my free online dating service,, in October of 2007. I decided that along with making my first real startup that I would invest money in that it would be a good idea to do in a language I didn’t already know (ASP.NET), with a database I wasn’t familiar with (MSSQL) and on a platform I had not deployed anything on before (IIS6).  My thinking was that along with creating this sure fire website that I could make money though advertising off of I would try and learn as many things along the way as possible. I worked on this project in my evening times while also supporting a medium-core World of Warcraft habit. When I say something took days of research it’s real time passed after work, WoW and a little life.

I had modest goals to measure the success of the site. My first goal after launching was to make more money than I spent in hosting and advertising. After that I wanted to invest all actual profits back into the site so it would continue to grow. I pictured a power point graphic of exponential growth and with a little patience I would be rich!

I broke the site down into smaller and smaller chunks and for every small milestone or functionality I completed I patted myself on the back. Milestones such as getting Visual Studio Web Express to pre-compile DLLs so I didn’t have to place source files on my webserver, which I had none setup at the time, or migrating my new found zip code database from MySQL to MSSQL. Every step I took involved several days of thinking and research.

I swear it wasn’t intentional but I felt like I put as many technical obstacles in between myself and launching the site as possible. I vividly remember spending several evenings, days I felt like, trying to decide on which source control solution I should use. I kept hearing Git this and Git that at the time but it took me a while still to figure out there was no easy way to run a Git server on my home Windows machine. I finally settled into VisualSVN and celebrated when I checked a file in from my laptop and got latest from my desktop! I was on my way.

I stressed over membership and security for a long time as well. Don’t store passwords in plain text, watch out for all user input and SQL injection worries. I had created a pretty full registration and login web of pages before I even thought about creating a admin interface for my users. That’s no problem I thought at first, Visual Studio Web Express came with this very helpful ASP.NET Web Site Administration Tool that I found out, after several more nights, couldn’t be installed remotely on my newly acquired shared hosting environment. Screw it! At that point I had a text file of SQL scripts I was running to do development work that ended up being my “admin” interface to the site.

I had been using my free time since registering the domain working on the site and learning C# but by December 2008 I still seemed far away from launching anything I was proud of. I was doubting my plans and if I didn’t do something drastic soon I would never launch the site. In January 2009 I quit playing World of Warcraft, I disbanded the guild I had put together, transferred onto another server and kept no ties to anyone I knew. Even my real life friends didn’t know where my characters went. Shortly there after I actually canceled my accounts. Suddenly I had all the time in the world during my evenings to work.

Within 5 months of cutting out video games I was able to launch the site in May of 2009. I actually did a soft launch first, running through all of my test cases a few times just to check for any obvious bugs. All of my testing, research, learning and code was live. It took me far to long to get here I told myself and I knew that the hardest hurdles were still to come. No one knows me, I have no track record of success, how on Earth am I going to get people to sign up or even visit my freshly unwrapped free online dating service.

Continued in Post-mortem report of my free online dating service; Part 2 of 2 to read about the end of DiveIntoThePool

Weddingtracker launched!

Weddingtracker launched on June 12th around 2:30PM CST and it has been about 8 long months of development and battle to get it out the door. With over 18,000 lines of code, over 400 files and 64mb in size this has been by far my most complicated Flash project ever. You can see the 13 template files in action on the Weddingtracker sample sites page. We did not design the sites so be sure to look past the front-end user interface when continuing through this post. I want to detail some of the finer points of the production and elements that I am happy with.

The entire project was coded using ActionScript 3.0 and the underlying framework that was used was PureMVC for Flash CS3. It was very stable once we got comfortable with working in its rather verbose arena. Each of the components that made up a users website existed in external files. Template layout, page type content, template colors, menu types, custom media display files and embedded font resource files. All of this makes for an extremely extensible code base that will allow for much more complicated designs without endangering the underlining controller code that sets up how the user interacts with the different pages.

All of the colors and text formatting are loaded in from CSS files that are defined in the initial XML file loading process. These CSS classes are accessed by the different page type controllers when they format themselves. Placeholder movieclips are used in the template resource files to define the location and size of the page type elements. The first class in the CSS files defines a list of used embedded font files required for accurate rendering. These font files are loaded from external SWF files and then registered to the Flash application for usage on embedded TextFields. Many of the ideas that made up this runtime font loader came from this post Runtime font loading with AS3 Flash CS3 not Flex.

I think that this code base is a great start to what could be an excellent product with some more attention to the design and user interface components. I expect to be working on it for the next couple of weeks for post launch issues and into the future when new templates are designed. All of the work over the last 8 months will be extremely helpful when it comes to fixing bugs or making improvements in the future.

I wanted to say thank you to everyone who helped code this impressive project and see it through launch. Susannah was with me in development from the very beginning and the project would not have launched without her help. Andres and Hal came in at the end of the project and worked two weekends in a row to get the template css and skin files setup for me while I finished the components and Susannah worked on custom template elements. I am already looking forward to my next major project but needed to reflect on over half a years work and a successful launch. Congratulations to everyone who worked on this project in the .NET development, all the HTML and CSS work and thank you to the IT project manager for being there from beginning to end of the marathon project.