YUI customer success stories: google???

Looks like google has been using CSS from the YUI javascript library for the google personalized homepage. As Pat Cavit writes, “YUI is so awesome even google uses it“.
Now some would be tempted to make a fuss over the fact that google has technically violated the BSD license that YUI ships with by removing the copyright notice from the source code (which was really silly, since it’s just in the source code: it doesn’t appear on the page at all).
But I think Yahoo should instead take this as a compliment to the awesome work that the YUI team has done over the past year. If the google devs are happy with how the code has worked, maybe they can write a customer testimonial for the YUI marketing folks to put on the YUI web site. Or maybe next year the google team can demo at the YUI party?

Yahoo YUI hosting javascript!

OK I’m a few days late with this one. But Yahoo has announced that they will be hosting all current and subsequent versions of their YUI javascript library, for developers to use in applications, free of charge.
Why is this a big deal? Well, let’s take a look at some bandwidth stats for slideshare. 12.7% of our hits, and a monstrous 40% of our consumed bandwidth, are js files!
SlideShare don’t happen to use YUI (we use prototype and scriptaculous). But if we did, we would snap this up! Yahoo is effectively giving one more piece of distributed infrastructure to entrepreneurs looking to bootstrap a web startup. This is really generous of them.
Thanks, yahoo!

HOW-TO: Make an AJAXified Digg-It button (with bonus RSS subscription!)

I made a little widget for my blog that supports both bookmarking (to popular bookmarking sites like Digg) and subscribing to my site (via popular RSS readers like BlogLines). The widget uses a little javascript to hide the (hideously tacky) icons of the various sites until the user clicks on it. Check out the top right corner of my blog, or the bottom of this article, for a demo.

The cool things about this widget are:
1) It is much less ugly and distracting than current solutions (which embed a gaudy list of icons into your blog).
2) It is independent on any server-side environment: because it’s all in javascript, it can run in WordPress, Moveable Type, Drupal, or any other blogging engine or CMS. In fact, it can run in any web page at all.
3) It frames RSS subscription in language the user can understand (e.g. “Add this to Bloglines”, rather than “XML”).

Continue reading

Peace breaks out between AJAX and Flash: Meet the FABridge

Adobe just announced the FLEX-AJAX bridge (FABridge), an open-source component that facilitates communication between AJAX and FLEX code. The meeting where it was announced showed amazing integration between AJAX applications built with Rails / prototype and individual screen components built with FLEX.
Update: here’s the blog entry with all the demos and details.

Continue reading

AJAX Design Pattern: Login Panel

I’ve noticed another new AJAX convention cropping up in a few places that I though I’d share. It solves a real problem in an elegant fashion: how to handle registration of new users.
Every site that requires a login needs to provide a way for new users to register. The tradeoff between supporting new users and existing users is always tricky: for example, most brokerage sites are oriented towards marketing to new users, and have a little link in the corner where existing clients can log in. Other sites orient towards existing users, and new users are shunted off to a registration page.
Ideally, we’d keep the user on the same page. With a little bit of Javascript trickery, this is possible. The best example of this I’ve seen so far is in ZohoCRM.
The login widget starts out oriented towards existing users.
zohocrm1.gif

Continue reading

JavaScript Blog Category Browser

I recently added an Accordion widget to the right panel of my blog. The accordion has the last five entries for each blog category, so the reader can preview the contents of a category without leaving the front page.
I used the Accordion Widget from the OpenRico library for this project. It took very little time to implement, and was a fun little “quick win” project. This is the kind of thing that AJAX can be great for: adding a little interactivity to a basically static page.

Continue reading

HOW-TO: Debug JavaScript in Internet Explorer

The best tool for debugging JavaScript on Internet Explorer is the Microsoft Script Editor, a free component of Microsoft Office XP/2003. There are other options, but they are less attractive: Microsoft Script Debugger is not very powerful, and Visual Studio .Net is an expensive purchase if all you need is JavaScript debugging for IE.
Microsoft Script Editor is a powerful debugging tool, but getting it to work takes a bit of doing. The following is a quick guide. I’ve also included a slideshow (hosted on slideshare.net) that shows the details of how to debug javascript in internet explorer.

How to debug javascript in IE
View more presentations from Jonathan Boutelle

0) Turn debugging on in IE
Go to tools->internet options->advanced. Make sure that “Disable Script Debugging (other)” and “Disable Script Debugging (Internet Explorer) are NOT checked.
IE_Enable_Javascript.gif
1) Get Microsoft Script Editor
Install Office 2003 or Office XP, if you don’t have it already.
Check that you have it by selecting View->Script Debugger->Open from IE. If you have Script Editor, then you’ll be offered the choice of “New Instance of Microsoft Script Debugger” or “New Instance of Microsoft Script Editor”. Otherwise, you’ll just see “Microsoft Script Debugger”.
new_instance_of_editor.gif
If you see that, then you have Script Editor installed. Congratulations!
2) Using Microsoft Script Editor to debug
In general it is easiest to launch the editor from IE (rather than launching it as a stand-alone application). One handy way to debug is to use IE View->Script Debugger->Break at next statement.
break-at-next-statement.gif
This causes the debugger to activate the next time any JavaScript executes. If you then select “step into code” (F11) the javascript file that contains the code will load automatically.
Alternately, you can put a line like this in your Javascript code.
debugger;
It will create a breakpoint automatically (in Venkmen debugger as well as Script Editor).
When this breakpoint gets hit, your debugger will launch. You will see a message that says “An exception ‘runtime error’ has occurred in script. Possible Debuggers:”.
runtime_error.gif
Don’t fret, nothing has gone wrong. Select Microsoft Script Editor from the list.
Now you’re debugging! Simply step through the code, the way you would in Venkman.
debugger.gif
3) After you’re done
Special care needs to be taken to clean up when you’re done debugging, otherwise IE (and possibly the entire operating system) will hang. I recommend F5 (to continue), removing all breakpoints if that is necessary. You need to make sure that the browser isn’t waiting for the debugger. Then shut down the debugger. When it asks you if you want to stop debugging, say “yes”.
4) Related articles / further reading
An article on IE debugging from Microsoft
Debugging Javascript using visual studio.net
Debugging Javascript using Microsoft Script Debugger
The best JavaScript debugger (for Firefox, naturally) is Venkman.
The ViewRenderedSource Firefox extension makes troubleshooting your DOM tree a snap.
A nice blog article on the Microsoft Script Editor
A great installation guide to Microsoft Script Editor

Bandwidth savings with AJAX

MacRumors has released the results of their experiment using AJAX to deliver presentation updates from MacWorld. The numbers are simply jaw-dropping, a 6X reduction in bandwidth.
“[We] consumed over 32 GB of bandwidth during the three hours surrounding the event. (For those interested, a non-AJAX version of MacRumorsLive would have required an estimated 196 GB of bandwidth over the same period of time)”
For sites that experience a highly variable load, AJAX can mean fewer servers, lower bandwidth bills, and less risk of failure. This is a huge, public win for AJAX as a bandwidth optimization strategy.

Continue reading