May 2 2007

Unobtrusive JavaScript with Prototype and Behavior

If you are familiar with web application development you may already be familiar with the Model-View-Controller (MVC) design pattern. The MVC pattern aims to separate your server side business logic from your presentation code from your data model. The by-product of web applications are the HTML, CSS, and JavaScript pages generated and delivered to the client browser. Historically in the early Web 1.0 days, a web page’s content, style, and behavior would all be intertwined and glued tightly together in the HTML, do you remember the font tag? Somewhere along the way to the Web 2.0 network, developers opted to remove the style attributes from the content by using Cascading Style Sheets (CSS) classes.

CSS allows you to create style classes whose concern is purely a way to describe the size, font, color, and look of whatever content that uses the class.

.makeMeBeautiful {
  color: #00248F;
  text-decoration: underline;
  background-color: #FFFFFF;
  font-size: 1.1em;
}

To apply a CSS class on an HTML element you use the class attribute.

<div class="makeMeBeautiful">Hello, World</div>

The idea behind Unobtrusive JavaScript (UJS) is to remove JavaScript events, such as onclick and onmouseover, from the content in the same fashion as the style attribute. Unobtrusive JavaScript uses the class and id attribute of HTML tag elements to find and assign JavaScript events in a inconspicuous fashion, just as with CSS.

If you think of the HTML content as the Model, the CSS stylings as the View, and JavaScript behaviors as the Controller of MVC, then it makes perfect sense to remove all traces of style attributes and JavaScript events from the HTML.

Unobtrusive JavaScript with Prototype

Traditionally if you wanted to add a JavaScript onclick event to a HTML element you would do so by adding the onclick attribute. Unobtrusive JavaScript recommends that you instead find the tag by the class or id attribute and assign the even programmatically.

// Logic to execute when the end user
// clicks the element
function myOnClickFunction(elem) {
  alert(elem);
}

// Register the onclick event for all elements
// the given class name
window.onload = function() {
  // Find all elements that use that given CSS class
  var elements = document.getElementsByClassName("makeMeBeautiful");
  elements.each(
    function(e) {
      // Assign the onclick method to the element
      Event.observe(e, "click", myOnClickFunction);
    }
  );
}

Note that the above JavaScript code works only when the Prototype JavaScript library is made available.

If your need to add Unobstrusive JavaScript events for a few tag elements and are already using Prototype then the above code will suffice.

Unobtrusive JavaScript with Behavior

For more restrictive selection process of the HTML elements to apply JavaScript events you can use the Behavior JavaScript library. The Behavior JavaScript library is a lot easier and more powerful way to add behavior to HTML elements than Prototype. With the Behavior library you define an associated hash map literal object thingie where the keys are CSS selectors and the value is an initializing JavaScript function. In the initializing function you can add any onclick, onmouseover, onchange, onsubmit, onfocus, onblur, onwhatever event.

var rules = {
  '.makeMeBeautiful' : function(elem){
    elem.onclick = function(){
      alert(elem);
    }
  }
};

Behaviour.register(rules);

The power of the Behavior library is that you can create the behavioral rules using CSS selectors to choose the tag elements for which to apply a given set of JavaScript functionality. Both the Prototype and Behavior code shown up to this point will apply the JavaScript onclick behavior on all elements that use the given CSS class. With the Behavior library you can use CSS selectors to restrict what elements to apply the behavior to. For example, to apply the onclick behavior only for div elements you can use the following rule.

var rules = {
  'div.makeMeBeautiful' : function(elem){
    // Your code here...
  }
};

The idea behind Unobtrusive JavaScript is to separate the HTML, CSS, and JavaScript according to responsibilities in a similar fashion as the MVC design pattern suggests. UJS also helps in the maintenance of large sites and it allows for graceful degradation.


May 1 2007

Markup for the Semantic Web

A recent article, The Definitive Guide to Semantic Web Markup for Blogs, provided me with some new insight into how blog templates should be designed for optimal Search Engine Optimization (SEO). The advice is not restricted to blogs, but can be generalized for any web development. For my own benefit I will recap the key points of that article.

