jQuery Notes

Amazon.com product

Hey: there’s early 2009 jQuery and then there’s 2010 jQuery (but not quite the latest). These notes serve to mark my jQuery experience as ‘updated’ compared to, say, Bryan of three months ago.

“New Official jQuery Plugins Provide Templating, Data Linking and Globalization”

John Resig: “Today, we’re very happy to announce that the following Microsoft-contributed plugins—the jQuery Templates plugin, the jQuery Data Link plugin, and the jQuery Globalization plugin—have been accepted as officially supported plugins of the jQuery project. As supported plugins, the jQuery community can feel confident that the plugins will continue to be enhanced and compatible with future versions of the jQuery and jQuery UI libraries.”

My notes today will not include any experience with these new features in jQuery. It is worth mentioning that jQuery “Templating” is an appreciated addition that addresses what is lively (as in not “dead”) about Silverlight declarative UI programming.

jQuery UI and Theme Roller

jQuery UI now includes the Auto-Complete plug-in from Jörn Zaefferer. The Theme Roller Web application displays the plug-in. Now, some remarks about Theme Roller:

  • The URI-based format for a ‘saved’ theme is cumbersome.
  • The ZIP archive of the custom theme uses earlier versions of jQuery, so, like Visual Studio IntelliSense support, it is out of date with the latest jQuery release. John Resig is awesome but he’s not that Blue Guy from the Watchmen!

I need to see a Theme Roller workflow that someone is proud of…

New and awesome (to me) API features…

  • The jQuery.closest()method was there in version 1.3 (c. 1/2009). I use this quite a bit now.
  • The jQuery.addClass() and .removeClass() methods were in jQuery since 1.0 (which is an embarrassment to me) but less than a month ago I was using .attr('class', 'foo') and .removeAttr('class') (which also betrays a lack of understanding of how HTML supports multiple CSS classes).
  • The jQuery.is()function provides truth tests for selectors. Another one from version 1.0 that escaped me!
  • This is how to use the .val()function with select element options: $('select.foo option:selected').val();
  • About the :nth-child()selector: “Because jQuery’s implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is ‘1-indexed’, meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript’s ‘0-indexed’counting.”

Exotic Internet Explorer Issues

Using $('…').css('background-color', '…') to set the backgroundColor property on a DOM node that does not have this property throws an “invalid property value” error for Internet Explorer 8, running in IE7 mode (with Developer Tools). Evidently, in IE7, tr, td and option do not have a backgroundColor property. Instead of doing this, it is better to use jQuery.addClass() and .removeClass() methods (see above)—or the .toggleClass()method—to toggle the CSS class that controls background color.

C# Influences

The way I use Func<T> and Action<T> in C# influences how I share ‘local’ functions in JavaScript. Here is a pattern I’m indulging these days:

