NinjaScript: Javascript so unobtrusive, you’ll never it see coming

We're happy to announce NinjaScript: a jQuery plugin for unobtrusive scripting.
NinjaScript provides:

• CSS-like language for web page behavior
• Define rich behaviors that include both event handlers and transformations.
• Durable behaviors that survive DOM alteration, with performance comparable to jQuery's live() method.
• Handy built-in behaviors for AJAX.

Motivations

Unobtrusive Javascript is one of the coming movements in web design for a reason. Separation of concerns is generally a good thing, and the idea of separating behavior from semantics is pretty obvious once you think about it. If nothing else, it makes it much easier to think about how you structure your site. Just build it out as if this were still 1998 and you couldn't trust a browser to open an alert box, much less submit AJAX, then come back and mark everything up.

On the other hand, one hears a lot about "Unobtrusive Is Hard" and how a graceful degrade takes twice as long, etc etc. At the same time, software exists to encapsulate skills.  Could be you'll be seeing a Rails plugin from LRD soon to convert the big Rails helpers into degrading versions.

Therefore: NinjaScript. Unobtrusive Javascript in a tidy package so that you can get on with your day.

What's it look like?

Here's a very simple example. Suppose you have an existing

$.behavior({
  '#coolness': $.ninja.submits_as_ajax() 
})

$.behavior({
  '.date_entry': { transform: function(elem){ $(elem).datepicker() }},
  '#work_unit_select_all': { click: selectAllWorkUnits },
 
  '#timeclock form.edit_work_unit':    $.ninja.ajax_submission({
    busy_element: function(elem){ return $('#timeclock')}
  }),
 
  '#messages .flash': {
    transform: function(elem) {
      $(elem).delay(10000).slideUp(600, function(){$(elem).remove()})
    }
  },
  '#timeclock input#work_unit_hours': {
    click: function(evnt, elem) {
      $(elem).val(hours_format(task_elapsed))
    }
  }
});

$.behavior({
  '.fun': {
    events: {
      click: function(ev, elem){ $(elem).sing_and_dance(); }
      mouseover: function(ev, elem) { $(elem).shiver_in_anticipation(); }
      //yes: mouseover.
    }
  }
});

Using redirect_to :back to improve user interfaces

It's a scourge that inflicts nearly every website: the dreaded empty page stating "Your search returned no results." Or even worse, the search results page with a header "Search results" and zero content, the footer immediately following the header. This is not only useless, but also confusing to the user, because it takes the reader several seconds to even realize that the search returned no results.

For example, I just got this one on the otherwise lovely workingwithrails.com when I searched for RoR developers in Pasadena, CA:

This is lame, lame, lame. A search results page with no results is guaranteed not to be useful to the user! From a user interface perspective, it's akin to redirecting a user to a login page after they try to access some resource, and then sending them back to the front page or a super-lame "thank you for logging in" page afterwards.    The user should always see a useful page, and should never have to waste clicks getting back to what they wanted.

It's not only bad UI, it's also entirely unnecessary, because in Rails you can fix this for good with two lines of code.

Avoid wasted pages and annoyed users with redirect_to: back

If your user's search doesn't find anything, don't make them waste their time at a whole page that tells them only that.  Instead just send them straight back to the search page.  Better yet, redirect them back to wherever they came from, since they might well be able to invoke search from any number of different contexts in your application. You don't need a whole page to tell them the search didn't find anything - a flash notice is more than sufficient:

Redirecting back with a flash after an empty search:

def search
@results = YourModel.execute_some_search(params[:some_parameter]);
if @results.size == 0
flash[:notice] = "No items found matching '#{params[:some_parameter]}'"
redirect_to :back
end
end


Testing redirect_to :back

Testing redirect_to :back isn't completely trivial, because of course there's no previous page when you render a page in a test context. So, when you try to run a controller that redirects back, you'll see an error. The easiest thing to do is to artificially set a previous page. I have these two methods in test/test_helper.rb:

