A Brief History of Ajax

Ajax is a conceptual technique. The technologies have been available for over 10 years, but Ajax adoption became widespread after Jesse James Garrett’s article in February 2005 which described the techniques and provided a great acronym: Asynchronous JavaScript and XML.

Despite its name, Ajax does not necessarily depend on asynchronous calls, JavaScript or XML. Today, Ajax is a useful term applied to any system that communicates with a back-end web server to update content without requiring a full web page refresh (although many marketing departments confusingly refer to Ajax when describing any type of animation or interactivity!)

Most Ajax systems utilize the XMLHttpRequest object which permits programmatic server communication. It was introduced by Microsoft in March 1999 when Internet Explorer 5.0 was released. The original implementation was an ActiveX object devised specifically for the Outlook Web Access system. Most browser vendors followed Microsoft’s lead and implemented XMLHttpRequest as a native browser object.

Many of the dynamic web applications we rely on today would not be possible without Ajax techniques.

Does Eolas Have a Valid Ajax Patent?

Eolas Technologies is the company that fought Microsoft over the use of embedded browser applets, such as Flash. Eolas won that case and were awarded over $500 million in 2003. For several years, IE had to show a ridiculous alert box whenever an embedded object was encountered in the HTML.

Eolas 7,599,985 is a continuation of the original patent and has the snappy title “Distributed hypermedia method and system for automatically invoking external application providing interaction and display of embedded objects within a hypermedia document”. It was filed on 9 August 2002 and describes Ajax-like systems. Here’s an excerpt:

A system allowing user of a browser program on a computer connected to an open distributed hypermedia [web page] to access and execute an embedded programming object. The program object is embedded into a hypermedia document much like data objects.

The user may select the program object from the screen. Once selected the program executes on the user’s (client’s) computer or may execute on a remote server or additional remote computers in a distributed processing arrangement.

After launching the program object, the user is able to interact with the object as the invention provides for ongoing interprocess communication between the application object (program) and the browser program.

The present invention allows a user at a client computer connected to a network to locate, retrieve, and manipulate objects in an interactive way. The invention not only allows the user to use a hypermedia format to locate and retrieve program objects, but also allows the user to interact with an application program located at a remote computer.

Interprocess communication between the hypermedia browser and the embedded application program is ongoing after the program object has been launched. The use is able to use a vast amount of computing power beyond that which is contained in the user’s client computer.

To most developers, the Eolas claim is absurd:

• Ajax is a programming technique — not a technology.
• Eolas did not define the name ‘Ajax’ or provide technical implementation details.
• Ajax technologies and techniques existed before the patent was filed. Microsoft’s first implementation of XMLHttpRequest was developed 40 months before the Eolas patent was filed, although it took several years for developers to realize its power. Prior to XMLHttpRequest, on-page server communication was still achieved using more rudimentary techniques such as IFrames or dynamic script injections.
• Ajax has been adopted by millions of websites — can Eolas file lawsuits against them all?
• The patent is vague and could be applied to a wide range of web page interactions.

However, it has been ruled as valid by the US Patent Office on three separate occasions. If Eolas win their infringement case, there is nothing to stop them taking out a lawsuit against … everyone.

Will Common Sense Prevail?

Who knows what will happen once the lawyers become involved.

I’m no legal expert, but it appears that Eolas have filed a US patent — which does not necessarily apply worldwide. Could we see a situation where US companies hand their web development and hosting to offshore providers to avoid a lawsuit? If that’s the case, perhaps Eolas should consider their impact on the US economy?

Does Eolas have a valid Ajax patent? Is this another good reason to abolish software patents? Read the Eolas Lawsuit press release and decide for yourself.

Our latest tutorial, The Easy Way to Install PHP on Windows sees SitePoint’s own Louis Simoneau putting version 2 of Microsoft’s Web Platform Installer (Web PI) through its paces.

Louis will demonstrate how to install PHP with the Web Platform Installer, and along the way will show how conveniently this tool can pull in different open source software packages and install them for you. You’ll learn, for example, how to grab MySQL, WordPress, and Drupal, and watch the Web PI install them all automatically. And therein lies the beauty of the Web PI—you don’t have to dither around configuring stuff yourself.

Louis also gives us a heads up about some of the other cool features, such as the excellent SEO tool, which can analyze your site or application. It’ll check for broken links and provide recommendations to improve the site’s search engine friendliness and overall performance.

The Web PI also has a caching extension for IIS, which improves web server performance and makes it a serious competitor to Apache for hosting PHP applications. Take a look and see what you think.

A huge thank you to Microsoft, who are our sponsors for the multiple choice quiz for this article—if you find the article interesting, be sure to check how closely you paid attention!

Article: The Easy Way to Install PHP on Windows
Quiz: Web Platform Installer Quiz

