Sunday Nov 23, 2008

reglib 1.0.4 released

reglib is up to 1.0.4. Some bugs are fixed and some features are added since the 1.0 release:

Here's an example of removeEvent():

var el = reg.gebi('myid');

// mem is just an id
// similar to that returned by setTimeout()
var mem = reg.addEvent(el, 'click', function(e){
    // do stuff here
});

// later on, remove the event
// similar to clearTimeout()
reg.removeEvent(mem);

Personally, I don't use these direct-attachment functions very much because I prefer to use reglib's built-in event delegation, but it's nice to have them around.

More info: all reglib posts, reglib feed, download reglib

Saturday Nov 15, 2008

reglib versus JQuery

Read the reglib tag trail for more about reglib, or subscribe to the feed of all things tagged reglib.

Let me first of all stress that I'm not trying to bust on JQuery here. JQuery does something that needs to be done, and it does it just about as well as can be done given the tool-set browsers have collectively placed at our disposal.

With that said, I'm going to go ahead and pimp the reglib way of doing things, by which I mean declarative, over the load-traverse-modify methodology, which JQuery makes so easy.

The demo page linked below has two identical interactive widgets; one wired up using JQuery, and the other wired up using reglib.

» Demo Page «

The page is rigged like a science experiment, with a control followed by several tests in which you observe differences in behavior between the two widgets in response to various stimuli. The goal is to demonstrate reglib's resilience under duress (as it were). Enjoy.

Monday Nov 10, 2008

reglib JavaScript Library Now Available Under MIT License

The reglib is now published to Google Code and available under the MIT license.

Project Home: http://code.google.com/p/reglib/
Download: http://code.google.com/p/reglib/downloads/list

The backstory - Almost a year ago1 I made all kinds of big talk about releasing a JavaScript lib I was developing for sun.com. This library obviates (some of) the need for what I call the load-traverse-modify methodology of unobtrusive JavaScript:

  • Load: make it your business to know when the DOM has loaded.
  • Traverse: use a query to scan said DOM, returning a list of elements.
  • Modify: attach event handlers to, and otherwise manipulate, those elements.

Although LTM is quite common in JavaScript development, I believe it's an antipattern. The reglib tries to get closer to the CSS way of doing things: declare what kinds of elements get what behavior, and have that declaration take immediate effect at a global level, regardless of subsequent mutations to the DOM.

// JAVASCRIPT CODE:
reg.click("a.popup", function(e){
    window.open(this.href);
    return false;
});

/\*
ENGLISH TRANSLATION:
I declare, forthwith, that all clicks on <a> elements with
class "popup" shall be handled thusly...
\*/

So there you have it. Feel free to check it out (just check it out or actually check it out), read the documentation wiki, download, leave comments, etc. The lib also has a bunch of convenience functions for DOM manipulation, plus it has tools for doing LTM stuff because let's face it, sometimes there's no other way.

(Previous posts on this topic can be found here and here.)


1 It took so long because, in a nutshell: 1) Sun has an open source review process, you can't just release code willy-nilly, 2) During the process, I failed to be a squeaky wheel, and in fact the lawyers waited on my responses as much as I waited on their responses. However development over that interval has been constantly active, and reglib is being used on sun.com.

Thursday Jul 24, 2008

What's the Fastest Way to Code a Loop in JavaScript?

I built a loop benchmarking test suite for different ways of coding loops in JavaScript. There are a few of these out there already, but I didn't find any that acknowledged the difference between native arrays and HTML collections. Since the underlying implementations are different (HTML collections for example lack the pop() and slice() methods), benchmarks that don't test against both are probably missing important information.

My suspicions were confirmed. Accessing the length property is more expensive on HTML collections than on arrays, depending on the browser. In those cases, caching it made a huge difference. However, HTML collections are live, so a cached value may fail if the underlying DOM is modified during looping. On the other hand, HTML collections will never be sparse, so the best way to loop an HTML collection might just be to ignore the length property altogether and combine the test with the item lookup, since you have to do that anyway:

// looping a dom html collection
for (var i=0, node; node = hColl[i++];) {
    // do something with node
}

Another interesting result is that with HTML collections, hColl.item(i) is 2-6x slower than hColl[i], except in Safari where it's about the same. I wonder what the extra overhead is?

I've posted the results of all my benchmarks here, however my IE7 is really IE8 in IE7 emulation mode, so I mistrust these results as representing IE7's original JavaScript/DOM engine. If anybody wants to run the benchmarks in true IE7 and post the results, I'll update this post accordingly. Also, I'm sure there are ways of looping that escaped my imagination, so if you know of any, post it in the comments and I'll add them to the test page.

[Read More]

Thursday Apr 03, 2008

A SAX Parser Based on JavaScript's String.replace() Method?

I've often wished browsers would offer native SAX implementations. SAX is lightweight and fast. Not only that, SAX is easy because it lets you ignore what's not interesting, unlike DOM, where you have to traverse the whole mess and keep it hanging around in memory. SAX also uses callback functions, which any JavaScript programmer should feel comfortable with.

[Read More]

Wednesday Feb 27, 2008

Border-Radius Roundup

The black and white object you're looking at will look different depending which browser you're using, but it should look like a circular target of some sort. It was created using nothing more than CSS's border-radius property and a couple of span tags. All of that to say this: It looks like Safari/Webkit browsers are rendering border-radius quite nicely these days, and Gecko-based browsers aren't far behind, if Firefox's latest public beta means anything. To illustrate this, I've posted some screenshots of a test page I built. This wasn't an exhaustive test for CSS3 border-radius compliance, just an attempt to see where the browsers were with basic support. Only one background image is used (shown below), the rest is pure CSS. (All tests done on the Mac.)

[Read More]
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today