If you don’t know what Unobtrusive Javascript term means, this technique reflects what happened a few years ago with HTML pages when Cascading Style Sheets (CSS) were introduced. Before CSS, the presentation of HTML elements was defined inline. Did you remember the ugly font tag or the widely-adopted align attribute?

Then CSS come, and the document presentation attributes were slowly moved outside the main HTML document. Something similar is happening now with HTML and JavaScript. Before JavaScript frameworks made so easy to bind custom events to HTML elements, the most common way to append a JavaScript function was to use the HTML-Javascript bridges such as the onevent attributes.

With the huge adoption of JavaScript programming, HTML documents fall again into the trap of mixing presentation/interaction elements within the page content and structure.

Let’s look the result of a link_to Rails helper call with a custom :method parameter.

generates

Pretty messy. Isn’t it? What this helper does on click is to generate a form element, set a few attributes and submit the form. This is necessary because the browsers doesn’t support the DELETE HTTP method by default so Rails needs to emulate it.

The essence of the Unobtrusive JavaScript technique is to define the JavaScript interaction in a separate behavior layer. With Rails 3, the same execution is composed by the HTML output of the link_to helper

and the separate definition of the JavaScript script to execute.

Benefits

The major benefits of Unobtrusive JavaScripts are:

• Separation of the behavior from the markup (as happened for CSS with the separation of the presentation from the markup)
• Reusable code (both HTML and JavaScript code)
• Progressive enhancement
• Capability detection and gracefully degradation, as the opposite of browser detection. You can easily skip an entire JavaScript fragment if the current browser doesn’t support it or likewise use the JavaScript to replace features not natively supported (such as HTML 5 features).
• Better cache support

Unobtrusive JavaScript allows developers to write code much more easier to maintain and debug, with the appropriate use of design patterns and high-quality development techniques already adopted in other mature programming environments.

Unobtrusive JavaScript and JavaScript frameworks

Despite the use of Unobtrusive JavaScript is not a language feature but rather a coding habit, the adoption of this technique has been largely influenced by the availability of high-level JavaScript frameworks. The main reason is that JavaScript frameworks offer an easy approach to define and attach custom scripts to HTML elements, taking advantage of JavaScript features such as closures and relieving the user from dealing with cross-browser compatibility.

Let me show you an example using the jQuery JavaScript framework. This is a traditional, inline, JavaScript code.

This is the equivalent with jQuery

The advantages become more evident when the code complexity grown. With the following jQuery code you can show/hide all tables with the class .special by clicking a generic element with class .button.

Now, sit back for a moment an think about the example above. Using the traditional inline JavaScript programming you would have to place a call to your own toggle function in every single table element containing the .special class, with a lot of code duplication. Also, what happen if you don’t know in advance the number of these elements? What if the number of the elements can change, perhaps as the result of an other JavaScript execution?

With the separation of the behavior from the markup, you can easily change the behavior of an element leaving the DOM element as it is, exactly how you can change the color or the size of a link using CSS without actually modifying a single byte of the HTML document.

Equally important, you switch from a JavaScript framework to an other, simply replacing the behavior layer implementation. The switch won’t require any change on the HTML document side.

Unobtrusive JavaScript and HTML 5

Technically speaking, there are no dependencies between Unobtrusive JavaScript and HTML 5. However, you can take advantage of some HTML 5 features to write even more flexible and reusable Unobtrusive JavaScript.

Again, a good example is represented by the Rails 3 Unobtrusive Javascript feature. Did you remember the click-and-confirm method?

We already know we can write an unobtrusive version as follows

Let’s move one step forward. We can write a super-reusable script by moving the confirmation message back to the HTML document, having the script to automatically extract it. A new feature being introduced in HTML 5 is the addition of custom data attributes.

Also note that, with the new data-confirm attribute we don’t need anymore to assign custom classes to identify the element. An other important relationship between these two topics is that you can use Unobtrusive JavaScript to emulate HTML 5 features whenever a browser doesn’t support them natively. I already mentioned this before when I wrote about capability detection.

A real example is the jQuery autofocus plugin I created a few months ago to make the HTML 5 input autofocus attribute work with non-HTML-5-compliant browsers.

Likewise, there are several plugins to emulate the HTML 5 placeholder feature.

