Gary Haran.com

After James posted my Javascript Same Game to digg it seemed I was receiving more job inquiries than spam. Now that the dust has settled I’ve taken some time off to visit family in Paris and think about my options. Standout Jobs approached me just in the nick of time and I would have been a fool to refuse.

I’ll be working in Montreal with what is perhaps the most talented and interesting team I’ve ever had the chance to work with. All that right here in Montreal!!

Fred Ngo who we can thank for making BarCampMontreal and DemoCampMontreal a reality, Austin Hill founder of Zero Knowledge (now RadialPoint), Ben Yoskovitz who runs the famous Instigator Blog and of course the dream team that is currently made up of Marc-Andre Cournoyer aka Ruby Guru, Daniel Haran aka Ruby Guru and brother! and Francis Wu aka CSS/Web Design Guru!

My role here will be to add some sexyness to the front end that ties in with the ass-kicking stuff that’s already there. I can’t say what exactly because I just signed one of those pesky NDAs… all I can say is that they’ll be changing the face of recruiting.

Check out Standout Jobs blog entry about me.

Hot Demo

Nothing beats a good demo of what you can do with these extensions to prototype/scriptaculous.

Hot Div Scrolling

Prototype/Scriptaculous Div Scrolling Effect

Hot Window Scrolling

Prototype/Scriptaculous Window Scrolling Effect

Both examples use position of element anchors on the page. The examples also use page anchors that update in the URL once the scroll effect has finished. This means that if you scroll to a part of the page and send the url to someone else who doesn’t have JS enabled they’ll still see the same page content.

Why not use Control.Scroller?

I really enjoy having minute control of things on my user interface but I’m always reminded that I have to find solutions that degrades elegantly mostly because of SEO considerations but also because Aunt Tilly might not have upgraded yet.

Though you can figure out whether a user scrolls the mouse with Javascript you don’t have access to the operating system’s preference in regards to scrolling speed. I don’t like guessing because people have wildly different preferences.

In order to please the user I recommend that you leave him with what he’s used to but only use Javascript to enhance the experience he’s already familiar with. That way you don’t frustrate him with unexpected behavior but offer him extras.

How To Scroll A Div: A Primer

In order for a div to have a scroll bar you must set the height(at least for Safari to be happy) and you must set its overflow value to ‘auto’ or ’scroll’. In most cases ‘auto’ lets your elements flow vertically and horizontally in such a way that you should normally be left with only a vertical scrollbar.

window.scrollTo already exists and allows all browser since 4.0 era to scroll to arbitrary left and top positions on the page. The homonymous method on Element (Element.scrollTo) does not act the same way. When you call it on an element the page will call window.scrollTo with to display the element at the top right of the viewport. Really handy but not exactly what I wanted.

What I did want was to have a scrollTo method that acted the same way as window.scrollTo but on divs.

So I wrote this little bit of code:

Element.addMethods({
  scrollTo: function(element, left, top){
    var element = $(element);
    if (arguments.length == 1){
      var pos = element.cumulativeOffset();
      window.scrollTo(pos[0], pos[1]);
    } else {
      element.scrollLeft = left;
      element.scrollTop  = top;
    }
    return element;
  }
});

This piece of code doesn’t break the current Element.scrollTo method but adds the possibility to offer left/top values on call.

I also wanted to see if I couldn’t get a nice scrolling effect so I wrote a new effect for Scriptaculous.

Effect.Scroll Scriptaculous Enhanced Div Scrolling

Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    this.start(Object.extend({x: 0, y: 0}, arguments[1] || {}));
  },
  setup: function() {
    var scrollOffsets = (this.element == window) 
                ? document.viewport.getScrollOffsets() 
                : Element._returnOffset(this.element.scrollLeft, this.element.scrollTop) ;
    this.originalScrollLeft = scrollOffsets.left;
    this.originalScrollTop  = scrollOffsets.top;
  },
  update: function(pos) {
    this.element.scrollTo(Math.round(this.options.x * pos + this.originalScrollLeft), Math.round(this.options.y * pos + this.originalScrollTop));
  }
});

For those unfamiliar with Scriptaculous effects the initialize, setup and update methods are part of any effect you would create. They’re pretty straightforward so I won’t spend too much time with them unless someone has questions.

I’ve spent roughly a day creating a javascript same game clone to see about changes in the latest versions of my favorite front end scripting libraries. It uses the latest versions with no added toppings so it gives us a very good idea of what comes in the package itself. The same game code is 179 lines of Javascript, essentially just a single class that handles everything.

The results are pleasing to say the least.

PROS

- Prototype much more stable than 1.5
- Prototype slightly faster than 1.5
- select > getElementsBySelector
- automatic event binding is an awesome addition

CONS

- dom:loaded custom event failed to fire in IE6 so I had to rever to ‘load’ event instead - UPDATE: dom:loaded does work in IE6 but you should observe the event on document instead of window (thanks Tobie)
- playing the same sound repeatedly embeds a new object every time rather than reusing what’s already present. This can cause huge slow downs when you play the same sound over 100 times on a page.
- first time a sound is played it might take a while to download causing a delay - I’m thinking something could be done to fix the re-embedding all while adding a preloader at the same time

Comments on Same Game are welcome. If any other front end enthusiast see any improvements I’d gladly hear from you (use contact form).

I’m really happy about Defensio spam filter finally launching. Instead of being a dumb blog spam filter what they built is a complete and comprehensive approach to spam filtering.

Developer’s have access to a feature rich API so they can actually use the spam filtering service for any web site that could receive spam. On obvious usability feature that they have over Akismet is that each incoming messages is scored using a spaminess level. So you can color code or programatically determine what spaminess level you are happy with. It’s cattered to your project specifically and with way more control than competing spam filters.

In other news Prototype 1.6 and Scriptaculous 1.8 are now officially out. If you haven’t been following these packages they’re tired in directly to ruby on rails and this latest release makes things even more painless.