Image search/processing technology has also been an area that has been going through a bit of evolution over the past few years.

Cooliris brought us a nifty 3D spacial image search interface. What The Font brought smart image processing to font identification and IDEE have given us some amazing visual search tools with Tineye and Piximilar.

Last week we saw a fresh player jump into the the image search game with the launch of the GazoPa public beta.

Much like Tineye, GazoPa is a service that analyses the content of each image — the shapes, colors, tones and lines that make it up — rather than just inferring it’s content based on it’s file name and the surrounding content as most traditional images searches do.

However, GazoPa also adds a few interesting new strings to it’s bow.

Firstly, GazoPa allows you to sketch a rough image directly into the search panel which it will then try to match.

Of course, that’s OK in theory, but does it actually work?

In my first quick tests, yes, it seemed to do a reasonable job. I started out with a fairly detailed and distinctive drawing — a quick sketch of my iphone — and the results were certainly good.

I then gave it a more advanced challenge for its second test case — a simple line figure of a dancer — and the results were more mixed.

The current algorithm seems to emphasize the general composition over specific shape and line configurations. As such, most of the results mirrored my (unimportant) off-centered layout, more than the more important positioning of the figure.

That said, the fifth image presented on the results page (above) is actually a very good match.

I tend to think my second test is a more likely real-world use case, but this *is* a beta, so we’ll have to wait and see how things develop as they accumulate more data.

GazoPa have also released a free iPhone app to compliment their standard web service. The application lets you use match images created via either the camera or finger doodles.

If this works *well*, it’s quite simply a ready-made, stone cold, killer app for them. Can you imagine being able to identify and price an antique lamp with a quick pic on your phone? Or identify a dog breed? Or the architect behind a building. The mind boggles at the possibilities.

Throw in a Firefox extension and standard URL and keyword based searches and Gazopa have certainly come ready to play. It’s still raw, but looks promising.

Brooklyn-based web agency Arc90 describes the problem:

Reading anything on the Internet has become a full-on nightmare. As media outlets attempt to eke out as much advertising revenue as possible, we’re left trying to put blinders on to mask away all the insanity that surrounds the content we’re trying to read.

It’s almost like listening to talk radio, except the commercials play during the program in the background. It’s a pretty awful experience.

Fortunately, they have also produced a solution: Readability.

Readability is a browser bookmarklet that makes reading web pages simpler and more enjoyable. Those using small screens, such as netbooks, could benefit the most because the system strips the superfluous information and shows the main content in a single column of easy-to-read text.

To use it:

1. Visit the Readability page.
2. Choose your page style, text size, and column width (a preview is shown).
3. Drag the Readability link to your toolbar.

You can now surf to any page and hit the Readability icon to extract and view the main text. It’s not perfect, but it works most on most websites — I find myself using it increasingly often.

As a side note, the bookmarklet also provides an interesting assessment of web page accessibility. Certain development techniques can cause content to disappear; if Readability doesn’t show the page text, it may be that screen readers or Google will have trouble accessing it too.

What do you think of Readability? Does it work on your favorite sites? Will you use it?

However, this tutorial could only cover so much, so about six months ago we contacted some of the top web heavyweights—Derek Featherstone, Jina Bolton, and Tim Connell—to share their insights with us.

If you’ve been at any web conference in the past year, you’ve probably heard these individuals speak about web design at events like Web Directions, dConstruct, An Event Apart,and Webmaster Jam—this trio know what fancy is all about!

We’ve now compiled all their knowledge and best-practice advice into a practical, full-color book that will teach you how to create visually stunning and usable web forms, from start to end.

With Fancy Form Design, you’ll:

• learn the basics of grid design and typography
• discover how to use color and images effectively
• find out how to structure forms for maximum usability
• gain tips for writing useful instructions, errors, and advisory text to eliminate user frustration and form abandonment
• grasp how to style web forms using CSS to great effect
• master techniques for jazzing up forms using JavaScript—such as creating “multiple path” forms with conditional elements, password strength indicators, and autocompletes, and capturing day and month information

To grab your copy—in print form delivered to your door or as an instantly downloadable PDF—head to:

http://www.sitepoint.com/books/forms1/

Remember, order a second book and shipping is free to anywhere in the world!

One of the coolest innovations in ColdFusion 9 is its ability to make many of its services available as web services. This means you can drag and drop files from AIR to your desktop, and vice versa.

To demonstrate the image-manipulation capability, Kai will show you how to build a simple AIR application that will act as a front end for image processing tasks that are taking place on the server side.

Who said being manipulative was a bad thing?

After you’ve read the article, why not take the quiz (sponsored by Adobe) to see how much you’ve learned?

• Read the article
• Take the quiz

• GovHack, Canberra Oct 30 and 31 — produced by Web Directions
• Lonely Planet Hack Day, Melbourne November 7 and 8