More…

Further readings about Unobtrusive JavaScript: Wikipedia, Unobtrusive JavaScript Coursebook.

Related posts

1. Unobtrusive JavaScript in Rails 3
2. How to add a new feed handler in Firefox 2.0
3. Understanding Ruby and Rails: Serializing Ruby objects with JSON

Learning jQuery 1.3 (US | UK) is one of the most famous books about jQuery, the popular JavaScript framework. It’s written by Karl Swedberg & Jonathan Chaffer and published by Packt.

Structure

The book is implicitly divided into tree parts:

• The first part, from chapter 1 to 6, provides an introduction to the framework. You’ll learn the philosophy behind jQuery, how to use it and how jQuery can help you to write more powerful user interactions.
• The second part, from chapter 7 to 9, contains several real-world examples, pulling together what you’ve learned in the previous part. Most of the examples are actually overtaken by existing jQuery plugins, however creating something from scratch it’s an important training and it forces you to have your finger in the pie.
• The third part, from chapter 10 to 11, shows you how to extend the jQuery core library using existing plugins or creating and packaging your own extensions.

Requirements

You don’t have to be a JavaScript master to read this book, though some JavaScript skills might be helpful. Moreover, a basic programming knowledge can help you to better understand the examples.

If you want to leverage your JavaScript skills, jump to Appendix C. It offers a really interesting overview about Closures: what they are and how you can use them to your advantage.
Reading this section before the other chapters can make the difference later, when you’ll have to understand the usage of anonymous functions and callbacks in the examples throughout the book.

Quite obviously, you need a good HTML and CSS knowledge.

If you are looking for a JavaScript reference, this isn’t the book for you. Remember, this book covers the jQuery JavaScript framework, not the JavaScript language.

Plus

One of the aspects of the book I appreciate the most is the number of examples. You don’t have to wait more than ten pages to see the first example of a HTML page enriched by a jQuery effect. Examples are clear, effective and they never overshadow the narration.

Also, this book is not merely a learn-by-example publication. The authors never delegate to the example the role of teaching you how to learn jQuery but they always use them in support of the theoretical explanation. For me, this is a really important point. The risk of learn-by-example books is that, at the end, you are just able to reproduce what the examples show you without having a global mastery of the argument.

Two other important concepts I learned reading this book are graceful degradation and progressive enhancement. I must admin I didn’t care too much about them before reading the book.
The authors remarked these concepts multiple times throughout the book underlining the importance of using JavaScript and jQuery to improve interaction and usability ensuring that a page will render as accurately, even if not as beautifully, with JavaScript disabled as it does with JavaScript turned on.

Minus

The book does a good job to introduce jQuery and its most important features. However, I would have dedicated more pages to plugins.

Plugins are one of the reasons of the success of jQuery. The books dedicates two chapters to plugins: the first on using plugins and the second on developing plugins. Whilst the list of jQuery plugins continue to grow up and it’s impossible to keep a book up-to-date with it, I would have appreciated a more deep overview about authoring a plugin.

Something like plugin best practices, suggestions and why not, plugin development patterns.

In conclusion

If you are an user interface designer or interaction designer, the first part teaches you how to alter the structure of an HTML document attaching or moving page elements, fire off behaviors responding to user events and interact with server-side functionalities.

If you are a programmer, the third part offers some precious suggestions to package your scripts making your code more reusable and maintainable.

Regardless your activity, if you are looking for a book to better understand how jQuery works, Learning jQuery is definitely a recommended reading. Someone can argue that online you can easily find tons of articles and discussions about jQuery that make a book quite useless. In my opinion, this is exactly the reason why a book can make the difference. When reading a book, you find all the information you need concentrated in a single source, organized into a logical learning flow and you don’t need to waste your time searching for information, verifying blog credibility or discarding outdated solutions. A good book if often the preferred starting point if you want to learn a new technology in the minimum amount of time.

Where to Find Learning jQuery

You can get a printed copy at Amazon.com, Amazon.co.uk, or at your other favorite book seller.

Related posts

1. HTML 5 Up and Running Book Review
2. Design Patterns in Ruby Book Review
3. Eloquent Ruby Book Review

