Categories
AJAX JavaScript

YubNub Suggest

YubNub has been around for sometime. I went looking for a Suggest version that would autocomplete common commands. I did a few searches and all I came up with was DashNub which is an OSX Widget.  Using script.aculo.us‘s autocomplete code and the XML feed for the YubNub Golden Eggs. My YubNub example now has basic autocomplete.  Any YubNub command can be used but autocomplete only works for the 400-500 Golden Eggs.

YubNub Suggest

Note:
 – It’s only been tested in Firefox 1.5.01

TODO:
 – Test in other browsers
 – Add descriptions to each command
 – Allow selecting with arrow keys

Categories
AJAX Firefox Plugins

AJAX Developers Toolbox – Firefox plugins

Earlier I wrote about a few developer must have’s for AJAX coders. There are several useful plugins to Firefox that also come to mind.  Venkman, the JavaScript debugger leads the list, but since I covered it here, we don’t need to list it again.

  • Console2 – With the introduction of Firefox 1.5 the clutter in the standard JavaScript Console increase many fold.  Primarily due to the inclusion of CSS warnings in the error output.  Console2 provides several levels of filters, to give the developer only the messages they want to see.  It also allows the suppression of duplicate messages to keep the console clean in those pesky situations when a little JS or DHTML code goes sideways.

               "Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars) and some accessibility improvements."

  • Web Developer – The Swiss Army Knife of web developer add-ons.  A huge feature list including the ability to selectively disable certian browser features, deeper view on images, forms, CSS, and page structure.  Some of these functions are available via Firefox’s menus but having them one click away in this centralized toolbar saves time.  For AJAX or DHTML authors the ‘View Generated Source’ option let’s you take a look at the full source of the page in it’s current state.  The next extension takes this particular ability to the next level.

  • DOM Inspector – The DOM inspector let’s you search and pick apart the DOM of a particular page of application.  Provides a tree view of the document or you can use the pointer to select a particular element on the page a drill down from there.  Although not a true extension since it ships by default on Firefox it’s a must have for any web developer working on a complex application.  Wether it’s trying to find the ID of a particular dynamic element or just trying to see the CSS styles on a div the DOM inspector always makes easy work of the task.

  • Live HTTP Headers – This extension is a quick and dirty way to view each request and response from the browser to the server.  Ever wanted to see how Yahoo Maps or Gmail works from the inside?  This is your tool.  Not only provides the content of each request but as the name suggests the headers too.  Comes in useful trying to track down issues with setting cache headers or trying to determine the exact content of a request from the browser.
Categories
Web Browser

Favicon fun

Ever need to create a favicon image?  Not something you do everyday but when you do it sure would be nice to have a tool.  You could always use Photoshop, Microsoft Paint, etc.  I wanted an easier way.  After a couple web searches I found the perfect answer. Upload any image and a favicon is created for you.  The Favicon Generator will even create an animated favicon! Animated Favion I’d never wish this annoyance on anyone but the idea is quite novel.  There is also a tool to validate your favicon and the link tags needed to make favicon’s work with a wide variety of browsers.  Here’s the link tags I’ve been using for sometime now and this seems to cover the major browsers.

<link rel="ICON" type="image/gif" href="/favicon.gif"/>

<link rel="SHORTCUT ICON" href="/favicon.ico"/>
Categories
AJAX JavaScript Web Browser

Graded Browser Support

Nate posted an article which coincided with Yahoo’s launch of their UI Library titled "Graded Browser Support".  It appears he first coined the phrase in 2004.  Subsequent google hits all point to Nate.  I must admit it’s quite novel.  He also posted a matrix of browser’s that Yahoo domain applications support.  It’s quite refreshing to see an age old problem explored in a new way and with a catchy new phrase to help coral the thought going forward.  It reminds me of some work in a previous life around WAP browser capabilities. The first generation of tool kits and support for WAP devices included huge switch statements and hacky User-Agent regular expressions.  The second generation and what I belive is still in use today was a framework that detected capabilities.  Rather than look for browser X and apply hacks X, the code would detect capabilities.  For example the ability to support pages greater than 15k (remember we were in the mobile world), or the ability to support a password input field.  The capability matrix kept the code much clearer.  Instead of complex decision trees with User-Agent’s, code was clean with simple if/else statements for a particular capability.  The hard part was contained in a single matrix that maps capabilities to various browsers.  A quick update to the matix and a new handset could be added with little or no code changes.

