Thanks, Mail Chimp crew, for sharing the info with all who are interested.

If you want to compress your own JavaScript or CSS, there are a host of utilities out there for just this task. See comments on this blog post for a laundry list of options.

Jeremy Keith, Bruce Lawson, Rob Cherney, and many other JavaScript developers have been advocating best practices that address this issue for some time. It seems 2006 was the year we sobered ourselves after binging on inaccessible scripting techniques. Many great articles were published bringing us back to our senses, preventing us from repeating our terrible development practices of the pre-standards 90′s. The resolution to the problem is to progressively enhance a web site that functions properly without JavaScript support.

Rob Cherney demonstrates how to progressively enhance an HTML form that will function with JavaScript turned off, and will be enhanced if JavaScript is available. I’ll demonstrate how to progressively enhance a text link that makes an Ajax call to the server. If JavaScript is enabled, the href attribute is disabled and Ajax will load content from another source into a div for display. If JavaScript is disabled, the hyperlink works as usual, and directs the browser to another page where the same content is viewable. A fancy interactive, animated interface created with DOM scripting could use this approach, and gracefully degrade to a typical multi-page site that search engine spiders would have no trouble crawling.

A hyperlink can be easily disabled with a “return false” event as is seen below.

[html]Have Your Cake and Eat It Too[/html]

The onclick event will call a function then return false, preventing the hyperlink from firing. This is a very simple demonstration of progressive enhancement in action, but we can do better still. A search engine spider would navigate to page.php where it could find more content to index, but in a real world implementation of this technique, it would be advisable to attach an event to the hyperlink unobtrusively from an external script rather than from an event handler that mixes behavior and structure. By assigning a class to the link and using JavaScript to find elements with this class name you can separate behavior and structure resulting in more maintainable code, and external code that can be cached or even skipped by search engine spiders resulting in faster parsing (spiders appreciate this). I’ll take the functionality a step further to display Ajax retrieved content in a div tag when the link is clicked.

[html]
Have Your Cake and Eat It Too

[/html]

[javascript]

[/javascript]

The id of the div is placed in the link tag using the rel attribute indicating the area to place the content returned by the loadContent() function. When attaching the click event to all hyperlinks with the class "progressive", the function also finds the id of the div where the Ajax content will display and passes it on the loadContent() function.

You can take a look at the finished example, and download the code archive to see how it works.

Because they are a bit late to market with their framework, I’m not sure how willing most people who are already using frameworks will be to abandon the ones they have already grown accustomed to, but people who are just getting started with JavaScript frameworks and Ajax may find this option especially enticing for its ease of use. Here’s how Adobe wants to position themselves in the framework world:

‚ÄúAs we looked at the landscape of Ajax frameworks, we realized that many of them were more oriented to the skills of a programmer and were focused on application development. Based on the needs of the design community, we wanted to put forth an approach that is very “HTML-centric” to help them add basic interactivity to their page designs.‚Äù

Spry FAQ

You may also find his presentation on Hijax equally as interesting, which identifies the Accessibility and Usability shortcomings of Ajax and offers an alternate way of using it to be backwards compatible and allows it to gracefully degrade.

var pars = 'address='+escape($F('address')) + '&firstName='+escape($F('firstName')) + '&lastName='+escape($F('lastName')) + '&phone='+escape($F('phone'));

You can see that you can append as many or as few inputs from your form by just extending the GET string passed to the PHP script. Notice I’ve added the “&” before the next parameter names as is required in any GET string with more than one variable included. Of course you would need to adjust your MySQL table to include these fields, and change storeAddress.php to receive the values as well.

$address = $_GET['address'];
$firstName = $_GET['firstName'];
$lastName = $_GET['lastName'];
$phone = $_GET['phone'];


$addresscheck = mysql_query("SELECT * FROM mailinglist WHERE email='" . $address . "', firstName='" . $firstName . " ', lastName='" . $lastName . "', phone=' . $phone . "' ");

It’s also quite easy to modify this technique to work for things like contact forms, or user input in a CMS by simply adjusting your form, and the references to the field names. The principles are still the same.

If you are interested in other useful Ajax tools, you may want to check out Dustin Diaz’s Ajax contact form. It’s pretty clever, and packed with nice effects, but seems to struggle to work in Opera. It’s a pretty sophisticated example of a contact form.

A word of caution, it’s pretty easy to get swept up by the allure and ease of implementation of many Ajax/DOM scripting tricks. Always ask yourself how it benefits or hurts the user experience. If you find yourself adding features because they are cool, yet they negatively impact findability, accessibility, or cross-browser use then you probably should reconsider. James Edwards has written a sobering article about Ajax and screen readers (lump search engine spiders in that group too as they are equally as blind) that may bring you back down to earth about the Ajax trend. I should also mention that my article is actually backwards compatible for those without JavaScript enabled, giving us the best of both worlds. The article also uses Ajax specifically to enhance the user-experience by making the impulse action of signing up for a mailing list faster and more convenient.

SitePoint also has a nice book on Ajax entitled Build Your Own Ajax Web Applications. This book is focused specifically on Ajax, not so much about connecting client-side to server-side scripts.

A very useful improvement to this script would be to tie into a mailing list management system via an API, which would allow you to store addresses to a system where you can later send HTML emails to your audience and track views, clicks and other important data. The system I use is Mail Chimp, which has a nice PHP class that makes tying into their API easy.