Web Info & Tutorials

April 18th, 2008

YAHOO! BROWSERPLUS: THE RUMOUR IS TRUE

Awhile back I heard a rumour that Yahoo! had a “Gears-like” project that was cancelled. I thought this was a shame, as having Yahoo! pushing the browser would be a great thing, and I wished that we could all join forces and push together.

It turns out the rumour is true, and even better, the project has survived. Skylar Woodward of Brickhouse talks a little about it on his blog:

After 3 years of hiding out in the campuses of Yahoo! it’s good to finally have something external to show for it. Most exciting is the release of BrowserPlus, a software and software distribution framework that allows device developers (desktop, mobile, etc.) to seamlessly bridge the browser programming environment (DHTML, JS) to any component they can dream up (VoIP, image manipulation, data caching, etc.). Some time ago we created a platform team to focus on device software at Yahoo! and this is what has emerged amidst the quickly shifting strategy of the mothership. The 1.0 release of BrowserPlus is intended only for use by Yahoo! sites to enhance customer experiences; however, in the coming months, developers might expect the ability to use components on their own sites.

In the meantime, you can hack the framework on your own system after you’ve installed it to start experimenting. You can experience BrowserPlus currently through the PhotoDropper module on Mash, though direct installs are available for mac or pc

There isn’t a lot of information out there, but hopefully we will here more soon. It currently doesn’t seem to be open source, but I would love to reach out to the team, and Yahoo! in general. I consider Yahoo! a proponent of the Open Web, and would love to see us work together in a way that pushes the browser platform forward from the point of view of Web developers (as compared to browser vendors).

It would be great to take the PhotoDropper, and make the generic kick arse file uploader (input type="file" multiple="true") that I have wanted for a long time.

April 18th, 2008

THE TWUBBLE WITH BOB LEE

Bob Lee is a co-worker of mine at Google (He is actually the lead on core Java APIs for Android), and he happened to create a cool little GWT application called Twubble, which he explains:

If you use Twitter, Twubble can look at your existing friends’ friends and recommend new people for you to follow. It’s a stupid simple idea, but I think the execution and fun factor have won people over.

I wrote Twubble in a couple nights of hacking in bed after the kid went to sleep. I used the latest Google Web Toolkit milestone which supports Java 5 (flawlessly from my experience). I was writing Javascript code (server and client side) for years before I ever got into Java, but I have to say, you’d be crazy to write AJAX apps any other way than GWT nowadays.

This is Bob’s first GWT application, so I wanted to sit down and talk to him about why he built the application, his experience with GWT, how he integrated with Twitter, and any other nuggets of information that I could get out of him:


April 18th, 2008

100 LINE AJAX WRAPPER

Kris Zyp gives us a glimpse at a potential future with his 100 line Ajax wrapper that tries to do the right thing cross browser for the various cross-domain models:

With IE8’s new XDomainRequest feature, a new API is added for cross-site requests, instead of using the W3C cross-site access proposal. Just for fun, I thought I would provide a little glimpse of what the classic Ajax request wrapper function may look like for the next era of web developers. Just a few simple calls to XMLHttpRequest would be way too easy, so instead we get do this:

