Monday, September 29th, 2008

ZAP: Same timeline for effects across browsers

Category: JavaScript

<>p>Mikael Bergkvist was frustrated with how effects in different browsers were far from uniform. They could run around in a modern browser, and lag on old ones. In general many effects seem to be far from smooth, and we have talked about the need to have a Timer thread that you can tie into to get the work smoother.

Well, Mikael decided to develop ZAP:

ZAP is a widgetplus project which boosts javascripts up to eight times the speed without having to resort to a plugin of any sort, by using a completely new approach that takes into account how the javascript engine is actually written. It’s also making sure – automatically – that the set speed remains exactly the same regardless of what browser you use.

Once set to a certain speed, it stays that way – regardless of the browser being used.

This page is a teaser of what is to come, the actual launch is next month, and developers will then have a tool that resolves a very important pain that webdevelopers will be facing now when the new age of browser wars has come to the javascript engine itself.

To see how it works:

  1. <script type="text/zap">
  2. zap:init:{
  3.  
  4. this.el.style.color="white";
  5. this.el.style.backgroundColor="gray";
  6. zap.next;
  7.  
  8. element(".test").item(0).text:
  9. done;
  10. element(".test").item(0).setstyle("height:;width:200;border:black 1px solid;backgroundColor:orange;color:brown;fontFamily:verdana;fontSize:11;padding:4px;position:absolute;top:10;left:10;display:none");
  11. zap.next;
  12.  
  13. element(".test").item(0).text:
  14. done;
  15. this.a=1;
  16. this.b=0;
  17. this.c=0;
  18. zap.next;
  19.  
  20. element(".test").item(0).textAfter:
  21. <b>Start:</b>  var this.c::
  22. done;
  23. zap.next;
  24.  
  25. element(".test").item(0).runcircle(150,150,1,this.a);
  26. this.a=null;
  27. element(".test").get(0).style.display="block";
  28. this.c++;
  29. element(".test").item(0).textAfter:
  30. var this.c::  done;
  31. zap.next;
  32.  
  33. zap.newspeed(1);
  34. zap.repeat(360,-2);
  35. zap.next;
  36.  
  37. zap.newspeed(25);
  38. element(".test").get(0).style.backgroundColor="yellow";
  39. this.b=0;
  40. element(".test").item(0).text:
  41. <b>You dig?</b>
  42. done;
  43.  
  44. ...

Related Content:

Posted by Dion Almaer at 8:43 am
1 Comment

+----
1.5 rating from 56 votes

1 Comment »

Comments feed TrackBack URI

Uh, you forgot to close your link tag… (open a, ZAP: newline, no close a)

Comment by fatlotus — September 29, 2008

Leave a comment

You must be logged in to post a comment.