Thursday, January 22nd, 2009

Having fun in the Ajax Playground

Category: Google, JavaScript, Showcase

Ben Lisbakken, a chap who I had the pleasure to work with at Google, has done a really nice job creating a Google Ajax API Playground, an area that allows you to touch and feel the APIs in real-time:

Ben said:

The AJAX API Playground is currently loaded with over 170 samples for 8 Google JavaScript APIs (Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries and Earth) that you can edit and run to help you explore what our APIs have to offer. There are also Save and Export features. The save feature allows you to hold onto an edited sample so you can continue working on it later while export lets you modify a sample and export the code to a sticky URL where it will run by itself.

Since everyone likes to set up their environment differently, I made the three major sections (pick, edit, run) moveable and resizable, and the run section can pop-out to a new window. And what kind of Googler would I be if I didn’t include a search bar to let you find samples by name, tags or category?

At Google we strongly believe in open source, so this code is under an Apache 2.0 license and uses open source libraries and tools: jQuery, jQuery UI, App Engine, YUI Compressor, and CodeMirror. If you want to use the framework to show off your own code samples, please feel free to use it! Adding new demos is simple–find it here on Google Project Hosting and learn about adding samples.

Very nice indeed!

Posted by Dion Almaer at 9:12 am

4 rating from 26 votes


Comments feed TrackBack URI

Very nice! But I can’t believe even people at Google write such things:

window.setInterval('tweenColor();', 1000);

Comment by carlw — January 22, 2009

Wow, that is a wonderful implementation! My mind is buzzing with ideas for real-time js framework development!!

Comment by oopstudios — January 22, 2009

Heh. Yeah. I thought sending strings to timers was old school. Especially when it’s a function call without parameters! The easiest case to fix.

Comment by Nosredna — January 22, 2009

Nosredna, I fixed setInterval and setTimeout with extra arguments for IE too ages ago (setInterval(callback, 100, arg1, argN)); in any case the window prefix is redundant as well:
setInterval(tweenColor, 1000);
but this APIs playground is something truly interesting and only carlw could spot that “imperfection” :D

Comment by WebReflection — January 23, 2009

Don’t get me wrong I like it a lot too! It’s just so many people don’t even know that they can pass a function there and there are numerous reasons why not doing so is wrong.

Comment by carlw — January 23, 2009

I still see the first parameter listed as a string on many reference sites, so I’m not surprised people do it. If you look at old code, that’s whats there.

Comment by Nosredna — January 23, 2009

We certainly do not find it fun.
thanks Anyway

Comment by RawChocolate — July 30, 2009

Leave a comment

You must be logged in to post a comment.