Web Info & Tutorials

Categories
Archives
Calendar
May 2008
M T W T F S S
« Apr    
 1234
567891011
12131415161718
19202122232425
262728293031  
Sponsors
Contributors
Search
Recent Posts
May 2nd, 2008

WE ARE JAVASCRIPT LIBRARY AUTHORS. HEAR US ROAR!

By admin

John Resig "doesn't think there's a single JavaScript developer who isn't excited about the new Selectors API specification (and the upcoming implementations)."

He was asked to provide feedback on the API, and he sent them an email with just that.

He had three concerns:

DOMElement.querySelectorAll returning incorrect elements

This is the most critical issue. As it stands DOM Element-rooted queries are borderline useless to libraries - and users. Their default behavior is unexpected and confusing. Demonstrated with an example, using Dojo:

PLAIN TEXT
HTML:
  1.  
  2.   <div><p id="foo"><span></span></p></div>
  3.   <script src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"></script>
  5.   var foo = document.getElementById("foo");
  6.   // should return nothing
  7.   alert( dojo.query('div span', foo).length );
  8.   // will return the SPAN (booo!)
  9.   alert( foo.querySelectorAll('div span').length );
  10.   </script>
  11.  

He then asked other library authors if they agreed:

Andrew Dupont (creator of Prototype's selector engine):

My issue with this is that it violates principle of least surprise and bears no resemblance to the APIs in the wild.

Alex Russell (creator of Dojo's selector engine):

This is a spec bug.

Combinator-rooted Queries

I read about some prior discussion concerning this (especially in relation to DOMElement.querySelectorAll-style queries). This is an important part of most libraries, as it stands. Maciej's proposed solution of using :root to allow for front-leading combinators is perfectly acceptable to me (where :root is made equivalent to the element, not the document element).

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.   // jQuery
  3.   $("#foo").find("> span");
  4.  
  5.   // DOM
  6.   document.getElementById("foo").querySelectorAll(":root> span")
  7.  

This is something that a library can easily detect and inject.

Error-handling

I'm perfectly fine with the proposed try/catch solution however there must be a way of easily determining what the invalid portion of the selector was. Currently the following occurs in Safari:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.   try {
  3.     document.querySelectorAll("div:foo");
  4.   } catch(e) {
  5.     alert(e); // "Error: SYNTAX_ERR: DOM Exception 12"
  6.   }
  7.  

If there were extra properties to point to what the inappropriate selector was, that'd be fundamentally important. Probably the best solution (for both implementors and JavaScript library authors) would be to simply provide a character index, working something like the following:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.   var selector = "div:foo";
  3.   try {
  4.     document.querySelectorAll(selector);
  5.   } catch(e) {
  6.     alert(selector.slice(e.position)); // ":foo"
  7.   }
  8.  

It is nice to see this all in the open, and especially watching the library authors get involved in the specs that effect us all.

Posted in Ajax | Comments Off
May 2nd, 2008

EMULATING GET, SET, CATCHALL FOR ALL BROWSERS

By admin

Adrien Friggeri likes the true get, set, and catchalls that almost all but IE provide, so he took a peak at the examples and got to work emulating the layer, which ended up with:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var o = CGSobject(function (x) { return x+1; });
  3.  
  4. // basic set
  5. o("a", 7);
  6.  
  7. // basic get
  8. print(o("a"));
  9. // -> 7
  10.  
  11. // getter
  12. o("b", {get: function () { return this.a+1;}});
  13. print(o("b"));
  14. // -> 8
  15.  
  16. // setter
  17. o("c", {set: function (x) { this.a = x / 2 }});
  18. o("c", 50);
  19. print(o("a"));
  20. // -> 25
  21.  
  22. // catchall
  23. print(o(2));
  24. // -> 3
  25. print(o("foo "));
  26. // -> "foo 1"
  27.  

To get this, he used:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function CGSobject (catchall) {
  3.   var o = function (k,v) {
  4.     if (v) {
  5.       var curv = o.content[k];
  6.       (curv && curv.set && curv.set.call(o.content,v)) || (o.content[k] = v);
  7.     } else {
  8.       var v = o.content[k] || o.catchall(k);
  9.       return (v.get && v.get.call(o.content)) || v;
  10.     }
  11.   }
  12.   o.content = {};
  13.   o.catchall = catchall || function () { return null };
  14.   return o;
  15. }
  16.  
Posted in Ajax | Comments Off
May 2nd, 2008

HOMER IN CSS

By admin

There is the David. There is the Mona Lisa. And then, the artist has to create the Homer.

Román Cortés did just that with his Homer in CSS and Ned Batchelder shows it via animation.

Homer in CSS

Thank god for fun fridays.

Posted in Ajax | Comments Off
May 2nd, 2008

XSKETCH: PICTIONARY WITH GWT

By admin

XSketch

XSketch is "a multiplayer word sketch game. It is programmed in Adobe Flash, Java, Ajax, and GWT. Gameplay is similar to Pictionary where you sketch a picture with the goal of having other players guess your word and vice versa."

Ryan Dewsbury creator this game, which he adds to his collection of GPokr and KDice.

This one is particularly addicting!

Posted in Ajax | Comments Off

Web Info & Tutorials is Hosted by Chaaban