Usable Development and Design

What are the disadvantages of unobtrusive Javascript?

There are so many articles written about why you should use unobtrusive javascript but when I was asked why one shouldn’t or better, what are the disadvantages of using unobtrusive javascript I really was stumped.

So the one answer? Just imagine if you were given front-end code, written beautifully with CSS, XHTML, Unobtrusive javascript, no tables, no frames with rich interaction. Now you are trying to debug or enhance some piece of functionality and all you see are classes and id’s. Well, without any documentation the only thing you could really do is search and hope to find a matching value to the id. Right, that doesn’t sound like fun to me either.

I recently stumbled upon a great solution to a problem that I’ve seen for years, smooth image resizing in a web-browser or fluid images. The article was written by Ethan Marcotte (Unstoppablerobotninja.com). Most modern browsers handle resizing of images very well, including FF3, Chrome, Safari and IE8. Not surprising the browsers that don’t do a good job include IE 7 and below. Via some JavaScript, CSS and a special Microsoft CSS property filter (AlphaImageLoader), resizing looks good!

Try opening the links below in IE6 or IE7. The first link is the original and the second includes fixed image scaling.

Before Fix …. After Fix

Here is a before and after zoomed in image of the fix.

I will continue testing this technique with more images and text of different contrasts and colors but as of now, the technique looks very promising.

There was a project I was working on where I needed to find a way to drag-and-drop rows of a table, basically resort the table rows. Now there were plenty of scripts for doing this within lists, but not so many for actual tables. The final solution I used was from an unexpected source, Isocra Consulting, who setup a jQuery plugin for this functionality. The library, TableDnD plugin, is fairly small, about 15K and was very easy to setup. The plugin included everything I needed without being too feature rich:

onDragStyle

This is the style that is assigned to the row during drag. There are limitations to the styles that can be
associated with a row (such as you can’t assign a border—well you can, but it won’t be
displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
a map (as used in the jQuery css(...) function).

onDropStyle

This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
to what you can do. Also this replaces the original style, so again consider using onDragClass which
is simply added and then removed on drop.

onDragClass

This class is added for the duration of the drag and then removed when the row is dropped. It is more
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
stylesheet.

onDrop

Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
and the row that was dropped. You can work out the new order of the rows by using
table.tBodies[0].rows.

onDragStart

Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
table and the row which the user has started to drag.

scrollAmount

This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
FF3 beta)

Below are screenshots of the drag-and-drop before and after. As you can see I applied a yellow style to the row I am actively dragging and when dropped, the row flashes green for a second and the zebra-stripping auto-corrects itself.

*Update* – 8/28/2008 : The registration is now closed, but fortunately I made it into the pool of 150 people already attending the event! jQuery Camp 2008 here I come…

Learning jQuery
Author: Karl Swedberg

The jQuery Team is pleased to announce the second annual jQuery Camp! jQuery Camp 2008 will be held on Sunday, Sept. 28, the day before The Ajax Experience, in Boston, MA (location TBA).

Last year, over 100 jQuery developers gathered for a full day of jQuery sessions, which included talks from such big names as jQuery creator John Resig and other core team members, as well as talks from expert users exploring new and exciting jQuery projects. It brought together the largest group of jQuery Core Team members ever assembled, and gave users the opportunity to pick their brains and pitch new ideas.

The event was a *clear* success, and this year’s camp promises to be even better.

jQuery Camp 2008 will offer two tracks, providing both introductory and advanced sessions, covering a variety of topics. Ajax development, mashups, security and the recently released jQuery UI component and effects library are just some of the topics already lined up.

Original Announcement

This tutorial shows you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

http://nettuts.com/javascript-ajax/jquery-style-switcher/
by James Padolsey

If the user has Javascript enabled, a very slick fade-in and fade-out affect is shown with a loading icon. If Javascript is disabled, the style-sheet switches and the same end result is seen.

After months of exhaustive days, nights and weekends spent re-designing and re-developing the updated MBTA.com website, the work put in by myself and the rest of the team at RDVO has seen the ultimate fruition. The site was named the 2007 Webby Award Winner for best Government website and the 2007 MITX award winner for government sites.

