Adam Howitt's Blog - AJAX

See Howitt Run

Mon, 30 Apr 2007 10:26:23 -0400

I have 2 weeks left to raise the remainder of my $3,900 goal for Leukemia and Lymphoma and I need your help. I'm in Week 15 of the Team in Training plan to run the San Diego marathon on June 4th. Saturday was an 18 mile run out in Darien, IL and my legs are still tight from the challenge. It's a distinct change from the flat course along Chicago's lakefront. We've got a 10 mile run this weekend before the next jump to 20 miles the following week.

I was initially running in memory of my Aunty Moreen who passed away in 2004 after a 6 year struggle with bowel cancer. The weekend after I started my training we discovered that my wife's 3 year old niece Haidyn had been diagnosed with ALL (Acute Lymphoblastic Leukemia). Over the past 12 weeks she has been a tough little girl fighting infections caused by the drugs reducing her immune response and dealing with the loss of hair caused by the chemo. At mile 16 on Saturday as I felt like my legs couldn't keep going I remembered the pain her and her family have experienced and it pushed me to the end.

If you have ever read one of my posts on SQL, AJAX, ColdFusion or even my most popular post on how to fix a bug on your Motorola DVR, please take time to donate. I appreciate anything you can spare.

ColdFusion Development

Fri, 09 Feb 2007 09:42:18 -0400

Despite the bottomless pit of information available in Google, I find myself falling back on a core set of sites for the answers to my questions. Through the magic of Google Co-op I have created a ColdFusion Development Search Engine. It is a hand made list of sites I trust for answers to my ColdFusion questions. I've also included and tagged JavaScript, SQL, Fusebox and AJAX resources with the idea that anything related to CF that I use on a daily basis to do my job is fair game.

If you can't find what you are looking for, let me know which site provided your answer and I can add it to the list after reviewing it.

UPDATE: The URL for the search is http://www.webdevref.com

WalkJogRun on Fox News

Fri, 05 Jan 2007 14:27:19 -0400

I'm delighted to report that WalkJogRun was featured on Fox News two days ago for the Cool Websites section after I tipped off Nancy Loo about the site. I was surprised in her coverage when she said she had already featured the site at one point but I missed it I guess. This time I was prepared and have my first YouTube video up now. I know, I'm probably the last person in the tech world to do this but this is the first thing I felt was worth it.

For anyone who hasn't read anything about WalkJogRun, it's over 3 years old and is a community for runners, cyclists, walkers and anyone else to create and share routes. It is based on Google Maps and uses custom AJAX, ColdFusion and is built on BlueDragon 6 with MySQL on an Ubuntu server.

Google Analytics trouble

Mon, 23 Oct 2006 15:47:53 -0400

I've been helping a client setup Google Analytics, specifically adding the e-commerce tracking. As with most analytics packages, stats are updated as part of a batch every few hours so it's tricky to troubleshoot the code when things aren't going well.

I was getting the tracking code to work, even on the SSL encrypted pages but the e-commerce tracking piece wasn't reporting any revenue. The tracking code is offered in two flavors, either an inline chunk of script to execute or called from the page onload function. To minimize disruption to the dsp_header.cfm in use throughout the site I thought I would add the inline code on the receipt page instead. No dice. Here is the problem: it fails silently on an AJAX call so I was stuck. LiveHTTPHeaders to the rescue. This neat little Firefox plugin works like Fiddler but is built into your browser. Turn it on and each HTTP request is logged either in the sidebar or a new tab.

With LiveHTTPHeaders turned on it became clear the inline JavaScript fragment didn't work so I moved my call to the dsp_header.cfm file with a condition based on whether you were viewing a receipt page or not. LiveHTTPHeaders cheerfully reported that I was now sending data to Google. All I need to do now is wait 4 hours to see if the data shows up.

Really loving Google Analytics - has anyone else used it? How does it stack up to other analytics packages you have seen? I love the custom funnel pages to be able to track e-commerce activity and the cross-tabbing of most data points to be able to dig in by city, country etc.

How to Design a large AJAX Application

Fri, 07 Jul 2006 12:46:33 -0400

In the guide which you can download from the link below I'll cover the process I have developed in the course of implementing two AJAX applications as a developer for Duo Consulting in Chicago. This approach has made it easier for me to work with the design team, produce estimates for this type of project and communicate what is involved each step of the way to the project managers for scheduling purposes.

Download the PDF guide (105kb)

If this sounds like the type of work you enjoy and you live in Chicago or are willing to move here check out our careers page as we are looking for talented ColdFusion developers.

CFUnited mid-conference roundup

Thu, 29 Jun 2006 12:48:54 -0400

The sun came out in DC yesterday as the conference began and the city is breathing a sigh of relief. ColdFusion can do that :-) I'll try and keep it short but you all know how I can ramble on...

