@tomic XML-RPC JavaScript Client

Jon Brisbin has created an XML-RPC JavaScript client called @tomic:

The @tomic XML-RPC client requires ExtJS 1.1, but has no other external requirements. It’s designed to be easy-to-use, flexible, and robust enough for anything you might throw at it. Since this is an initial release, I’m putting it out as a beta (under the GPL).

PLAIN TEXT

JAVASCRIPT:

1.  
2. Ext.onReady( function()
3. {
4.     var xmlrpc = new Atomic.util.XMLRPC( {
5.         url: “xmlrpc.php”,
6.         method: “blogger.getUsersBlogs”
7.     } );
8.     // Add parameters to the RPC call
9.     xmlrpc.addParameter( “0123456789ABCDEF” );
10.     xmlrpc.addParameter( “MyUsername” );
11.     xmlrpc.addParameter( “mypassword” );
12.  
13.     // Subscribe to events
14.     xmlrpc.addListener( “success”, function( xhr, xml ) {
15.         // Handle the response from the XML-RPC service, which is in the ‘xml’ object
16.         console.log( xml );
17.     } );
18.     xmlrpc.addListener( “fault”, function( xhr, fault ) {
19.         // Handle any faults issued by the XML-RPC server
20.         Ext.MessageBox.alert( “XML-RPC fault #” + fault.code, fault.message );
21.     } );
22.  
23.     // make the call
24.     xmlrpc.call( {
25.         method: “blogger.getUsersBlogs”,
26.         params: [
27.              “0123456789ABCDEF”,
28.              “MyUsername”,
29.              “mypassword”
30.         ]
31.     } );
32. }
33.  

(Via Ajaxian.)

XRAY: Peer into your web pages

John Allsopp has developed XRAY, a bookmarklet that launches a tool to visualize the web page that you are on (a little like features in Firebug and Firefox). The look and feel is great, and the margin popups look like the new Safari/Webkit search functionality (mmm orange).

What is XRAY

XRAY is the first in hopefully a suite of free cross browser tools for helping web designers and developers better visualize what their code is doing in a browser. XRAY is designed to help you get beneath the skin of your web page.

XRAY let’s you see the box model for any element on a page in action – where is the top and left of an element, how big is each margin, how big is the padding, how wide and high is the content box?

What platforms and browsers is XRAY available on?

XRAY currently has been tested on Safari 2 and 3 on Mac OS X, Webkit nightly builds, and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows. At present it won’t work on Internet Explorer (XRAY uses the canvas element, but plans are afoot to adapt it for Internet Explorer), and has not been adapted for Opera. We hope to have versions for Opera shortly, and Internet Explorer on Windows in the not too distant future. XRAY works in Safari 3 on Windows, but clicking a bookmark does not fire any Javascript it contains. To use XRAY on Safari 3 for windows at present, you’ll need to paste the XRAY link into the address field and hit return.

(Via Ajaxian.)

YUI-based Image Cropper Widget

Julien Lecomte of Yahoo! has written a YUI-based image cropper widget that allows you to easily select which region of an image you’d like to crop. This widget works on all A-grade browsers in both standards mode and quirks mode.

Once you setup the CSS and JavaScript you simply:

PLAIN TEXT

JAVASCRIPT:

1.  
2. new YAHOO.widget.ImageCropper( “myImageId” );
3.  

Oh, and you probably want to do something with a hook on the backend.

Also, Julien has discussed implementing a scriptable XPCOM Component and an iPhone version of Y! Search.

(Via Ajaxian.)

Computed vs Cascaded Style

Just as the panel discussed getComputedStyle and how each browser returns something different, Erik Arvidsson blogged about Computed vs Cascaded Style.

Erik discusses the difference between computed, cascaded, and override styles. He shows us why this common function is bad:

PLAIN TEXT

JAVASCRIPT:

1.  
2. function getStyle(el, prop) {
3.   if (document.defaultView && document.defaultView.getComputedStyle) {
4.     return document.defaultView.getComputedStyle(el, null)[prop];
5.   } else if (el.currentStyle) {
6.     return el.currentStyle[prop];
7.   } else {
8.     return el.style[prop];
9.   }
10. }
11.  

Back to our earlier question. What is wrong with our getStyle function? It
should be pretty obvious now. It will give very different and sometimes
unexpected results depending both on browsers and on the value set by the page
author and even worse, set by user style sheets.

So how do we solve this? We stop supporting IE of course… seriously, with
the market share IE has that is not an option. The best solution is to remove
functions like these from shared code and instead add more specific functions.
One can for example, often calculate the computed value based on the cascaded
value and the ancestors. A good example of that is ‘visibility’. Computing that
is pretty easy. If the value is ‘inherit’ check the parents until a non inherit
value is found. For things like left, width etc you will be better of using
offsetLeft, offsetWitdh etc. There are a lot of cases and sometimes it is just
not possible (or requires iterative testing with different absolute sized
elements).

Dean Edwards then commented with the following:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var PIXEL = /^\d+(px)?$/i;
3. function getPixelValue(element, value) {
4.   if (PIXEL.test(value)) return parseInt(value);
5.   var style = element.style.left;
6.   var runtimeStyle = element.runtimeStyle.left;
7.   element.runtimeStyle.left = element.currentStyle.left;
8.   element.style.left = value || 0;
9.   value = element.style.pixelLeft;
10.   element.style.left = style;
11.   element.runtimeStyle.left = runtimeStyle;
12.   return value;
13. };
14.  

(Via Ajaxian.)

Nueva oficina

Cambiamos de oficina :) vamos a ver si la productivadad aumenta.

Cena con los chicos

Después del asado haciendo un poco de recreación ;-).

