Topic: Prototype

Javascript debugging and testing in the wild (Prototype bug when using array.flatten in IE)

John McCaffrey, Wednesday, August 19, 2009 @ 10:49 am

I had to dig into a production issue the other day that presented itself like this:
There was a piece of javascript code that iterated over some dom elements, gathered ids into 2 arrays, ran a validation check, and then flattened the arrays to add them to the url.

On firefox, opera, and chrome this was working correctly, and had been tested by the developers, but on IE 7 it isn't working, and the problem wasn't detected until it made it out to production. (Which raises a point about testing in IE during QA, which I'll get to in a sec).

I started my investigation doing what I'd call "poor man's debugging", putting some alerts in, breaking up the code a bit to make it easier to inspect, etc. Normally I don't do this when testing in Firefox, because I have Firebug, but in IE I always seem to start with the basics to get my bearings, then quickly move to a more pragmatic approach.

Then I started using firebug-lite, confirming that I can see the info I need, and I reverted my changes to the code so that I could verify that I hadn't introduced any issues.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (3)

Software Development

Catching Ajax Errors with Prototype and Rails

Josh Symonds, Wednesday, May 20, 2009 @ 2:59 pm

In an exclusively Ajax application it can be difficult for a user to determine when their connection to the server has dropped. For example, we at Pathfinder use an excellent internal tool to keep track of our time, and the primary screen in it provides a lot of Ajax-y fields. But if, say, I disconnect my laptop, plug in at home, and forget to connect to our VPN, I can waste quite a lot of time and energy putting in information without realizing it isn't being sent to the server at all.

To fix this problem is a little less obvious than it might seem at first glance.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

Just mow the grass

Alice Toth, Thursday, May 14, 2009 @ 5:32 am

photo credit: great_sea

Gauging a client’s wants and needs is as much an art as it is a science. Oh sure, establishing the requirements and needed features and potential limitations (hello legacy system) is pretty much a straightforward scenario. It’s when we get into the layout and behavior of the application that negotiating the waters can begin to get a little tricky. Bump it to the redesign of an existing application that users are accustomed to, and the trickiness factor is raised exponentially.

I’ve been lucky with Pathfinder in that my last couple of projects have been to design and develop new software. The clients come in with an idea for a better mousetrap and we build it. They’re excited, we’re excited and we get to build something shiny and new that gives the client a good experience and helps build their business. A win-win in my book.

Not all projects have such a glorious life. In a previous job, I was part of a team that was tasked with porting a legacy system over to a new framework. Naturally, there were the usual levels of complexity all projects of this type always seem to encounter. However, the most difficult obstacle to overcome was the inability of the decision maker to see anything beyond the existing user interface.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

User Experience Design

Getting Rid of the “handler.call: handler undefined” Error

Anthony Caliendo, Wednesday, January 7, 2009 @ 12:09 pm

If you're using prototype (or rails, which uses prototype by default), you've probably seen this javascript error before:

handler is undefined

While not particularly threatening (no ill side effects seem to occur), the error causes a lot of noise and, quite frankly, is pretty annoying. Fortunately, there is a quick and painless patch to keep your error log free from this bane.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (9)

Software Development

Pimp my jQuery: Five plugins to replace the features Prototype and Scriptaculous users expect

Brian Dillard, Monday, December 1, 2008 @ 4:53 pm

Ajax pros, especially in the Rails world, often know the Prototype and Scriptaculous JavaScript libraries inside and out. When faced with the prospect of writing on top of the competing jQuery framework, they may quickly stumble upon seemingly missing features.

The culprit? jQuery's less-is-more approach, in which advanced or specialized features come via plugins instead of the core library. The greater reliance on single-purpose plugins gives jQuery a lean footprint and a vibrant ecosystem, but they come at a cost. You often must rope in several plugins to accomplish things Prototype and Scriptaculous can do out of the box.

If you want to encourage your team to step out of the Prototaculous mindset, it helps to have a readymade list of plugins that approximate those libraries' core features. At this point jQuery and Prototype approach feature parity, but once Scriptaculous is in the mix, jQuery relies on multiple plugins to keep up with the Joneses. Here's a quick stab at how to trick out jQuery:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (7)

Software Development

Ask the readers: How do I fire native browser events in Prototype.js?

Brian Dillard, Monday, November 24, 2008 @ 5:39 pm

I've been pairing with my colleague Noel Rappin on a cool Rails project lately, which has helped me turn a bunch of conceptual knowledge into real-world experience. I'm writing Ruby code, doing things the Rails way, and hewing faithfully to test-driven development.

I'm also returning to Prototype for my JavaScript needs after almost 15 months of daily jQuery use. The framework has matured nicely while I've been away. One surprise popped up today, however: Prototype 1.6 lacks the ability to simulate native browser events. jQuery offers this in the form of jQuery.trigger, which can simulate both native and custom events. But Prototype's Element#fire supports only namespaced custom events. (Read this mailing-list thread for more analysis.)

I did a couple hours of digging around today - including a trip to Scripteka - and haven't really found a canned, cross-browser solution to this issue. I'm looking for something that offers jQuery's native event firing in a tidy little Prototype extension. Anyone know of such a tool?

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Progressive Enhancement with Prototype and Custom HTML Attributes

Anthony Caliendo, Friday, July 11, 2008 @ 6:19 pm

One of the nifty things progressive enhancement can be used for is to allow you to markup your document in a way which allows behaviors to be added to it automatically. Most commonly, this is done by specifying a class name on those elements that you want to enhance. However, this approach does not let you easily pass additional information such as parameters to your enhancement code.

An approach to this problem is to use HTML attributes to mark elements, and Prototype makes this technique easy to implement and work across browsers.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

jRails: Ruby on Rails with the Prototype guts ripped out

Brian Dillard, Wednesday, June 11, 2008 @ 3:21 pm

My esteemed colleague Noel Rappin sensibly advocates doing things the Rails way whenever possible. As a Rails noob, I should follow his advice. But as a dedicated user interface developer, I'm already finding that many of the best practices of my discipline take extra steps to enforce in Rails. Case in point: The ability to write unobtrusive JavaScript using my tool of choice, jQuery.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Breaking Prototype habits in a jQuery world

Brian Dillard, Monday, March 31, 2008 @ 5:30 am

When you get used to doing things one way, it's hard to retrain yourself. It took me months to "get" the Prototype way of doing things after a decade of writing all of my own Plain Old JavaScript, sans framework. Now that I'm more likely to use jQuery, I've still got some residual Prototype habits to break.

In Prototype's Enumerable class, you call the each method to iterate over a collection. In jQuery, you can do the same - but you often don't have to. Many of the standard jQuery methods automatically iterate over the member nodes of a jQuery object. There's usually no need to do so manually using jQuery's version of each. My friend and former colleague Zack Frazier reminded me of this fact the other day, in response to this original post. His input helped me fine-tune my JavaScript on the new Pathfinder website.

Compare my original version of this code, which transforms target="_blank" windows into more finely controlled JavaScript popups:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (3)

Software Development

Why Does Scriptaculous Need Prototype?

Dietrich Kappe, Tuesday, May 29, 2007 @ 5:51 am

I've been going through the Scriptaculous effects library in some detail. After grokking all there is to know about effects queues, I was left with one question: why does the effects library have a dependency on Prototype? The dependency could be removed with maybe two dozen lines of Javascript. So, why the dependency?

After having several other frameworks arm wrestle me for the $ identifier, I'd like to drop Prototype at the nearest corner.

Anyhow, I'm working on something involving Scriptaculous now that will likely make me the but of both jokes and death threats. Stay tuned.

• Digg
• Reddit
• del.icio.us

Comments (3)

Software Development