CF Roadmap keynote: I agree with my coworker Kelly that the Adobe influence on CF looks ominous. It's clear that PDF integration for CF jumped the queue at the expense of other key features that were left out. "Scorpio", the next release of ColdFusion, will include some new PDF form based tags to allow users to fill forms in online. That's about it from that angle. Flex 2 was launched officially yesterday and Ben Forta gave a demo of a wizard to build a master-detail web application without writing any code. I could see us thinking about this for our CMS duoCMS for the content administration since it offers some saucy looking UI out of the box.

Sean Corfield talked for an hour on factories in the context of ColdSpring, a framework Duo Consulting (my employer) can and should leverage for all of our CMS cfcs. As it stands, the CMS is built in a way that forces us to keep only one version on each server. ColdSpring would allow us to maintain multiple builds of the code so that a client who was built on duoCMS 1.1.345 would have identical CMS to another client operating on the same build number. This is HUGE for Duo since we can easily identify a fix for one customer and know that it can be fixed for all clients on that build version. It also allows us to plot upgrade paths for clients based on their build number. I know this isn't as exciting as my design buddy Jeff's new addition to the family but it's a close second :-) The other advantage of the framework is that it allows us to hotswap different databases for an individual client so they are still duoCMS but the connectors for getting and setting information in the database are broken out. Fusebox 5 release candidate 1 was also released on Tuesday but I haven't had a chance to look at the details yet.

Note: if you are wondering where I have the time for this in the middle of the day, Kelly is attending the Microsoft Atlas presentation on their attempt at an AJAX library. The part I saw was too intense about Visual Studio so I skipped out.

Next up was Joey Coleman, a thoroughly entertaining speaker describing the concept of having turning yourself into an IPO. Not about starting a business but just managing your career as a brand to maximise your earning potential. Things like getting testimonials from your manager about the work you do and taking stock once a year with an annual report. This can make you more productive and help you realize whether you are stagnating and need more training or need to dig in a little more.

Douglas Ward gave an average presentation on Fundamentals of Usability. The issue was that it was another Jakob Nielsen style "Don't do this, don't do that" and not enough "You should do this". Darn negativity drives me crazy. If anyone has any good recommendations on authors or books describing what should be done please let me know. The only good thing I took away was his analogy of your website as a billboard and the notion that an effective billboard is short, sweet and to the point "Good chicken next exit at Bob's" vs a long winded flowery pile of text which doesn't help the user get to their end point.

An Adobe presenter, Sarge Sargent gave a disappointing talk on gateways with little substance so it looks like I will need to dig in more myself.

John Ashenfelter talked about Agile Programming as a methodology. There was a lot of content and theory but less practical. It would have been better if he had revised his material to focus on the audience: every coder here either builds websites or reports so with that assumption I wanted him to say "a client wants a new website, here is how the process works". I still have pages scribbled on the topic if anyone wants detail. The nugget here was the use of ANT as a tool for web development. Built into the tools most of our developers use it allows you to automate the deployment of applications and the configuration to setup a project. In our environment this would reduce some of the lead time necessary to set our machines up for maintenance of client websites and grab local copies. He also recommended some great development books he believes every developer you hire should read as part of their job requirements.

This morning, slightly less awake I watched Joe Rinehart introduce Model-glue unity as a framework for rapidly developing ColdFusion applications with a ruby on rails for ColdFusion feel. In five minutes he built a rudimentary blog from scratch typing every line of code while we watched in awe. The key component is something called reactor which works on most database platforms through JDBC. It understands the database design and then creates the pages with Model-glue to list, edit, add and delete items.

Lastly, I watched a friend from Atlanta present the benefits of running BlueDragon on .NET - our company sysadmin and I will need to try a demo of this because the benefits are huge including the ability to leverage application pools allowing you to start and stop one part of a website without bringing down the whole site or any other clients on the server. It also means better monitoring abilities and helps us see which client site is bringing the others down.

Food is being served now so I'll wrap up. Great conference, great content and a really good crowd.

British pedometer - WalkJogRun

Sat, 06 May 2006 20:20:47 -0400

Okay, WalkJogRun has long been available for the UK but now it has it's own URL WalkJogRun.co.uk which starts you on a view of Europe, features better resolution satellite maps, detailed European maps and imagery (looks like a Dan Brown movie) and a postcode lookup feature. Oh, and it also includes Japan but at present those maps are all in Japanese so I'm unable to make head nor tail of the place names.

I have to admit that the imaging improvements are all Google's idea but it doesn't come free. Google has an upgrade document for it's mapping API users to help you move your code from v1 to v2. The move took about 3 hours for my site but it wasn't as easy as the upgrade document made out "The quickest way to upgrade is to update your Maps API <script> URL to refer to 'v=2' instead of 'v=1.'" Hmm. No dice. The way I proceeded was to start with the function I call to initialize my map and eliminate any subsequent map based code and gradually add it back in, digging into the APIv2 Class reference.

