Topic Archive: Javascript

Blackbird takes the pain out of JavaScript logging

Brian Dillard, Thursday, October 9, 2008 @ 11:23 am

I'm excited to announce the arrival of Blackbird, an open-source JavaScript logging and profiling utility written by G. Scott Olson, a former colleague from my days at Orbitz Worldwide.

A previous iteration of Blackbird provided no-nonsense, cross-browser logging on a variety of projects within Orbitz. Since that iteration, known as jsLogger, Scott has re-written the code from the ground up; provided tons of useful new features, including custom namespacing and a spiffy new graphical interface; and released it under an MIT license.

Why, you might ask, in the age of Firebug, would anybody need a JavaScript logging utility? Simple:

• Blackbird works in a wide variety of modern browsers. Write one style of log statement for every browser.
• Blackbird can be deployed to production. By stubbing out its public API with empty functions, you can leave your log statements in production code. (I'm not endorsing this approach to code maintenance, just pointing out that Blackbird makes it easy.)
• Blackbird does one thing and does it well. It's not a debugger, it's just a logger and profiler.
• Blackbird doesn't interfere with Firebug's console.log utility, but it does improve on its interface. You can hide or show the Blackbird modal with a single, customizable keystroke. You can also choose from four levels of logging (debug, info, warning and error) and atomically toggle their visibility within the console.

The Blackbird project now lives at Google Code, where you can download it and learn about how to contribute.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

HTML5, Ajax history management, and The Ajax Experience 2008 Boston

Brian Dillard, Monday, October 6, 2008 @ 2:38 pm

The Ajax Experience last week in Boston yielded lots of exciting developments on the Ajax history management front:

• My talk itself drew a crowd of 110 people or so despite its 8.10 a.m. start time. I received good questions from the audience and didn't notice too many people heading for the doors when they realized how deep into the nitty-gritty technical details I was getting. Instead of using Keynote or Powerpoint for my slides, I built a basic DHTML application. That way, one artifact could serve as both my content and a demo of Really Simply History, the Ajax history and back-button library I maintain. You can view the application - and the slides - at Pathfinder Labs.

• I did not meet my goal of releasing an alpha of Really Simple History 0.8 in conjunction with the conference. But I did accomplish a ton of work on the library during the build-up to my talk. I'm now hard at work finalizing the alpha and preparing updates to the project's Google Code-hosted homepage.

• The most exciting Ajax history development was the face time I enjoyed with Nathan Hammond, creator of JavaScript State Manager (JSSM), and Brad Neuberg, original creator of Really Simple History. After my talk we enjoyed an impromptu Ajax back-button summit and hammered out a shared agenda for the future of both my library and the topic in general. I'm pleased to announce that Nathan will be coming on as an RSH co-maintainer with the goal of merging RSH 0.8 and JSSM into a single, stable 1.0 library. I'm also excited that Brad, Nathan and I - plus other authors of Ajax history libraries who wish to participate - will be issuing a position paper on the current history implementation in the HTML 5 spec. Ajax history experts, please contact me via Pathfinder if you want to weigh in.

• As for the conference itself, it was my first time attending The Ajax Experience and I really enjoyed it. The topics were many, varied and well-presented. My favorites included Douglas Crockford's discussion of JavaScript's good parts, which could have been a simple book promo but turned out to be far more; the panel discussion between the leaders of YUI, Dojo, jQuery and Prototype moderated by the inimitable PPK; and my colleage Dietrich's un-sexy but vital look at how to resurface J2EE apps for Ajax using the Google Web Toolkit.

  I have to say, the crowd here felt like my tribe. The guys running around with the word "JavaScript" shaved into their hair put a smile on my face. Ajax developers are often third-class citizens at other conferences. They're either jammed together with designers and user experience folks, or thrown into the midst of Java and Ruby developers. That wasn't the case here, and I dug it highly.

  My least favorite aspect of the conference had nothing to do with the crowd or the content; it was the depressing lack of vegan food. One meal was 90% vegan, but most were 0%. Given the conference center's distance from civilization, it would have been nice if attendees' diverse dietary needs had been taken into consideration. On the plus side, I think I lost five pounds.

Many thanks to the folks from Tech Target for the awesome speaker support. My name, so amusingly misspelled on the monitor outside the ballroom where I spoke, had been corrected by the time I took the podium.

And special thanks to Ben, Dion and everyone at Ajaxian for throwing such a jam-packed event, letting me speak at it, and doing so much for the Ajax community over the years.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

The Ajax Experience 2008: Hope to see you in Beantown

Brian Dillard, Monday, September 29, 2008 @ 2:24 pm

I'm posting today from Boston, where my colleague Dietrich Kappe and I are proud to be presenting at The Ajax Experience 2008.

At 5.10 p.m. tomorrow (Tuesday 30 September), Dietrich will present "Saving Your Investment: Transforming J2EE Applications into Web 2.0 Using GWT." This 90-minute session will introduce noobs to the Google Web Toolkit; school experienced GWT developers in the security implications of leaky client-side business logic; and delight business folks and bean-counters alike with the money-savings possibilities of retrofitting a legacy webapp instead of building a new one from scratch.

At 8.10 a.m. the following day (Wednesday 1 October), I will present "Making Friends with the Browser: Ajax, Back Buttons and Bookmarks." In it, I'll look at the state of Ajax history management, from new libraries such as the JavaScript State Manager and dsHistory to my own project, Really Simple History. I'll discuss the problems and tradeoffs inherent in any browser history manager. I'll also examine the impact of new browsers such as Google Chrome and Microsoft Internet Explorer 8 on this small, rapidly evolving corner of the Ajax world.

We look forward to seeing some of you there and reporting back about the rest of the conference.

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

What does your CSS Swiss Army knife look like?

Brian Dillard, Monday, September 22, 2008 @ 2:15 pm

CSS 2.1 is more like a Swiss Army knife than a fully stocked toolbox. We can accomplish a lot, but we have to get creative with the standard attachments. Floats, relative positioning, the box model - each tool must performs double or triple duty because they're the only ones we've got.

When we do discover a clever way to accomplish a common task using these limited tools, we're likely to employ that technique over and over. I'm not talking about CSS frameworks here; those help out more at the macro level. I'm talking about repeatable techniques that can be applied at the micro level. When done right, these simple techniques can feel like entirely new Swiss Army attachments rather than intelligent application of existing blades.

Whenever I start out on a new client project, I start off with the following plug-and-play components:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

A mea culpa, and a launch date, for Really Simple History 0.8

Brian Dillard, Monday, September 15, 2008 @ 2:47 pm

Time to come clean: I've been a terrible project lead on Really Simple History since version 0.6 launched last fall. The problem has been twofold:

1. lack of documentation
2. lack of time

The essential functionality of RSH works well in most supported browsers, but there are several special cases that have to be coded around in your actual application. Even basic usage, however, is documented mostly through example, not through tutorial-style, narrative prose. This has resulted in lots of noise in the issue tracker from folks seeking guidance on how to use the library. For all the folks whose questions and bug reports have gone unanswered, I offer a sincere and heartfelt apology. And to the more experienced users who stepped up to answer questions and help out, I offer heartfelt thanks.

The launch of Safari 3 caused some serious problems because code created to work around Safari 2's deficiencies caused things to break in Safari 3. I should have accepted suggested patches from some gallant RSH users and pushed out a new version months ago. But to be honest, I was so swamped with paid client work for Pathfinder that I couldn't find the time. I've learned my lesson about brittle, browser-specific workarounds. The next version of the library will fail far more gracefully.

Speaking of the next release: RSH 0.8 is nearing completion. I expect to publish an alpha version to coincide with my presentation October 1 at The Ajax Experience. My talk covers lots of interesting developments in Ajax history management, and I figured I should, you know, deliver the goods to my users before getting up on that stage.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (6)

agile ajax

IE8 Beta 2 Released

Dietrich Kappe, Wednesday, August 27, 2008 @ 9:08 pm

I like it. Give me more browser improvements! With the news of Firefox 3.1's JIT JavaScript beasty TraceMonkey, is it too much to hope that IE8 Beta 2 has some similar improvements under the hood?

First you have to find the appropriate page among the 300 or so flogging IE8 Beta 2 in the MS redundaverse. Drilling down into performance, you find the terse:

...the script engine in Internet Explorer 8 is significantly faster than in previous versions, minimizing the load time for webpages based on JavaScript or Asynchronous JavaScript and XML (AJAX).

OK. Faster. Faster how? How much faster?

It used to be that JavaScript engines were so slow that benchmarks served mostly to show that they weren't suitable for anything serious (slow and slower). It's time for some head-to-head benchmarks. Stay tuned.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Faster JavaScript for Firefox 3.1 Thru JIT

Dietrich Kappe, Wednesday, August 27, 2008 @ 12:25 am

I was expecting the next major advance in JavaScript for Firefox to come from replacing SpiderMonkey with Tamarin, Adobe's donated VM for ECMAScript 4. In fact, Tamarin can already do some JIT.

Now surprise, surprise -- SpiderMonkey can do JIT as well, as Brendan Eich, Mozilla's CTO describes in his blog. The technique used in both Tamarin and SpiderMonkey is called tracing, where during code execution, each hotspot (code that is executed a whole lot) is traced and compiled, so the next time it is executed, the compiled version is used. The beasty is called TraceMonkey and boasts several orders of magnitude improvements over the old SpiderMonkey.

Since this JIT involved actual compilation, you have to look at which architectures TraceMonkey supports. Again from Brendan's blog:

We have, right now, x86, x86-64, and ARM support in TraceMonkey. This means we are ready for mobile and desktop target platforms out of the box.

Sweet. I guess that means the Intel Macs are supported.

There are still some bugs, of course, but this is great news for sophisticated Ajax apps on Firefox. Will Microsoft respond? Is a JavaScript JIT upgrade in the works for IE? This is an arms race I can get excited about.

Update: John Resig of JQuery has some more details and demos about TraceMonkey.

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

Implementing linked multiselects with jQuery, LiveQuery, and Low Pro: Part 2: First pass at the actual code

Brian Dillard, Monday, August 25, 2008 @ 2:54 pm

In last week's post, I introduced the linked multiselect widget I was asked to implement on a tight deadline for an unexpected project assignment. I showed some demo code in action and discussed the user experience issues that shaped my requirements. This week, I'll walk through the actual code - or at least my first pass at it.

Like a lot of developers who should know better, I sometimes shirk the technical design phase on quick projects, then regret it later. The code I handed off for this project got the job done, but it wasn't very DRY or elegant. Luckily, I've continued to refine it into something I'm not ashamed to blog about. Next week, I'll show off the final, refactored code and try to draw some conclusions about the entire experience. But first - the original, unrefactored code:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Implementing linked multiselects with jQuery, LiveQuery, and Low Pro: Part 1: Requirements and interaction design

Brian Dillard, Monday, August 18, 2008 @ 6:10 pm

Last week I spent a couple of days lashing together a UI widget for a project that needed a little Ajax assistance. As always, I looked for an opportunity to learn something along the way, so I got signoff on using jQuery and some plugins I hadn't previously employed.

The result? A down-and-dirty mini-project that let me test drive Color Animations, jqModal and Low Pro for jQuery while employing tried-and-true solutions such as jQuery Templates and Live Query. What's more, the requirements for the widget itself left room for some careful consideration of user experience design.

In the end, I built a client-side demo in just a few days and handed it off to the project lead for integration with a complex back end. Now I'm free to refine my deadline-constrained code into something a little more OO and share the results.

This week, I'll talk about the project's complex usability requirements and Pathfinder's user-centered solution to those requirements. Next week, I'll walk you through our first pass at building custom code, roping in open-source libraries and making it all work together on a tight deadline. Finally, I'll walk you through the refactoring process so you can see the final, properly factored and reusable version.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Working effectively as a team of one: Five tips for front-end developers on Agile teams

Brian Dillard, Monday, August 11, 2008 @ 5:33 pm

Most UI engineers - a.k.a. front-end folks - have worked in environments where they're a shared resource of one person. I often did so early in my career, when I played "webmaster" to a team of writers, editors and visual designers at various online publications.

Now that I'm the Ajax lead at a small, Agile software development firm, I'm no longer the only technical person in the room. But I'm still just as specialized. It's not that my JavaScript, CSS and JSP skills are any more important than somebody else's SQL, Java or Swing skills. It's just that I'm a team of one, so utilizing me effectively takes a little more planning. Everybody at Pathfinder wears multiple hats, but I was hired specifically to wear the same hat all the time.

Many projects at Pathfinder seek my input, but my attention can only be parceled up into so many chunks. I can't serve as an actual development resource on every project. Over time, I've realized that the following strategies help me deliver the value I need for my company:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

More on Crockford’s and Flanagan’s approaches to JavaScript

Brian Dillard, Tuesday, August 5, 2008 @ 1:03 pm

In my recent review of "JavaScript: The Good Parts," I compared this new Douglas Crockford treatise with David Flanagan's canonical "JavaScript: The Definitive Guide." I subsequently stumbled upon a perfect example of the authors' divergent approaches to my native programming language.

Here's Flanagan discussing the dreaded with statement:

Despite its occasional convenience, use of the with statement is frowned upon. JavaScript code that uses with is difficult to optimize and may therefore run more slowly than the equivalent code written without the with statement. Furthermore, function definitions and variable initializations within the body of a with statement can have surprising and counterintuitive behavior.* For these reasons, it is recommended that you avoid the with statement.

* This behavior, and the reasons behind it, are too complicated to explain here.

And here's Crockford:

JavaScript has a with statement that was intended to provide a shorthand when accessing the properties of an object. Unfortunately, its results can sometimes be unpredictable, so it should be avoided.

The statement:

with (obj) {
    a = b;
}

does the same thing as:

if (obj.a === undefined) {
    a = obj.b === undefined ? b : obj.b;
} else {
    obj.a = obj.b === undefined ? b : obj.b;
}

So, it is the same as one of these statements:

a = b;
a = obj.b;
obj.a = b;
obj.a = obj.b;

It is not possible to tell from reading the program which of those statements you will get. It can vary from one running of the program to the next. It can even vary while the program is running. If you can't read a program and understand what it is going to do, it is impossible to have confidence that it will correctly do what you want.

Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexical binding of variable names. It was well intentioned, but the language would be better if it didn't have it.

The difference between these approaches to the same topic can't help but remind me of a favorite episode of "Buffy the Vampire Slayer":

Oz: [to Faith] I'm wondering about your position on werewolves.

Willow: [proudly] Oz is a werewolf.

Buffy: It's a long story.

Oz: I got bit.

Buffy: Apparently not that long.

--BtVS S03E03: "Faith, Hope & Trick"

There's value in exhaustively documenting a language. But without concrete examples of why something's bad, programmers - obstinate autodidacts that they are - probably won't heed your advice. The Crockford book doesn't always provide such persuasive logic, but it usually does, making it ideal for JavaScript noobs who need to understand how to use the language safely and effectively.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

“Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms” now live at IBM developerWorks

Brian Dillard, Monday, August 4, 2008 @ 1:16 pm

Last week, IBM developerWorks published the fourth installment in my jQuery/UxD tutorial series. Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms shows how to turn a multi-page checkout process into a single-screen interface using two jQuery plugins: jQuery Form and jQuery UI Tabs. As with previous installments, I tried to show not only how to use open-source JavaScript libraries, but why. Ajax integrates into existing webapps best when it's used to improve their user experience design rather than just thrown in for its own sake. In the example application I constructed for this series, Ajax was used to simplify the shopping process rather than complicate it needlessly. As always, I focused on progressive enhancement so that the overhauled interface didn't leave any users behind. This is the final installment of this series, at least for now. I hope to publish on additional topics at developerWorks soon.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Book review: “JavaScript: The Good Parts” by Crockford

Brian Dillard, Tuesday, July 29, 2008 @ 1:04 pm

I heart David Flanagan. I'm making my way through "The Ruby Programming Language" this summer. Its exhaustiveness really satisfies. But a decade ago, my programming Bible was Flanagan's "JavaScript: The Definitive Guide". As I transitioned from a career in content to a career in code, "the Rhino book" taught me everything I needed to know about object-oriented JavaScript, DOM scripting and the other building blocks of today's Ajax landscape. I've bought a hard copy of each of the book's five editions. It remained, until recently, the only JavaScript book I'd recommend.

That all changed with the recent publication of "JavaScript: The Good Parts" by Yahoo's Douglas Crockford. Crockford probably needs no introduction. His incisive website and frequent blog posts have championed JavaScript's power and potential while calling out its drawbacks and frequent misuse. Now, with "JavaScript: The Good Parts," he has managed to provide a reference as useful for JavaScript pros as it is for novices. Part language primer, part apologia and part critique, Crockford's book draws from and extends many of his long-gestating themes about how to use JavaScript - and how not to use it.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (5)

agile ajax

Project Website Part 4: Drag and Drop in jQuery

Noel Rappin, Friday, July 25, 2008 @ 12:12 pm

Drag and drop is like those Nutty Bars snack things.

Allow me to explain.

I like Nutty Bars. But I never expect to like them. They are kind of funny looking, for one thing, what with that weird criss-cross pattern on the top, and the chocolate never quite covering the wafers. But when I get past that and actually eat one, it's actually kind of tasty.

Which brings me to drag and drop. Which I always expect is going to be an overwhelming pain in the neck (probably based on bad experiences using Java Swing). But whenever I manage to get over it and actually implement a web drag and drop, I'm always surprised at how easy it is using an Ajax framework.

jQuery is no exception.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

Multiple Column Sorting with Drag and Drop using Scriptaculous

Anthony Caliendo, Wednesday, July 23, 2008 @ 4:14 pm

The other day I wanted to do drag and drop between multiple columns using scriptaculous. Allowing this behavior is extremely simple, but out of the box the interaction feels clunky. Here, we'll be going through an example of how to do multi-column drag and drop with scriptaculous.

Enabling multi-column drag and drop just involves setting a single option, but without setting a few other options the dragging will feel jittery and won't allow us to drop on empty areas. Also, interaction with the server will require a small bit of consideration to support persistence of any changes.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax