Archive for September, 2006

MooTools followup

September 20th, 2006 by Aaron N.

So I posted yesterday in my flurry of catch-up posts about the mad4milk.net guys new framework: MooTools. I’ve had a little time to dig into it and I must say that I’m blown away. In many ways, this is the framework that I’d say CNET should write for itself if it were to take on such a task. Read the rest of this entry »

More Prototype updates, documentation in the works (finally)

September 19th, 2006 by Aaron N.

Justin Palmer is shedding more light on Prototype updates.

This time around he covers events and DOM traversal:

Events

In days past bind was great at accepting additional arguments, however, bindAsEventListener didn’t get this love until now. We can pass those additional arguments to bindAsEventListener with ease:

var Clicker = Class.create();
Clicker.prototype = {
initialize: function(link) {
Event.observe(link, ‘click’, this.onClick.bindAsEventListener(this, ‘red’));
},onClick: function(event, color) {
Event.element(event).setStyle({color: color});
Event.stop(event);
}
}

new Clicker(‘cool’);

DOM made simple

We all hate the DOM, so how about some simpler methods to traverse it?

$(‘menu’).up();
$(‘menu’).down()
$(‘menu’).next()
$(‘menu’).previous()
$(‘menu’).down(2) // grab second arg
$(‘menu’).down(‘li’, 0)
$(‘sidebar’).descendants()
$(‘selected’).previousSiblings()
$(‘actions’).ancestors()
$(‘actions’).siblings()

And it looks like documentation is in the works:

On the documentation front: We have something in the works. We have the API about 80% documented and will have this up for public consumption as soon as we can. This will start off as very basic API docs, but we plan on putting a lot of effort in this as time goes by. On that note, you can send your thanks to Andrew Dupont considering he has worked very hard on the docs.

Prototype Carousel Widget

September 19th, 2006 by Aaron N.

I know that Bill Scott’s carousel widget (written with the Yahoo UI Library) is already in play here on CNET Redball (News.com is using it). Here’s a Prototype version that seems to be a lot smaller – you’ll need Prototype (you might be able to get away with the lite version @ 8K, otherwise, 33K), but NOT scriptaculous. Might be worth considering swapping out? Does all the ajax stuff, too.

Sebastien Gruhier has written a Prototype version of the YUI Carousel component.

This version is lightweight and has a few parameters compared to the more flexible YUI version (that comes with a 200kb price tag).

Prototype Carousel

Scriptaculous 1.6.4 released

September 19th, 2006 by Aaron N.

The releases are coming fast and furious for Prototype and script.aculo.us. Thomas Fuchs has sync’d up to the latest Prototype adding features along the way: Read the rest of this entry »

Mootools

September 19th, 2006 by Aaron N.

Well crap. 1) I love the mad4milk guys (makers of moo.fx, moo.ajax, moo.dom, prototype.lite). 2) their new framework looks AWESOME. 3) as always, their libraries are SUPER TINY.

But damn, now I have to learn something new, and maybe rewrite a bunch of crap. This is the problem with javascript. Still, when Prototype + Scriptaculous is 100K, you gotta admire their ability to crank something out in under 20K that will get you nearly the same thing.

The Mad4Milk team (the minds that brought the world moo.fx) have unleashed a brand new, very impressive Javascript library out onto the web – MooTools.

mootools is a very compact, modular, Object-Oriented javascript framework. Its unique design makes it extremely crossbrowser, easy to use, and a snap to extend with your own code. It comes with a choice of more than fifteen scripts, plugins and addons, including Effects (moo.fx) Ajax (moo.ajax), Dom Navigator (moo.dom), Drag and Drop, Sortable lists, cookies Manager and many more.

There aren’t any demos of the functionality quite yet (as of the date of this post), but you can download the first release of thise powerful little tool.

You can also check out what Jonathan Snook has to say about it, having already downloaded and worked with it a bit. He’s also created a simple tutorial on using the new library to create a drag-and-drop example.

Scope in Javascript

September 19th, 2006 by Aaron N.

via ajaxian (surprise):

Mike West has put some time into analyzing and understanding one of the more sticky issues in Javascript: scope.

Scope is one of the foundational aspects of the JavaScript language, and probably the one I’ve struggled with the most when building complex programs. I can’t count the number of times I’ve lost track of what the this keyword refers to after passing control around from function to function, and I’ve often found myself contorting my code in all sorts of confusing ways, trying to retain some semblance of sanity in my understanding of which variables were accessible where.

