With RIA's becoming so pervasive and developers just going full tilt in embracing toolkits that help build these wonderful apps, its still extremely important to take into consideration site optimizations that actually make your site usable.

Take for example the age old adage of the “files are cached on the user's computer”. Well, Yahoo seems to have done a good job of dispelling that thinking by doing some research that shows that:

• 40-60% of Yahoo's users have an empty cache experience
• ~20% of all page views are done with an empty cache

Holy crap! 40-60%!!! Yahoo's audience is so distinct that these figures really are compelling and should be considered when designing your site. Here's the link for the full article:

Performance Research, Part 2: Browser Cache Usage – Exposed!

It really is enlightening.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Dan Vega had a nice, straightforward example of using CFWINDOW to build a very sweet looking dynamic window. When I did a “view source”, I was kind of shocked by the amount of javascript libs being included. You had files from Yahoo User Interface (YUI), Ext, and some others which seemed specific to Adobe (Spry maybe?). There were a total of 12 javascript files loaded automatically by CF 8 in order to popup the dynamic window.
So I whipped out FireBug and did a quick analysis and noticed that the libraries totaled ~330KB! Holy cow! There's a lotta library in that page. Now you might say, “whats the big deal? Customers have broadband!”. Um, sorta. While broadband continues to grow steadily, its still important to consider those visitors on the low end of the spectrum (eg: dial-up).

This got me thinking about some of the things that I've had to contend with as I got involved with client-side development; especially Ajax.

Using these new tags is definitely enticing and its going to give CF developers a great way to get introduced to client-side dynamic effects including Ajax, without the headaches of hand-coding so much stuff. Shoot, Ben Forta has posted 3 CF8/Ajax tutorials that have stunned me due to the power and simplicity of the implementation.

But for those just jumping into this whole DOM/JS/Ajax thing, it is REALLY important to evaluate your visitor expectations not only from a business perspective but a technology perspective. Don't make the assumption that every visitor you have has broadband or, even tougher to deal with, JavaScript-enabled. If you're targetting customers who traditionally are not the most “wired”, you may be in for a big surprise when they encounter a site thats not as responsive as you thought. This could equal lost customers and/or lost sales.

So my point is to tell you to definitely embrace the new Ajax widgets in CF8 (and those of any library) with a little forethought. By doing so, you need to start rethinking your approach to how your target audience will be affected. Everything from bandwidth to accessibility to security will now need to be thought through to make sure your apps work for your visitors.

To get you started with CF8's Ajax capabilities, here are a couple of tutorials from Guru Ben Forta:

ColdFusion Ajax Tutorial 1: Auto-Suggest
ColdFusion Ajax Tutorial 2: Related Selects
ColdFusion Ajax Tutorial 3: Live Data Grids

I would also HIGHLY recommend this posting to get to understand progressive enhancement.

Progressive enhancement with Ajax

If you don't know what progressive enhancement is and you're planning on implementing DHTML and Ajax, you're doing yourself and especially your site visitors a disservice.

Welcome to Ajax fellow CF'ers!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

He's released a refactored version of Dylan Verheul's jQuery Autcomplete plug-in which:

• Supports local data array (can now use w/out AJAX).

• Limit dropdown to XX number of results (good for limiting the results to users)
• Autofill pre-populates text box as you type
• New findValue() method can be used to programmatically determine if the value in the box is a valid option. (Useful for verifying the text entered is an existing value option.)
• Dropdown options now correctly re-position themselves on each display (which means they adjust for changing to the DOM)
• Dropdown box defaults to the width of the input field its attached to(you can manually specify a larger width as well)
• Better emulates Windows autocomplete boxes (for example: hitting delete and retyping the same box will now bring back the dropdown menu)
• Miscellaneous bug fixes

You can see the demo and download the code here:
Dan G. Switzer's AutoComplete Mod

Great work Dan!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

So I looked into the util.js and found a link to the online DWR reference. In there, Joe Walker shows a snippet of code that can do exactly what I wanted; display one of those animated Ajax indicator images! So, I figured I'd share the code with all of your guys & gals. Here it is:


/**
* Setup a AJAX image indicator.
* Added by Rey Bango (8/16/06) based on code in the URL below
* @see http://getahead.ltd.uk/dwr/browser/util/useloadingmessage
*/
DWRUtil.useLoadingImage = function(imageSrc) {
var loadingImage;
if (imageSrc)
loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.setPreHook(function() {
var disabledImageZone = $('disabledImageZone');
if (!disabledImageZone) {
disabledImageZone = document.createElement('div');
disabledImageZone.setAttribute('id', 'disabledImageZone');
disabledImageZone.style.position = "absolute";
disabledImageZone.style.zIndex = "1000";
disabledImageZone.style.left = "0px";
disabledImageZone.style.top = "0px";
disabledImageZone.style.width = "100%";
disabledImageZone.style.height = "100%";
var imageZone = document.createElement('img');
imageZone.setAttribute('id','imageZone');
imageZone.setAttribute('src',imageSrc);
imageZone.style.position = "absolute";
imageZone.style.top = "0px";
imageZone.style.right = "0px";
disabledImageZone.appendChild(imageZone);
document.body.appendChild(disabledImageZone);
}
else {
$('imageZone').src = imageSrc;
disabledImageZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledImageZone').style.visibility = 'hidden';
});
}

Just drop that into util.js, clear your cache and reload your page. It should then be accessible.

All you have to do now is change your code to call the new function right before executing your Ajax call (like this):


DWRUtil.useLoadingImage("/images/ajax-loader.gif");

DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'publishFeed', fid, doEchoResult);


If you simply specify it like that, the function will create a DIV with an ID of “disabledImageZone” and an image with an ID of “imageZone” and will display the indicator in the upper right hand corner of the browser. If you want to have some flexibility in where your Ajax indicator will display, then just create your own DIV with a child image inside wherever you want the indicator to appear (like this):

I hope this helps someone out and thanks again Rob, for building AjaxCFC. Its awesome.

Rey…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Adobe has jumped onto the AJAX bandwagon by releasing a new AJAX framework called Spry along with several demos that show how to use it.

I'm not sure how it compares to script.aculo.us or prototype but if they build hooks into CFML that make it even easier to build RIAs, they'll have me sold.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Well, Dynamic Drive just came out a new site that is catering to Cascading Style Sheets and DHTML!! Its called the Dynamic Drive CSS Library and it is hella cool. You get free code for everything from arrow comment boxes like NetFlix uses to cool CSS Tab menus!

This is really a cool find and I highly recommend it to new and experienced web developers.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.