Archive | Web 2.0

Transformie: Implement WebKit CSS transforms in IE

Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE

When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together:

  • IE Filters such as DXImageTransform.Microsoft.Matrix that do the rotate, skew, scale, and general matrix work for you
  • onpropertychange "almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event." Here it is at work in the library:
    JAVASCRIPT:
    1.  
    2. jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
    3.         if(e.originalEvent.propertyName == 'style.webkitTransform') {
    4.                 Transformie.refreshMatrix(this);       
    5.         }                     
    6. });
    7.  

From there you can see the transforms which look like:

JAVASCRIPT:
  1.  
  2. // rotate
  3. matrices.push($M([
  4.         [Math.cos(a),   -Math.sin(a),      0],
  5.         [Math.sin(a),   Math.cos(a),       0],
  6.         [0,     0,   1]
  7. ]));
  8.  

Very nice indeed.

Posted in Web 2.00 Comments

Ahot’s blog – JavaScript: Bookmarklet is a tiny program?

JavaScript: Bookmarklet is a tiny program? If you know word "Bookmarklet" this info can be useful. Wikipedia say that Bookmarklet is a small computer application, stored as the URL of a bookmark. "Hello world" ...

Posted in Development, Web 2.01 Comment

Nice new Dojo aggregate effects

Dojo has some nice new compound effects in the works. Some of the new effects include block fades, disintergrate, explode, shear, and pinwheel.

Each effect can be tweaked with config such as:

  • The number of rows and columns in which to split the element
  • The distance the pieces travel (as a multiple of the element’s respective dimensions)
  • Whether or not to fade the pieces in/out
  • How much the effect should be randomized (a percentage)
  • Whether or not the pieces should appear outside the element’s boundaries

You will also see effects that work on the text within divs, as well as pieces of the div itself.

Posted in Web 2.01 Comment

A simple solution to the “other” problem with select boxes

Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a “select-to-input toggle” that shows and hides a text field when you select “Other”. It overloads the same form name, so the server side gets just one value, and doesn’t know or care if it was in the drop down or typed in. You can try it live here.

This is a simple little solution to the issue that there isn’t a native control to really do the job. What you really probably want here is the ability to drop down and select items, or just type into the select box field itself. This is one reason why people implement auto-complete text fields instead of using select boxes for this case, but wouldn’t it be nice to be able to tag your <select> and be done?

Posted in Web 2.01 Comment

Getting a JavaScript stracktrace in any browser

Eric Wendelin has posted on getting a JavaScript stack trace no matter that the browser.

With Firebug you can call console.trace() but what about the rest?

Luke Smith took Eric's work and added to it, ending up with:

