Web Info & Tutorials

April 30th, 2008

EVENTS COMPATIBILITY TABLES; POWERING THE DUTCH ROYALS

PPK has published new event compatibility tables that test the event registration models (traditional, W3C and Microsoft) as well as event bubbling and capturing.

There is a lot of data here on the quirks of the various browsers.

Event Compatibility Tables

In some fun news, it was interesting to see that PPK developed the interactive Dutch royal family tree!

Dutch Royals

April 30th, 2008

AJAX ACCESSIBILITY AND ARIA

John Resig put together a nice overview of the ARIA Live Regions specification with an example of how you can track a list of people in a way that a screen reader can understand when someone is added or deleted. Imagine a todo list application.

HTML:
  1.  
  2. <ol aria-live="polite" aria-relevant="additions removals"
  3.     aria-describedby="users-desc" id="users">
  4.   <li>John</li>
  5.   <li>Mary</li>
  6.   <li>Ted</li>
  7.   <li>Jane</li>
  8. </ol>
  9.  
  • aria-live="polite" How polite the live area is (as in, how likely is it to butt in to what the user is currently listening to/interacting with). The default is 'polite' - in that it waits until all forms of user interaction have been completed before describing the updates to the user.
  • aria-relevant="additions removals" Only notify the user about new node additions and removals. Since we wish to provide the user with a live list of users we can expect them to be both transitioning online and offline - this will give us the appropriate level of updates to make this possible.
  • aria-describedby="users-desc" A pointer to the element that describes the contents of the live area. If the user

    wishes to know more about what the contents of the field represent this element can be read to them.

Firefox supports this right now (as of 2.0) and we covered AxsJax the toolkit that helps you implement these features, which Google Reader uses to get the job done.

April 30th, 2008

USABLE DIRECTORY LISTINGS WITH DOJO

Dojo Directory Shortcut

Sam Foster has written up an example of using Dojo to create directory listings with keyboard shortcuts.

You can now tab over to the box on the top right, and filter your selections:

This tutorial shows you how to upgrade those plain vanilla pages to make getting around a little faster and along the way introduce you to some of the most useful bits of Dojo, and practical techniques for working with them. We’ll touch on: dojo.query, dojo.data, the dojo parser and dijit (specifically the FilteringSelect widget.)

This is a great look at how things work in Dojo land, including the interesting code embed technique:

HTML:
  1.  
  2. <div style="display:none" jsId="linksStore"
  3.         dojoType="dojo.data.ItemFileWriteStore">
  4.         <script type="dojo/method" event="preamble" args="params">
  5.                 params.data = {
  6.                         identifier: "id",
  7.                         items: []
  8.                 }
  9.         </script>
  10. </div>
  11.  
April 30th, 2008

JAVASCRIPT TYPE INFERENCE IN IDES

Tor Norbye has posted about the type inference that NetBeans has with JavaScript:

Roman Strobl has just published a screencast of the new JavaScript editor in NetBeans 6.1. The demo is around 5 minutes and highlights many of the editing features.

I'd like to dwell on the type inference part a bit. Around four minutes into the demo, Roman shows that NetBeans figures out the types of expressions, including those involving function calls. In his example, all the types happened to be Strings so it may look like a lucky coincidence. It's not! Here's some code fragments showing in more detail what's going on.

He goes on to walk step by step through the completion points discussing how the IDE can get the information that it does.

It is great to see this great support for dynamic languages, as we are accustomed too on the static side.

Netbeans Type Inference

April 29th, 2008

NO MORE TIME NEEDED TO MAKE ABCP DECISION, LAWYER FOR FOREIGN BANKS ARGUES

“Every noteholder got the goodness of those efforts”

A attorney representing individual field external banks and assets firms in the planned restructuring of $32 1000000000 in icy debt notes says every creditors hit conventional sufficiency aggregation to attain a selection … via 680News

April 29th, 2008

TWISTORI: TELLING A STORY WITH TWEETS AND SCRIPT.ACULO.US

Twistori

Twistori is a fun little site created by Amy Hoy and Thomas Fuchs. As you would expect, design is a key part of the application, and the Prototype / Script.aculo.us combo pull off the work.

The site pulls in live data on various topics (love, hate, think, believe, feel, wish) via the real-time twitter search tool summize.

In related Twitter news, I created a Greasemonkey script Twitter Translate that auto-translates foreign text to your language inside Twitter.

For more Ajax news, you can follow me @dalmaer or our new @ajaxian account.

April 29th, 2008

FAST STREAMING AJAX PROXY

Omar AL Zabir, the co-founder & CTO of Pageflakes has written about a continuous streaming Ajax proxy that solves the common problem that all Ajax proxies have, the double delay in downloading content on server first and then delivering to the browser.

Omar talks about the continuous proxy that can help solve the problems. The approach for the continuous proxy is:

  • Read bytes from external server in chunks of 8KB from a separate thread (Reader thread) so that it’s not blocked
  • Store the chunks in an in-memory Queue
  • Write the chunks to ASP.NET Response from that same queue
  • If the queue is finished, wait until more bytes are downloaded by the reader thread

Making a difference

And if you wonder what difference this can make:

Content Proxy served about 42.3 million URLs last month which is quite an engineering challenge for us to make it both fast and scalable. Sometimes Content Proxy serves megabytes of data, which poses even greater engineering challenge. As such proxy gets large number of hits, if we can save on an average 100ms from each call, we can save 4.23 million seconds of download/upload/processing time every month. That’s about 1175 man hours wasted throughout the world by millions of people staring at browser waiting for content to download.

There is even more detail on how the proxy has created.