JAVASCRIPT:
  1.  
  2. function doRequest(method,url,async,onLoad,onProgress) {
  3.     var xhr;
  4.     if ((onProgress || isXDomainUrl(url)) && window.XDomainRequest) {
  5.         // if it is x-domain or streaming/incremental updates are needed we will use IE's XDomainRequest for IE
  6.         // streaming/interactive mode is broken in IE's XHR, but for some reason works in XDR (with onprogress), so we will
  7.         // need to use XDR if incremental updates are necessary
  8.         // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334813
  9.          if (url.match(/^https:/) && !onProgress) {
  10.             // XDR doesn’t work for secure https communication
  11.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333380
  12.             loadUsingScriptTag(url); // script tag insertion can be more secure than XDR
  13.                                 // in some situations because it supports https
  14.             return;
  15.         }
  16.         xhr = new XDomainRequest;
  17.         // relative paths don’t work in XDomainRequest, see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333275
  18.         if (!url.match(/^http:/)) { // test to see if it is an absolute url
  19.             url = absoluteUrl(location.href,url); // must have a function to turn it into an absolute url
  20.         }
  21.         if (!(method == “GET” || method == “POST”)) {
  22.             // XDomainRequest does not support methods besides GET and POST
  23.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334809
  24.             // We will try to add the method as a parameter and hope the server will understand… good luck :/
  25.             url += “&method=” + method;
  26.             method = “POST”;
  27.         }
  28.         function xdrLoad() {
  29.            if (xhr.contentType.match(/\/xml/)){
  30.                 // there is no responseXML in XDomainRequest, so we have to create it manually
  31.                 var dom = new ActiveXObject(”Microsoft.XMLDOM);
  32.                 dom.async = false;
  33.                 dom.loadXML(xhr.responseText,200);
  34.                 onLoad(dom);
  35.            }
  36.            else {
  37.                 onLoad(xhr.responseText,200); // we will assume that the status code is 200, XDomainRequest rejects all other successful status codes
  38.                 // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
  39.            }
  40.         }
  41.         if (async === false) {
  42.             // XDomainRequest does not support synchronous requests
  43.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=336031
  44.             // so we will try to block execution on our own (which is not really possible in any reasonable manner)
  45.             var loaded;
  46.             xhr.onload = function() {
  47.                 loaded = true;
  48.                 xdrLoad();
  49.             }
  50.             xhr.open(method,url);
  51.             xhr.send(null);
  52.             while(!loaded) { // try to block until the response is received
  53.                 // I am sure the user won’t mind just clicking OK so we can block execution
  54.                 alert(”Waiting for the response, please click OK because it probably is here now”);
  55.             }
  56.             return;
  57.         }
  58.         else {  // do an asynchronous request with XDomainRequest
  59.             xhr.onload = xdrLoad;
  60.             xhr.open(method,url);
  61.             xhr.onprogress = onProgress;
  62.         }
  63.     }
  64.     // we will mercifully skip all the branches for ActiveXObject(”Microsoft.XMLHTTP”) to accomodate IE6 and lower
  65.     else {
  66.         xhr = new XMLHttpRequest; // use the standard XHR for same origin and browsers that implement cross-site
  67.                         // W3C requests and streaming
  68.         xhr.open(method,url,async);
  69.         xhr.onreadystatechange = function() {
  70.             if (xhr.readyState == 3) // interactive mode
  71.                 onProgress(xhr.responseText);
  72.             if (xhr.readyState == 4) // finished
  73.                 onLoad(xhr.responseText,xhr.status);
  74.         }
  75.     }
  76.     xhr.send(null); // finally send the request whether it be XDR or XHR
  77.  
  78.         // and supporting functions
  79.         function absoluteUrl : function(baseUrl, relativeUrl) {
  80.                 // This takes a base url and a relative url and resolves the target url.
  81.                 // For example:
  82.                 // resolveUrl(”http://www.domain.com/path1/path2″,”../path3″) ->”http://www.domain.com/path1/path3″
  83.                 //
  84.                 if (relativeUrl.match(/\w+:\/\//))
  85.                         return relativeUrl;
  86.                 if (relativeUrl.charAt(0)==’/') {
  87.                         baseUrl = baseUrl.match(/.*\/\/[^\/]+/)
  88.                         return (baseUrl ? baseUrl[0] : ”) + relativeUrl;
  89.                 }
  90.                         //TODO: handle protocol relative urls:  ://www.domain.com
  91.                 baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*$/)[0].length);// clean off the trailing path
  92.                 if (relativeUrl == ‘.’)
  93.                         return baseUrl;
  94.                 while (relativeUrl.substring(0,3) == ‘../’) {
  95.                         baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*\/$/)[0].length);
  96.                         relativeUrl = relativeUrl.substring(3);
  97.                 }
  98.                 return baseUrl + relativeUrl;
  99.         }
  100.         function loadUsingScriptTag(url) {
  101.                 … do JSONP here if we want
  102.         }
  103. }

I think that says.... please just implement the standard IE team! :)

April 18th, 2008

CONFORM YOUR JSON TO ECMASCRIPT 4 WITH JCON

Oliver Steele is doing great work, and he has just released a gem called JCON which stands for JavaScript Conformance. It tests JSON values to make sure that they are valid for the new world of ECMAScript 4 type definitions (e.g. new { x:int, y:string }( 3, "foo" ) ).

Usage

RUBY:
    type = JCON::parse "[string, int]"
    type.contains?([‘a’, 1])     # => true
    type.contains?([‘a’, ‘b’])   # => false
    type.contains?([‘a’, 1, 2])  # => true

    // via RSpec
    [1, ‘xyzzy’].should conform_to_js(‘[int, string]’)
    [1, 2, ‘xyzzy’].should_not conform_to_js(‘[int, string]’)  # 2 isn’t a string
    {:x => 1}.should conform_to_js(‘{x: int}’)

    // with JavaScript Fu
    # this will succeed if e.g. response contains a script tag that includes
    #   fn("id", {x:1, y:2}, true)
    response.should call_js(‘fn’) do |args|
      args[0].should conform_to_js(‘string’)
      args[1].should conform_to_js(‘{x:int, y:int}’)
      args[2].should conform_to_js(‘boolean’)
      # or:
      args.should conform_to_js(‘[string, {x:int, y:int}, boolean]’)
    end

In other JSON news, it appears that new ECMAScript standard will no longer reserve the words:

abstract boolean byte char double final float implements int interface
long native package private protected public short static synchronized
throws transient volatile

And Douglas Crockford says that no browsers reserve them, and thus he is unreserving them from jsLint.

April 18th, 2008

SEO RAPPER FRIDAY

Oh man, modify for a weekday this is pretty low… but what the hell, this is the cyberspace shit it!

It starts with:

The place organisation is the prototypal abstract that grouping see
It should be specular of you in the industry
Easy to countenance at with a pleasant navigation
When they can't encounter what they poverty it causes frustration
A country call to state to meliorate the temptation
Use attractive graphics that create motivation
If you hit aliveness gratify ingest in moderation
Cause see engines can't finger the information

and then my selection part:

Do your layout with divs, attain trusty that they are aligned
Please don't ingest tables modify though they impact fine
when it comes to indexing it gives see a hornlike time