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.

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.

Gone are the days of spending big $$$ on expensive software to manage, develop and deploy web sites, web apps and software. There are so many inexpensive and open-source solutions for source-control, bug-tracking and project management, that there is no excuse, whether you are a three-person or 50-person shop, to be without these invaluable tools.

The list below is be no means complete, but does include the tools I use.

1. Source Control

   First and foremost for any development task is source control for every piece of code, documentation and proposal that you write. There are many solutions out there and I’ve used a number of them including, CVS, SourceSafe, Perforce and Subversion. But taking into consideration cost, ease-of-use and setup, Subversion is by far my favorite. Subversion is an open source versioning control system released under an Apache/BSD-style license.

   There are tons of great clients for the system, including,

   • SmartSVN
     Client runs on OS
   • TortoiseSVN
     Software integrates with Windows Explorer, exposes all functionality via the explorer tree
   • VisualSVN
     Integrates with Visual Studio 2003 and 2005.

   I’ve used all of these but my personal preference is SmartSVN. Subversion is currently only available on Linux and Mac, but this really doesn’t matter. Hosting companies like Dreamhost, along with other includes features has one-click installation of Subversion. So for $10/month you can setup your own source-control, with the added benefit of hosting in 24 hours.

2. Project Management

   Both a developers worse nightmare and savior, project management software is a piece of development with the bottom-line of, “get your shit done and preferably on-time”. In my experience, I have used my $.30 notebook, MS Excel, my own custom built tool and even the monster of an application MS Project but they all just seemed to be more a hassle than help. So unless you’ve been on a big rock for the last year, you’ve probably heard of BaseCamp put out by 37Signals. BaseCamp is simple, straight-forward, easy to use, is built using Ruby-on-Rails, is cheap, etc etc… This tool is really everything that I need and doesn’t include anything that I don’t need. The cost ranges from FREE to $149/month, depending on how much storage and many features you need.

3. Bug Tracking

   When cost is an issue and your development team is made up of three people, open-source applications as Bugzilla and inexpensive web 2.0 applications as 16bugs become invaluable. Both of these applications are really quite adequete but very specific in their target audience. 16bugs is “web 2.0-ish”, very usable, as simple as can be and takes all of 3 minutes to setup. I’ve had a few email exchanges with “the” developer/creator of the application and he/she is very receptive of feedback. You create a company, create projects, create custom fields, categories and your off to many more years of carpal tunnel. Overall it’s perfect for the small development team, but my only gripe, why in the world can’t I create a custom drop-down menu field? Only text boxes? Oh well, maybe in a future release. So if your bug tracking needs are simple, simple 16bugs is perfect. Bugzilla on the complete opposite end if free, packed with features, security and privileges/roles, so I won’t say any more than that. If you want a fairly complete bug-tracking application, you can’t go wrong with Bugzilla.