April 29th, 2008

MOBILE BROWSER CONCURRENCY TEST: GET YOUR MOBILE BROWSERS READY

Jason Grigsby of Cloud Four has created a research project that needs our help.

He has created a mobile browser concurrency test to “query the number of concurrent connections your phone makes. Your phone’s browser will need to display images for the test to work.

We’ve also set up a SMS keyword to make it easier to get to the test url. You can simply text MOBILETEST to 41411 on your phone, and you will receive back instructions on how to test your phone.

With mobile devices, the speed of web pages is even more important given bandwidth, processor and memory constraints. Yet, for those trying to take advantage of the techniques promoted by Yahoo’s Best Practices for Speeding Up Your Web Site, it is nearly impossible to find how mobile browsers differ from desktop browsers.

Point your mobile browser at the page and run the test.

Mobile Browser Concurrency Test

When the results are in, they will be published under creative commons so we can all learn from then. It is interesting to see how the test itself works:

How Does the Test Work?

Designing the concurrency test was a difficult challenge. In order to have the test work for as many mobile browsers as possible, we needed to support XHTML-MP 1.0 (WAP 2.0). XHTML-MP does not support javascript which meant that all of the testing needed to occur on the server.

The basic test works by delivering a XHTML-MP page containing 64 images distributed equally across 4 domains. When the first image is requested by the browser, the server opens a connection and holds it open without delivering the image. It waits 15 seconds to see if any other image requests come in. As each image request comes in, the counter for the appropriate domain is incremented.

For those interested, we’ve provided a detailed description of our methodology.

If this works well, maybe we can move to other browser factors. With the huge number of devices, operating systems, and mobile browsers, it will be interesting to get data on the diversity.

April 28th, 2008

APTANA CLOUD: DEVELOP ON YOUR DESKTOP, SYNC OUT TO THE CLOUD

Aptana have announced their cloud platform initiative, Aptana Cloud.

Aptana Cloud plugs right into your IDE to provide instant deployment, smart synchronization, and seamless migration as you scale. Aptana Cloud is ideal for developers who use scripting languages to create Ajax, Facebook, mySpace and all other sorts of Web applications.

The key is that this isn’t a infrastructure play, which they clearly point out:

Aptana Cloud is architected to complement Cloud infrastructure providers like Amazon, Google, Joyent and others. To get started we’ve selected Joyent who serves up some of the largest of all Facebook apps.

This shows that their platform is designed to go meta, allowing you to deploy to various clouds in the future.

I think that the number one meme from Web 2.0 Expo last week was the “cloud”, coming off of the excitement of Google App Engine. With Aptana Cloud we will see sophisticated tools to make us productive in the cloud. I am very excited to see that it won’t be too long until developers will be able to build an application, hit DEPLOY, and be done. This is a huge win.

For developers:

  • IDE plug-in integrates Cloud development, deployment and management life-cycles right into Aptana Studio in either its standalone or Eclipse based editions
  • Instant deployment of projects to Cloud
  • One click sync your project to the Cloud, or provide fine grained sync control too
  • Integrated service management consoles
  • Configure desired memory size and disk size
  • Develop and instantly preview remote files right inside your Studio desktop environment
  • Subversion source control.

As Ajax developers, the vision of Jaxer in the cloud is very interesting too. The entire application using JavaScript, and deployed up into the cloud, all through the nice IDE.

I was also pleased to read that not only Ruby on Rails, but Python is on the docket. After developing Django applications and playing with Google App Engine, I would love to be able to use Studio for Python code too. Not that Emacs (X or GNU) isn’t great, Steve!

Darryl Taft wrote:

Aptana adds extra value via IDE integration, deployment automation and active monitoring and notification services, Hakman said. “It’s like the ease and simplicity between iTunes on your desktop and its connectivity to services on the Web,” he said.

For developers, the IDE plug-in integrates cloud development, deployment and management lifecycles right into Aptana Studio in either its standalone or Eclipse-based editions, Hakman said. “The ability to deploy stuff to the cloud from Eclipse is part of this as well.”

Other developer features include instant deployment of projects to the cloud; one click can sync your project to the cloud or provide fine-grained sync control; the technology features integrated cloud services management, enables users to provision their cloud right from Aptana Studio, configure desired memory size and disk size, develop and instantly preview remote files right inside the Studio desktop environment, and includes Subversion Source Control.

Can’t wait go get an invite. If you want one too, request an account.

Also, Aptana Studio just passed 1,5 million downloads. Impressive.

April 28th, 2008

FANCYUPLOAD: SWIFF MEETS AJAX

FancyUpload

Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."

A good example is the Queued Photo Uploader which is coded by:

JAVASCRIPT:
  1.  
  2. var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
  3.         'url': $('form-demo').action,
  4.         'fieldName': 'photoupload',
  5.         'path': '../../source/Swiff.Uploader.swf',
  6.         'onLoad': function() {
  7.                 $('demo-status').removeClass('hide');
  8.                 $('demo-fallback').destroy();
  9.         }
  10. });
  11.  
  12. /**
  13. * Various interactions
  14. */
  15. $('demo-browse-all').addEvent('click', function() {
  16.         swiffy.browse();
  17.         return false;
  18. });
  19.  
  20. $('demo-browse-images').addEvent('click', function() {
  21.         swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
  22.         return false;
  23. });
  24.  
  25. $('demo-clear').addEvent('click', function() {
  26.         swiffy.removeFile();
  27.         return false;
  28. });
  29.  
  30. $('demo-upload').addEvent('click', function() {
  31.         swiffy.upload();
  32.         return false;
  33. });
  34.