Max Kiesler – Designer

Using moo.fx and prototype.lite.js, this javascript slideshow system allows you to have a simple and smooth (cross-fading…) image slideshows and/or showcases on you website.

Website: http://smoothslideshow.jondesign.net/

Even though AJAX wouldn’t ever have become so popular if the Javascript world hadn’t suddenly exploded with mature development and testing tools, there’s little information on how to be a really good Javascript programmer. This talk is for everyone who feels their Javascript skills just aren’t up to snuff.

Website: http://www.slash7.com/articles/2006/07/26/javascript-boot-camp-tutorial

AjaxWp is a lightweight JavaScript enhancement that adds AJAX functionality to WordPress blogs speeding up load times, increasing the responsiveness of the user interface and giving the blog an overall cooler look. Out of the box AjaxWp requires minimal configuration and no additional markup, other than the script inclusions in the header file and a support PHP file. This allows AjaxWp to degrade gracefully and leave the blog fully functional even for users with JavaScript disabled.

Website: http://www.giannim.com/blog/index.php?page_id=13

FlickrShow is a simple slide-show tool that allows you to display images from a Flickr photoset on your web site. It is easy to use – photographs can be displayed by adding a few simple lines of HTML and Javascript code to your site. It is also unobtrusive and compact, the script only adds an additional five kilobytes to your page.

Website: http://www.flickrshow.com/

Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX. This page, however, is not about AJAX (or any other buzzword). It is about rather simple user input method — mouse wheel.

Website: http://adomas.org/javascript-mouse-wheel/

A picture’s worth a thousand words, right? So spice up those plain old text links with Link Thumbnail, the second tool from the arc90 lab. A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.

Website: http://lab.arc90.com/2006/07/link_thumbnail.php

The Carousel widget provides a way to display HTML elements either horizontally or vertically with or without animated scrolling. The loading of elements is separated from the component allowing the carousel to manage static HTML elements or dynamically generated content (DHTML, with Ajax for example.) The examples below illustrate the various ways to create and manage the carousel.

Website: http://billwscott.com/carousel/

There are many search tools for finding new music on the web. Just type in, “artist, genre or title and you’ll find some results. Ho Hum. I’ve been forced to use this same music search paradigm for years. However, there is a new breed of music sites cropping up that will give you new ways to discover new music. “Musiclens enables users to find pieces of music using very vaguely described criteria, such as loudness (perceived volume), mood or purpose. The search or recommendation query can be enhanced or limited by adjusting the ten navigation control sliders”. This site works well and has a great visualization tool.

Read more

Microformats are a new way to embed structured data within standard XHTML code. Discover how to read and write the new microformats for the Web. Every once in a long while, I read about an idea that is a stroke of brilliance, and I think to myself, “I wish I had thought of that, it’s genius!” Microformats are just that kind of idea. You see, for a while now, people have tried to extract structured data from the unstructured Web. You hear glimmers of these when people talk about the “semantic Web,” a Web in which data is separated from formatting. But for whatever reason, the semantic Web hasn’t taken off, and the problem of finding structured data in an unstructured world remains.

Website: http://www-128.ibm.com/developerworks/library/x-microformats/?ca=dgr-lnxw01Microformats

The Stockholm based website Gapminder provides wonderful interactive content visualizations of important global trends. This non-profit provides information from universities, UN organisations, public agencies and non-governmental organizations to graphically show us the state of what’s happing in our world. The site looks at 16 different human conditions and plots them by year and by region. Conditions include, urban population, life expectancy, military budget, and 13 other world conditions you should know. Currently, this is the most important content visualization site for consciously minded world citizens. Please visit this site to see what’s really going on in the world you life in. Giant hats off to the developers, Ola Rosling, Anna Rosling Ronnlund and Hans Rosling!

Read more

When looking at my own Rails code and that of the community as a whole, I often see places where certain Rails techniques could have been used, but weren’t. As much for my own memory as yours, I thought I’d list down some Rails tricks and tips that can make your application or code more efficient:

Website: http://www.rubyinside.com/19-rails-tricks-most-rails-coders-dont-know-131.html

One of the coolest things about developing ajax-enabled applications and sites is the level of interactivity that you can bring to your users. And perhaps one of the most crucial aspects of this process is adding activity indicators to your site. While a lot of ajax requests can be very fast, it’s still important to let your users know that something is happening.

Website: http://www.gen-x-design.com/archives/ajax-activity-indicators-make-them-global-and-unobtrusive

The problem with most menu systems is that they’re really touchy whether you’re too fast or slow with the mouse. The trick is to use a timeout with the effect, so it will wait a fraction of a second to pop-up, and a fraction of a second to go away…just enough to make the effect feel solid and not finicky.

Website: http://www.pjhyett.com/articles/2006/07/05/timeout-your-mouseovers#

A former student asked me a few days ago how I learned Ruby on Rails. The answer was that I simply read alot of great tutorials. So in the spirit of sharing, here are the 12 tutorials that I found most useful.

Website: http://www.digitalmediaminute.com/article/1816/top-ruby-on-rails-tutorials

