Web Info & Tutorials

April 22nd, 2008

MAKING APPLICATION MODULES COMMUNICATE WITH EACH OTHER USING DECOUPLING

I’ve been talking about event driven application design in JavaScript in January last year and inspired Caridy Patiño to write his Bubbling Library based on these ideas.

Caridy now upped the ante a bit by talking about decoupling using the bubbling library over on the YUI blog.

In essence, his solution allows you to have custom events on application modules and listen to them independent of execution order or availability. Simply using custom events can get you in a pickle if you make yourself dependent on their order. With the decoupling solution proposed by Caridy this becomes one less issue to worry about.

April 22nd, 2008

GOOGLE OFFERS SEARCH, FEED, AND TRANSLATION APIS TO NON AJAX USAGE

The Google Ajax API team has been offering great services that you can use from JavaScript in the browser. I have talked about some of them on Ajaxian before (Feed API, Feed Discovery API, and the recent Language API) but now we have a great new release that enables you to access these APIs from Flash or the server side.

In fact, as long as your program can speak HTTP, you can have access to the services.

For example, you could now call this an REST API to Google Search.

To see it in action, point to something like http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Ajaxian and you will see the JSON output that is documented.

There are terms of use that you should abide by, and some other comments:

An area to pay special attention to relates to correctly identifying
yourself in your requests. Applications MUST always include a valid and accurate http referer header in their requests. In addition, we ask, but do not require, that each request contains a valid API Key. By providing a key, your application provides us with a secondary identification mechanism that is useful should we need to contact you in order to correct any problems.

Check out the updated documentation for more details on each API:

Including code snippets. For example, here is how you would access the search results in ActionScript:

JAVASCRIPT:
  1.  
  2. var service:HTTPService = new HTTPService();
  3. service.url = 'http://ajax.googleapis.com/ajax/services/search/web';
  4. service.request.v = '1.0';
  5. service.request.q = 'Paris Hilton';
  6. service.resultFormat = 'text';
  7. service.addEventListener(ResultEvent.RESULT, onServerResponse);
  8. service.send();
  9.  
  10. private function onServerResponse(event:ResultEvent):void {
  11.   try {
  12.     var json:Object = JSON.decode(event.result as String);
  13.     // now have some fun with the results...
  14.   } catch(ignored:Error) {
  15.   }
  16. }
  17.  

If you are interested in this kind of thing, as well as Gears, OpenSocial, AppEngine, or Android, check out the Google Developer Days coming to cities around the world or our big Google I/O event on May 28-29 in San Francisco.

April 22nd, 2008

TALKING ABOUT JAVASCRIPT 1.7, 1.8 AND 1.9 BEFORE WE GET TO 2.0

Is this JavaScript that would run in a current browser?

JAVASCRIPT:
  1.  
  2. function square_of(x) x * x;
  3.  
  4. players.sort(function(x,y) y['score'] - x['score']);
  5.  

Yup. This is JavaScript 1.8 and 1.7, also known as Pythonizing Javascript ;)

Tiago Silveira discusses these lambda expressions, as well as Generators:

JAVASCRIPT:
  1.  
  2. function actions() {
  3.   for (f in document.forms) {
  4.     yield document.forms[f].action
  5.   }
  6. }
  7.  

list comprehensions, let:

JAVASCRIPT:
  1.  
  2. function showItems(items) {
  3.   for (let i in items) {
  4.     // the variable i has the scope of this block.
  5.     ShowElement('item_' + i);
  6.   }
  7. }
  8. // Using comprehensions:
  9. showItems([ i for ( i in obj ) if ( i> 3 ) ])
  10.  
  11. // Using generators:
  12. showItems( i for ( i in obj ) if ( i> 3 ) )
  13.  

And more.

Then we hear from John Resig that the JavaScript 1.9 planning meeting happened and we really hope for some SPLAT fun gets in as well as his own hope for built-in Function.prototype.bind and a native JSON encoder/decoder. Others were looking for setPropertyIsEnumerable, and Douglas Crockford has his own thoughts.

April 22nd, 2008

REMINDED OF SPEAKING YOUR YAHOO.LANG

Mitchell Amihod has a nice little post talking about the features in YAHOO.lang which is probably the least mentioned part of YUI.

He starts out with the type checking functions such as like isNull(), isUndefined(), isValue(); then he does for a trim().

Did you know that YUI had a mini template language in the form of substitute?

JAVASCRIPT:
  1.  
  2. // simple
  3. YAHOO.lang.substitute('Hello {world}', {'world':'earth'});
  4.  
  5. // process
  6. var processText = function(key, value, extraInfo) {
  7.   if(!YAHOO.lang.isNull(extraInfo)) {
  8.     return extraInfo;
  9.   }
  10.   return value.toUpperCase();
  11. };
  12. YAHOO.lang.substitute('Hello {world Venus, Jupiter}', {'world':'earth'}, processText);
  13.  

No DHTML library would go without wrapping the setInterval/Timeout calls:

JAVASCRIPT:
  1.  
  2. var foo = {
  3.   count :0,
  4.   'method' : function(data) {
  5.     this.count++;
  6.     if(this.count == 10) {
  7.       timer.cancel();
  8.     }
  9.     console.log(this.count);
  10.   }
  11. } 
  12. var timer = YAHOO.lang.later(1000, foo, 'method', [{data:'bar', data2:'zeta'}], true);`
  13.  

And then you have the need to merge. If you are used to Rails development you will get addicted to passing hashes around and using merge type operations to do your deed.

JAVASCRIPT:
  1.  
  2. var myAwesomelWidget = function(oConfigs) {
  3.   oConfigs = oConfigs || {};
  4.   var defaults = {
  5.     'awesomeness' : '11',
  6.     'shiny'       : 'high',
  7.     'sparkle'     : 'high'
  8.   }
  9.  
  10.   var combinedConfigs = YAHOO.lang.merge(defaults, oConfigs);
  11.   //Shiny is now set to low, everything else in combinedConfigs is set to the defaults
  12. };
  13. myAwesomelWidget({'shiny': 'low'});`
  14.  