This is huge news for everyone who was involved in this project. This was a daunting undertaking that had it’s ups and and downs, exhaustion and frustration, but ultimately the satisfaction in achieving the ambitious goal we set out to achieve – building the best damn transport out there!

Congratulations to the RDVO team that worked on the MBTA project:

Dana Giuliana, Project Director
Kai N. Sounthala, Technical Lead
Charles Crawford/Marcos Elugardo, Development Team
George Kalos/Ari Kalogeropoulos/Brian Fleming, Production Team
Michael Demopoulos, Creative Director
Sabih Mir/Corey Machanic, Graphic/UI Designers
Jared Kelleher, Writer

If you’re looking for clean MSDN-like documentation tool for .NET, NDOC is way to go. Unfortunately development for the tool stopped in Feb 2005. There are a few commercial products as well, but I really was not impressed after playing with a few trials.

The latest release of NDOC version 1.3.1 is only compatible up to .NET 1.1. Microsoft appears to have a new tool for .NET documentation called Sandcastle but after spending an hour of trying to get it setup, time to move on.

I finally found someone who wrote a version compatible with .NET 2.0, NDOC 2.0 Alpha. Despite being an Alpha version, the tool works great, was very familiar and did the job, all for less then 1MB of download.

Screenshot of the application.

Screenshot of output MSDN Chm Help file.

Below is a useful script I used for detecting mobile browsers.

// Detects if browser is mobile or not
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|windows   ce|iemobile|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp)/i',strtolower($_SERVER['HTTP_USER_AGENT']))){
 $mobile_browser++;
}
if(((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'text/vnd.wap.wml')>0) or (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) or ((((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or isset($_SERVER['X-OperaMini-Features']) or isset($_SERVER['UA-pixels'])))))){
 $mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');
if(in_array($mobile_ua,$mobile_agents)){
 $mobile_browser++;
}
if($mobile_browser>0){
 //mobile site
}else{
 //not mobile site
 header( 'Location: http://www.web_address.com/' ) ;
}

DOMTool v1.1 | Muffin Research Labs

Here’s a great tool that will generate the necessary DOM scripts to create whatever HTML you want

http://muffinresearch.co.uk/code/javascript/DOMTool/

ASP.NET provides a nice way to avoid it’s full web control lifecycle. Why would you want to do this? Well, I found it most useful for doing AJAX work. For example, I have a javascript function I need to have ansynchronously call ASP.NET and return some data to update a HTML elements. In ASP Classic, PHP, Coldfusion, whatever, this is straightforward, the page gets called and some data is outputed. Using Prototypes Ajax.Request I would write the following,

function getSomeData(parameter1) {
  var url = '/file_path/file_name.php';
  var pars = 'param='+parameter1;
  var myAjax = new Ajax.Request(
     url, {
       method: 'get',
       parameters: pars,
       onComplete: doSomethingWithData
       }
     );
}

With ASP.NET I could do the same with an ASPX page, but the request would go through the web control model, which adds overhead. So writing a custom HTTP Handler is one solution. Now there are a few ways to get this setup, but I will use the way I think is most straight-forward.

The first thing you’ll do is create a new class and place that class in the App_Code folder. Below is an example of a very simple class that returns data that will be consumed by the javascript function above. Within Visual Studio add a new class to your App_Code directory and call it, myhttphandler.cs.

using System;
using System.Web;

namespace MyHttpExtensions
{
  public class HandlerExample : IHttpHandler
  {
    public void ProcessRequest(System.Web.HttpContext context)
    {
      HttpResponse response = context.Response;
      response.write("Data to be use by javascript..data...data..");
    }
    public bool IsReusable
    {
      get {return true;}
    }
  }
}

After you have the class created, within Visual Studio you can create a file called a Generic Handler (file extension .ASHX), which you can put in your application directory. This file looks like,

  < %@ WebHandler Language = "C#"
           Class="MyHttpExtensions.HandlerExample" %>

The class name corresponds to the class you created in your App_Code folder. And there it is, you can now request a ASP.NET page which is very light-weight and avoids normal web control processing.