Raining Monkeys; metaphoric bliss

Allowing client side scripting whenever usable instead of forcing the server into action can be a tremendous boost in performance and response time. This sounds beautiful in theory and it is — the problem arises in browser support. Anyone who has done web development has come across the issue of supporting multiple browsers when writing JavaScript.

As the complexity of the task increases, the ability to get it right on most browsers seems to decrease. This of course is purely a scientific observation of course!

Many of the things that require JavaScript are easily broken into categories, so there is a lot of repetition in re-implementing these time and time again. In comes the Yahoo! UI Library (YUI).

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

There are at least 5 simple reasons you should be using these libraries instead of writing your own:

Number 1 - The code is released under the BSD license

The most important part of the BSD license from a commercial perspective is that it allows proprietary commercial use. This means you can incorporate the code into your website, regardless of its purpose. The only stipulations come from requiring the copyright to remain in place (you can’t just strip out the licensing information and claim it as your own).

Another great aspect of releasing under this license is that if Yahoo! goes out of business, the code is still available and legal to use.

Obviously you’ll want to read what the BSD license means in more technical terms before you go blindly jumping.

Number 2 - Graded Browser Support

Quality Assurance verified graded browser support. The code you’re using really does work as advertised in all those browsers.

How will the JavasScript degrade when used in older browsers? Is my browser supported?

This is all clearly laid out, ready for review, and bug fixes applied if there are any discrepancies.

Number 3 - Standardized Base Objects

It’s always easier to build a brick house if you don’t have to make your own bricks. Since the YUI library includes standard building blocks that many web developers will want to use you have a great starting point.

The library is written in an extensible manner utilizing the object oriented nature of JavaScript. It may take you a couple hours to get used to the prototype based object oriented method, however the results are clear and expendable when you have a clear grasp.

Number 4 - Large Active Developer Environment

Strength for a library and a language comes from the surrounding environment. If you can’t get any help with what you’re working on, or see what others have done, your progress and efficiency is hindered. There is a fantastic support community wrapped around the YUI environment.

I have had discussions on the list a few times and come away with answers to specific questions each time, and in a timely fashion.

Number 5 - Beta Releases of Bleeding Edge Ideas

New ideas — implemented and ready for experimentation, are released as beta’s or experimental. The most potentially impacting package to be released thus far is the AJAX Browser History library. One of the largest complaints with AJAX technology has been the demolition of the browser’s back button functionality.

The YUI Browser History Manager is an experimental component designed to facilitate the creation of web applications in which the navigation buttons are fully functional and in which broad aspects of an application’s state — what panels are open, what tabs are active, etc. — can be bookmarked.

With release additions like this appearing, the library not only has a strong base but is taking a stab at the future as well.

Firefox is a web developers dream; the browser is easily modified to provide transparency to the rendered DOM, AJAX requests, headers, and running Javascript.

With this in mind, I present yet another Top 10 List of Firefox extensions. These are from the perspective of a Software Engineer working on web applications.

Number 1 - Firebug

The most versatile of the extensions listed here, I use firebug for monitoring network requests (AJAX and others), inspecting and editing the HTML DOM structure, and logging javascript messages.

Everything you edit, CSS, HTML, or Javascript is updated in realtime on the page. Stop waiting and refreshing when you can be working with instant feedback.

The only thing I find lacking is the javascript debugger support. It has historically been buggy and not very usable. A more powerful Javascript solution is included next in the list.

Number 2 - Venkman

A Javascript debugging IDE practically, this extension is both a debugger and a profiler. The debugging can be triggered by either tracing exceptions that occur automatically during runtime, or by setting breakpoints.

The “Local Variable” watch comes in extremely handy when trying to understand tasks such as parsing.

Just be aware that:

You cannot open the JavaScript Debugger a second time after closing it - this is not our bug! It is a bug with Firefox 1.5 and 2.0. If we find a way around it, we will of course include it, but until then you must restart Firefox to reopen the debugger.

Number 3 - Tamper Data

With an ability to edit GET and POST variables before they make their way to the server, we can interject any type of data we desire. This is helpful for testing SQL injection attacks, posting different items without navigating through a complex site structure (if you’re unlucky enough to work on one), and quick verification of what’s really being sent to your server.

Number 4 - Selenium IDE

Repetition is vexing; it’s so terribly troublesome. When you want to repeat the same task over and over again look at selenium. It’s much more than your average mouse moving macro.

Selenium taps into the chrome system in firefox to control your browser no matter what you’re doing. Looking to complete a registration on website and test the final step yourself? Step through the whole process once with selenium recording and you’ll have yourself a set of actions you can replay at a rapid speed.

• Browser compatibility testing.
  Test your application to see if it works correctly on different
  browsers and operating systems. The same script can run on any Selenium
  platform.
• System functional testing.
  Create regression tests to verify application functionality and user
  acceptance.

See it in action.

Number 5 - Aadrvark

This extension has functionality overlap with others such as firebug. What is doesn’t do that others do well is allow you to straight up remove elements from the DOM. WIth this extension running I can remove items from the document structure and see in realtime how it will adapt.

Number 6 - Web Developer

Using this extension a developer has a significant amount of functionality available to them. I generally use this to disable things globally such as javascript, cache’s, and referrer’s. It is also terrific at manipulating forms (easily editing hidden variables), seting your browser to a predetermined size, and clearing any type of browser store (http authentications, cookies, etc.).

Number 7 Adblock Plus + Filterset.G

Let’s face it, people use these extensions to get rid of annoying ads. Even if the ads in your clients site aren’t annoying they may be blocked. Once you have these extensions installed you can view sites in the same manner that many other ad haters do. For the record, I’m not an ad hater, just an intrusive ad hater.

Number 8 - Mouse Gestures

Let’s face it — the mouse sucks. Using a web browser if a very mouse intensive operation however. With mouse gestures, once you’ve go your hand on the mouse you have the ability easily navigate tabs, history, and bookmarks with a simple holding of the right mouse button and forming a simple line.

Number 9 - Firefox Extension Backup Extension

You’ve just gotten comfortable with all of your Firefox settings, extensions, and browser setup — disaster strikes and Firefox won’t load correctly.

This even doesn’t happen very often, personally only twice in the last 4 years, but it’s occurrence is vexing. This extensions sole purpose is to package all of the customizations you’ve made into a importable package.

Number 10 - Google Browser Sync

Sync your bookmarks, cookies, saved passwords, history, and even windows and tabs across computers. This extension is obviously only beneficial to those who use Firefox on multiple computers.

Google Browser Sync is completely automated. The settings you select at startup are automatically synchronized across each of the computers on which you install Browser Sync. You won’t even need to log in every time you start the browser. You can change which browser components are being synced – or even stop the syncing process entirely – using the settings panel in the upper-right corner of the page. The settings panel also gives you access to your PIN.

Since this extension passes data through Google, I synchronize only my bookmarks across computers. It is advised to check the encryption box on all items you share.

---

What extensions am I missing that you find helpful? I’m always interested squeezing more power out of Firefox.