quickSub is a Javascript function that adds intelligence to the Jason Brome’s RSS feed feed button on your web page. Just roll your mouse over the example, and you’ll be instantly greeted by one-click subscription links to the most popular aggregators.

Website: http://www.methodize.org/quicksub/

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Website: http://www.doknowevil.net/litebox/

Most of the sites that I’ve featured recently that have to do with content visualization have really been about deep discovery. If you take that notion and apply it to a search engine you have mnemo map. With mnemo you can search Yahoo!, flickr, and YouTube by tags, synonyms and translations for any search term. mnemo, “combines the technologies of social networking, search engines and other data sources to help you formulate search queries and find really relevant information”. I have to say the site is a very refreshing way to search! Thanks.

Read more

Application Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.

Website: http://www.thinkvitamin.com/features/ajax/go-forth-and-api

Lovelines is one of the most unique content visualization ideas I’ve seen recently. “Using a data collection engine created by the artists for their recent collaboration, We Feel Fine – wefeelfine.org, Lovelines examines thousands of blogs every few minutes to find expressions of love and hate, posted by all manner of people. When it can, Lovelines identifies and saves the age, gender, and geographical location of the person who wrote the post, and then presents that information along with the post.” Lovelines shows it’s data in words, pictures and superlatives. Words and pictures present individual examples of love and hate. Superlatives provides a daily zeitgeist of the most loved and hated things. All in all a very amazing content visualization of how the blogosphere feels about love and hate on a up to the minute basis.

Read more

When I first started posting about AJAX over a year ago, many of the posts I found were about definitions, theory or examples. Today, most of the links that I find are tutorials and I applaud this. The following is a list of what I consider to be the best and most helpful AJAX tutorials I’ve found in the last two months.

Please let me know through email or a comment if you know of any other great AJAX tutorials and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.

AJAX and API Tutorials
Go forth and API
Application Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.

MapStats
Blog Flux MapStats is the coolest way of tracking your website visitors. Not only does it provide the normal statistics and graphs, we have incorporated the system into Google Maps! Instantly see where your latest visitors are coming from, and find out what they are looking for.

Working with the Google Web Toolkit
The Google Web Toolkit (GWT) is, in essence, a JavaScript generator. The interesting thing is what this JavaScript is generated from: Java. GWT takes Java code written against a special API and converts it into browser-runnable Ajax code. If that weren’t enough to make it cool, it also includes a test harness (see Figure 1) that will execute the Java code inline with a test browser, allowing you to step-through debug (see Figure 2), profile and unit test your Ajax front end in your favorite IDE or at the command line.

AJAX Auto-Complete Tutorial

Using Ajax Agent and PHP for Auto-Complete
Description: In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. Although the state of this Ajax Framework is questionable it is so far the simplest and easiest framework I have found.

AJAX Editing Tutorials
AJAX Edit In Place With Prototype
Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.

Easy AJAX inline text edit 2.0
As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.

AJAX Flash Tutorial
Incito – Interactive Everything

SwfJax is a new approach to asynchronous JavaScript and XML applications using revolutionary Flash technology. SwfJax uses a lightweight SWF (Adobe’s Small Web Format or simply – Flash) engine to get XML data from the server and xPath (XML Path Language) to address a part of data it has retrieved. Data can be returned back to Javascript as an Array. You can also send multiple xPath queries at once.

AJAX Form Tutorial
HTTP Authentication with HTML Forms
Authentication in Web applications has been highjacked, HTTP defines a standard way of providing authentication but most apps use the evil spawn of Netscape, otherwise known as cookies. Why is this? Cookies aren’t designed for authentication, they’re a pain to use for it, insecure unless you know what you’re doing, non-standard, and unRESTful.

AJAX Gallery Tutorial
Pyxy-gallery
Pyxy-gallery is a PHP script to make an image gallery. There are many other scripts to do this, but this one is different. Maybe even better.

AJAX and Java Tutorials
Ajax for Java developers: Exploring the Google Web Toolkit

The recently released Google Web Toolkit (GWT) is a comprehensive set of APIs and tools that lets you create dynamic Web applications almost entirely in Java(TM) code. Philip McCarthy returns to his popular Ajax for Java developers series to show you what GWT can do and help you decide whether it’s right for you. (Note: You can now download an updated ZIP file containing the article source code.)

Project jMaki
jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component.jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets. jMaki currently provides bootstrap widgets for many components from Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies. This project also includes a set of AJAX widgets with a focus on Web 2.0 such as a RSS widget, a del.icio.us Bookmark widget, a Chat widget, and many more to come.

AJAX and Javascript Tutorials
15 Days of jQuery
If your project calls for AJAX or DOM scripting and you need it done quickly, with minimal fuss, and you believe in keeping things simple, then jQuery might be perfect for you.

jsScrolling
Nice javascript text scroller with examples.

Javascript Motion Tween

Nice tutorial on how to do a purely javascript powered motion tween.

Narrative JavaScript
Narrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous operations. This makes writing asynchronous code sequences easier and increases code readability.

Serving JavaScript Fast
The next generation of web apps make heavy use of JavaScript and CSS. WeaO(TM)ll show you how to make those apps responsive and quick.

