It is well known that the use of JavaScript has increased notoriously in the last five years or so. We now certainly have heavy JavaScript applications like Gmail but even content-based websites have been adding some serious behaviour to their pages.

Libraries like jQuery have allowed developers and designers that might have avoided JavaScript in the past to start using it substantially in their projects.

But, as requirements for interactive components rise, the management of all that code might become overwhelming.

A common scenario

Let’s take a site with two types of pages: a product catalogue page and a product detail page. On top of that, some detail pages will have a “Related Products” section at the bottom of the page.

1. We want that when a user clicks on a product thumbnail image to launch a modal view window with a zoomed version. This functionality would apply on thumbnails on the catalogue page, secondary images in the detail page and related products thumbnails. We could argue this is a common functionality across all page types.
2. We also want to do some DOM manipulation on the details page.
3. Finally, we want the related products listed and displayed as a carousel.

Did you think jQuery?

So the first thought might be to get some jQuery plugins to do all the magic. The bottom of all your html pages might look like this:

<script src="js/jquery.js"></script>
<script src="js/modal-view-plugin.js"></script>
<script src="js/carousel-plugin.js"></script>
<script src="js/my-scripts.js"></script>

my-scripts.js might look like the one below:

$(document).ready(function() {

  // code to call modal view in all pages

  // code to manipulate some DOM elements in detail page

  // code to call related products carousel

});

Should we call the carousel functionality when the user lands on a catalogue page? Nope. The issue gets bigger as we start to add more page specific functionality on our main js file and more page types across the site.

Solution 1.0

There is a technique that allows you to organise and execute the code for a given page only when is needed. It’s called the Garber-Irish implementation.

I won’t go into detail on this technique as the authors’ sites do a very good job on that.

In a nutshell, your JS code will read what type of page it is currently loaded from attributes in the html’s body tag.  Based on that, it will execute shared code across pages and then it will start moving on to more page specific code.

A snippet of how our problem might be implemented with this technique in my-scripts.js is below:

SITENAME = {
  allpages: {
    init: function() {
      // application-wide code:
      // code to call modal view in all pages
    }
  },

  detailpage: {
    init: function() {
      // controller-wide code:
      // code to manipulate some DOM elements in detail page
    },

    relatedproducts: function() {
      // action-specific code:
      // code to call carousel in related products when they exist
    }
  }
};

Solution 2.0

This technique is great for organising code but, on top of that, we want to improve on the optimisation department:  welcome to the world of dependency management.

There are a few libraries that let you call files only when you need to. Until now we would either call all files in all pages or just list the ones needed in the html – which is hard to maintain.

These JavaScript loaders, as they are commonly referred, can play nicely with the Garber-Irish technique mentioned above. I particularly use require.js but there are many more out there.

The approach here is to still use the sections from the Garber-Irish example but we also adding in my-scripts.js which files we want to load for each type of page:

SITENAME = {
  allpages: {
    init: function() {
      require(["jquery", "modal-view-plugin"], function($) {
        // jquery.js and modal-view-plugin.js plugin have been loaded.
        $(function() {
          // application-wide code:
          // code to call modal view in all pages
        });
      });
    }
  },

  detailpage: {
    init: function() {
      // controller-wide code:
      // code to manipulate some DOM elements in detail page
    },

    relatedproducts: function() {
      require(["carousel-plugin"], function($) {
        // carousel-plugin.js plugin have been loaded.
        $(function() {
          // action-specific code:
          // code to call carousel in related products when they exist
        });
      });
    }
  }
};

Organising JavaScript code is an evolving topic. If you are building web applications instead, this might not be the best solution.

But for sites with lots of JavaScript and, more specifically, DOM eye-candy the combination of these techniques might help you keep your code more manageable.

There are plenty of great features that this IDE brings in but from the moment I installed it I wasn’t impressed with the available text editor themes.

Aptana comes with many editor themes for you to choose. However, these default ones aren’t that great for front-end coding. The html defaults were a bit too simple and didn’t feel any better than the mighty notepad++.

So I started looking how to get my own theme rolling and it wasn’t easy to find out the right way to do it at first.

Firstly, it took me a while to get to the right documentation in Aptana to style the different components of code in html, css, and javaScript. Once I got that, I re-styled a default theme and once happy, I exported it. All that from clicking Windows/Preferences/Aptana/Themes.

The exported file is a ruby ruble. In there you can see all the different colours you just set in a hash array. But how do you get that back into your installation?

