Activate your free membership today | Log-in

Friday, May 30th, 2008

Call for Feedback on OpenAjax Conformance and OpenAjax Registry

Category: OpenAjax

Jon Ferraiolo of IBM and the OpenAjax Alliance wanted to share with the community news on a couple of initiatives:

The OpenAjax Alliance is requesting industry feedback on two companion initiatives, OpenAjax Conformance and the OpenAjax Registry, which have been under development for the past year.

The term OpenAjax Conformance is shorthand for the set of conformance requirements that OpenAjax Alliance places on Ajax technologies, products, and applications to promote interoperability. Version 1 of OpenAjax Conformance defines 10 specific conformance requirements on Ajax runtime libraries. An Ajax runtime library that meets these conformance requirements will allow Web developers to use that library conveniently within a given Web page with other OpenAjax Conformant libraries.

OpenAjax Conformance provides the following benefits to IT managers and the Ajax developer community:

  • Seamless integration of multiple Ajax products and technologies within the same Web application, particularly with applications that use mashup techniques
  • Greater certainty about product choices, where OpenAjax Conformance plays a similar role in the Ajax community as the Good Housekeeping Seal does with consumer products
  • Lower training costs, lower development costs, and faster delivery of Web 2.0 innovations due to industry adoption of common approaches that build from OpenAjax standards
  • Interchangeability of OpenAjax Conformant products, such that customers can choose among multiple vendors (and change vendors in the future)

OpenAjax Conformance defines three conformance levels. Full Conformance is for Ajax products that have sufficiently strong Ajax interoperability characteristics that there is high expectation that the given product can be used successfully and conveniently with other Ajax products as part of the same Ajax development task. Configurable Conformance is for Ajax products that support all of the same strong interoperability characteristics as for Full Conformance, except not in their default configuration. Limited Conformance is for products that meet a particular subset of the conformance criteria, and therefore have taken important steps towards Ajax industry interoperability, but on the question of whether the given Ajax product can interoperate successfully and conveniently with other Ajax products, the answer is “it depends”.

The OpenAjax Registry is a centralized, industry-wide Ajax registration authority managed by the Interoperability Working Group at OpenAjax Alliance. The Registry maintains an industry-wide list of Ajax runtime libraries and various characteristics of each library. For each library, the Registry lists:

  • JavaScript globals
  • runtime extensions (both JavaScript and DOM)
  • markup extensions (e.g., custom elements, attributes or CSS class names)

These two technologies have now entered a public review phase that ends on June 30, 2008. Feedback can come in various forms, such as email to public@openajax.org, or comments posted on various industry blogs. After the public review phase ends, the members of OpenAjax Alliance will adjust the two specifications to take the feedback into account and then move the two specifications towards version 1.0 completion and approval.

Posted by Dion Almaer at 1:52 pm
5 Comments

+++--
3.5 rating from 17 votes

Hacking BrowserPlus to work locally

Category: Yahoo!

One of the details of Yahoo! BrowserPlus that people picked up on was the fact that it only runs against Yahoo! properties.

However, some folks have hacked that restriction so they can play with it locally, and assume that Yahoo! wouldn't like this.

Skylar Woodward of Yahoo! has posted that this isn't the case at all:

BrowserPlus was more-or-less designed to be hacked. Not hacked in the “I want to steal innocent users data and delete their files” sort of way, but in a manner that allows experimentation and freedom without compromising the security of pedestrian users. There’s more there to be mined, but enabling local development is a good place to start.

And goes on to show how you can get rid of the restriction:

Currently, BrowserPlus is restricted to Yahoo! sites; that includes restrictions for running local files. A simple addition to our test file exposes the error:

JAVASCRIPT:
  1.  
  2. else {greeting = "BrowserPlus is hiding. ("+res.verboseError+")";}
  3.  