One of the biggest changes for me was the move from GPoint to GLatLng objects which means little until you realize that the old method of passing points has changed and the order you pass in longitude and latitude coordinates is now opposite. One trick someone suggested was a simple function which takes the old format and returns the flipped values but I figured it was easier just to straighten them out manually.

Another such flip was the zoom scales which used to run 0 to 17 with 17 being the most coarse view and 0 allowing you to see up someone's nose. GMap2 now goes the opposite direction with 0 being the most distant and 17 the closest you can get at this point; presumably this allows them to get closer yet at some point in the future without having to get into negative numbers. This means most of the code you have will need to be rewritten with the substitution 17-oldnum to get the correct new value. Or just stand on your head.

This all coincides with my move to hosting the site on my own server happily running BlueDragon 6.2.1 on Linux with MySQL and Apache. I have a nice dev environment to play with now instead of playing chicken with large code changes and an easy way to migrate them between environments.

If you have any Google Map related questions and need a hand working out where something is breaking, I will follow up if you have any questions.

Enjoy the rest of your weekend and maybe even plot out a nice run or bike ride.

A Time to Post

Thu, 02 Feb 2006 10:46:27 -0400

Anyone who has been a regular reader may have noticed that I haven't been positng a great deal lately. The cause for the lag has been a 3 month project to rewrite a web application for my local park district to handle registrations four times a year when traffic surges from 2000 visitors per day to 2000 visitors per minute.

The application launches this afternoon and has brought in several challenging new topics: AJAX (including advanced DOM scripting, browser considerations, state management and interaction modelling), Clustering JRun across multiple instances and multiple servers, Load testing, Project Management and scalable application architecture.

After today there will be a two week delay before the madness begins for the Spring registration on February 20th. During this time I will be posting about each of the topics above to describe what happened, what I learned and what resources I found to help guide the application design. You may also find a guest post from Design Jeff to describe how he tackled the new challenge of designing an application for AJAX.

The first post will point you at the finished application to dig around and see what it looks like. Wish me luck!

Wall Street Journal Traffic Spikes

Wed, 21 Dec 2005 14:04:13 -0400

In a deviation from my usual neurotic email compulsion I managed to avoid Gmail until about 11am on Monday. I checked my messages and noted that the alerts I get when my Google Maps mashup WalkJogRun.net had increased showing around 50 new routes since 6am that morning. Weird but not that unusual. Fast forward to 3pm when I got an IM from Jeff (Mr. CSS):

[15:54] jeff: ummm
[15:54] jeff: hey
[15:54] Me: wassup
[15:54] jeff: did you know that walkjogrun was mentioned in the wall street journal today?!?!

Floored. Naturally I snapped up a couple of copies and on page R8 of Monday's WSJ in the middle of the page as a huge callout is a list of example Google Maps mashups including in pole position WalkJogRun.net! Google Analytics took a few hours to reveal the extent of the referrals but it appears that Monday yielded 3,700 unique visitors up from a daily average of 150 and Tuesday brought another 1,700.

The online version of the Wall Street Journal is carrying the article entitled "Where in the World Is..." by Jessica E. Vascallaro too and can be found in the Journal Report section.

In a direct response to the extra attention I decided to squeeze in a feature I have been planning for some time to enhance loyalty. You have always been able to create routes as a guest and always will but I added a login/member tool where routes are no longer anonymous. The response has been great with over 200 new members in the last two days. The immediate benefit of membership is that any routes you create are attributed to your username so you can easily locate the routes you use regularly. Future enhancements will leverage this feature further to add training logs to monitor your pace and performance and loads more.

I've also added Ray Camden's forum software Galleon to facilitate discussion about the site and exercise routes in general. I have one forum dedicated to feature requests in case anyone has some good ideas about how to improve the site but it has yet to gain some momentum.

I'm also excited that snippets of my code for WalkJogRun is also to be included in Rich Gibson and Schuyler Erle's "Google Maps Hacks" scheduled for release on January 1st 2006.

Tweaking Web Applications with Fiddler

Wed, 23 Nov 2005 11:40:05 -0400

Understanding caching, http performance and compression are key to winning the battle to deliver fast internet applications, especially in the context of technologies like AJAX where packets are flying in and out of your browser. Fiddler is a must for any developer trying to dig down to understand how their web application performs.

There are two great articles on MSN about the software:

Fiddler PowerToy - Part 2: HTTP Performance "Learn how to build a faster Web site using the Microsoft Fiddler HTTP Debugger. In this article, we'll use Fiddler to explore HTTP performance, caching, and compression."
Fiddler Power Toy - Part 1: HTTP Debugging which is the first article in the series.