JAVASCRIPT:
  1.  
  2. (function () {
  3. YOUR_NAMESPACE.getStackTrace = (function () {
  4.  
  5. var mode;
  6. try {(0)()} catch (e) {
  7.     mode = e.stack ? 'Firefox' : window.opera ? 'Opera' : 'Other';
  8. }
  9.  
  10. switch (mode) {
  11.     case 'Firefox' : return function () {
  12.         try {(0)()} catch (e) {
  13.             return e.stack.replace(/^.*?\n/,'').
  14.                            replace(/(?:\n@:0)?\s+$/m,'').
  15.                            replace(/^\(/gm,'{anonymous}(').
  16.                            split("\n");
  17.         }
  18.     };
  19.  
  20.     case 'Opera' : return function () {
  21.         try {(0)()} catch (e) {
  22.             var lines = e.message.split("\n"),
  23.                 ANON = '{anonymous}',
  24.                 lineRE = /Line\s+(\d+).*?in\s+(http\S+)(?:.*?in\s+function\s+(\S+))?/i,
  25.                 i,j,len;
  26.  
  27.             for (i=4,j=0,len=lines.length; i<len; i+=2) {
  28.                 if (lineRE.test(lines[i])) {
  29.                     lines[j++] = (RegExp.$3 ?
  30.                         RegExp.$3 + '()@' + RegExp.$2 + RegExp.$1 :
  31.                         ANON + RegExp.$2 + ':' + RegExp.$1) +
  32.                         ' -- ' + lines[i+1].replace(/^\s+/,'');
  33.                 }
  34.             }
  35.  
  36.             lines.splice(j,lines.length-j);
  37.             return lines;
  38.         }
  39.     };
  40.  
  41.     default : return function () {
  42.         var curr  = arguments.callee.caller,
  43.             FUNC  = 'function', ANON = "{anonymous}",
  44.             fnRE  = /function\s*([\w\-$]+)?\s*\(/i,
  45.             stack = [],j=0,
  46.             fn,args,i;
  47.  
  48.         while (curr) {
  49.             fn    = fnRE.test(curr.toString()) ? RegExp.$1 || ANON : ANON;
  50.             args  = stack.slice.call(curr.arguments);
  51.             i     = args.length;
  52.  
  53.             while (i--) {
  54.                 switch (typeof args[i]) {
  55.                     case 'string'  : args[i] = '"'+args[i].replace(/"/g,'\\"')+'"'; break;
  56.                     case 'function': args[i] = FUNC; break;
  57.                 }
  58.             }
  59.             stack[j++] = fn + '(' + args.join() + ')';
  60.             curr = curr.caller;
  61.         }
  62.         return stack;
  63.     };
  64. }
  65. })();

Posted in Web 2.01 Comment

Ahot’s blog – JavaScript: Handy js-console

JavaScript: Handy js-console How about having simple way for running javascripts on any web-page? I have solution. All you need is to drag link below on your links toolbar. Or just add this link to your favorites. ...

Posted in Development, Web 2.00 Comments

ECMAScript Harmony: Brendan Eich, Douglas Crockford, Adobe, and more

ECMAScript Harmony has been the big news of the week. It isn’t hard to see why, the next version of JavaScript is going to affect us all, for a long time (even more than a presidents term!)

Alex Russell, John Resig, and myself got Brendan Eich and Arun Ranganathan on the phone to talk about the news. This is episode 2 of the Open Web Podcast (see the new website, and subscribe to the series, including via iTunes.)

The podcast is over an hour long and goes into a ton of detail covering a lesson on language design, politics and process, a lot of history, and hopefully the path to a positive future.

We have other postings going on in the community too. Douglas Crockford writes an opinion on how The Only Thing We Have To Fear Is Premature Standardization, Mike Chambers wraps up the thoughts of Adobe on ActionScript 3 and ECMAScript 4, and Alex Russell talks sense into the fallout.

Have you seen any interesting posts or thoughts on the news?

Posted in Web 2.01 Comment

Custom events as API end points for key bindings and more

Inspired by the Gmail team and how they created well known Greasemonkey endpoints and the custom events work that I have been doing, I was lead to play with custom events as a way to tie into key bindings. This lead to the following post on my blog:

On the back of my example enjoying the Observer pattern with custom events I have started to play with a pet project also involving custom events.

I love keyboard shortcuts. I hate the mouse. I wish that Web applications would offer more keyboard shortcuts a la Gmail, and wondered if there could be a generic way to tie keys to actions in an app. There are things such as accessKey, but we need more.

If you start to follow the pattern of creating named events for public integration points, then how about tieing in keys? I implemented this on the quote example, where you can now use up and down arrows, and N and P, to move through the list of names.

To use the system you declare the keys and tie them to events:

JAVASCRIPT:
  1.  
  2. KeyBindings.add({
  3.    eventname: 'action:move-up',
  4.    // keys: KeyBindings.caseInsensitive('p'),
  5.    keys: ['p', Key.ARROW_UP ],
  6.    description: "Move up the stack"
  7. });
  8.  
  9. KeyBindings.add({
  10.    eventname: 'action:move-down',
  11.    keys: ['n', Key.ARROW_DOWN ],
  12.    description: "Move down the stack"
  13. });
  14.  

This code ties the keys to the actions, and thus fires those actions when pressed. Next, you need to capture those events to do the work when the key is fired:

JAVASCRIPT:
  1.  
  2. document.observe('action:move-up', function(e) {
  3.     Selection.moveUp();
  4. });
  5.  
  6. document.observe('action:move-down', function(e) {
  7.     Selection.moveDown();
  8. });
  9.  

With a standardized way of annotating events, interesting side effects appear. You can hit the '?' key to bring down a heads up display sharing what keys do. You could imagine a Greasemonkey script, or browser plugin, that loads the keybindings.js code, and looks for the key binding definitions. The declaration could be done in HTML too, which could be found by the plugin and tied into the system. What do you think?

Posted in Web 2.01 Comment

Reviews Interactive – Reviews from NetBeans Developers

Reviews from NetBeans Developers 1. NetBeans Code Folding and the Case for Code Folding -- Dustin's Software Development Cogitations and Speculations, 8/11 Dustin Marx makes a case for code folding and explains how ...

Posted in Development, Web 2.01 Comment

Miles to go .- LOTD #2: Phobos – MVC framework based on JavaScript

LOTD #2: Phobos - MVC framework based on JavaScript Phobos is a lightweight, scripting-friendly, web application environment running on the Java platform. It provides a complete MVC framework where Controller is a ...

Posted in Development, Web 2.01 Comment