Archive for the ‘Best Practices’ Category

MooTools Powered CSS Sprites

February 19th, 2009 by Aaron N.

A few months back David Shea wrote an article on A List Apart about CSS sprites that inspired Uruguayan MooTools developer Gonzalo Rubio (aka gonchuki) to take the practice and apply using MooTools:

While the original version used jQuery (1.2.6 at that time) and lots of people like it, we (mootoolers) have a different approach to code specially emphasizing on OOP techniques and readability. Part of the issue might not be jQuery per-se and be Dave’s code that was a little obfuscated, but it anyways has a lot of room for improvement.

This article will just describe differences between the MooTools implementation and the Dave’s jQuery one, so unless stated otherwise, everything from the ALA article applies here.

new Sprites2({mode: 'fade', item_selector: 'ul.nav a', duration: 250});

(this is just a screenshot from the post)

picture-21

Check out the full post for details and to download the code.

Comparing Frameworks with Inheritance Benchmarking

February 19th, 2009 by Aaron N.

Over on Ajaxian yesterday was a post about benchmarking inheritance methods that was pretty interesting (here’s the post that Ajaxian was covering). In it, various methods for extending objects in JavaScript are compared:

  • Ad hoc inheritance – This is a common(?) homebrew technique for allowing prototypes to leverage the code in objects further up the prototype-food chain. Methods are overridden by keeping a reference to the parent method in a separate property , which can then be invoked as needed. It’s fast but not very pretty, and it’s arguable whether or not this qualifies as real “OO” inheritance.
  • Prototype-style inheritance – Prototype uses a strategy inspired by Alex Arenell’s Inheritance library. Subclass methods declare a “$super” argument that is set up by Prototype to reference the superclass’ method.
  • Base2-style inheritance – Dean Edwards’ library. Subclass methods invoke “this.base()” to call their superclass’ implementation.
  • John Resig inheritance – JR, of jquery fame, experimented with a Base2 variant which he published on his blog. It’s a bit simpler than Base2, but seemed worth testing.

Read the rest of this entry »

Designing Web Interfaces

February 10th, 2009 by Aaron N.

I haven’t had a chance to read this yet, but I’m going to go ahead and suggest you go get a copy of Bill Scott’s book, Designing Web Interfaces.

You should also watch this presentation, on which the book is likely based. I saw him give this talk at Google and then brought him in to CNET to give it again to our crowd.

Bill Scott was the lead user experience evangelist at Yahoo and is now at Netflix. He’s an interesting mix of good engineer and good experience designer and I’ve spoken with him on numerous occasions about various challenges and he always gives great insight.

For your consideration: $type methods

January 18th, 2009 by Aaron N.

I don’t know why, but I find myself annoyed very slightly by having to type this often:

if ($type('foo') == 'string') ...

On a lark, I whipped this up:

$type.types = ['string', 'element', 'textnode', 'whitespace', 'arguments',
	 'array', 'object', 'string', 'number', 'date', 'boolean',
	 'function', 'regexp', 'class', 'collection', 'window',
	 'document'].map(function(type){
	$type[type] = function(val) {
		return $type(val) == type;
	};
	return type;
});

This provides the ability to do:

if ($type.string(('foo'))) ...

Which saves me a whopping 3 characters, but feels nicer for some reason. Technically, I should name that method .isString(‘foo’) but whatever.

I don’t think I can bring myself to publish or use this one. I like it, but it just doesn’t seem to be worth it.

5 Advanced Techniques for MooTools Development

January 13th, 2009 by Aaron N.

The documentation for MooTools is robust and covers nearly everything in the library. There are a few items left out that are either not there on purpose (because they are not guaranteed to be supported in future releases) as well as several standard JavaScript techniques that can empower your development. Here are 5 things that you should know that aren’t obvious. Read the rest of this entry »

Comparing Prototype to jQuery

January 13th, 2009 by Aaron N.

David Nolen just posted this to the MooTools Google group:

Well thought out blog post about why Prototype is preferred over jQuery. Not a mindless flame war piece, but a reasoned argument. Interestingly enough, MooTools actually _combines_ what he likes about Prototype and jQuery into one package! In particular, MooTools has a uniform design throughout, inheritance, a great CSS selector engine, good functional aspects, supports function chaining, and of course provies a couple of things that Prototype doesn’t properly have (multiple inheritance via Implements). I pointed some of these things out in a comment.