The error BP_EC_UNAPPROVED_DOMAIN confirms the local domain (file://) isn’t permitted. That means it’s time to dig into the BP configuration files. On Mac these are in

/Users/[you]/Library/Application Support/Yahoo!/BrowserPlus/

On Windows XP, you’ll find them in something akin to

c:\\Documents And Settings\[you]\Local Settings\Application Data\Yahoo!\BrowserPlus\

and on Windows Vista…

c:\Users\[you]\AppData\Local\Yahoo!\BrowserPlus\

In the Permissions folder is a file similarly named which is what we’re looking for. Opening it up we see:

JAVASCRIPT:
  1.  
  2. "whitelist" : [
  3.         "^http(s?)://(.*)\\.yahoo\\.com$",
  4.         "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$"
  5.     ],
  6.  

The intuitive addition to this list is:

JAVASCRIPT:
  1.  
  2. "whitelist" : [
  3.         "^http(s?)://(.*)\\.yahoo\\.com$",
  4.         "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$",
  5.         "^file://$"
  6.     ],
  7.  

The file is modified, but BrowserPlus hasn’t picked up the changes yet. The clean way to force this is to close all open browser windows. (BrowserPlus shuts down when no pages are using it.) The dirty way to do this is to search for BrowserPlusCore in your process list and kill it using your favorite platform-available tool. Either way, after opening test.html back up we should see our “Hello World.” Sweet - now we’re ready to start playing.

There is one final catch. BrowserPlus is fairly proactive about security so it helps to know that the permissions file will be overwritten on a regular basis. The savvy way around this would be a simple build script or at least a handy copy of our modified permissions file that we can use to reapply the changes in between development sessions. We might also test for BP_EC_UNAPPROVED_DOMAIN somewhere in our init callback to scream if the temporary development environment is disrupted.

Posted by Dion Almaer at 1:51 pm
Comment here

++++-
4.1 rating from 24 votes

Remove Nested Patterns with One Line of JavaScript

Category: JavaScript, Tip

Steven Levithan has been flagrant by creating a simple way to remove nested patterns with a while loop and a replace:

JAVASCRIPT:
  1.  
  2. var str = "abc&lt;1&lt;2<>3>4>def";
  3.  
  4. while (str != (str = str.replace(/<[^<>]*>/g, "")));
  5.  
  6. // str -> "abcdef"
  7.  

Notice that the regex in this one-liner doesn't try to deal with nested patterns at all. The while loop's condition replaces instances of <…> (where angled brackets are not allowed in the inner pattern) with an empty string. This repeats from the inside out, until the regex no longer matches. At that point, the result of the replacement is the same as the subject string, and the loop ends.

You can use a similar approach to grab nested patterns rather than delete them, as shown below.

JAVASCRIPT:
  1.  
  2. var str = "abc(d(e())f)(gh)ijk()",
  3.     re = /\([^()]*\)/,
  4.     output = [],
  5.     match, parts, last;
  6.  
  7. while (match = re.exec(str)) {
  8.     parts = match[0].split("\uFFFF");
  9.     if (parts.length <2)
  10.         last = output.push(match[0]) - 1;
  11.     else
  12.         output[last] = parts[0] + output[last] + parts[1];
  13.     str = str.replace(re, "\uFFFF");
  14. }
  15.  
  16. // output -> ["(d(e())f)", "(gh)", "()"]
  17.  

Posted by Dion Almaer at 8:36 am
8 Comments

++++-
4 rating from 22 votes

BeSlimed: Mootools Gaming

Category: Games, MooTools

Beslimed

Markus Inger wanted to hone his Mootools skills, so he created a BeJewelled-like game, BeSlimed. Give it a Friday whirl!

Posted by Dion Almaer at 7:23 am
4 Comments

++++-
4.6 rating from 28 votes

SocialHistory.js: More Spyjax

Category: JavaScript

Aza Raskin wrote about SocialHistory.js, a small library he wrote that detects which social networks that you use, and using that data to show the user only those sites as areas to work with. E.g. if you use Digg, show "digg this" etc.

He uses the technique that Jeremiah Grossman and Robert Hansen came up with, all wrapped up like Spyjax.

We have been weaving with Aza recently it seems:

Posted by Dion Almaer at 6:16 am
2 Comments

+++--
3.9 rating from 14 votes

Thursday, May 29th, 2008

Gears turns one; Old enough to power MySpace message search

Category: Gears

Chris Prince posted about Gears turning one year old. It was launched at last years Google Developer Day, and here we are at Google I/O a short year later.

There was some fun news around Gears yesterday. Firstly, MySpace is using Gears to enable users to search their MySpace messages:

One feature that they were lacking was the ability for MySpace users to actually search their MySpace messages. To go through mail, users have to page through all of their messages until their find the right one. Not optimal to say the least!

They could have tried to do search on the server side, but it can be a very expensive operation, and when you are at MySpace scale, you have to choose your battles.

With server side search out, they looked at doing the work on the client. They ended up with a Gears powered solution that not only searches, but gives back results in real-time as you are typing it in. This means that you can stop typing earlier, as you find what you are looking for.

The MySpace team has been a pleasure to work with, and were very fast to put the pieces together of an Full Text Search datastore, and the WorkerPool to offload the search without hanging the browser.

This is yet another use of Gears that isn't just about "offline", which we are seeing more and more. In fact, Chris Prince gave a talk yesterday that showed prototypes and examples of Gears that people are exploring. There was exciting stuff in there such as:

  • Multiple File Upload: Using the File System API, Chris demonstrated a multiple file upload experience. Selecting multiple files, finally!
  • Resumable File Upload: He then showed a YouTube mockup that showed uploading multiple files, seeing their status, and after a connection died showing how the file resumes and doesn't start from 0% All using a ResumableRequest that sat on top of the Blog API and HttpRequest
  • Find nearby stuff! Next up was a demo that let Chris search for beer, resulting in local places around the Moscone Center. This example used the Geolocation API which uses GPS, Wifi IDs, Cell IDs, and IP address to work out where you are
  • Notifications: Love the Windows toasters, or Growl-ing on the Mac? Chris showed notification examples

Posted by Dion Almaer at 9:23 am
2 Comments

+++--
3.1 rating from 18 votes

GWT 1.5 Release Candidate Announced

Category: GWT

GWT 1.5 has a new release candidate. The 1.5 release is a big one, especially as it includes Java 5 language support!

Since the previous release of GWT, we've seen a lot of really great applications that demonstrate what is possible when you are able to focus on the user and stop worrying so much about browser quirks and other Ajax obstacles. Inspired by what we have seen so far, we have continued to concentrate our efforts on enabling developers to use their existing tools to create web apps that users enjoy. GWT 1.5 takes this commitment even further with exciting new features and over 150 bug fixes. And, like all GWT releases, most of the benefits are just an upgrade-and-recompile away.

I have been playing with the 1.5 trunk for awhile, and it has been a pleasure. What other major features does it have?

New compiler optimizations increase performance
With this release of GWT, we're happy to announce that our compiler produces faster code than you would write by hand! How's that? A bunch of new compiler optimizations allow us to efficiently inline method calls, even through many layers of indirection. Translation: all the nice abstractions and clean design work that are essential to maintaining a large code base melt away in the compiler's output, giving your users the fastest possible experience. By contrast, if you were writing JavaScript by hand, you'd have to choose between writing good code and writing fast code — and when your application got to a certain size, maintainability would make the second choice impossible. With GWT 1.5, you don't have to compromise; just write good code and let the compiler make it fast.

JavaScript Overlay Types
This further enhances GWT's interoperability with the underlying JavaScript layer. “Overlay type” is a new term we're using to describe the ability to model JavaScript objects as strongly-typed Java instances with no additional runtime cost. Overlay types make it easy to provide fine-grained interop with handwritten JavaScript libraries as well as providing an optimal way to make JSON structures directly accessible to GWT code.

High-performance DOM API
Up until GWT 1.5, we've concentrated mostly on Widget-level APIs, and until the advent of overlay types (above), direct DOM programming wasn't particularly convenient. GWT 1.5 goes beyond "convenient" and well into "elegant" with an entirely new DOM API that enables type-safe, low-level DOM programming that will be both comfortable to DOM experts and free of any runtime overhead.

Default visual themes
Several default visual themes are now available by default so that developers get an attractive UI out of the box and have a good starting point to create their own custom styles in CSS.

We have seen some great talks on GWT at Google I/O, which should show up online in the near future (I will get them posted as soon as I can). For now, give 1.5 a try.

Posted by Dion Almaer at 8:50 am
8 Comments

+++--
3.7 rating from 23 votes

On-line Auction Aggregator Innovates with Ajax

Category: Examples, jQuery

jigadig

Dov Katz pointed us to Josh Bochner's labor of love, http://www.jigadig.com/. It's an Ajax-heavy jQuery-powered auction site aggregator. What really got our attention is the search results page, which among other things lets you view full item descriptions in-line without having to jump to a different page, infinitely scroll, and easily "pin" interesting items for later perusal. Nice job Josh, and definitely worth a look.

Posted by Ben Galbraith at 8:42 am
4 Comments

++++-
4.1 rating from 19 votes

Speed Up! with Wordpress and Gears

Category: Gears, Performance

Reposted from my personal techno.blog

I was sitting on the tube a few months ago in London when I looked up to see Matt Mullenweg, Om Malik, and another nice chap whose name escapes me. A little random to bump into them in the middle of London, but we were all in town for the "Future of Web Apps" conference. I had the fortune to chat with Matt a little about Gears and Wordpress. The marriage of which would make me a happy man as I use both technologies on a daily basis (this blog and Ajaxian both run Wordpress).

Brad Neuberg got to working with the Wordpress team, and after a short IRC session they had great progress. At first it can seem daunting "Oh man, won't it be a ton of work to rewrite Wordpress to work offline?"

Speed Up!

This leads us to this post by James who did an "svn up" recently, and saw new support for Gears which lead to some pleasant surprises:

As a side note and introduction to what has been sped up, here’s a little rant.

I personally LOVE the changes that were implemented with WordPress 2.5.

But, some of the new features (and features I’ve just started using now that I use the Visual Editor) just aren’t as cool thanks to the not-so-great internet speeds in South Africa.

For example, if you want to create a link. Every time you click the link icon in the editor’s toolbar, it has to download the same stuff over and over…

Well, it looks to me like the WordPress Google Gears implementation has solved that. The link and the “insert embedded media” popups are now instantaneous!

Thank you to whoever decided to do this.

It also seems that switching between each “pane” in the admin section is a LOT faster… Believe me, working on the South African tubes (via iBurst), this makes a HUGE difference!

I am really proud of the Gears team whenever I open up Google Docs, Reader, Zoho, or any other application that uses Gears to let me access the application while offline. There have been situations where it really saved me, and offline is an important boundary.

However, Gears is so much more than offline, and it is really exciting to see "Speed Up!" as a link instead of "Go Offline?"

This is just the beginning. As the Gears community fills in the gaps in the Web development model and begins to bring you HTML5 functionality I expect to see less "Go Offline" and more "Speed Up!" and other such phrases. In fact, I will be most excited when I don't see any such linkage, and the applications are just better.

With an embedded database, local server storage, worker pool execution, desktop APIs, and other exciting modules such as notifications, resumable HTTP being talked about in the community.... I think we can all get excited.

Kudos to the Wordpress team for finding a great way to increase the performance of their great application, and I can't wait to see how you use Gears in the future.

Posted by Dion Almaer at 8:40 am
1 Comment

++++-
4.5 rating from 13 votes

Testing IE Versions Just Got a Little Easier

Category: Microsoft

Testing your sites on different versions of Internet Explorer has always been notoriously difficult mainly due to the fact that Microsoft prevents you from running to different versions of the browser in Windows. Sure there have been solutions to get around this limitation but in my experience, they've always caused unexpected results and instability for the operating system or required you to run a VM. Not ideal.

Jean-Fabrice RABAUTE, the man behind the IE debugger DebugBar, has come up with a nice solution he's called IETester. This free tool allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

You can check out IETester in action below:



ScreenCast IETester from WebInventif.fr on Vimeo.

Posted by Rey Bango at 7:00 am
27 Comments

++++-
4.6 rating from 41 votes

YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support

Category: Yahoo!

With the releases of FireFox 3 and Opera 9.5 right around the corner, it's great to see the Yahoo UI team being extremely proactive in ensuring strong compatibility with the browsers in their newest release, YUI 2.5.2. Announced yesterday, YUI v2.5.2 fixes a number of bugs but focuses heavily on support for the newest browser offerings from Mozilla and Opera. The updates include:

  • Extensive testing against Opera 9.5b2 and Firefox 3.0RC1 and both will be A-Grade browsers upon final release.
  • Major bug fixes to DataTable, Menu, Rich Text Editor and Button
  • The Rich Text Editor and DataSource components of the library have been updated for better Adobe AIR support.
  • The experimental Charts Control is upgraded for 2.5.2 with support for integral legends and for three new series styles.
  • The ActionScript source for components that use Flash (Charts and Uploader) is now available as part of the download for developers who want to dig more deeply into these components.

Full release notes for YUI v2.5.2 can be found at the Yahoo! User Interface Library Group and is immediately available via download or Yahoo!’s free edge-hosting service.

Posted by Rey Bango at 6:01 am
Comment here

++++-
4.2 rating from 22 votes

Wednesday, May 28th, 2008

Addressbook: An example of the Form History Pattern

Category: Usability, Showcase, UI, Gears

One of the examples that Ben and I give in our State of Ajax talk at Google I/O today revolves around form history.

We were thinking about the case for Undo on the Web that Aza Raskin is proposing and it got us thinking about the usage patterns of form data.

An example that got me was the Address Book application on the Mac. I find myself storing past addresses in the general "Notes" section at the bottom, but what if history was built into the system so I could go back in time? This could be a nice metaphor in general that goes beyond undo.

I took this use case and put together a working example that uses Gears to store the history locally so it can be speedy through the history.

The slider component comes from Script.aculo.us, and you can check out all of the code.

In the video below I show the application in action and then do a quick code walk through:


This is just the beginning of course. A slider if fun, but it would probably be more usable if it was simply left and right arrows that click through the versions, or at least putting tacks onto the slider.

Posted by Dion Almaer at 11:34 am
9 Comments

++++-
4 rating from 15 votes

Yahoo! BrowserPlus: Sneak Peak

Category: Yahoo!

Yahoo! has released a sneak peak into Yahoo! BrowserPlus which came out today as

A platform for extending the Web: an end-user installs it and a developer uses its features through a small JavaScript library. Some of the features that exist in the platform today include:

  • Drag-and-drop from the desktop
  • Client-side image manipulation (cropping, rotation & filters)
  • Desktop notifications

You can head over to the main BrowserPlus landing page to learn more about the services.

Here they also show using a text to speech service via:

JAVASCRIPT:
  1.  
  2. // the "service specification" that we'll activate 
  3. var ttsService = { 
  4.   service: "TextToSpeech",   
  5.   version: "1",   
  6.   minversion: "1.0.2"   
  7. }
  8.    
  9. // check for the presence of TextToSpeech, and dump results in the 
  10. // specified div 
  11. function checkForTextToSpeech(divName) { 
  12.   YAHOO.bp.isServiceActivated( 
  13.     ttsService, 
  14.     function() { 
  15.       var _divName = divName; 
  16.       return function(haveIt) { 
  17.         var d = document.getElementById(_divName)
  18.         d.innerHTML = haveIt;             
  19.       }
  20.     }())
  21. }
  22.  
  23. YAHOO.bp.init(function(res) { 
  24.   if (res.success) { 
  25.     checkForTextToSpeech("before")
  26.     YAHOO.bp.require({services: [ ttsService ]}
  27.                      function(r) { 
  28.                        checkForTextToSpeech("after")
  29.                        if (r.success) { 
  30.                          YAHOO.bp.TextToSpeech.Say( 
  31.                            { utterance: "text to speech is activated" }
  32.                            function() {} )
  33.                        } 
  34.                      })
  35.   } 
  36. });
  37.  

They also have a nice demo of combining drag and drop of images, and cropping them.

Great to see Yahoo! join the party of extending the Web!

Posted by Dion Almaer at 11:22 am
2 Comments

+++--
3.9 rating from 20 votes

HTML5 Video tag implemented in Flash

Category: HTML, Standards

Mike Chambers has create a nice proof of concept that implements the HTML 5 tag using JavaScript and Flash:

asically, this parses out VIDEO element / tag and its attributes, and replaces it with the appropriate OBJECT or EMBED element to display a Flash video player that loads the specified video. It has support for playing back both h264 content and FLVs.

It uses the SWFObject JavaScript library to display the Flash content.

Currently the following VIDEO attributes are implemented:

  • controls
  • poster
  • autoplay
  • width
  • height
  • playcount

The tricky part will be cleanly implementing the VIDEO DOM scripting API, although I believe that that should also be possible.

To get it working, you just need to include the shim along with the video tag:

HTML:
  1.  
  2. <script type="text/javascript" src="swfobject/src/swfobject.js"></script>