Web Info & Tutorials

May 14th, 2008

CSS ANIMATIONS VIA MOOTOOLS

Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations.

With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.

First I tried the concept of adding something like “-moofx-{property}: {from} {to};” to CSS. The disadvantage of this way is that you have to specify the change twice: First in regular CSS to serve the non-JavaScript-users, then for the animation.

After hearing about WebKit’s CSS Animations I changed my concept of CSS animations. Instead of setting an additional target or starting value, both properties are specified ”normally”. The only thing you have to add is a declaration.

The script uses MooTools soon to be release v1.2 and works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.

You can see the script in action here.

May 14th, 2008

GOOGLE DOCTYPE: DOCUMENTING THE OPEN WEB

Mark Pilgrim has released Google Doctype, an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more.

The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

This is just the beginning for the ambitious project, which is open source, and open licensed (Creative Commons). Now it is out there we, the developers, have the option to add valuable data to grow the corpus.

Congrats to Mark on the launch. I know that it has been a huge amount of work for him, and I am excited to see it out there. Below is Mark talking about the project:


You may also notice the document reader application, which is driven by GWT.

May 14th, 2008

POLLING FOR LOADED CONTENT INSTEAD OF SIMPLE SETTIMEOUT

Have you ever found yourself doing little setTimeout calls as you wait for content to be loaded asynchronously? It seems to happen pretty frequently, and Paul Irish has created a simple utility to help run code when the library you need is loaded.

With his executeWhenLoaded(function, objects, that, must, be, present) you can do something like this:

JAVASCRIPT:
  1.  
  2. executeWhenLoaded(function(){
  3.     console.log(session.data);
  4. }, 'session');   // session will return a value when the whatever preceding functionality is done.
  5.  

The implementation is simply:

JAVASCRIPT:
  1.  
  2. function executeWhenLoaded(func){ 
  3.  
  4.   for (var i = 1; i<arguments.length; i++){ // for loop starts at 1 to skip the function argument.
  5.     if (! window[ arguments[i] ]) {
  6.       setTimeout(arguments.callee,50);     
  7.       return;
  8.     }
  9.   }
  10.  
  11.   func(); // only reaches here when for loop is satisfied.
  12. }
  13.  
May 14th, 2008

XMAKE: A JAVASCRIPT MAKE-LIKE UTILITY

Peter Michaux has created a make, or rake-like utility for JavaScript called xmake.

You create a Xmakefile.js such as

JAVASCRIPT:
  1.  
  2. / defines println
  3. require('helpers');
  4.  
  5. xmake.task('low', function() {
  6.   println('low');
  7. });
  8.  
  9. xmake.task('mid1', ['low'], function() {
  10.   println('mid1');
  11. });
  12.  
  13. xmake.task('mid2', ['low'], function() {
  14.   println('mid2');
  15. });
  16.  
  17. xmake.task('high', ['mid1', 'mid2'], function() {
  18.   println('high');
  19. });
  20.  

And you run it via:

xmake [-f filename] taskname

This works with xjs, the server side JavaScript framework Peter is building. We are seeing a spur in these types of libraries as people do more on the server-side.