Good recommended reading.

David

The Programmer’s Delimma: When and How to Refactor your Codebase

January 9th, 2009 by Aaron N.

I’m in the middle of a big overhaul of Iminta’s JavaScript. The site has mountains of JS and it’s a big effort. Today I got an email from someone who is struggling with their own refactor and they asked me for advice. Read the rest of this entry »

My Other Blog: OSX Journal

January 9th, 2009 by Aaron N.

This is off topic, but I thought I’d share with everyone that I have kicked off another blog: OSX Journal. The nutshell is that about a year ago I installed OSX on my PC and though it took some effort to get all my hardware working it’s by far the best operating system I’ve ever run (I’ve run: DOS, Win95, WinNT, XP, Vista, and Ubuntu), especially as a developer. Read the rest of this entry »

Extending Class Families

January 6th, 2009 by Aaron N.

A common convention in MooTools is to have numerous classes that break out functionality. This allows you to build upon the functionality of classes through extension and also keep your code base small when you don’t need everything and the kitchen sink. Consequently we get Fx, Fx.Css, Fx.Tween, Fx.Morph, etc.

What happens when you want to extend numerous classes with the same functionality? For instance, I have a popup manager called StickyWin. One of my scripts is called StickyWin.Ajax.js, which adds Ajax functionality to all the popup classes, creating *.Ajax classes (so, for instance, StickyWin.Fx is extended to StickyWin.Fx.Ajax).

Consider this code:

var Foo = new Class({
  apple: 'red'
});

var Bar = new Class({
  lemon: 'yellow'
});

//If we want to extend Foo with the exact same
//functionality and create Foo.Talker, then we must
//repeat ourselves:

Foo.Talker = new Class({
  Extends: Foo,
  speak: function(prop){
    alert(prop + 's are ' + this[prop]);
    //apples are red
  }
});

Bar.Talker = new Class({
  Extends: Bar,
  speak: function(prop){
    alert(prop + 's are ' + this[prop]);
    //lemons are yellow
  }
});

Whenever you are writing code if you find yourself repeating yourself there’s almost always a way to avoid it. The solution here is to create a method that extends classes for us with the new functionality.

(function(){ //put it in a closer so we don't pollute the global namespace

  var makeTalker = function(classToExtend){
    return new Class({
      Extends: classToExtend,
      speak: function(prop){
         alert(prop + 's are ' + this[prop]);
         //apples are red
      }
    });
  };

  Bar.Talker = makeTalker(Bar);
  Foo.Talker = makeTalker(Foo);
})();

Now we’ve created both sub-classes but only written our code in one place.

Not To Be Confused with Class.Implement

The above solution is useful for creating subclasses. This shouldn’t be confused with Implementing functionality into existing classes. In the above example, we created Foo.Talker and Bar.Talker, which do not change Bar or Foo at all.

We could, instead, just add our methods directly to those classes with Class.Implement. This works well when you want to overwrite existing methods or add new ones, but remember that Class.Implement doesn’t let you reference this.parent, so you can’t add functionality to existing methods, only overwrite them. More details on Implement vs Extend in the MooTorial.

Mooish Repository Template and an All-JsonP Showcase

December 28th, 2008 by Aaron N.

Ian Collins is apparently hooked on MooTools because he sure has been writing a whole heckuva lot of it. He emailed me a few days back about his site that is all dynamically built off Twitter, Flickr, and other sources using JsonP to fetch all the data. The entire experience is built in JavaScript. Looking at the source of his site you find this lovely little easter egg:

<body>
  < -- I win at SEO -->
</body>

The source of the site itself is all cleanly written MooTools classes, reminding me of my thoughts on programming to patterns.

He’s also released through github a project structure based on MooTools and Clientcide tools and conventions. This is basically how I organize all the Clientcide code along with both test frameworks (Ian includes ScrewUnit – while Clientcide and MooTools use JSSpec, but they both do the same thing – and my Unit Test Framework). Read the rest of this entry »