Yesterday Digital Media Minute reported the launch of IETab which is a Firefox extension which enables you to view pages in Firefox but with the IE engine. I was digging around for an explanation of how it works and discovered that because this plugin uses the same HTTP layer - WinInet, you also see the pages requested in Fiddler if you have it open.

The reason Fiddler doesn't report on Firefox requests out of the box is that it configures the WinInet proxy alone and Firefox has it's own configuration.

Fiddler monitoring Firefox requests

If you want to get fiddler to listen to Firefox requests too, go to Tools > Options > Connection > Connection Settings and check "Manual Proxy Configuration", "Use the same proxy for all protocols" and enter 127.0.0.1 port 8888 and click OK. Note that this will pose problems if you close Fiddler as your proxy is gone, to solve the problem change back to "direct connection to internet".

Using Google Analytics to Monitor AJAX Applications

Tue, 22 Nov 2005 11:36:15 -0400

In this post, I'm going to explain how to use Google Analytics to help you monitor AJAX and DHTML activities on your web applications.

Just over a week ago Google launched Google Analytics as a free, tag based web analytics package for one and all to use. The product is based on Urchin which Google purchased for $30 million at the end of March 2005.

This means you can create a free account, copy the basic snippet of code

</script>
<script type="text/javascript">
_uacct = "UA-xxxxx-x";
urchinTracker();
</script>

and within 6-12 hours be looking at some great stats. My personal favorite is that it is goal centered. It makes you think about what the goal is for your website (readership, whitepaper downloads, sales, etc.) and focus on tracking those behaviors.

With traditional log based analytics packages you only get to see requests for files but with tag based analytics packages, like Google Analytics, you can monitor each and every JavaScript action, each click away from your site and tweak your application based on what your visitors are doing.

I have an AJAX search box on WalkJogRun.net which up until last week I had no idea how it was used by visitors. I mean, sure, it said search but people should know what that means, right? Entering a search term dynamically filters the list of routes in the panel beneath the search box without refreshing the page.

Based on the results of tracking this for a week, it now reads "Find a route by name or zip code" because I was able to see that the most common behavior was to enter a zip code as a search term which, until I realized this, was a dead end. The search was only looking for keywords so a zip search would find no results here. A simple change and now it recognizes zip codes and handles your request differently.

Okay, but how do you track events?

Once you have your Google Analtics account and have copied the snippet into the head of your web page you are one line of code away from the answer. Any time you want to log an event or activity to Google Analytics, add a call to the urchinTracker function which expects the name of a page (or for the purpose of this example, a virtual page since the search activity isn't a real page... You can do this anywhere you can put JavaScript in a page including your own methods or, say, the onClick property of an href. Since my application is already calling a JavaScript function to handle the AJAX call, I added the following line to my file:

urchinTracker('/search_routes/'+term);

which logs the event under a virtual directory called /search_routes/ and then logs the actual search term used under that. To access this information in the Google Analytics manager when you are looking at your reports, click on "All Reports" > "Content Optimization" > "Content Performance" > "Content Drilldown" and you should see a pie chart and something like this:

You can see the /search_routes folder here and that 119 visitors have used the search tool 184 times between them. Click on the folder icon next to the label "search_routes" and you see the next layer down:

The % Exit column reflects the damage that was done by providing a search box with no results when you search by zipcode!

What else can it do?

Since every href can have an onClick event, you can log each click away from your site under a virtual folder called /outgoing_links/ to monitor which links your visitors found the most interesting.

AJAX Users Beware

Fri, 18 Nov 2005 14:23:00 -0400

I just noticed an interesting side effect of XmlHttp request objects while working through a new application. We are writing an AJAX interface to a registration application used every quarter for Chicago residents to register for programs in the local park district. The programs available changes each quarter.

IE and Firefox behave differently in the way they handle requests which requires some consideration when using this technique. Through the use of fiddler and monitoring my apache log files, I was able to identify that the Microsoft ActiveX XmlHttpRequest object will cache requests so a subsequent request with identical parameters will be served from the browser cache. Firefox will repeatedly grab the same page from the server.

What does this mean?
For my application, this is both a good thing and a bad thing. The good thing is that the programs browser is fine since the programs available change once per season. Anyone digging will be able to cache things they are interested from IE while firefox users still request the file over and over. The bad thing is that the number of available slots for a program would be cached.

How do we fix the bad thing?
By appending a serialized datetimestring (yyyymmddhhmmss) and passing it on the URL when I request the number of available slots I can guarantee a new result.

AJAX - Solving the loss of state

Fri, 28 Oct 2005 13:11:56 -0400

There is a great idea for solving the problem of a client hitting refresh and losing page state in AJAX apps at pascarello.com

Basically, use the Hash {#myanchorname} property of a URL!