$.irpc.renderTable = function (serviceData) {
    var func = this;
    $('#DataTable tbody').each(function () {
        func.enableEditButton = function (editButton) {
            //define rules to enable/disable edit button:

The idea here is to avoid Doug Crockford’s “too many vars error” (but I actually dial this down in JSLint for Visual Studio 2010).

The jQuery Validator is freaking huge!

Any documentation introducing the jQuery Validation plug-in should never underestimate its conceptual size and complexity. Simultaneously, it’s quite easy to use (for ‘simple’/declarative cases). My attempt to capture all of the aspects of this plug-in are preserved on my new Azure server. Here are some additional points:

  • The .rules()method requires $("form").validate() to be called first.
  • It is quite tempting to assume that naming form elements with array notation will make Validator validate all elements of that name. No! It only validates the first element of that name. One solution to this problem is to rewrite the Validate source code (not attractive to me). Another solution is to imperatively handle the click event of the form-submit button.

The Grid is Not Trivial

There are reasons why—after over four years of jQuery—there’s no accepted (free) grid solution. (Here, by the way, is where Microsoft can really kick ass.) Some points below sketch out this space:

Related Links

“Integrating JSLint more tightly into NetBeans” and other links…

Kent Beck of Three Rivers Institute on the RailsConf 2008 stage. ekschi.com: “…I still had to navigate to each JavaScript issue manually. This is a huge pain, something that I haven’t done since my earliest days as a developer, before I learned about Emacs’ next error functionality. NetBeans also has a really nice “Next Error” function that automatically navigates the user to the next error detected by the compiler. Unfortunately, NetBeans didn’t recognize the native output of JSLint. This got me thinking about building a custom wrapper around JSLint so I can transform the output to whatever NetBeans would be happy with.” This article leads to jslint4java.

“Netbeans, JavaScript, Ant, Hudson, and JSLint: Oh my!”

Ari Shamash: “…there is a lot developers can do to make the experience with JavaScript a whole lot better. Don’t get me wrong, JavaScript can be amazing, but it can also be a nightmare. Part of the nightmare is that the development environments and tools for JavaScript are not yet on par with other environments. My current project involves writing a whole lot of JavaScript. We’ve gone through the usual JavaScript cycles—we’ve been burned by both programming errors as well as deployment errors. …This blog entry describes how we’ve integrated JSLint into our Continuous Build/Integration environment, so we can better control the code that we write.” This little investigation of mine leads to a case where Mozilla’s Rhino is actually useful to me.

“Manifesto for Agile Software Development”

The Poetry of Kent Beck and Company:
Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan

Drifting on a Life Raft 60 Days after Being Laid Off

Relics of My Failed Yahoo! Interview My previous post marked just seven days of unemployment. Since then, I have journeyed though a brave new world of IT job searching. It’s important to remember that I have not been “on the market” for almost ten years—so monster.com and dice.com are a new set of tools to me.

Were it not for the patient care and feeding of my resume by the technical recruiter that ‘discovered’ me back in 1996, the kind and lovely Nattineque McClain of Technical Connections, I would have hit the ground crawling. Right about now, I am not quite running over new ground but jogging. I have collected a few remarks:

  • I was pleasantly surprised to find out that the code I have published on SourceForge.net and CodePlex.com is actually be download read by potential employers. This is the most respectful act a potential employer can perform on my behalf.
  • Apart from the worst economy in (almost) the entire history of this nation, one of the reasons why there is serious delay for my employment is the fact that the jobs offered to me are “senior-level” positions. These spots seem to be watched very closely. It’s understandable—and of course I am, so far, a terrible interviewer.
  • At least two different head hunters have given me some free advice (not including non-validated parking in some places) that I find very important: I need to answer interview questions quickly. I tend to nervously wander about trying to drown the space with my years of experience. This is a sickening habit coming from me that needs to stop.
  • According to one guide of “effective interviewing techniques,” I have often failed to: relax, be brief and succinct but not cryptic, listen and be forthright in my answers, make sure to let the interviewer know I want the job or, worse, avoid providing trivial reasons for wanting the position.

Interview Highlights: Yahoo! Music and Northrop Grumman

Just for my record, it’s important to me to remember that I celebrated a personal level of maturity in my career by semi-ceremoniously interviewing at Yahoo! Music in Santa Monica with Alex Sirota. I have very little PHP projects listed on my resume (I do not include my extensive Songhay System work, dating back to 1998) but was still called in for an hour-and-a-half chat with pen and paper (using a keyboard makes me a terrible scribbler). I was quick to express my appreciation for Douglas Crockford—and I even took a picture of the Santa Monica campus trashcan.

Out of respect/celebration for my father, I interviewed at Northrop Grumman. The military security aspect of the place was very, very present. Yeesh! The reception there alone made me nervous. I was asked a technical question by the interviewer that I flat out could not answer. It was totally my fault. The framing of the question ‘forced’ me to answer using technologies I would not use in the ‘traditional’ way. I should have answered the question using my XML and XSLT experience with .NET instead.

And, speaking of technical questioning, potential employers are asking very, very tough technical questions. A few weeks ago, I took a 45-minute test online with some the hardest questions about C# I have ever seen—I actually had to take notes afterwards like this one: “C#: the differences between readonly and const; MSDN; l-value.” I thought for sure I failed this particular test and was pathetically surprised to find out I was wrong. For another online music outfit in Santa Monica, I just spent the last weekend building an ASP.NET MVC application simply for the possibility of an interview. I see what I learned in this trial as personally rewarding for the long run but, right about now, extremely unpleasant gains.

“YUI Compressor” and other links…

Quality, quality, quality

developer.yahoo.com: “In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford’s JSMIN, the Dojo compressor and Dean Edwards’ Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs). …The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter’s regular-expression-based CSS minifier.”

“Combo Handler Service Available for Yahoo-hosted JS”

yuiblog.com: “We’ve been talking for a long time at Yahoo about the importance of minimizing HTTP requests to improve performance. One important technique for YUI users has long been to use the pre-built "rollup" files (like yahoo-dom-event.js, which combines the YUI Core in a single minified HTTP request) and to create custom rollups that aggregate all of your YUI JS content in a single file. …we’re now able to offer ad-hoc file aggregation — "combo handling" — to file served from yui.yahooapis.com. …Combo-handling of YUI CSS files is not supported at this time [July 16, 2008 at 11:16 am].”

“YUI Local Combo Handler”

Davs Rants: “There have been several questions on how to use the Yahoo! combo handler to serve YUI files over SSL. The Yahoo! combo handler doesn’t support SSL, so I needed another option. I have written an example what shows how to setup a local combo handler and configure YUI 2.6.0 to use it. Currently the example doesn’t work for YUI 3.0.0pr1 but it will once YUI 3.0.0pr2 is released.”

“Enhancing YUI-based Applications With Audio”

Scott Schiller: “For audio on web sites today, developers often display a list of HTML links directly to MP3 files. This method is simple, universally-understood and indexable by search engines, but makes for a confusing and inconsistent browsing experience by default. To have ‘progressively-enhanced’ links to MP3s that will play in-place when clicked, something must intercept the browser’s normal download action and subsequently handle the request; by combining Javascript and Flash to handle the loading and playing of MP3 content, this can be done very effectively.” It’s great to see Scott’s SoundManager mentioned again… for more, see “‘SoundManager 2: Cool New Flash 9 Features’ and other links…” and “Scott Schiller, Douglas Crockford, YUI and SoundManager 2.”

“JavaScript in Internet Explorer 8” and other links…

Buy this Book at Amazon.com!

John Resig: “In all I’m positive about this release, even with all the ups-and-downs. Seeing features like querySelector, ARIA, and postMessage helps to warm my frosty, bitter, heart. While there’s still some major faux-paus in this release (no new JS langauge features?, no W3C events?, no CSS3 selectors?) I think we can, at least, be excited to see what happens in the next beta. …If nothing else the Internet Explorer team has done a great job of tackling many of the expectations of the development community – if they continue this trend I don’t think anyone will be left disappointed.” What has me confused right about now is that I have yet to find the John Resig writ about how many jQuery samples break just like Yahoo! YUI in IE8—certainly all this breaking cannot be happening only for me. Update: It turns out that I had Disable > Script enabled on my IE8 Toolbar. This is actually quite a relief… I am ready join the rest of the world now…

“Site Compatibility and IE8”

IEBlog: “IE8 now has a native JSON object, compliant with the JSON support described in the ES3.1 Proposal Working Draft. Some pages detect the native JSON object, then use it in a non-standard way. This typically results in a script error and breaks handling of AJAX requests.” This is great!

“IE exposes new properties for certain AJAX features such as Cross Document Messaging (XDM), even in Compatibility View. Adding custom properties to the Event object can conflict with these new properties, such as "source".” I’m almost sure this is contributing to IE8 breaking YUI and jQuery.

“What are the most likely causes of Javascript errors in IE8?”

Stack Overflow: “However, if like the majority, you are running with a doctype set, and thus in IE8 Standards mode, the following changes have occurred…” Most serious web developers have the doctype set…

“Use Asp .Net MVC Ajax Helpers with jQuery!”

Martin From: “I have rewritten the original Microsoft Javascript files that support the Ajax features provided by the Ajax helper found in the MVC framework.” This article might be redundant with the CodeProject.com article, “Using jQuery for AJAX in ASP.NET”…

“Podcast: Microsoft on ECMAScript, IE 8”

John Resig: “Dion Almaer just posted the fourth episode of the Open Web Podcast in which we sat down with Allen Wirfs-Brock and Pratap lakshman and discussed ECMAScript and Internet Explorer 8. …We were also led into discussing the disconnect between the ECMA standard and the W3C standard, primarily the DOM and JavaScript. Pratap was a little disturbed that the ECMAScript spec only had a few words on DOM, and some banter occurred around the role of JavaScript as being the One True Open Web language, or whether there is a place for the polyglots.”

“John Peloquin’s Multi-layer Calendar”

Yahoo! User Interface Blog: “YUI contributor (and author of the Interval Selection Calendar example) John Peloquin of W. Hardy Interactive has released another excellent option for Calendar implementers: a layered navigation path for selecting years and months. The layered approach provides an alternative to the built-in navigator interface that ships with Calendar.”

“JSINQ: LINQ style access for JavaScript objects”

ajaxian.com: “With JSINQ, you can write SQL-like queries (or LINQ-like if you will) against arrays, DOM node lists or your own enumerable types. It’s a complete implementation of LINQ in that it has the complete set of LINQ extension methods and also comes with a query compiler that translates LINQ queries to JavaScript code.”