Use the <title> tag for the title of the page or post, not the name of your site. It is not recommend to concatenate the your site name with the title of the post.

Put post and article titles inside <h1> tags.

Use <h2> and other header tags for sub-headlines.

Don’t place your site name, logo, and or tagline in a <h1> tag. Place your site information in a <div> tag instead. Your sidebar menu headlines usually do not merit header tags such as <h2>.

Technorati Tags: , , , , , ,


Dec 28 2006

The Future of Web Apps SF 2006 Conference Notes

Carson Workshops is working hard on the two day conference The Future of Web Apps in London. The summit is going to be held in London during February 20-21, 2007. I had the opportunity to attend the San Francisco, September 13-14 2006 conference for which I present the following notes… The Future of Web apps conference notes are available as a single PDF document for your convinience.

Web 2.0

Wednesday, September 13
Dick Hardt – The Emerging Age of Who
Kevin Rose – The Digg Story – Kevin talks about design and scalability.
Tom Coates – Social Change on the Web – Tom talks about users motivation.
Tantek Celik – Best Practice With Microformats – Microformats are fun.
Steve Olechowski – Ten Things You Didn’t Know About RSS
Carl Sjogreen – How We Built Google Calendar – Six key insights in building Google Calendar.
Mike Davidson – User-driven Content – Is it Working?
Continue reading


Sep 24 2006

Mike Davidson – User-driven Content – Is It Working?

Mike is the founder and CEO of Newsvine. Mike’s presentation at CarsonWorkshops The Future of Web Apps conference dealt with user generated content. User generated content is not a new concept, it is just a new buzzword. Amazon is driven by user generated content, user can review reviewers. Amazon, Ebay, Epionions have been using user genrated content for years, since web 1.0. The current examples of user genereated web 2.0 sites are MySpace and Digg. During this conference I head MySpace be used as an example every hour, I head people say things like “I want to be the MySpace of gardening.” I want to be the MySpace of fund of hedge fund software.

Mike said that “Delicious is a great way to extend your memory.” I use it as a reading list, I bookmark what I haven’t read but want to. YouTube is another often mentioned web 2.0 user generated content web application. Mike also mentioned that “the interesting thing about Second Life, is that fake products are being sold for real money in a fake environment. That is a market I am interested in being a part of.”
Continue reading


Sep 24 2006

Carl Sjogreen – How We Built Google Calendar

Carl is the Product Manager of Google Calendar. During his presentation at The Future of Web Apps, Carl shed some light into the development process in place at Google on a typical project and his experience building a great web 2.0 application. Carl said that Google Calendar started as a ‘classic’ Google product team, that is 1 product manager and 3 engineers. The original idea of a Google calendar system was conceived from customer feedback and internal need. In design Google Calendar, Carl said that “being smart isn’t always best.” Carl explained how they over engineered some usability features in the early Google Calendar version that they had to dumb down or simplify for the general public.

Carl also provided six key insights for your next product or company that I will now copy here verbatim.

The first insight is that easy is the most important feature. Think Google Calendar QuickAdd, Google Maps single text field. Google Maps has a single field as opposed to a whole address, city, state, zip code form.
Continue reading


Sep 24 2006

Tantek Celik – Best Practice With Microformats

Tantek as the Chief Technologist at Technorati has helped shape and define new web standards. In this the fourth session of The Future of Web Apps conference Tantek described the benefits of using standardized Microformats. Microformats are small enhancements to standard HTML tags that help describe and classify the information that is being presented. According to Tantek, a microformat is a small bit of XHTML, a fast and simple way to provide an API. To illustrate this let me describe the Microformat suggested by Google to circumvent comment spammers. Google suggested that links in a blog comments apply a rel attribute with the value of nofollow. Here is an example:

[source:html]
<A href=”some url” rel=”nofollow”>some link</A>
[/source]
Continue reading