Ruby bundles are not to be imported back into Aptana by clicking the import button next to the export one I previously mentioned – somehow. Instead, create a folder and name it “theme.ruble” and drop it in the “Aptana Rubles” folder in your user’s folder. In my case it all ended up looking like was C:\Documents and Settings\diego\Aptana Rubles\theme.ruble\my-bundle.rb

One of the values listed in bundle.rb is “name”. That’s the name of the theme. Once you restart Aptana, you’ll see your new theme listed in there.

If you want to try mine one. Here you have “Spring”:

require 'ruble/theme'

Ruble::Theme.add({
  'punctuation' => '#c0c0c0ff',
  'keyword' => '#ffb18cff',
  'meta.brace.square.js' => '#ffb18cff',
  'meta.diff.header' => '#ffffffff,#5685e3ff',
  'meta.diff.index' => '#ffffffff,#3467d1ff,italic',
  'markup.deleted' => '#ffffffff,#ff3d3dff',
  'entity.other.attribute-name.class.html' => '#fcfdc6ff',
  'hyperlink' => '#1daabaff',
  'meta.brace.curly.js' => '#a3e2f8ff',
  'upport.constant.property-value.css' => '#ff80ffff',
  'string' => '#b0edc4ff',
  'markup.bold' => 'bold',
  'name' => 'Spring',
  'selection' => '#c6dffeff',
  'console.warning' => '#fcfdc6ff',
  'comment.block' => '#818fa0ff',
  'caret' => '#000000',
  'entity.other.attribute-name.class.css' => '#fcfdc6ff',
  'console.prompt' => '#a3e2f8ff',
  'entity.name.tag.structure.any.html' => '#9ce1f8ff',
  'constant.other.placeholder.py' => '#ff4a46ff',
  'console.error' => '#ff4a46ff',
  'entity.other.attribute-name.html' => '#fcfdc6ff',
  'entity.name.tag.inline.any.html' => '#9ee1f8ff',
  'entity.name.function' => '#1daabaff',
  'meta.separator.diff' => '#81d9f5ff,#3467d1ff,italic',
  'constant.numeric.js' => '#ffb18cff',
  'markup.inserted' => '#000000ff,#73ff65ff',
  'punctuation.definition.tag.end.html' => '#81d9f5ff',
  'text' => '#c5c5c5ff',
  'lineHighlight' => '#00000012',
  'markup.underline' => 'underline',
  'constant.language' => '#a3e2f8ff',
  'entity.other.attribute-name.id.html' => '#fcfdc6ff',
  'comment' => '#7c8b9eff',
  'entity.name.tag.block.any.html' => '#9ce1f8ff',
  'foreground' => '#c0c0c0',
  'storage' => '#ffb18cff',
  'meta.diff.range' => '#ffffffff,#3467d1ff,italic',
  'entity.name.type' => '#1daabaff',
  'meta.separator' => '#ffffffff,#3467d1ff',
  'invalid' => '#ffffffff,#ff4a46ff',
  'background' => '#323e43',
  'support' => '#a3e2f8ff',
  'variable' => '#ffb08aff',
  'source.css' => '#ffb18cff',
  'meta.brace.round.js' => '#fcfdc6ff',
  'support.type.property-name.css' => '#c5c5c5ff',
  'markup.italic' => '#bef58bff',
  'punctuation.definition.tag.begin.html' => '#81d9f5ff',
  'markup.changed' => '#ffffffff,#f5c411ff',
  'entity.other.attribute-name.id.css' => '#b0edc4ff',
  'console.input' => '#b0edc4ff',
  'entity.name.tag.css' => '#9ce1f8ff'})

An screenshot of how cool it looks is also below:

The font I use is Droid Android Monospace 11pt. Get yours from this excellent post at hivelogic.com

He also talked about multimedia and HTML5. What I liked the most from that was a demo from Mozilla: http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/ is really interesting because of what it actually is and does – more of that here http://vocamus.net/dave/?p=1233

You’ll need Firefox 4 or Chrome to run it.

There are a few more demos at http://hacks.mozilla.org/demos/ if you want to try.

I got really excited when I saw all this because they are built on open technologies and the premise is simple: the resources (music, videos, photos, tweets) are pulled from somewhere else unlike flash where everything is embedded inside the movie.

Christian presentation was held at skillsmatter. I found the place to be one of the best for training and free events on the latest stuff. Their staff is very friendly and if you’re looking for training given by experts in London you should check them out.

What I find interesting in this User Experience wheel of skills is that, at different levels of expertise and except for Content Strategy, my experience spans across five of these segments:

