Yahoo Maps ditches Flex in favour of Ajax

Today Yahoo Maps turned off the the Flex 1.5 based maps application and launched a new version built upon AJAX.

Long story short, we have some work to do. We need to make Flex/Flash work with advertizing so that it can become the primary content not the ads. We need to get more developers trained on using Flash/Flex and especially ActionScript 3 so that teams and solutions can grow. We also need to highlight the API’s within Flash Player and make them easier to adopt. Many developers have no idea that these API’s even exist. As a medium, Flash Player still has some very large barriers to cross to see larger scale adoption and mainstream use.

From Yahoo Maps- From Flex 1.5 to AJAX

JavaScript Closures: An Example

Here is a common problem that will face any JavaScript developer sooner or later. The code below, as simple as it looks, introduces a bug that might not be picked up by the developer during unit testing.

   for(var i = 1; i<6; i++) {
        var div = document.getElementById(‘div’ + i);       
        div.onclick = doAlert(‘Al’ + i);       
    }

The problem is that all elements that have the event attached will alert the same value. The solution is to use JavaScript Closures illustrated in the code below.

   for(var i = 1; i<6; i++) {
        var div = document.getElementById(‘div’ + i);       
        div.onclick = doAlert(‘Al’ + i);       
    }

    function doAlert(what) {
        return function() {
            alert(what);
        }
    }

.Mac Web Gallery: Great use of JavaScript

During Apple’s keynote yesterday in which they announced a new iMac, iLife 08, iWork 08, Airport Extreme and a new Mac mini, they also announced an update for .Mac.

The .Mac update included personal domains, increased storage and transfer limit and a Web Gallary.

The web gallery which can be published with one button from iPhoto gives a rich Web 2.0 experience and even works on IE on a PC. Developed using the Prototype and Scriptaculous JavaScript libraries, it introduces some really innovative ideas for displaying a large number of albums and photos.

The main page is a collection of album thumbnails that change as the user hovers over them. The powerful effect allows the user to quickly scan through the album’s photos without the need for a single click.

Once within an album, the photos are displayed in either a grid, mosaic, carousel or a slideshow. The user can quickly change the background colour, resize the photo thumbnails and subscribe to the galleries RSS feed. The carousel view is the same as the cover-flow album art display that iTunes and the new iPhone uses. Once the photo’s are fully loaded, its performance is really slick.

Congrats must go to the Apple developers that worked on the site. As a JavaScript developer, I’m really inspired by the quality of the work. My only criticism is that the main gallery JavaScript file weights in at an whopping 404 kb. A minor issue thou if you consider the prevalence of broadband connections.

Link to a sample Web Gallery

Update:
Steve Brewer has posted a great analysis of the JavaScript Code. He details how Apple left 128 lines of comments and how the images are used inefficiently. By combining the images into batches of 20 each being 160px by 3200px and then by using them as a positioned backgrounds, Steve’s test results show speed improvements of over 400%. Pretty Impressive!

Update:
Adam Houghton has done the seeminly impossible by creating a JavaScript version of coverflow. He has done great job using GWT.
Link to demo
Link to Adam’s blog announcing GWT Flow

64 Squares: Great use of jQuery

My favorite JavaScript library, jQuery, has been used to great effect by 64 Squares. The site is a completely free, fully featured and easy to use online chess site with a clean and simple interface.

If you are a keen chess player and would like to see how far jQuery can be pushed give 64 Squares a visit.

Ext 1.1 Release Candidate 1 Now Available

Get the latest and greatest from www.extjs.com

jQuery 1.1.3

John Resig has released version 1.1.3 of the popular JavaScript library jQuery. The new version comes with 80+ big fixes and massive speed improvements. Highlights include:

1. 800% speed improvement over version 1.1.2
2. The event system was re-written.
3. The effects system was re-written.

Here is a link to the jQuery blog entry detailing some of the amazing improvements. This update pretty much makes the choice of JavaScript library a no-brainer!

Ext JS 1.1 Beta 2

Title says it all. Grab your update here

Another win for jQuery

Digg has recently implemented a new comment system. One of the developers, Joe Stump, has posted an article on his blog about the technical background of the site update.

A big part of the new comment system was to extend the use of Ajax with the new system creating about 90% of the HTML dynamically.  Script.aculo.us was replaced with the smaller jQuery library. Joes says that the entire comment system is, in fact, a series of jQuery plugins.

This is a huge boost for the popularity of jQuery. I’m glad I’m not the only one that sees its brilliance.

Link to Joe’s post

JS Framework CSS Selector Speed Tests

Here is a link to a great test page, slickspeed,  that tests the CSS selector speeds and accuracy of the top JavaScript Frameworks.

The frameworks tested include:

1. prototype 1.5.1
2. jQuery 1.1.2dev
3. MooTools 1.2dev
4. ext 1.1b1
5. cssQuery

From my initial tests, prototype seems to be taking the lead. I ran my tests on Firefox 2.0. It will be interesting to see how IE7 and the new Safari for windows compares.

Digg Interface Suggestion

I’m a huge fan of Digg and find myself checking the site a couple of times a day for cool news. One of my frustrations is the number of page reloads basic site usage requires.

A great Digg feature is the Top 10 in all topics right panel. If you’d like to read the story thou, you need to click the headline and wait for the page to refresh. The same applies if you digg into the main categories listed at the top of the site.

My suggestion would be to introduce Google Reader like scrolling, i.e. dynamically load content as the user scrolls down the page. This would eliminate the need for pagination and offer the user a bottomless hole to digg into. This technique was successfully used during the first few versions of Microsoft’s Live search results.

The right panel and the categories should also expand without delay.

Digg already makes use of both the Prototype and Scriptaculous JavaScript frameworks and with a little added ajax magic, these suggestions could be implemented fairly painlessly.