Rey Bango

Web developer, honey badger

40-60% of Yahoo's Users Have an Empty Cache Experience

I'm re-submitting this post since I had to blow away the original one when I had the HTTP compression issues. The original, posted on August 19, 2007, can be found via Google cache:

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.

ColdFusion 8 Ajax Controls: A Little Thought Can Save Your Butt

ColdFusion 8 is looking very hot and its gotten a tremendous amount of much deserved attention. Having done Ajax development with other tools, I'm obviously very interested in the Ajax widget tags included in CF8.

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!

jQuery Ajax AutoComplete Redone by Dan G. Switzer

Dan G. Switzer of qForms fame has recently been cranking up code using the jQuery Ajax/JS library.

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!

Adding an Ajax Indicator Image in AjaxCFC

I've been using Rob Ghonda's AjaxCFC more and more and the one thing that I wanted was the ability to define an Ajax indicator image.

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…

AJAX Framework from Adobe!!

AJAX is definite hot when it comes to the web but it takes some know-how to navigate Cascading Style Sheets, DHTML, the DOM, JSON and all of the other things that go into the whole Web 2.0 experience

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.

New to CSS & DHTML? Check this out!

I've used Dynamic Drive on several occasions when I've needed some nice JavaScript code to get me out of a bind. And I have to say that its one heck of a JavaScript resource.

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.

Sponsors



Learn JavaScript!

What to Read to Get Up to Speed in JavaScript.

The best books & blogs for learning JavaScript development. Broken down by experience levels!


My BIG LIST of JavaScript, CSS & HTML Development Tools, Libraries, Projects, and Books.

Constantly updated with the latest and greatest tools. Check it out!

Categories

Rey Bango is Stephen Fry proof thanks to caching by WP Super Cache