• User Interface: Design, Semantics, HTML5, CSS
• Platform: desktop and mobile devices, browsers
• Functionality: JavaScript programming, AJAX, JSON/XML
• Usability & Accessibility
• Information Architecture

Recently, I’ve also noticed that many recruitment agents tend to see IA’s as the only UX professionals.

While it may be true that UX job descriptions tend to lean towards Information Architecture, I think it’s important to differentiate between these two and secondly, and perhaps more importantly, understand the other components of the discipline and how they complement each other.

Istrian aqueduct

Istria, on the North West of Croatia, is a land with a very mixed heritage. Having been under Venecian, Astro-Hungarian, Fascist Italian and Communist Yugoslavian rulers you could imagine that.

The country side, or the inner-Istria, has kept its Italian feel to this day. This picture was taken in Motovun, and it clearly comes from the time the Italian rulers were imposing everyone to speak Italian or else. Nice..

My first impression was capitalism doesn’t strike as hard there as in London. There are not as many ads neither inside the carriages nor on the platforms as in London, where every single inch of space is used to promote the latest musicals or the new cool home water purifying system.

To my polluted eye it results in a bit of desolation in some parts. You can easily find yourself walking through corridors that are totally empty which could be exploited in creative ways.

But there are also some great pluses with the Paris Metro that I’m sure the daily commuter over there might appreciate – I do – the ticket price is way cheaper that London fares.

I haven’t used the Navigo card, Paris version of the Oyster, but the old school tiny “billet” is cheaper that a single journey on a lovely London bus.

And I had no problem to follow indications while interchanging lines in Paris either. I’ve found most of the stations having easy-to-follow signs. The fact that the lines are known by numbers rather than merged locations is something I appreciate too.

Now an incredible plus is that you can actually use your phone while being underground. Yes, really! How can that be? The French found a way before the British? Well, maybe they just care enough to invest in something that for sure might improve the commuter’s journey and even the economy if you’re optimistic.

And no, I haven’t heard anyone talking loud on the phone while in the train.

This is a tiny snippet I came up with to inform an user that something is going on while an AJAX request is taking place.

There are many examples of this already. I just needed a compact object that could be called from anywhere so here’s the start:

JavaScript

var ajaxLoader = function () {
  var start = function() {
   };

   var stop = function() {
   };

   return {
   // declare which properties and methods are supposed to be public
     start: start,
     stop: stop
   }
}();

I’m using the revealing module pattern here as it keeps things tidy and it’s almost self explanatory.

When you need to show the “Loading.. Please wait.” message you call ajaxLoader.start(). Then hide it with ajaxLoader.stop().

The start method is as follows:

var start = function() {
  var pageHeight = $(document).height();

  // if loader already exists, just show it
  // otherwise add markup to DOM
  if ($('#load-overlay').length) {
    // assign height again as it might have increased due to DOM additions
    $('#load-overlay').css({
      'height' : pageHeight
    });
    $('#load-overlay, #load-indicator').show();
  }
  else {
    $('body').append('<div id="load-overlay"></div><div id="load-indicator"><p>Loading...</p></div>');
    $('#load-overlay').css({
      'height' : pageHeight
    });
  }
};

We add the needed html, the loading div and an overlay behind, just once. Then we show or hide them when needed.

If you need to support IE6 be aware of select elements ignoring z-index. You might want to add this bit below just after the previous snippet:

// for ie6 only (feature detection used)
if (typeof document.body.style.maxHeight === 'undefined') {
  // hide visible selects for proper overlay implementation
  $('select').hide();
}

The stop method couldn’t be easier:

var stop = function() {
  $('#load-overlay, #load-indicator').hide();

  // for ie6 only (feature detection used)
  if (typeof document.body.style.maxHeight === 'undefined') {
    //show hidden selects for proper overlay implementation
    $('select').show();
  }
};

Just hide both, the loading div and the semitransparent overlay. Show the selects as well if you’re supporting IE6.

The whole object is below:

/**
 * AJAX Loader Object
 * uses the revealing module pattern
 * start it by calling ajaxLoader.start();
 * stop it by calling ajaxLoader.stop();
 */
