allskonar

The art of loving music is learning to never be ashamed of your taste, learn to embrace and defend it to death. No matter how lame or kewl the stuff you have in your ear buds you have to pretend that you don’t care what others think of you … yes even while you get caught listening to Supertramp.

Now you can follow my latest tracks on the sidebar here to the right =>

Right underneath my adorable daughter Freyja which has been keeping my away from coding for the most part :) recently. Can’t wait to teach her to code!

So to back up my claim on not being ashamed of my music taste and attempt at getting familiar with actionscript I wrote a little package that will grap your rss feed from last.fm and dump it on your blog. This is the the kewl thing about actionscript it can snag stuff hosted else where and publish it on your website provided that you allow it in your crossdomain.xml file.

So here are some things I thought about actionscript until my college Adam showed me otherwise.

• You don’t have to have the Flash application to author actionscript.
• You don’t need flex in order to not use the Flash App.
• And compiling it is easy using the straight up mxmlc from the Flex SDK just do

 $ mxmlc MyAwesomeScript.as

and that will spit out the MyAwesomeScript.swf.

Now let’s take a look at my snippet

package {
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.*;
    import flash.external.ExternalInterface;

    public class RecentTracks extends Sprite {
        private var recentlyPlayed:XML;
        private var rssUrl:String = "http://ws.audioscrobbler.com/2.0/user/bakdyr/recenttracks.rss";

        public function RecentTracks() {
            var loader:URLLoader = new URLLoader();
                loader.addEventListener(Event.COMPLETE, completeHandler);
            var request:URLRequest = new URLRequest(rssUrl);
                loader.load(request);
        }

        private function completeHandler(event:Event):void {
            var outHtml:String;
            var loader:URLLoader = URLLoader(event.target);
            recentlyPlayed = new XML(loader.data);
            outHtml = "<ul>\n";                           
            for each (var title:XML in recentlyPlayed..item..title) {
               var artist:String = title.toString().split(" – ")[0];
               var song:String = title.toString().split(" – ")[1];
               outHtml += "<li>" + song + "<br /><em>" + artist + "</em></li>\n";                           
            }                                          
            outHtml += "</ul>\n";                           
            ExternalInterface.call('Snitchmedia.recentTracks', outHtml);
        }
    }
}

Very simple little script that dials up the rss feed to last.fm and once it’s done it will call a javascript function that will handle outputting it on the page. Now this is very basic but I think an elegant solution to handle this sort of thing as I did not need to do any heroic mephisto, wordpress (or what ever the blog engine flavor of the month is) hacking and still able to add functionality to my blog. Obviously there is a lot of polishing to be done and I think I might make this a bit generic so it can be used to call in all sorts of third party fun stuff.

Now for completeness here is the javascript bit using jQuery.

var Snitchmedia = {};
Snitchmedia.recentTracks = function(playlist) {
  $('#recent_tracks').html(playlist);
};

Just this week, motionbox the company I work for released it’s first open source code the Motionbox EventHandler spearheaded by Topping Bowers with contributions from the rest of us in the group. The javascript library implements event delegation techniques and is built on the prototype library. There are other such libraries for yui which this was in part inspired by.

One of the kewlest thing about the library is the ability to subscribe dom elements to events before they even show up in the dom. Don’t take my word for it it was written up in ajaxian. There you have it: Topper, me and my colleges are almost famous now. If you are using prototype go and get the source and try it out it’s totally brilliant.

I have written about event handling before: The evolution of body onload Unobtrusive Javascript which might give some context on the topic of event handling in javascript.

Once you get into the habit of using jslint it’s hard not to, it’s just so satisfying when it passes and all the lint has been cleared away. The first few times I used I went to the web application and pasted the file in there and looked at the results, fixed what was wrong and pasted it back into the original file. This is especially inconvenient if you use vim or emacs since pasting from an external environment has always been a bit of a challenge. But fear not, Douglas Crowford, best known for his work on the json spec, has an extended version that works with rhino the java javascript interpreter. The advantage of using jslint through rhino is that you can inspect your javascript files from the terminal. Installing it on a mac is trivial just follow Peters Michaux Install instructions

Here is the short version:

$> curl -O ftp://ftp.mozilla.org/pub/mozilla.org/js/rhino1_6R7.zip
$> unzip rhino1_6R7.zip
$> cp rhino1_6R7/js.jar /Library/java/Extensions/

Download the jslint file

$> curl -O http://www.jslint.com/rhino/jslint.js

And then you should be able to:

$> java org.mozilla.javascript.tools.shell.Main jslint.js your_program.js

When you’re on a Ruby on Rails binge, it’s healthy to sober up every once in a while and checkout other things. Not necessarily because you want to re-saddle somewhere else rather to get a chance to learn new tricks and get fresh ideas. I’ve been been playing with Helma the javascript server-side project that was featured in the November issue of Linux Magazine.

The Helma server is build on the rhino javascript interpreter and the java based jetty server. Which means that it’s possible to use java libraries by placing .jar files into the lib/ext directory on the server, and it will automatically get added to the classpath. For example if you need a JDBC driver for MySQL you just get the jar file for Connector/J which is the official JDBC driver for MySQL, and place it in the lib/ext and configure it.

File: db.properties

myDataSource.url      = jdbc:mysql://localhost/blog
myDataSource.driver   = org.gjt.mm.mysql.Driver
myDataSource.user     = user
myDataSource.password = password