Conflicting Absolute Positions

Rob Swan has a new article about Conflicting Absolute Positions that delves into the realization that conflicting absolute values for top, left, right, bottom, result in browsers stretching their content in all but IE 5 / 6, and Rob has a work around for that too.

To get this effect:

1. We specify the width and height of the body as 100%. (This is actually only needed for our Internet Explorer solution, but there’s absolutely no harm in including it in our main CSS.)
2. We hide the overflow in the body and html because we never want to see those scroll bars again.
3. We set the overflow to “auto” for the left and right panels, and hide it in the header.
4. The header has a width of 100% and a constant height of 80px.
5. For the side panel we specify the top (header height + padding), left (padding), and bottom (padding) positions. Then we give it a constant width of 200px.
6. For the right panel we specify the top (header height + padding), left (padding + side panel width padding), right (padding) and bottom (padding) positions.

(Via Ajaxian.)

Cena con las chicas

Esperando al dia del amigo nos juntamos a comer comida mexicana.

Script.aculo.us Accordion

Kevin Miller is at it again, this time with an accordion component that likes it both ways…. horizontal and vertical.

Another accordion I hear you cry? This is what Kevin says to that:

Haha! Like there was one. Well there was, but only for Rico and a bloated one by mootools, that’s right I said bloated, live with it. For some reason there wasn’t one for scriptaculous but now there is. The why is pretty simple, just like every other library, I had a need for it. Hope you can get some use out of it.

(Via Ajaxian.)

New Dojo Offline Release

I've pushed out a small, new version of Dojo Offline. Release notes:

* An optional new feature has been added to speed up the sync process. Currently, we always refresh the list of offline files during syncing; this can be quite slow if you have alot of files, however, and I have added a way to version your offline files. This means that we only refresh offline files when the version changes, which can speed up syncing considerably. More details here.
* There used to be a bug where if you were running multiple Dojo Offline-enabled applications from the same host that some of their data or files could collide — we now internally namespace our offline file and data cache so this will never happen.
* A number of fixes have been made to syncing in general to make it more robust.

The developer bookmarklets that help you clear the Google Gears cache have changed; you should delete your old ones and get the new ones here.

Read the tutorial and then download the SDK.

(Via BradNeuberg’s blog.)