GovHack is the first ever Australian Government-supported hack day, to be held at ANU Canberra. They’ll be providing power, wi-fi, food, caffeine, inspirational mentors, and the chance to connect with new collaborators. Cool prizes will be available as well, including a number of SitePoint books!

From the afternoon of the 30th, through the night, and throughout the 31st, teams of developers and designers will work on projects based on Australian government web based data sets and services. At the end of the event, teams will have 90 seconds to showcase what they’ve achieved in the day.

You’ll need to register to attend, though, so head over to the web site and do so before October 30.

Next, the first ever Lonely Planet Hack Day to take place on Australian shores will be jumping off November 7 at LP Headquarters in Footscray, Melbourne.

After the roaring success of their mobile hack day in London, and their own internal hack day, the folks at Lonely Planet are opening the doors for you to play around with their new API, and Open Social platform.

If that’s not enough incentive to attend, there’ll be free pizza, beer and other refreshments on offer throughout the event.

Places are limited, and you’ll need to register to attend, so hop to it!

Sun’s VirtualBox is ideal for testing different desktop environments (for example, browser testing), but I’ve discovered it’s also great for running a test server environment. Instead of setting up Apache, PHP, and MySQL right on your desktop machine, you can place them in a virtual Linux server. That way there’s no interference with your desktop, and you can ensure that your development environment is as close as possible to your eventual deployment environment.

With a virtual Linux server running inside your desktop operating system, you can SSH into it, upload files to it, load web pages from it–whatever you’d do with a real live server. And all the software you need is free and simple to configure. Let’s make a start!

Setting Up Shop

The first step is to download the VirtualBox client. Pick the version appropriate for your host system.

You’ll also want to grab a disk image for your Linux server. For this tutorial, I’ll be using the 64-bit version of Ubuntu server 9.04, but feel free to use whatever distribution you’re more comfortable with. Of course, you might need to adapt some of the instructions to your particular setup.

We could also use a desktop build, but since we’re only interested in the server functionality, it’s best to stick with a server build: we’ll save on memory because no graphical desktop interface is loaded.

Installing the Ubuntu Server

Start up VirtualBox and click New for a new virtual machine. Step through the wizard, making sure to choose the 64-bit version of Ubuntu (if that’s the disk image you downloaded). I used the defaults for every other option: RAM, disk size, disk type, and so on.

Now select your new VM and click Start. VirtualBox will ask you how to install the OS on your virtual machine. Since we downloaded an .iso, choose CD/DVD-ROM device from the Media Type menu and Image File from the Media Source menu, selecting your Ubuntu Server iso. As the system boots, you’ll be presented with Ubuntu’s installer. Choose your language, and then select Install Ubuntu Server.

Follow the on-screen instructions to install the server. Notice that when you come to partitioning your hard disk, the virtual machine only “sees” the disk image you created before. Feel free to use the whole disk. Later on in the process, the installer will prompt you to install additional software. For our purposes, we’ll install the LAMP server and OpenSSH server packages. This way we have everything we need for a fully functional web server out of the box.

When it comes time to reboot your new server, you can “eject” the installation CD by choosing Devices>Unmount CD/DVD-ROM from the VirtualBox menu.

Log into your new system with the username and password you chose during installation. It’s also a good idea to upgrade your system with:

sudo aptitude update
sudo aptitude safe-upgrade

Accessing the Virtual Server from the Host System

Now that our server is up and running, we want to be able to access it from our host system. We’ll set it up so we can SSH to it, transfer files to it via SFTP, and make HTTP requests to Apache.

To do all this we need to edit the xml configuration file for our virtual machine:

• On a Mac, the file is found at ~/Library/VirtualBox/Machines/<machine name>/<machine name>.xml
• On Windows, it’s inside the .VirtualBox/Machines subdirectory in your home folder.

So for my machine, which I’ve called “Ubuntu Server,” I’m editing Machines/Ubuntu Server/Ubuntu Server.xml

At the top of the file you should see an <ExtraData> tag. Inside that tag, copy in the following tags:

<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/HostPort" value="2222"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/GuestPort" value="22"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/Protocol" value="TCP"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/HostPort" value="8888"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/GuestPort" value="80"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/Protocol" value="TCP"/>

These lines configure VirtualBox to forward requests to specific ports on the host system onto other specified ports on the guest system. For SSH, we’re forwarding port 2222 of the host system to port 22 of the guest system (where OpenSSH is listening). The same principle applies to the Apache configuration items, with port 8888 on the host mapping to port 80 on the guest.

With that done, save the xml file and restart your virtual machine.