Likewise, people tends to pay more attention when an expiration is expressed in words. For this reason, the next RoboDomain EAP will include a small improvement on how dates are formatted. When applicable, RoboDomain will use a relative time — in 2 hours, in 3 days, in 1 month — instead of the raw timestamp value.

RoboDomain with Relative date

Under the hood, we used the awesome timeago jQuery plugin with a couple of customizations.

This feature, along with the usability improvements and many other changes, will be available with the next EAP release.

Related posts

1. RoboDomain usability improvements
2. Welcome RoboDomain

December 30th, 2008. This post was published long time ago on the Italian version of my blog then moved here after the English blog has been opened. Please note that the following post can contain outdated information and (probably) multiple typos.

Firefox 2.0 is out… uhm? what are you saying? what a great news?… oh yeah, but this isn’t the main topic of this post.

As someone of you probably remember, on June I made a few tests with Firefox 2.0 Bon Echo 3 focused on how the new Firefox handles feeds. Firefox 2 gives you full control over Web feeds, showing you a preview and letting you choose how you want to subscribe.

At the end of the tests I wrote an article showing how is possible to add a new content handler, aka web aggregator, in Firefox 2.0… it was digged too! (Note. The article is no longer available).
Since Firefox 2.0 was not yet released at the time the article was written, I didn’t know that there was an easier way to add an content handler without tweaking by hand Firefox registry.

Using registerContentHandler() javascript function is possible to add with just one click a new feed handler… how? Let me show you.

Adding a new feed handler to Firefox 2.0 with registerContentHandler()

registerContentHandler() is a JavaScript function that allows you to register a new content handler in Firefox 2.0.
It accepts 3 required params:

mimeType

the content mime type.
For a feed must be application/vnd.mozilla.maybe.feed.

uri

the content handler URI.
%s can be used as a placeholder for the resource URI.

title

the content handler Title

Once again, let’s use Rmail as example.
Rmail add-new-subscription URI is (always the same) http://www.r-mail.org/bm.aspx?rss=%s while content handler title is Rmail.
Thus, the final JavaScript should looks like the following.

You can put/call this JavaScript function where everywhere in a HTML page, for example as a link (as Netvibes did)…

Example 1.

Look & feel

Click here and add Rmail

Code

… you can put it into a form button…

Example 2.

Look & feel

Code

or include it into a JavaScript function and call it anywhere in the page.

Example 3.

Code

More power to registerContentHandler()

This tutorial might be closed here, but the real reason why I wrote this post is to show how is possible to add more power to registerContentHandler() with a few JavaScript lines.

The idea comes from this post where Randy shows a button to add Rmail as a new content handler.
In a comment pat asks which is the best technique between Randy’s magic button (see example 2 and example 3) and my tutorial (Note. The tutorial is no longer available).

This is Randy’s answer.

Pat,
Simone’s technique is actually superior as it also includes the email address. I’m working on making that possible too!
Randy

Don’t worry Randy, I will give you an help! :D

The only difference between my code and Randy’s code is that I used the following Rmail subscription string (please note the mailto param)

instead of

Thus, what we should do is find a way to allow user to type its own email address and append it to the content handler URI.

My first idea was to create a new input text field. It’s better than using other techniques such as JavaScript input boxes since the field can be easily filled with a server side programming language in a more complex site, can be validated and you can re-use in thousand ways.
While I was writing the code, I decided to do a little more. Why not creating a script that allows developers to add custom arguments to a content handler URI instead of a single one? Rmail just needs a mailto param but other readers may need mail and user…

This is what I wrote!

The following script allows you to register a new content handler in Firefox 2.0 just calling a simple function.
In addition, you can create as many form field as you wish calling them name="args". For each field, the script will collect its value and if the field isn’t empty, will appends the value to the content handler URI.

Let’s see an example. Again, I will use Rmail and I will show you how it’s easy to append your personal email to the URI.

Example 4.

First you must include the script.
Don’t forget to customize chUri and chTitle variables, as written at the top of the javaScript file.

Then add an input text field for each argument you wish to append to the URI. You can also use hidden inputs to pass hidden values. Don’t forget to call them args or the script will not work.

Now call the subWith() function. You can use a link, a button or a common JavaScript event.

Enjoy the confirmation dialog! :D

Related posts

1. FeedBurner Stats 2 Feed