AJAX Library Tutorials
15 Things you can do with Yahoo! UI
In this article I’m going to share some of my short stories, poems, and random sonnets of affectionate escapades I’ve had with JavaScript during the last few months, which I’ve built using the Yahoo UI utilities. Some are rather embarrassing, others useful, and yet others I feel are just downright sexy. If you see something you like, feel free to take it, tweak it, and make it your own. This is what some poetry afficionados of secret societies would call a poetry slam. So for want of a better phrase, this can be a code slam.

JSXML XML Tools

JSXML includes REXML, a high-performance parser that doesn’t mind if you throw 2000 lines of (well-formed) XML at it, a builder with a unique API that invites the coding of GUIs (graphical user interfaces) around it, and an iterator that makes costly recursion unnecessary. It was released under the LGPL (it’s free for private and commercial use, no strings attached) and has been downloaded over 300 times.

Cheat Sheets for the YUI Utilities
The YUI development team has begun drafting some cheat sheets — inspired by the handy references published by ilovejackdaniels, among others — that give you a one-page dashboard of documentation for each of the library’s components.

AJAX and PHP Tutorial
Developing PHP the Ajax way, Part 2: Back, Forward, Reload
major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part “Developing PHP the Ajax way” series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.

AJAX Programing Tutorials
AJAX Counting Nightmares

I’ve been very vocal about the AJAX counting issue; I’ve written several articles, spoken on panels, and pushed the IAB to update the impression guidelines on a very fast timeline. There’s been interest and response, and the IAB is beginning to act. But everyone involved in the process realizes this will take time. So today, my recommendations for how developers of AJAX Web pages and software applications that include advertising can deal with the unique counting issues.

AJAX Feedback Mechanism
One thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.

Building a Pagination System with AJAX
You know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You’ll know how to do that by the end of this series! This first article shows you how to build the user interface.

AJAX and Prototype Tutorials
Prototype Window Class : Introduction
This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. It has been tested on Safari, Camino, Firefox and IE6.

Prototype Window Class : Samples

Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().

Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form.

Script# Prototype
Script# brings the C# developer experience (programming and tooling) to Javascript/Ajax world. This post shares a prototype project for enabling script authoring via C#..

AJAX in Real Time Tutorials
Introducing AjaxSpy
While playing with the new RJS templates in rails, I found it difficult to know what was actually being returned from my requests. Thus, AjaxSpy was born. It’s a simple JavaScript and CSS file. All you need to do is include the js file in the header of your document, the css is automagically included (must be in the stylesheets directory). The script relies on Prototype 1.5.0rc0, and for it to be sexy you need the Scriptaculous effects library. You can include it conditionaly based on params in the query string, or do some fancy session stuff.

Mapping website visitors in real time

A while ago I had an idea. What if I were to try to geographically locate all the visitors to my website, and tag their locations on a map? Using Google Maps, Ajax, MySQL and some PHP, it came together quite nicely.

AJAX Scalability Tutorials
Scalable AJAX
AJAX done well can reduce server load and bandwidth, but I’ve seen a lot of people jumping on the AJAX bandwagon who don’t really consider what the impact is on the back-end. Done badly, AJAX can bring a server to its knees.

AJAX Sorting Tutorial
SortedTable example
SortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows.

AJAX Tree Tutorials
Editable JavaScript TreeGrid

EJS TreeGrid is DHTML component written in pure JavaScript to display and edit data in table, grid, tree view or grid with tree on HTML page.

SilverStripe AJAX Tree Control
Nice AJAX tree tutorial and script using Prototype and Behaviour libraries.

AJAX UI Element Tutorials
Bubble Tooltips
Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I’m presenting here a translation for the international audience.

More Rounded Corners with CSS
More rounded corners: Taking the “Sliding Doors” approach to fluid, rounded-corner/border/shadow-based dialog boxes, with examples .

AJAX Website Tutorials

AJAX Desktop Tutorial
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.

Ajax Tabs Content Script
This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.

XMLHttpRequest Tutorials
AJAX:Getting Started – MDC
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.

AdvancedAJAX 1.1
AdvancedAJAX is a JavaScript object allowing to use XMLHttpRequest object easier and speeding up development of AJAX based projects. It consists a bound of methods helping creating queries, error handling, usage with HTML forms as well as connection timeouts and reconnecting.

Fjax – a lightweight methodology for Ajax style development
Fjax is a technique focused on drastically streamlining the XML handling layer of web 2.0 applications. Picture Ajax’s XML parsing and handling with less than 65 lines of code! It’s not a replacement for toolsets that provide presentation-layer visual gizmos. Think of it as a new engine to put under the hood of all the great widgets that are already out there.

Responsible Asynchronous Scripting
Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.

XmlHttpRequest Debugging for IE
Since I wrote the original XMLHttpRequest Debugging user script for Firefox (screenshot), almost a year ago, it has received a lot of positive feedback and a number of you expressed interest in having the tool support IE, to ease your AJAX development. Finally, here is a port of the script to run on IE, in the form of a bookmarklet