From Ajax Patterns

Contents 1 Background 2 Katas

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

Background

These are short projects, or "katas". The intention is that you can gain and build on your Ajax props by picking one of these and devoting 30-60 minutes to playing around with it. The "kata" thing means that you can keep coming back to the same problem and trying out new styles and technologies. For instance, would it be any more elegant, any faster, any easier to develop if you use a JSON Message instead of an HTML Response or an XML Message.

This page is publicly editable - please add your own katas.

Katas

• Dictionary Search the Database for every keypress in the Textbox given in the form to type the Search String.

• File System Navigator Navigate a server-side file system. Bonus points for sanely displaying file contents.

• Search Portlet Build a portlet to access your favourite web service, using a Cross-Domain Proxy or On-Demand Javascript if the web service happens to offer a compatible service (such as Yahoo's JSON API). Results should be displayed inside the portlet, without any page refresh.

• Drag-And-Drop Cart Create a shopping cart that allows items to be dragged in and out, and uploads details to the server. Note that several libraries support drag-and-drop.

• Am I Ajax Or Not Create a simple clone of AmIHotOrNot.com. Show two random images (or even just random numbers), let the user click on their favourite, and ensure the server records their choice. For bonus points, show scores in the browser, e.g. offer a popup showing the number of "wins" for the two items being displayed.

• Whack-A-Mole Game Moles appear at random places on the page and the user must quickly eradicate them by mouse-clicking on them. Provide a timer and report the user's score.

• Image Slideshow Present a sequence of images using Ajax for navigation. You might also include some visual effects.

• "Website Tuning" Bookmarklet Build a bookmarklet that allows the user to tweak the page's style settings; pop up a dialog with fields such as background colour and font size. Bookmarklets aren't regular Ajax applications, but are still a great way to play with Ajax technologies.