Free, an interview with Jesse James Garrett, the man behind AJAX

DMXzone.com held a special interview with Jesse James Garrett the man behind AJAX. Jesse James thought of the term AJAX  to describe a technological approach that seemed promising without having an idea how popular it would ultimately become.

In the interview we we learn more about Jesse, his company and his thought on usability, AJAX and related technologies. Jesse explains how he thinks developers should use AJAX and he gives his view on how to prevent usability mistakes.

Read on for an extract of the interview, you can read the complete interview in the October 2006 e-Magazine.

Five star rating system Part 1

Introduction

Everyone likes to feel that his opinion counts and often finds enjoyment expressing it to others. In that sense Internet has certainly come as a handy invention. Various forums, chat rooms, guestbooks, blogs and finally, for those with unapplied acting talents, podcasts – all for a chance to say (or type) something we feel absolutely MUST be said (or typed J).

Apparently, to encourage us exercise our freedoms more often many web sites, including DMXzone, are giving us opportunity to rate their content, products or services. With this great feature we can both send our feedback and learn from the experience of our peers on a particular item.

Introduction to Ajax

Introduction to Ajax

Ajax is a common approach to building Web 2.0 applications. Ajax is not a technology in itself, rather it’s a combination of existing technologies – XHTML, CSS, DOM, XML, XSLT, the XMLHttpRequest object and JavaScript. Most of these technologies have been around for quite a while. It’s the way they’re used together that creates the Ajax approach to developing Web applications.

In this article, I want to introduce you to Ajax. I want to cover:

• An explanation of the term
• The key technologies involved
• The processes used in Ajax-style applications.

It’s worth remembering that Ajax is a client-side technology so it can’t carry out server-side tasks such as accessing databases or sending emails because of security constraints. You can use Ajax on the client-side and couple it with a server-side language such as PHP, VB .NET or C# if you need to carry out these types of tasks.

Multi Page Forms on One Page

Don't you hate it when you fill in a long form, forget one field and then find the form has cleared down? If you code like that, you guarantee that users will stay away in droves.

But often you are faced with the prospect of a very long form. You could certainly break up the form into two, three or even four pages, but this means you have to deal with the data that was filled out on previous pages.

This tutorial uses JavaScript to make the form appear as if we were moving through a series of steps (to keep the form manageable for user) while never leaving the page. Then we can just submit once and be done. The user can go backwards and forwards and data is never lost, and a progress meter is also shown so that the user knows how far (s)he is through the process.

Ajax; The "Yellow Fade" Technique

Ajax; The “Yellow Fade” Technique

With the rise of Ajax applications on the internet, user interface designers suddenly found themselves wanting some kind of technique to let the user know that something had changed on a page. They needed this because users are used to pages reloading and then looking for their changes. However, since Ajax applications rarely reload pages (breaking the convention), some way to tip off the user that an element has changed was desired.

This technique was made widely popular by 37Signals’ use of it in their spiffy applications such as Basecamp. The way it works is when a user makes a change to an element on which the developer wants to cue them, the element is tagged with the function that essentially highlights it in a light yellow to call attention to it, and then slowly fades back to transparent. It’s a nice subtle effect that does the job nicely.

Of course like any effect like this, particularly an animation, care must be taken not to overuse and abuse. When every page has five yellow fading elements the effect loses its worth quite quickly.

The technique is surprisingly simple and easy to implement. So much so that this will be the shortest article I’ve written, but I think you will find the effect a worthwhile addition to your Ajax library. There’s really no way to show a screenshot of an animation, so go ahead and take a look at the html page and load it up in a browser. In the text field marked “Title of Project”, change the words in the text box and then tab out or click out of the text box, just as if you had made a change in an application.

You will see the box containing the text field change to yellow and slowly fade to white. And you thought your life lacked excitement!

Building Rich Text Editor. Part VII

Introduction

This is the final article of the series on building online Rich Text Editor.

While creating the application in the course of the series (Part I to Part VI) we have covered various development techniques utilizing both client-side and server-side technologies.
At this point our Editor resembles a lightweight desktop text editor not only by look and feel but also the impressive array of tools for editing, formatting and file manipulations.

In Part VI we have built the Server File Browser – a small widget for browsing dedicated web folder. This tool is designed to work in a manner similar to Windows Explorer, so we can load and save HTML-based documents from/to the server. Now we can select or enter the name for the file we want to open or save, but the actual functionality for saving and loading has not yet been built. We will cover this gap in the current article.
We will also tie up some loose ends so our application can be complete.

Building Open and Save functionality

We are going to start exactly where we left off – in the Server File Browser module.

At this stage when we run the application in the browser we can open the Server File Browser and select or enter the name for the file to be opened or saved.

Once a file has been selected the dialog will close and call the corresponding function (either openFile() or saveFile()) located in the main window. This is the function that performs the task in open_save.php:

Although at this point both functions are in place on the Editor page, they contain no code –something we need to take care of.

