Topic: Javascript

The Difference Between a Compiler and a Compressor

Dietrich Kappe, Monday, November 9, 2009 @ 5:38 am

With the release of Google's Closure Tools comes the perennial misunderstanding of what a compiler is. When we have a compiler that takes in C or C++ code (pick your poison) and produces machine code for a particular chip, it's clear that the output is not the same as the input. But when you have a JavaScript to JavaScript compiler that' supposed to make the resulting code more "efficient," it may be tempting to think of it as something just like a compressor, like Packer.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

Better JavaScript Development with Google Closure Tools

Dietrich Kappe, Friday, November 6, 2009 @ 11:04 am

Google has release Closure Tools, the set of tools they used to write applications such as Gmail. What is it? It consists of three parts:

1. A compiler which is a "JavaScript optimizer that compiles web apps down into compact, high-performance JavaScript code. The compiler removes dead code, then rewrites and minimizes what's left so that it will run fast on browsers' JavaScript engines. The compiler also checks syntax, variable references, and types, and warns about other common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source."

   So it compiles JavaScript into JavaScript and makes it behave more like a statically typed language.

2. A library which contains both widgets and datastructures and algorithms. Sort of the standard library that JavaScript was always missing.
3. A templating system you can use to assemble a user interface.

Since this system has been in use at Google to develop real applications over a long period of time, I expect it to be a fairly robust system. In many ways it solves some of the same problems that GWT is trying to solve, but in a different way.

I'll see if I can kick the tires over the weekend and post about it next week. So many cool tools and frameworks, so little time...

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

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

Chicago JavaScript Meetup Group draws a big audience with varied skill levels

Brian Dillard, Monday, January 26, 2009 @ 12:17 pm

The Chicago JavaScript Meetup Group spurred more than 50 of its members to brave harsh weather Thursday night for the group's fourth free get-together since its founding last October.

Organizer Vlad Didenko led the charge with an in-depth look at Firebug, while assistant organizer Justin Meyer contributed a discussion of Ajax fundamentals.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

jQuery 1.3: Good stuff, but the API browser’s the real news

Brian Dillard, Friday, January 16, 2009 @ 12:51 pm

I'm as geeked about jQuery's 1.3 release as the next developer. But I'm even more excited about the new API browser developed by Remy Sharp and available here.

For as long as I've been a jQuery user - going on 18 months now - I've been frustrated by the slow speed and sometimes intermittent availability of the jQuery documentation site. Now we've got a blazing-fast API browser that presents jQuery Core and jQuery UI side by side in the same cool interface. Better yet, it's available as an Adobe AIR app for offline viewing. Sweet!

I could quibble about the lack of bookmarkable URLs and the occasionally sparse documentation of corner cases. Instead, I'll just remain upbeat about this huge step in the right direction. No matter how intuitive jQuery's API, it's a powerful library whose roster of methods continues to grow. Nothing speeds up development faster than quick, persistent access to quality API documentation.

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

jQuery 1.3: Plugins continue to migrate to the core

Brian Dillard, Friday, January 16, 2009 @ 12:51 pm

jQuery celebrated its third birthday Wednesday with the release of the brand-new 1.3 version. This latest release includes a bunch of cool new stuff which has already been discussed to death elsewhere. To me, however, the most interesting aspect of jQuery 1.3 is the movement of former plugin functionality to the core library.

Live events are a new twist on the venerable, and indispensable, Live Query plugin, while the upgraded, more granular effects queues were previously tackled by add-on authors. IMHO, this kind of migration is A Good Thing, providing greater parity with other core JavaScript and effects libraries (such as Scriptaculous's FX queue) while offering compelling feature differentiation (event binding throughout the full lifecycle of an Ajax page).

• Digg
• Reddit
• del.icio.us

Comments (3)

Software Development

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

PureMVC, Spanning the Platform Spectrum?

Dietrich Kappe, Tuesday, December 16, 2008 @ 3:51 pm

At Pathfinder we do a fair amount of desktop style development -- iPhone/Cocoa, WebForms, Swing -- and web application development -- Grails, Rails, JSP, ASP.NET, etc., etc.. In the last two years we, like a lot of other software development shops, have experienced a convergence in our efforts. The web is coming to the desktop in the form of Air and the Desktop is coming to the web in the form of RIA's. Now web MVC, which used to be a pretty benign pattern mostly concerned with app flow and validation, is starting to resemble desktop MVC, which has to deal with document-centric models and long lived views and all of the plumbing that requires.

So we recently had a powwow between all the different parties to talk about MVC and this convergence. With the exception of the insufferable Mac and iPhone developers and their disgustingly mature Cocoa framework, we all agreed it would be nice to have an application level MVC framework for each platform. We also agreed that Swing is a great example of what happens when the vendor doesn't provide such a thing -- spaghetti code that relies on component level MVC and hard wiring at the application level. There are a few MVC frameworks for Swing, such as TikeSwing and Spring Rich Client (soon to be superseded by Spring Desktop), but for every Swing app that has this sort of design, there are hundreds that are just a mess.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

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

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 (3)

Software Development

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 (2)

Software Development

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)

Software Development

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 (4)

Software Development

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 (14)

Software Development