There is an obvious benefit by having the client-side code in a interpretive language like javascript, Ruby or any of the others out there, it gives the developer the flexibility of writing code rapidly. There is also a benefit of having it sit on java especially if you need to boost performance or accomplish something that javascript cannot handle. Using javascript on the server-side, presents an interesting opportunity in sharing code base both on the client-side and the server-side, which could, if done right, prove to be a powerful concept.

Using the same language on both the server-side and client-side should help with keeping the applications code base dry. It’s easy to imagine being able to slip a javascript functions or modules through a xhr request at runtime similarly to how ruby on rails delivers the output of rjs templates or simply host the javascript modules you want shared in a place where both the server and client can reference them.

There is a downside as well, you can’t perform all tasks you might want on the server with javascript. Which means any utility scripting such as those that either needs access to the filesystem or for any other things that javascript is unable to do requires using Java or dynamic language such as Perl, Ruby, Python or bash scripts. But if there is a real possibility to sensibly share code on the server and client-side, that seems trivial.

I have been cobbled together some helma code in preparation for an actual tutorial. Where the objective is to develop a little application and explore how sharing of javascript between server and client can be accomplished. To do this I have written a very simple blog post engine where one can enter a posts, comment on posts anonymously. If you practice vigorously you can probably pretend you can code the blog application in a 15 minutes

Keep in mind that this is just a rough draft.

I find using drag and drop is incredibly useful for solving many interaction design challenges on web apps, then the iPhone came out. I really love how you can use your fingers to pinch, squeeze and drag the screen around, but I feel like the drag and drop in web applications was becoming mature enough that iPhone is somehow imposing on that use pattern. I still love the idea, in fact shortly after I got my iPhone I wanted to pinch, squeeze and drag things all over the place on every screen I came in contact with. I just hope we’ll not need to introduce another control click fiasco to enable the drag and drop functionality on web applications.

There is a bit of a learning curve to writing unobtrusive Javascript and to obfuscate matters even further the internet is filled with bad javascript examples, which is one of the reasons why Javascript has such a terrible reputation. My intent here is to go through my learning curve on strapping events on to the dom tree, which I think is the biggest conceptual barrier for writing unobtrusively Javascript. I hope that these examples will cushion the entry into writing Javascript unobtrusively and also lure someone to suggest better ways and help me achieve the ideal. At some point during my evolution I started using libraries such as prototype which I highly recommend but there are others good Javascript libraries such as jquery, dojo, rico and the list goes on.

My examples are bare-bones and only meant for explaining the concept. The samples have two links which if Javascript is enabled alert a text box displaying its href attribute but if Javascript is not enabled it degrades to display the document that the link is pointed to.

Unobtrusive Javascripting is basically just a separation of behavior from the HTML markup, similarly to how CSS stylesheets separated layout instructions from the html markup. There are many benefits to unobtrusive Javascripts and I will highlight two:

• It makes Graceful Degradation easy simply because if javascript is not enabled on the browser the links will simply just go to the documents they are pointed at.
• HTML markup become much cleaner and more manageable.

HTML: Example 1

<html>
  <head>
    <title>Example 1</title>
    <script src="example_1.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Example 1</h1>
    <ul id="links">
      <li><a href="link_1.html">link 1</a></li>
      <li><a href="link_2.html">link 2</a></li>
    </ul>
  </body>
</html>

JS: Example 1

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

My introduction to Unobtrusive Javascript came from Jeromy Keith’s domscripting book in which I got the addLoadEvent function which I believe originated with Simon Willison, the addLoadEvent function allows you to stack functions to the window.onload event que.

addLoadEvent(bootstrapLinks);

The addLoadEvent function is necessary to be able to load .js code from the head of the html document which is one of the first elements on the dom tree. This allows you to stack functions that will be executed once the window.onload event fires which is when the dom tree is ready.

function bootstrapLinks(){
  ul = document.getElementById("links");
  links = ul.getElementsByTagName("a");
  for(var i=0;i<links.length;i++){
    links[i].onclick = doSomething;
  }
}

function doSomething(){
  alert(this.href);
  return false;
}

This code simply grabs an element through the id loops through a elements in there and attaches an onclick event handler to which in this case only alerts the href attribute. The return false is to prevent the browser from following the link.

Now that works fine but it’s so two years ago, and there is the problem of having to wait for the dom tree to be ready which is after everything else has loaded which can take some time especially if there are images and such. The next step does not solve this problem but it makes it a bit more modern and also utilizes the prototype library.

HTML: Example 2

The only thing that changed in the HTML source is adding the reference to the prototype.js file.

<script src="prototype.js" type="text/javascript"></script>

JS: Example 2

Event.observe(window, 'load', bootstrapLinks);

function bootstrapLinks(){
  $$("ul#links a").each(
    function(value){
      value.onclick = doSomething;
    }
  );
}

function doSomething(){
  alert(this.href);
  return false;
}

But we still have to wait for the domtree to load. This is something that was driving me nuts especially when writing code for sites with advertising and image heavy. Then I ran into a very smart Javascript guru by the name of Dan Webb and when I expressed this concern he educated told me about lowpro.js which is a library he built and extends the prototype library.

All you have to do is swap out the Element.observe(.....) with Event.onReady(bootstrap_links); and we are done.

HTML: Example 3

Adding a reference to lowpro.js

<script src="lowpro.js" type="text/javascript"></script>

JS: Example 3

Event.onReady(bootstrapLinks);

function bootstrapLinks(){
  $$("ul#links a").each(
    function(value){
      value.onclick = doSomething;
    }
  );
}

function doSomething(){
  alert(this.href);
  return false;
}

This is only skimming the top. There are loads of other cool stuff you can do.