The same problem has existed in web browser’s for many years.  Most applications simply had isIE() or isNetscape() type checks.  For the most part this worked pretty well as the capabilities being detected were generally split between the two dominant browser’s of the time; Internet Explorer and Netscape.  Today the landscape is very different.  No longer is the browser war a 2 horse race.   For most applications on today’s web it’s at least a 3 to 4 horse race.  In Nick and Yahoo’s case there are 6 different browser’s with a total of 10 browser/version combinations.  This doesn’t even take into consideration the OS side of the equation.  Web application complexity continues to increase.  As applications take advantage of the latest features of new releases the support for capabilities in earlier versions becomes harder to represent.  A simple example is the new native XmlHttpRequest object in IE7.  Assuming it performs better than the ActiveX object in current releases web developers will want to take advantage of the new native object.  In a isIE() type decision tree there would need to be a special case to handle IE7.  However in a capabilities based application IE7 would be defined with a native XmlHttpRequest object such that the code would function without any special cases.

Categories
AJAX JavaScript Venkman

AJAX Developers Toolbox – Overview

AJAX programmers today have many tools available to them. Here’s a quick overview of some popular ones.

  • Debuggers
    Firefox –     Venkman without a doubt is a must have for any serious JavaScript hacker these days. All the functionality you’ve come to expect in a debugger step in/out/over, set break points, trace the call stack, inspect variables, eval code on the fly; you get the picture. Up until recently Venkman only worked with Firefox 1.0.x, Joe Walker posted a version that works for Firefox 1.5.x.

    IE –     JavaScript debugging for Internet Explorer is a bit trickier. You can use the Microsoft Script Debugger or if you’re willing to shell out some cash Visual Studio offers a richer debugging environment.

    Mozilla – Venkman ships by default with Mozilla, and provides a nice option for those who just want to get their browser and debugger combination in one shot.

  • Integrated Development Environment (IDE) The choice of editor’s or IDE’s is sometimes characterized as a war. Not to pick and choose but Eclipse has become a popular editor for many web programmers. It’s roots are with server-side Java code but more recently the Web Tools Platform (WTP) has come along and aims to change that perception. They’ve made signific progress over the past year, but at the moment Eclipse + JSEclipse is my personal choice.  The JSEclipse plug-in has quick code-complete and simple, clear syntax highlighting.

  • Syntax Checker JSLint – Slick syntax checker.  Catches all those stupid mistakes, and helps enforce good programming conventions.

    "JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily an error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems."

    Those are some tools any JavaScript or DHTML programmer would be hard pressed to get by without. 

    Know of a tool or program that you’d have in your AJAX Toolbox?  Post a comment!

Categories
JavaScript

eval() is evil: window to the rescue

In JavaScript eval() has long known to be evil. Take for example:

function foo(){}
foo["str1"] = "aaaa";
foo["str2"] = "bbbb";
foo["str3"] = "ccccc";

Elsewhere you need to lookup items from this structure. Where both “foo” and “str1” are pass in as arguments. So like:

function lookUp(bundle, str) {
return eval(bundle[str]);
}

eval() will invoke a new scope and new compiler just to find and evaluate the string values. There must be a better way. Since foo is defined previously it’s available via the window object. So you can simply say:

function lookUp2(bundle, str) {
return window[bundle][str];
}

Pretty simple eh?

Categories
JavaScript

Opera 8.x XML/DOM appendChild problem

Found a problem with Opera’s XML/DOM support. Seems that they don’t support appendChild() if the document is created with an “” (empty) QualifiedName.

document.implementation.createDocument("","",null);

This only seems to be a problem if you try to append to such a document. Opera 8.x (and prior?) requires you to create the document with a QualifiedName like:

document.implementation.createDocument("","foo",null);

This way appendChild will work as expected. Of course this works fine in Firefox and IE. It also apprears to be fixed in the upcoming 9.0 release of Opera.