Web Info & Tutorials

December 17th, 2007

WIREIT: YAHOO! PIPES CANVAS WIRING API

Eric Abouaf has released WireIt, a library that answers the though: "wow, I wish there was an API that did the UI bits that Yahoo! Pipes does."

WireIt uses canvas, excanvas for IE, and YUI to get the job done. Take a look at the docs to see how it works.

Here is the code for simple terminals:

JAVASCRIPT:
  1.  
  2. var bl = YAHOO.util.Dom.get('blockLeft');
  3. var br = YAHOO.util.Dom.get('blockRight');
  4. var bt = YAHOO.util.Dom.get('blockTop');
  5. var bb = YAHOO.util.Dom.get('blockBottom');
  6.        
  7. for( var i = 0 ; i <7 ; i++) {
  8.         new WireIt.Terminal(bl, {direction: [1,0], offsetPosition:[0,i*50] });
  9.         new WireIt.Terminal(br, {direction: [-1,0], offsetPosition:[0,i*50] });
  10.         new WireIt.Terminal(bt, {direction: [0,1], offsetPosition:[i*50,0] });
  11.         new WireIt.Terminal(bb, {direction: [0,-1], offsetPosition:[i*50,0] });
  12. }
  13.  

And there is even a fun game to check out:

Planar

December 17th, 2007

ALEX RUSSELL IS TRYING TO SAVE US

Alex continues on truthiness with The W3C Cannot Save Us that follows on from the CSS uprising as we watch things crash and burn.

Alex discusses the Opera case (how it is a bad idea), and how Opera could be more productive.

He calls out how we can't hide behind the "let's just make IE work with standards better" line:

In order for the future to be better by a large amount, it must be different by a large amount.

Until we get some great new (non-standard) CSS features out Mozilla, Opera, and IE nothing will get better to the extent that we will again be optimistic about the future (Safari earns a pass). The size of the improvements they deliver in the future are directly tied to our expectations of how different the future will be. Only when there are large and divergent ideas of how to proceed expressed through competing, successful implementations will standardization really work to whatever extent that it can reasonably be expected to.

Let that sink in a bit. To get a better future, not only do we need a return to “the browser wars”, we need to applaud and use the hell out of “non-standard” features until such time as there’s a standard to cover equivalent functionality. Non-standard features are the future, and suggesting that they are somehow “bad” is to work against your own self-interest.

Web developers everywhere need to start burning their standards advocacy literature and start telling their browser vendors to give them the new shiny. Do we want things to work the same everywhere? Of course, but we’ve got plenty of proof to suggest that only healthy browser competition is going to get us there. Restructuring the CSS WG or expecting IE8 to be “fully standards compliant” is a fools game.

*listens to a beating drum*

December 17th, 2007

AJAXIM GETS A MAJOR OVERHAUL

One of the most popular Ajax-based applications/extensions, AjaxIM, recently got a major upgrade. For those that haven't heard of it, AjaxIM is a Prototype-based instant messaging client that you can include in your web applications.

It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this "web application" to work, as everything is updated in real-time via JavaScript.

Author Josh Gross really went to town completely overhauling both the server-side and client-side code. The changes for AjaxIM v3.2 include:

  • Major overhaul of the code: everything (PHP and JS) is now object-oriented instead of procedural
  • Many functions modified to make better use of the Prototype library
  • Multiple language support (need translators!)
  • PHP-based sessions implemented, so the username and password isn't sent on every message request
  • Buttons no longer separate images; buttons are now boilerplate images + text
  • Proper theming system -- themes are bundled into folders instead of all over the place
  • New dark theme!
  • Buddylist database structure converted to be in a separate table
  • Ability to block/unblock users
  • Userlist added, now displays all users in a chatroom
  • Room list added to the "join room" dialog
  • Basic (beta) admin panel added. Supports searching for users, banning, kicking, and making/removing admin
December 17th, 2007

3D-STYLE ANIMATION IN JAVASCRIPT

Joonas Lehtinen of IT Mill has shown us something that we should belike never do. As a grounds of construct he definite to wager if it was “possible to do a 3D-style aliveness in stark JavaScript without Flash, SVG, Canvas or whatever another flamboyant stuff.”

He ended up with a solution that:

  • Slice a ikon in 1px panoramic slices
  • Embed every the slides in the HTML using data-uris to refrain weight super sort of images
  • Move and bit ikon slices for apiece aliveness inclose to create whatever pleasant effect

So, prototypal you matter your HTML with:

HTML:

  1.  
  2. <img id=“slice-0″ src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAewwAAHsMBvJeX2gAAACFJREFUCNdj+P//PxMDAwPd8INH75nw2Mnw/ftvBjq6CQDNIw8MeLLR3AAAAABJRU5ErkJggg==”/>
  3. <img id=“slice-1″ src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlvRkZzAAAAAQAAAAAAEXZlawAAAAlwSFlzAAAewwAAHsMBvJeX2gAAAEpJREFUCNdj+P//PxMDAwNN8PsP35lOnn3MdOzUQ6brN18xvXrzlenJs49M+OwUE+Vh4uZiZbI2V2DSUBVluHPvDcO/f/8YaOROAMXBIDUsb8h5AAAAAElFTkSuQmCC”/>
  4.  

and then you place them every unitedly via JavaScript:

JAVASCRIPT:

  1.  
  2.         // Draw a frame
  3.         function draw(x) {
  4.                 var prevx=0;
  5.                 for (i=0;i&lt;384;i++) {
  6.                         var rad = i*3.14/384;
  7.                         var nextx = Math.round((1-Math.cos(rad))*180);
  8.                         var h=Math.round(40+50*Math.sin(rad));
  9.                         var s = document.getElementById(“slice-”+((i+x*2)%384));
  10.                         s.height=h;
  11.                         var w = Math.round(nextx-prevx);
  12.                         if (w==0) {
  13.                                 s.style.display=“none”;
  14.                         } else {               
  15.                                 s.style.display=“block”;
  16.                                 s.width= w;
  17.                                 s.style.top=“”+(50-Math.round(h/1.5))+“px”;
  18.                                 s.style.left=“”+(prevx)+“px”;
  19.                         }
  20.                         prevx=nextx;
  21.                 }
  22.         }
  23.        
  24.         // Animate the images
  25.         var frame=0;
  26.         function animate() {
  27.                 draw(frame++);
  28.                 setTimeout(“animate()”,1);
  29.         }
  30.  
  31.         // Initialize the ikon slices
  32.         for (i=0;i&lt;384;i++) {
  33.                 var s = document.getElementById(“slice-”+i);
  34.                 s.style.position=“absolute”;
  35.                 s.style.display=“none”;
  36.         }
  37.         animate();
  38.  

Then set and check the animation.

jsanimate