Web Info & Tutorials

March 18th, 2008

JQUNIT: EXTENDING JQUERYS TESTRUNNER TO ALL

Michael Grosser has created jQuerys testrunner in a way that makes it work with jsUnit, and also useful for libraries other than jQuery.

Here is a full example:

JAVASCRIPT:
  1.  
  2. var temp = function($) {
  3.   jqUnit.module('Without local interface');
  4.   jqUnit.test('test a', function(){
  5.     jqUnit.ok(true);
  6.     this.ok(true);
  7.   });
  8.        
  9. with(jqUnit) {
  10.   module('With local interface');
  11.   test('test b', function(){
  12.     ok(true);
  13. });
  14.  
  15.  
  16.   module('Example tests');
  17.   test('Real Click vs False Click',function(){
  18.     var clicked = false;
  19.     $('#test-form').click(function(){clicked=true;});
  20.    
  21.     //false click
  22.     $('#test-form input').click();
  23.     ok(!clicked);
  24.    
  25.     //real click
  26.     triggerEvent($('#test-form input').get(0),'click');
  27.     ok(clicked);
  28.   });
  29.  
  30.   test('Waiting',function(){
  31.     $('#ajax').load('fixtures/1.html');
  32.     expect(1);//expect 1 assertion, here: fails if ajaxStop is never called
  33.     stop();//pause: so we can wait with setTimeout,setInterval,...
  34.    
  35.     $().ajaxStop(function(){setTimeout(function(){
  36.       //field is not filled directly after ajaxStop
  37.       //since DOM traversal comes after stopping to load
  38.       equals($('#ajax').html(),1);//!reverted jsUnit order
  39.       start();//resume: make sure its called or tests will halt!
  40.     })});
  41.   });
  42. }}(jQuery);
  43.  

that produces:

March 18th, 2008

SAFARI 3.1 RELEASED

Safari

Safari 3.1 has been released, so fire up your software update now (or direct install).

The new release includes features (and many more):

  • JavaScript performance improvements
  • Standards: Adds support for CSS 3 web fonts
  • Standards: Adds support for CSS transforms and transitions
  • Standards: Adds support for HTML 5 <video> and <audio> elements
  • Standards: Adds support for offline storage for Web applications in SQL databases
  • Standards: Adds support for SVG images in <img> elements and CSS images
  • Standards: Adds support for SVG advanced text
  • Developers: Adds option in Safari preferences to turn on the new Develop menu which contains various web development features
  • Developers: Allows access to Web Inspector
  • Developers: Allows access to Network Timeline
  • Developers: Allows editing CSS in the Web Inspector
  • Developers: Allows custom user agent string
  • Developers: Improves snippet editor

There are also nice user features like double-clicking a link to open in a new window, trackpad gestures, and caps lock view on a password field.

(thanks to Richard Kimber for the quick tip)

March 18th, 2008

PI.COMET: SIMPLE COMET LIBRARY

Azer Koçulu thinks that you can create a comet application in 3 minutes with his new library pi.comet. It provides realtime data transfers between client and server.You can use pi.comet with any server side language.

The usage is very simple indeed:

JAVASCRIPT:
  1.  
  2. var request = new pi.comet();
  3. request.environment.setUrl("push.php");
  4. request.event.push = function(RESPONSE){
  5.           alert(RESPONSE);
  6. };
  7. request.send();
  8.  

And the style of client side comet depends on the type of browser:

JAVASCRIPT:
  1.  
  2. scope.comet.constructor = function(){
  3.         this.environment.setName("piComet");
  4.         this.environment.setType(scope.env.ie?3:scope.env.opera?2:1);
  5.         this.environment.setTunnel(
  6.                 this.environment.getType()==3?new ActiveXObject("htmlfile"):
  7.                 this.environment.getType()==2?document.createElement("event-source"):
  8.                 new scope.xhr
  9.         );
  10. }
  11.  
March 18th, 2008

SUBCLASSING AND THE PROTOTYPE CHAIN

Are you sure you should be subclassing that? is the question that Neil Roberts asks.

He goes on to solve a problem: you just want to change ONE property in this class, but you can’t change it on the actual class because that value would now be used across all instances of that class. So in order to make it happen, you go through all the messy, painful steps described above.

But wouldn’t it be nice if we could just do this:

JAVASCRIPT:
  1.  
  2. var Child = sp.clone(Parent, { foo: "new value" });
  3.  

He walks through the implementation, teaching you more and more about prototype based inheritance as you go. You have to go through the steps to really understand how he ends up with this:

JAVASCRIPT:
  1.  
  2. sp.clone = function(superclass, mixins){
  3.         var original = superclass.__original__ || superclass;
  4.         var f = function(){ original.apply(this, arguments); }
  5.         f.__original__ = superclass;
  6.  
  7.         var unchain = arguments[arguments.length-1] === true;
  8.         if(unchain){
  9.                 f.prototype = dojo.mixin({}, superclass.prototype);
  10.         }else{
  11.                 dojo.delegate(superclass.prototype);
  12.         }
  13.  
  14.         for(var i=1, arg, l=arguments.length-unchain, args=[f.prototype]; i<l ;>
  15.                 arg = arguments[i];
  16.                 args[i] = (typeof arg == "function") ? arg.prototype : arg;
  17.         }
  18.         dojo.mixin.apply(null, args);
  19.  
  20.         f.prototype.constructor = f;
  21.  
  22.         return f;
  23. }
  24.