BeauScott.com

Recently a co-worker of mine was interviewing with a large internet retailer of some Brazillian-jungle influence, and was asked to write a word ladder application in Java using a given dictionary. The object of the application was to find the shortest transform path from word A to word B using one-letter word-variants. For example to get from “load” to “bald” the ladder would look like this:

load -> lord -> lard -> bard -> bald

After going over the basic restrictions I decided it would be fun to launch a code challenge to my readers. After JavaScript, PHP is my language of choice, so I set out to code up an example of what this WordLadder might be. Of course, to keep in in queue with the AJAX tone of this site, I made the interface all pretty with prototype.js and scriptaculous.So here’s the challenge: I want to see your best efforts in creating this application using your language of choice. Here are the requirements:

• It must use the same dictionary file I use. (Click here to download this dictionary file)
• It must find the SHORTEST path, not just any path
• It must be web-accessible. So if you write it in C, you must have a way of calling it through a web interface.
• It must be usably fast.
• It must be able to handle up to 5-letter words. If you go over that and it’s usable then you get bonus points.
• For more bonus points, make a slick interface to it using Ajax (any framework you want)

Of course there’s no real reward to the challenge other than a kudos to you for exercising your mind

Click here to see my working example

I just wrote a review of the Eclipse-based Web IDE called Aptana. With features like code completion for JavaScript, CSS and HTML, DOM compatibility checking, and cross-browser quirkiness testing, it’s shaping up to be a very good editor.

Read the full review @ AJAX-Resources

Today I bring to you the second installment to my fledgling widgets library (which, by the way, I intend to packages together when I get enough components): AJAX Rating Stars. You have probably seen examples of these used all over (like Netflix), and I recently had the need to make some for a personal project. So I figure, if I could use them, you might want to as well.

Again, I’ve chosen the prototype.js javascript framework as the basis of this widget. These stars feature form-field binding, javascript callback support and AJAX posting for easy ratings.

Click here for usage examples and API documentation.

Click here to download this widget. (zip, 7kb)

These have been deprecated with a new version available. Click here to go to the new version.

As more and more websites adopt Web2.0 design, the simplicity of 25-year-old console styling is a thing of the past. Web browsers are being used as a housing for on-demand applications, not as simple displays of text information. “Widgets” are becoming a must-have for the latest and greatest web portals, blogs and service sites — and I love it. Being a web-developer by trade, when I see nifty little gadgets on a webpage, I get all giddy inside and start to take it apart to see how it works, then I go and try to build my own flavor of it. I’ve also developed my fair share of widgets for projects I’ve done, and I’ve noticed one thing about all of them: how do I explain to the end user how to use it — and without taking up already-scarce screen realestate?

My solution: create a small icon that would appear next to the tool that when clicked would show an instructional conversation window with detailed information of the tool, etc.

Using the prototype and Scriptaculous, I’ve created some good-looking and easy-to-use javascript help balloons. These balloons can either be statically assigned content, or can retrieve content via AJAX. It also can be included in other JavaScript objects to easily add detailed help to any of your RIA components without occupying a lot of valuable page realestate. It also supports PNG backgrounds for beautiful alpha-transparency blending. I’ve tested this on Windows versions of Internet Explorer, FireFox and Opera.

Note: To use this widget, you will need my prototype enhancements and the prototype and Scriptaculous libraries.

Example Code:

var myHelp = new HelpBalloon({
title: ‘My Help Window’,
content: ‘This is some detailed explanation of whatever…’
});

These have been deprecated with a new version available. Click here to go to the new version.

After using Prototype.js for a while, one shortcoming I’ve found is that it lacks the built-in ability to submit an entire form via AJAX. To remedy this, I created an addon to address this (available here: prototype.ajax.form.js). View the source on the example page to see usage. The only thing this addon does not do is submit file uploads… and I don’t think it’s possible to do so since access to the client’s computer via javascript is not permitted for security reasons. PLEASE correct me if I’m wrong, because I’d love to be able to do this.
Go here for a usage example.