Building Rich Text Editor. Part VI

Introduction

This is a Part VI of the series on building online Rich Text Editor.

In previous articles (Part I to Part V) we have developed various application features from editing and formatting to saving the results to the hard drive and forwarding to an email recipient as a message or an attachment.

This iteration was intended as the last one, but the topic (Opening and Saving files from the server) turned out to be so extensive that I decided to dedicate almost the entire article to building the Server File Browser which will be used for entering file name when saving as well as selecting files when opening from the server.

In the next iteration we will complete developing the Open and Save functionality while covering the actual procedure of reading and writing files to/from the server.

Building a Rich Text Editor. Part V

Introduction

This article is Part V of the series on building online Rich Text Editor.

In Part I, Part II, Part III and Part IV we have built most of the application features. In this iteration we will cover file manipulation functionality: creating, printing, saving files locally (to the user’s hard drive) as well as sending the document as an email message or an attachment. 

Building Rich Text Editor. Part IV

Introduction

This is the forth article in the series on creating a cross-browser online Rich Text Editor. In Part I, Part II and Part III we have created the application layout as well as built most of the functionality. In this iteration we will style the editor interface so that by look and behavior it resembles an Office application. In addition we will further modify the toolbar so that it reflects the selection by flipping corresponding interface buttons to “on” state if the formatting has been applied to the selection.

Office Style

First of all let’s make the look of our application toolbar a little more believable.

My choice was the Microsoft Office look. You are of course by no means limited to that.
As always, once you understand the principle you will be able to make up your own “skin” for the toolbar.
At this point all we have to do is modify the CSS declarations on the page to immediately change the toolbar’s appearance.
The new declarations are marked below in bold.

Building Rich Text Editor. Part III

Introduction

In this article we will continue developing cross-browser compatible Rich Text Editor. In the first and the second articles of the series we have designed the layout for our editor and developed most of the text editing and formatting features.

In this iteration we will add the functionality that would allow user to insert HTML elements both arbitrary (such today’s date) as well as natively supported by the designMode feature (images, links, etc).

Building A Rich Text Editor. Part II

Introduction

In the previous article of the series we have built some of the functionality for an online Rich Text Editor.

Today we will continue with the development and add more features to the application.

Before we dive into the development I would like to mention something rather important:

In the previous article I have stated that the designMode feature is not compatible with Macintosh Safari browser. One of the readers has pointed out to me that the Safari compatibility has been in place for a while now and the compatible editors are somewhere out there.
Yes, the “good news” is that the designMode feature has been built into Safari since version 1.3.
The bad news, however, is that the support for the feature is very limited and buggy. You have to go out of your way to build the most basic editor features which are limited to approximately 10% of what you can do in other browsers. So, in my personal opinion it’s just not worth the efforts (as you can tell I am not a huge Safari fan).
Now, I must also admit that I haven’t had a chance to test the feature with the newest Safari 2 (which by the way can be installed only on Tiger OS), so if you are using one and have found that the support for the designMode has drastically improved that really is a very good news.

Building Rich Text Editor. Part I

Introduction

The new wave of buzz-word technologies has shaken the web community once again “splashing” old-timers and newbies alike with their share of hype and confusion.
There is no surprise in the fact that some of the cool “new” ideas will turn up as nothing but marketing fluff. History repeats itself: once again the “mummies” are being “re-painted”, re-labeled, and resold as something brand-new and out of this World.

At the same time some of the “re-invented” technologies, which have been previously used just occasionally have now been re-evaluated and put to work by many developers.

It is mainly due to the improved browser support as well as affordable prices on high speed Internet and higher end machines that we can now dig out those “dusty old tricks” waiting on their shelves for the better times.

One of those “new technologies” is the designMode DHTML feature or MSHTML editor as it is called in IE. It has been implemented in Internet Explorer since version 5. Using this feature you can in no time build your own Rich Text editor creating an illusion of a desktop application being embedded into your web page.

Although the feature has been around for a few years it hasn’t been used as often as it could be for a very apparent reason: the lack of support by browsers other than Internet Explorer (PC only).

A year ago, or so, guys at Mozilla have decided that the feature was too sexy not to include in the new foxy Firefox, the version 1.0.2 has come out with the designMode built-in.

Things got even better when Opera 9 beta hit the market with the support for the feature. Although still buggy and in the beta, the chances are the new Opera will have the full designMode support.

This makes it “three”! There are still Safari (IMHO not a browser :-)) and Internet Explorer for Macintosh, but with the long-awaited departure of the latter in January 2006 and the great new Firefox for Mac, Safari is no longer a threat.
With the three major browsers now supporting the feature we can now safely put it into our toolbox.

In this series of articles we will use the designMode feature to build an online Rich Text editor.  We will heavily rely on CSS to mimic desktop application interface and at the end we will use AJAX to build the functionality for sending the created “document” as an email attachment, saving it to the server and to the hard drive.