He has published his explorations as an article in Digital Web Magazine. In it he deals with the basics of scope; the this keyword in method calls, constructors, function calls and event handlers; the apply() and call() methods; and Prototype’s bind() extension to Function.

The article is illustrated throughout with code examples and includes a list of useful references at the end. A good addition to the family of online Javascript resources.

JavaScript Closures for Dummies

September 19th, 2006 by Aaron N.

via ajaxian – note that closures are one big cause of memory leaks…

Morris Johns has gone though and written a detailed explanation of closures by example:

If everything seems completely unclear then the best thing to do is to play with t e examples. Reading an explanation is much harder than understanding example
My explanations of closures and stack-frames etc are not technically correct – they are gross simplifications intended to help understanding. Once the basic idea is grokked, you can pick up the details later.

Final points:

  • Whenever you use function inside another function, a closure is used.
  • Whenever you use eval() inside a function, a closure is used. The text you eval can reference local variables of the function, and within eval you can even create new local variables by using eval(‘var foo =
  • When you use Function() inside a function, it does not create a closure. (The new function cannot reference the local variables of the function calling Function()).
  • A closure in JavaScript is like keeping a copy of the all the local variables, just as they were when a function exited.
  • It is probably best to think that a closure is always created just on entry to a function, and the local variables are added to that closure.
  • A new set of local variables is kept every time a function with a closure is called (Given that the function contains a function declaration inside it, and a reference to that inside function is either returned or an external reference is kept for it in some way).
  • Two functions might look like they have the same source text, but have completely different behaviour because of their ‘hidden’ closure. I don’t think JavaScript code can actually find out if a function reference has a closure or not.
  • If you are trying to do any dynamic source code modifications ( for example: myFunction = Function(myFunction.toString().replace(/Hello/,’Hola’)); ), it won’t work if myFunction is a closure (Of course, you would never even think of doing source code string substitution at runtime, but…).
  • It is possible to get function declarations within function declarations within functions – and you can get closures at more than one level.
  • I think normally a closure is the term for both the function along with the variables that are captured. Note that I do not use that definition in this article!
  • I suspect that closures in JavaScript differ from those normally found in functional languages.

Optimizing Javascript for IE

September 19th, 2006 by Aaron N.

A while back I posted articles on memory leaks and how to avoid them (read them! seriously). In the process of learning that lesson, I had to rethink the way I wrote my code a little which was a little painful. Actually, every week or so I realize there’s a better way to do something and when I look at code I wrote a month ago I want to rewrite it.

So this article, is kind of frustrating, as it highlights a level of javascript I’d previously not considered much and, as I think about it now, wish I didn’t have to. Specifically, this article talks about how the IE javascript engine works with IE’s DOM engine and how to avoid expensive namespace lookups. It’s worth reading, but having read it I find the knowledge itself annoying. Maybe this stuff would be easier to write in Assembly…

via ajaxian (of course):

Peter Gurevich and Justin Rogers from Microsoft’s IE team recently wrote a blog entitled ‘IE + JavaScript Performance Recommendations – Part 1‘. It’s an interesting read, containing such tips as:

  • Precede your variables with var if you are truly defining them in the current scope
  • Cache Variables Whenever Possible
  • Cache Function Pointers at all costs
  • Cache Function Pointers at all costs

Live.com Image Search upgrade

September 19th, 2006 by Aaron N.

A few months ago I had Bill Scott from Yahoo come talk to people here at CNET about Designing for Ajax. One of the things that he and I talked about before his talk was how the competative landscape for Yahoo has changed dramatically in the last year or two. Take Yahoo Maps. This application was pretty much unchanged for several years and it’s only competitor was Map Quest who had, in most ways, the same application. Along comes Google and makes a killer map application, but what changed here? The maps are still the same, right? The interface is the new battlefield. Read the rest of this entry »

Objectifying Javascript

September 19th, 2006 by Aaron N.

I’ve been out of town for two weeks, so I’m just now catching up on all my javascript reading. Here’s the first of what will no doubt be a flurry of posts today.

I found this linked to via ajaxian. It’s a great article on object oriented practices using javascript. A lot of what Jonathan Snook goes over in his article on Objectifying Prototype is taken care of for you using Prototype.js’s Class.create methods and Object.extend methods. I highly recommend reading up on these functions (linked to at the bottom of the article). But this overview is really a great primer for writing class based javascript. Read the rest of this entry »