def fake_referer
@request.env['HTTP_REFERER'] = 'http://previous_page'
end

def assert_redirected_back
assert_redirected_to 'http://previous_page'
end


Then anytime I am working on a controller that involves back redirects, I drop fake_referrer in my setup method and then use assert_redirected_back. For example, in a search controller test (this is from a controller that has an action called 'contents' for searching items by text content - the search itself uses ferret):

def setup
super
fake_referer
end

def test_contents_search_fails
get :contents, :contents => "some&junk*that(will@never)match$anything"
assert_not_nil flash[:notice]
assert_redirected_back
end


Firefox Download Day (= display: inline-block day!)

It's Firefox 3 Download Day!   Go get it, please.

I am excited about this, but perhaps not for the same reason most other people were. I am excited because Firefox 3 is the first version to implement the CSS rule "display: inline-block". Inline-block allows you to generate chunks of content of rectangular shape that will flow inline in your content (like text, images, or tables) but whose contents act like a block, and whose borders and margins are respected in the flow.

Let's make it clear what I mean.

The beauty and versatility of display: inline-block

Setting a CSS element's display: property to inline-block tells the browser to treat the element as a rectangular block, with internal flow just like any other block, and to respect the padding, border, and margins, but to flow that rectangle with other inline content - exactly the way the browser would flow an image. In addition, you can specify the width and height of inline-block items. This is a crazy useful concept from a layout perspective: it would allow you to make buttons out of text that lay out horizontally, or to layer images on top of each other inside a small span or div.

Here's an example of a series of list items set with border, padding, and a width and height. The code first:

<style>
   ul {
	width: 400px;
	border: 2px solid black;
	background: #aaf;
	}
li {
	border: 2px dotted blue;
	padding: 1em;			
	width: 100px;
	height: 35px;
}
ul.inline li {
	display: inline;
}
ul.inline-block li {
	display: inline-block;
}
</style>
<h2>Padded words wrapped with display: inline;</h2>
	<p>
		<ul class="inline">
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
		<li>sit</li>		
		<li>amet</li>
		<li>consectetur</li>
		<li>adipisicing</li>
		<li>elit</li>		
		<li>sed</li>
		<lido</li>
		<li>eiusmod</li>
		</ul>
	</p>
 
	<h2>Padded words wrapped with display: inline-block;</h2>
	<p>
		<ul class="inline-block">
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
		<li>sit</li>		
		<li>amet</li>
		<li>consectetur</li>
		<li>adipisicing</li>
		<li>elit</li>		
		<li>sed</li>
		<li>do</li>
		<li>eiusmod</li>
		</ul>
	</p>

Here's how Safari renders the above code (correctly):

And here's how Firefox 2 renders it (incorrectly):

Horrific - FF2 simply ignores inline-block, causing the list elements to render in their default display mode, block. What's galling about this is that for several years Firefox has been the only browser that gets it wrong! That's right, even Internet Explorer 6 gets this right ... at least on some elements, specifically those that are natively display: inline, like spans and anchors.

The Firefox bug report was filed way back in the days of Firefox 1 nine years ago. Yes, you read that right. It sat there, unfixed, while every other browser in the world implemented it.

Anyway, today web developers everywhere can rejoice. Now, at last, the released version of every major browser supports display: inline block. So, with only another year or two waiting while FF2 users upgrade to FF3, designers will be able to start using this singularly useful CSS rule (at least in cases where IE supports it as well).

A parting example

A parting example of the kind of cool trick you can play with inline-block: text flowing inside a sized box that is itself flowing inside text.

Code for flowing text inside flowing text:

<div style="font-size: 250%; width: 600px;">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
		<span style="width: 130px; height: 40px; font-size: 9px; display: inline-block;
			padding: 1em; border: 1px solid black; overflow: hidden;">
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
			dolore eu fugiat nulla pariatur.
		</span>	
	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 	
	</div>

How it renders in a compliant browser ... including IE6!*

*Well, more or less. IE6 gets it reasonably close.