var ajaxLoader = function () {

  var start = function() {
    var pageHeight = $(document).height();

    // if loader already exists, just show it
    // otherwise add markup to DOM
    if ($('#load-overlay').length) {
      // assign height again as it might have increased due to DOM additions
      $('#load-overlay').css({
        'height' : pageHeight
      });
      $('#load-overlay, #load-indicator').show();
    }
    else {
      $('body').append('<div id="load-overlay"></div><div id="load-indicator"><p>Loading...</p></div>');
      $('#load-overlay').css({
        'height' : pageHeight
      });
    }

    // for ie6 only (feature detection used)
    if (typeof document.body.style.maxHeight === 'undefined') {
      // hide visible selects for proper overlay implementation
      $('select').hide();
    }
  };

  var stop = function() {
    $('#load-overlay, #load-indicator').hide();

    // for ie6 only (feature detection used)
    if (typeof document.body.style.maxHeight === 'undefined') {
      //show hidden selects for proper overlay implementation
      $('select').show();
    }
  };

  return {
    // declare which properties and methods are supposed to be public
    start: start,
    stop: stop
  }
}();

CSS

#load-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 20px;
  margin-top: -10px; /* set to a negative number 1/2 of height */
  margin-left: -50px; /* set to a negative number 1/2 of width */
  border: 4px solid #888;
  z-index: 1001;
  background: #fff;
  padding: 10px;
}
* html #load-indicator {
  position: absolute;
}
#load-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #666 none 50% 50% repeat;
  opacity: .50;
  filter:Alpha(Opacity=50);
}

#load-indicator gets its way to be centred in the middle of the page, both in height and width.

#load-overlay expands to fill the full width and height of the page.

What’s next?

I leave it to the avid coder to take this further as needed. Particularly the CSS section where some might like to add spinning wheels and other much needed eye candy.

Flowplayer is a great Flash video player for embedding video streams into your web pages. It’s free, open source and well documented.

The Flowplayer website has plenty of examples. However, I had to add a bit of bespoke code on a project that required a solid accessibility implementation.

The issue I’ve found was around keyboard navigation. The default controls (Play, Pause, Mute, etc) are done in Flash, which I didn’t feel was the right approach in this case. The good thing is that there is also a HTML based control bar available.

But even the HTML based controls didn’t play well with keyboard navigation.

With a bit of JavaScript code I was able to add keyboard navigation to a page with several players.

The code to look at is mainly the html snippet and the JS magic:

HTML

Just container div’s for the videos and their controls. “hulu” is the Flowplayer class that styles the controls.

You can add as many video players as you need providing you assign unique id’s to both, the player placeholder and the controls’ container.

<div class="video">
 <!-- player #1 -->
 <a id="player-1" class="player" href="http://blip.tv/file/get/KimAronson-TwentySeconds58192.m4v"></a>
 <!-- controlbar container -->
 <div id="controlbar-1" class="controlbar hulu"></div>
 </div>

 <div class="video">
 <!-- player #2 -->
 <a id="player-2" class="player" href="http://blip.tv/file/get/KimAronson-TwentySeconds63617.m4v"></a>
 <!-- controlbar container -->
 <div id="controlbar-2" class="controlbar hulu"></div>
</div>

JavaScript

In this JS snippet we loop through the videos’ containers and gather some info from them. Then call Flowplayer as its site advises.

Finally we add tabindex=-1 to the link on the movie so doesn’t get focus from the keyboard and add href attributes to the play and mute controls to gain focus.

By the power of jQuery’s delegate we modify the values of these href so the user gets a little clue on the state of the video (playing, paused, muted, and unmuted) from the browser address bar.

$(document).ready(function() {

  $('.video').each(function(){
    var $video= $(this),
         playerId = $video.find('.player').attr('id'),
         controlbarId = $video.find('.controlbar').attr('id');

    $f(playerId, "http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf", {
    // don't start automatically
      clip: {
        autoPlay: false,
        autoBuffering: true
      },

      // disable default controls
      plugins: {controls: null}

    // install HTML controls inside element whose id is "hulu"
    }).controls(controlbarId, {duration: 25});

    // keyboard navigation adjustments
    // set which controls to receive focus
    $video.find('.player').attr('tabindex','-1');
    $video.find('.controlbar a.play').attr('href','#play');
    $video.find('.controlbar a.mute').attr('href','#mute');

    // modify href to show state of video
    // avoid href="#" or href="javascript:void(0);
    $pane.find('.controlbar').delegate('a', 'click', function(){
    if ($(this).hasClass('pause')) {
      $(this).attr('href','#play');
    }
    else if ($(this).hasClass('play')) {
      $(this).attr('href','#pause');
    }
    else if ($(this).hasClass('mute')) {
      $(this).attr('href','#unmute');
    }
    if ($(this).hasClass('unmute')) {
      $(this).attr('href','#mute');
    }
  });

});

Note: If you’re trying this at home make sure to download all the resources – see “Manage Resources” on the left hand side nav in Fiddle.