April 22nd, 2008

YAHOO! BROWSERPLUS: WHY WAIT FOR THE NEWS WHEN YOU HAVE STRINGS?

After posting about Yahoo! BrowserPlus, we certainly have more questions than answers, and we could all wait a week or two to learn more.

But, where is the fun in that? Thanks to the fact that Open Source software often normally means that you will find a LICENSE.txt, and the binary itself will have information on what is used, you can sometimes glean information. Oh, and the UNIX strings command can help too ;)

So, armed with enough data to be dangerous (yet totally wrong) we see that:

  • The components seem to be called Corelets
  • There are distribution servers that can serve Corelets. The primary is set to browserplus.yahoo.com, but you could imagine anything.com too
  • There is the notion of "Dynamic Corelets" which leads you to believe that you can get new ones into the system, or that you can use dynamic languages to program the system.
  • OpenSSL is packaged and it appears that you use certificates to make sure the right code is run. It is unknown if you are given SSL primitives to work with, which would be fun
  • A native JSON implementation is bundled, which is probably just to parse the config file, and not exposed to developers
  • There is the notion of an "Upload Corelet" which could mean a way to upload new ones into the system, or a better file upload (please)

If you look in the installation directory, you also see the NSPR which tells us that the system uses the Netscape Portable Runtime:

The Netscape Portable Runtime, or NSPR, is a platform abstraction library that makes all operating systems it supports appear the same to Mozilla. NSPR provides platform independence for non-GUI operating system facilities. These facilities include threads, thread synchronization, normal file and network I/O, interval timing and calendar time, basic memory management (malloc and free) and shared library linking. A good portion of the library's purpose, and perhaps the primary purpose in the Gromit environment, is to provide the underpinnings of the Java VM, more or less mapping the sys layer that Sun defines for the porting of the Java VM to various platforms. NSPR does go beyond that requirement in some areas and since it is also the platform independent layer for most of the servers produced by Netscape. It is expected and preferred that existing code be restructured and perhaps even rewritten in order to use the NSPR API. It is not a goal to provide a platform for the porting into Netscape of externally developed code.

Ok, not back to just waiting for the real information. Again, it is great to see Yahoo! apparently thinking about how to make browsers do new tricks, which is why I am excited about Gears.

April 22nd, 2008

NOW YOUR MOBILE PHONES GET TO TAKE SOME ACID

Dominique Hazaël-Massieux, co-chair of the Mobile Web Test Suites Working Group at the W3C, has published a effort in the fiber of the ACID tests: Web Compatibility Test for Mobile Browsers:

That test, in the aforementioned fiber as the ACID tests, combines in a azygos tender tests for 12 Web technologies, ranging from well-deployed (but ofttimes poorly implemented on ambulatory devices) technologies much as HTTPS and PNG, to technologies we conceive module concern in a assemblage or digit (like SVG aliveness and CSS Media Queries).

Tests are visualized by squares, classified roughly in visit of travail (first line, well-deployed technologies, ordinal line, technologies progressively utilised today, ordinal line, technologies for tomorrow), and a application needs to intercommunicate apiece conservativist in the aforementioned talk of naif to transfer completely the effort - which as farther as I know, no currently free application (on ambulatory devices or elsewhere) does.

The effort covers:

1. CSS2 min-width
Fluid tender widths, circumscribed in proportionality of the concealment width, ofttimes depend on the min-width and max-width properties to refrain motion unreadable on diminutive screens. The past concept is proven here.
2. Transparent PNG
PNG, a ikon image format, supports image and alpha channels, that are multipurpose in antiquity attractive seeable effects
3. GZIP support
The prescript prescript allows accumulation to be dispatched gzip-compressed when the computer advertizes its aptitude to reconstruct them (through the Accept-Encoding header), thusly action bandwith.
4. HTTPS
The HTTPS prescript is utilised to found bonded and encrypted connections on the Web.
5. iframe inclusing of XHTML-served-as-XML content
Tests if the UA supports XML content-types by weight an XHTML writing with the content-type application/xhtml+xml.
6. Static SVG
SVG allows authors to delimitate vector-based graphics, that crapper be scaled up and down, run substantially the needs of ambulatory devices
7. XMLHTTPRequest
XMLHTTPRequest is at the set of AJAX, allowing to update a subset of an HTML tender without requesting a newborn flooded noesis transfer
8. CSS Media Queries
CSS Media Queries earmark authors to contrain CSS rules administer in limited context, for happening so that they exclusive administer to screens of a presented peak width. The min-width feature is proven here.
9. Dynamic SVG
SVG also supports animations, that crapper be utilised to create rattling attractive interfaces
10. The canvas element
The canvas surroundings circumscribed in HTML5 offers a Javascript graphics API
11. contenteditable
The contenteditable concept makes flush book redaction of whatever surroundings possible. Support for this concept is tested.
12. CSS3 selectors
CSS3 introduces a sort of newborn selectors, allowing more fine-grained styling, directive to meliorate layouts. The nth-child() switch is proven here.

Here are whatever of the browsers running the actualised test:

Mobile Browser ACID

The aggroup is hunting for another tests, so yield a interpret with your thoughts!