If the machine fails to start, it’s likely to be because of a network interface configuration problem. In the lines we added, we specified pcnet as the network interface. To ensure that’s what your virtual machine is using, right-click on it in the main VirtualBox window and click Settings. In the Network tab, select one of the PCnet adapters from the Adapter Type drop-down. You should be able to restart your virtual machine with no problems now.

Now if you open a browser on your host system and point it to http://localhost:8888/ you should see the default Apache “It works!” page. Great!

Similarly, to SSH into your new server, SSH to port 2222 on localhost with the username you set during the Ubuntu server installation. (If you’re on Windows, you can use the PuTTY SSH client to perform the same function):

ssh -l <username> -p 2222 localhost 

You’ll receive the usual “unknown host” security warning; type “yes” to connect and you’ll be prompted for your password. Upon entering it, you should be logged in to your server! Feel free to look around and make yourself at home.

While we’re still logged in, let’s do one more task: by default the Apache web root in Ubuntu Server is /var/www/, which your default user won’t have write permissions for. Let’s change that, so you can upload files to your web root with SFTP. Enter this command and hit return:

sudo chown <username> /var/www

To connect to your server with FTP, no extra configuration is necessary. OpenSSH gives you “free” FTP via the SFTP (SSH FTP) protocol. Most clients (FileZilla, for example) support it; just choose SFTP as the protocol, localhost as the server with port 2222, and your Ubuntu username and password. Choose /var/www/ as the default directory, and you should be able to transfer files to and from your server.

Let’s test that everything is working: create a php file named info.php containing the usual phpinfo call:

<?php
  phpinfo();
?>

Use your FTP client to upload that file to your server’s /var/www/ folder. Now point your browser to http://localhost:8888/info.php, and you’ll see the PHP info page. The System row at the top of the table will tell you PHP is running on Ubuntu.

There you have it! You can test server configurations, brush up on your sysadmin skills, and develop your web sites and applications in a full Linux server environment running inside your usual desktop.

I now have at least five separate primary accounts. Then there are another dozen or so accounts that forward to these. Finally, I’ve lost count of the number of webmail accounts I’ve registered. I used to consider these as ‘throwaway’ addresses, but they’ve become increasingly important. For example, anyone using Google systems such as Docs, Analytics, and AdWords, will almost certainly have a GMail account.

I suspect this is an issue that’s primarily encountered by freelancers and small business owners. It’s common to develop micro-businesses selling software or services from a variety of websites. I’m also regularly asked by clients to become a technical contact for their online systems (or webmaster as it used to be known). However, I’m sure email overload is becoming a frustrating issue for mainstream users too.

Applications such as Microsoft Outlook or Mozilla Thunderbird can help and I like to think I’m fairly organized. All my incoming emails are color-coded or forwarded to an appropriate folder. Spam is rarely a problem because it’s filtered on at least three levels. Finally, I like to empty my inbox and delete emails when a task has been completed. But problems remain — some webmail accounts must be checked manually and I still have too many emails for too many purposes!

The easy answer would be to scrap some of these accounts, but it’s not that straight-forward. It’s often necessary to send emails from a particular address so multiple identities are required to portray a professional image and not confuse recipients.

But is this a widespread problem and is a solution required? Many webmail services offer email aggregation facilities but few offer the configuration options of offline clients such as Outlook or Thunderbird. There’s also the risk that centralizing your email online creates a single point of failure and you succumb to the privacy, security and financial concerns of a third party.

I’d have liked to finish this post by offering a perfect solution, but I’m not convinced one exists. I’m therefore throwing the questions out to SitePoint readers…

How many email accounts do you monitor? Are you suffering from email overload? Have you found a good solution? Or what steps did you take to rectify the problem?

To encourage readers to take the survey, we promised that one lucky participant would win one of four amazing prizes—an iPhone 3GS, a Nintendo Wii (with games), a Wacom Intuous4 tablet, or $1,000 to be donated to charity.

We’d like to say a big, “Thank you,” to all who donated a few minutes of their time to help make this place better for all of us. However, as the film Highlander informs us, “There can be only one!” On that note, I’m very happy to announce that the winner of the reader survey prize draw is:

• M. M. Irshad Ahamed.

Irshad is a freelance web designer from Sri Lanka, who has participated in many design contests on SitePoint (and now 99designs). Irshad has chosen as his prize the iPhone 3GS (with accessories) which has a total value of US $1,000.

To the question, “What is the single most important challenge in your professional life that we can help you with and how would the answer/solution affect your work?” Irshad answered:

Time and work management. If I can manage both very well, I will be a more successful person in my chosen industry.

The server platforms Irshad is passionate about are Flex/Flash, Java/JSP, and Perl, and he envisages moving on to ASP.NET in the coming months.

Well done and congratulations to Irshad!

Once again, I’d like to thank each and every one of the 5,000 people who completed the survey. There was some invaluable feedback in there, which we’ll be reviewing and discussing in the coming weeks.