Google Data » Ben Lisbakken

Ext-core ready to go

Ben Lisbakken — Thu, 11 Jun 2009 16:35:00 +0000

Recently, the guys over at Ext JS released ext-core under an MIT license, which was a big win for open source! Today, they released a stable (non-beta) version of this library and we are proud to be part of that announcement by hosting the new version. You can now pull ext-core from Google servers:

// directly access it
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js
// alias the newest 3.0.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
// alias the newest 3.x.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
// directly access the uncompressed code
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js

You can also use it from the loader:

google.load('ext-core', '3.0');
google.load('ext-core', '3', {uncompressed : true});

Thanks to all for the requests to add ext-core to our Libraries API, and big thanks to Ext JS for providing their library so openly! For more information, head over to their blog post.

Ext-core ready to go

Ben Lisbakken — Thu, 11 Jun 2009 16:35:00 +0000

// directly access it
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js
// alias the newest 3.0.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
// alias the newest 3.x.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
// directly access the uncompressed code
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js

You can also use it from the loader:

google.load('ext-core', '3.0');
google.load('ext-core', '3', {uncompressed : true});

Thanks to all for the requests to add ext-core to our Libraries API, and big thanks to Ext JS for providing their library so openly! For more information, head over to their blog post.

Making content creation easy with the Google AJAX APIs – Guest post

Ben Lisbakken — Fri, 03 Apr 2009 16:06:00 +0000

We started nextstop.com with the idea that we could make it significantly easier and more fun to discover new and interesting things to do anywhere in the world, based on recommendations from people who know a place well. Whether it was a neat museum, a hidden local restaurant, or a great place to go shopping we wanted to make it super easy and fun for people to share recommendations for their favorite places, wherever they might live.

The trick of course was in how to do this. It was important for us to combine ease of making a recommendation -- our goal was that it should be as simple as entering the name of a place, and a few sentences about why you liked it -- with rich information about a place so it was really useful to others -- photos, contact information, maps, etc. The solution, not surprisingly since I'm writing here, was to use a number of Google's APIs to gather related information about the recommendation and make it easy for our members to include it in their recommendation.

You can best see how this works by going through our recommendation flow, or watching the video below.

Let me walk you through how this is working under the hood:

1) When the page loads, the first thing we do is use the Google loader to load the JQuery and JQuery UI libraries, as well as Google Maps. As part of this, we also grab the user's current location using google.loader.ClientLocation and store the lat/lng if available to use later.

2) In step 1, we ask the user for what's being recommended. We use this string to do a Google local search for business listings and KML results that match, using the user's current location to bound the local search by setting the sll and sspn parameters. Between local business listings and KML results, we can offer incredible global coverage of everything from restaurants to tourist attractions to hole-in-the-wall bars and clubs. We're using the JSON version of the local search API, which we call from our servers using Python's urlopen() so that we can supplement the results with our own database of results.

3) In step 2 we do an image search for related images using Google's image search API. While we let users change the search terms to find just the right picture, often our default image search (which combines the name of the place and a city name) returns great results. There are photos of almost everything, so you can even recommend a particular dish at a restaurant in Taipei and have the photos to go along with it.

4) In step 3, we ask for a few sentences about why that place or activity really stands out to them. After the recommendation has been submitted, we use the Google Language APIs to detect the language of the recommendation, which we can later use to filter content by your language, and we hope to someday integrate the ability to translate recommendations into your language of choice.

Its a very simple and fast process for the user making the recommendation, but the result is a recommendation with address, phone number, map, and photo that is really useful to another user looking to discover something new.

We've built our whole product around the Google APIs, and feel like we're just scratching the surface of what's possible. We're planning to let users add other information (like related websites, searches, news, etc.) using Google's APIs as well.

We'll be at Google I/O on May 27-28 talking about what we've done so far, and will hopefully have a few new uses of the Google APIs to show off at that time. Please come say hello -- we'd love to hear your feedback on nextstop, or share tips on using the Google APIs. You can also check out some of the places recommended near the Moscone center, or add a few of your own!

Carl Sjogreen (co-founder, nextstop.com)

jQuery, YUI updates

Ben Lisbakken — Fri, 20 Feb 2009 19:14:00 +0000

We have updated versions of jQuery and YUI on our CDN. jQuery is now at version 1.3.2 which will be what version 1 and 1.3 aliases point to.

YUI's new version, 2.7.0, includes a new stylesheet utility to do dynamic CSS without looping through DOM nodes as well as some enhancements to existing functionality such as charts, DOM collection, and tree view. Furthermore, YUI is maintaining their image as a library for professionals by beginning to add IE8 support in preparation for Microsoft's upcoming launch.

I'd also like to remind you that all public updates to our APIs can be followed on our Google AJAX API Alerts blog. That blog is meant for minor API additions/updates/fixes, and in the future these alerts will only be posted there.

Playgrounds and alerts

Ben Lisbakken — Thu, 22 Jan 2009 18:01:00 +0000

I recently launched a new product to help developers learn our APIs. It's an open source framework for showing Javascript code samples. The tool allows users to click through samples so that they can edit code and see their changes live. In order to be a more practical tool for code editing, I put "save" and "export" features in there. You can read more about it on the official blog post.

I would also like to point you at a new blog the AJAX APIs team will be maintaining: the AJAX APIs Alert Blog. Whether you know it or not (or believe it or not!) we are constantly making changes to the APIs. New features, bug fixes, tweaks, etc. In the past we haven't had a way of communicating these changes to you since they can be small changes and not worth a whole blog post here. Furthermore, there are those of you that want to know when we update the Javascript libraries that we host. So from here on out, that blog will be the new home for these "alerts". Posts will be short, to the point and we will try to update it with all public changes, so subscribe now!

Welcome YUI!, script.aculo.us gets fresh

Ben Lisbakken — Fri, 21 Nov 2008 17:32:00 +0000

We've been hosting most of the big powerhouse Javascript libraries and so far it's been a huge success. However, without YUI!, our collection has been incomplete. Well, I'm not saying that now we're complete and won't add more libraries, just that we're less incomplete than we were... you know what I mean.

Anyways, after getting legal approval (people actually read those licenses), we pushed it live. We are equally as excited about this as Yahoo! and the Javascript community.
So let's take a look at how you use it:

That code will load the YUI loader which then loads the button and calendar widgets (combined as one script) and calls onSuccess when they are loaded. If lazy loading scripts isn't your thing, then you can use the dependency configurator to configure the perfect script URL. In my case, to achieve the same results as above, I would use:

Also, we've updated script.aculo.us to the new minor release version 1.8.2. For those of you who are using our aliases, you've already been updated!

As always, stop by in our group or IRC channel to give us a piece of your mind.

SWFObject Library Added to Libraries API

Ben Lisbakken — Tue, 11 Nov 2008 03:02:00 +0000

If you're a Flash nut then you probably know about the SWFObject Javascript library. I'm not, so I didn't. However, since I promised myself I would play with Flex soon I am very happy that a "Flasher" suggested that we add it to our AJAX Libraries API. I took a look at it and found out that it's a great little must-have library!

See, embedding a Flash video on a page is actually more complicated than it should be. You can't just throw a tag on the page with some attributes and expect it to work. In fact, to embed a Flash file there are different methods for different browsers such as using an vs. as well as setting the parameters for the file.

The SWFObject library simplifies the process so that all you need to worry about is including their Javascript library and using a single method to embed your Flash on the page in a safe, cross-browser manner. It also has a few extra utility functions, such as setting a load event for the Flash object and detecting the user's Flash version.

Because this library is open source, extremely popular, and so handy, we have added it to our AJAX Libraries API so that our caching benefits can be reaped. If you want to express your extreme happiness then you can do so in our new IRC channel:
server: irc.freenode.net
channel: #googleajaxapis
http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis

Styling the SearchControl Guest Post

Ben Lisbakken — Mon, 03 Nov 2008 18:36:00 +0000

So, the other day, I was asked by the AJAX APIs dev team if I'd like to write a guest blog post, but they didn't tell me what to write about. I thought about telling you how the AJAX APIs revolutionized how I think about life, design websites, and slice bread, but then I realized that I buy my bread pre-sliced. So I started going back through the group looking for common questions or themes to threads, and I realized that a huge portion of the questions asked can be summed up like this: "How do I style the google.search.SearchControl?" For instance, how would one make it so that only a result's title and URL appear (i.e., the description is not visible), or even just the URL? What if you want to change some of the default colors? What if you, being the stylish computer geek that you are, want to make your SearchControl into a 24th century Starfleet console to fit in with that first-season spandex Star Trek: The Next Generation uniform you're wearing right now?

Well, you're in luck! Using Mozilla Firefox with the Firebug add-on installed (an absolute must-have for any web developer, by the way), you can do all this and more simply by inspecting the structure of the default search control and taking advantage of the fact that almost every one of its individual elements is given at least one className that can be used with Cascading Style Sheets to apply different style rules. We've put together a spectacular video to provide a very brief overview of using Firefox and Firebug to inspect the structure (and tinker with) the structure of the control.

For even more information on how you can do more with Firefox and Firebug, you'll want to check out Ben Lisbakken's excellent tutorial, which includes even more video! And for good measure, we've included the control's structure (complete with a few of my own comments) below:

So, thanks to Firefox and Firebug, we have access to the SearchControl's structure. Now we can get to work making our control look like one of those 24th-century consoles that we see every day on the starship Enterprise! To get this done, we're going to start with the stock "Hello, world" example for the AJAX Search API. Then we're going to remove the style element that comes with it and plug in a new external stylesheet below the inline script that initializes the whole thing.

Once that's done, we need to (a) change a bunch of colors; (b) rework a number of background images; and (c) open a small hole in the space-time continuum to get ourselves a starship console to put it all on. Okay, so that last one isn't exactly possible, but we can do all the rest with a little CSS. And the whole thing, put together, looks like this.

Now, you will notice that a number of those rules have complex selectors (e.g., .gsc-resultsHeader td.gsc-twiddle-opened...). This is because Google's default CSS is rather specific in places. And it's also why Firefox with Firebug is so very important. It really makes the whole process almost painless.

So there you have it: style. Well, for your SearchControl, at least. Next time, we'll talk about why the Starfleet quartermaster abandoned spandex.

Until then, happy styling!

Jeremy R. Geerdes
Generally Cool Guy
jrgeerdes@gmail.com

p.s. What cool custom designs have you come up with? Share them in the Google Group! Ben Lisbakken has promised some Google schwag for interesting designs...

MooTools 1.2.1

Ben Lisbakken — Thu, 30 Oct 2008 02:09:00 +0000

MooTools v1.2.1 recently got released and we have received the thumbs up from the maintainers to host it, so the bits have been flipped and the pipes are ready to MOOve it over to you guys.

But wait!! Before you get started with 1.2.1, please note that the previous version we are hosting (1.11) and the new version (1.2.1) are incompatible. So as not to break anyone out of the blue (and put them in a bad MOOd) we have frozen the version "1" alias to 1.11. Here's what the aliases look like for MooTools:
google.load('mootools', '1') // gives you version 1.11
google.load('mootools', '1.11') // gives you version 1.11
google.load('mootools', '1.2.1') // gives you version 1.2.1
... you get the picture.

If you have some extra time, stop by the group and show us what you've been up to with MooTools. Happy grazing!

AJAX Libraries API Update

Ben Lisbakken — Tue, 05 Aug 2008 23:38:00 +0000

What's better than making a drag/drop effect in Javascript that's compatible in all browsers? Not making a drag/drop effect in Javascript that's compatible in all browsers. Save your ninja-code for another day and use the JQuery UI plugin that is now hosted on our AJAX Libraries API! As usual, your users will get a performance boost when you use JQuery UI through our API, so get started by checking out the docs.

For those of you still waiting for a MooTools 1.2 update, we apologize for the delay. In fact, we had been waiting to release JQuery UI so we could push it with MooTools 1.2. What happened was that when MooTools released the 1.2 update, it had 1.2dev in the version string. We contacted MooTools and they immediately fixed this. However, Valerio Proietti over on their side has asked us to wait until 1.2.1 is out the door to flip the switch.

AJAX Libraries SSL Support is Live

Ben Lisbakken — Tue, 29 Jul 2008 21:43:00 +0000

Since the launch we've seen significant adoption for the AJAX Libraries API. Many developers have let us know that they would love to use our API on their secure sites using HTTPS (such as e-commerce), in fact it is the #1 request on our issue tracker. So as of last Friday, we now support SSL access to the libraries.

For those of you waiting for this feature, we apologize for the delay and appreciate your patience. Please keep the feedback coming and know that we see each and every one.

Now be on the lookout for new/updated AJAX libraries in our API!

Non-Javascript LocalSearch

Ben Lisbakken — Fri, 16 May 2008 22:57:00 +0000

I wrote a non-Javascript version of Google Maps which is designed to show how easy it is to write an application on App Engine that makes use of two new APIs from Google: The Static Maps API and the Local Search API's REST interface. It doesn't have fancy stuff like street view and public transportation, but it gives you a searchable map that you can zoom in/out on as well as save locations. It also automatically saves your last map view so that every time you go back to the site it will show you what you were last looking at. Check out the source code.

It uses App Engine to store saved points, the AJAX LocalSearch REST API for search functionality, and the Static Maps API to display maps. I really enjoyed working with App Engine. It's free, easy to learn and the data store is very useful. Likewise, using the REST LocalSearch is beyond simple. Here's all you have to do in Python to retrieve search results:

query = urllib.urlencode({'q' : 'pizza near mountain view'})
url = 'http://ajax.googleapis.com/ajax/services/search/local?v=1.0&%s&rsz=large' \
  % (query)
local_search_points = urlfetch.fetch(url)
json = simplejson.loads(local_search_points.content)
points = json['responseData']['results']
for i in points:
  # output the information e.g. i['streetAddress']

To use the Static Map API, you just need to create a URL with the proper parameters for your desired map view. Keep in mind that you need to set the zoom level (unless you are specifying multiple points -- then it's calculated for you). In the vast majority of cases, this is completely fine. In my case, though, I needed to know what the zoom level was for multiple points and calculate it in cases where I only had one map point.

Here's the code to do this. From line 130 to about 296 you'll find the necessary functions to calculate a zoom level given a bounding box or a set of latitude/longitude points.

It's time to start cranking out those App Engine & AJAX APIs apps!

Gears Screencast: An Introductory Tutorial

Ben Lisbakken — Mon, 31 Mar 2008 19:36:00 +0000

Posted by Ben Lisbakken, Gears Team

Using a JavaScript API to cache web pages offline, interact with a client side database and introduce threading into your application isn't immediately intuitive because it's such a foreign concept for a web API. I remember when I was doing my first work with Gears -- I was a bit disoriented and in need of a walk through of how things work and why.

To help potential Gears users that feel like my 7-month-ago-self, I wrote a tutorial application that uses a minimal amount of non-Gears code. This application is a simple stock ticker that makes use of 5 of the Gears modules; LocalServer, Database, WorkerPool, Timer, and HTTPRequest.

But a standalone application can't teach someone -- it needs some explaining. Long articles generally lose my attention, so my media of choice was video. I made a screen cast where I walk through the code in three steps, which you can find here. There's also a zip file that contains the three steps of code so you can take a look at the code on your own. Please note that there is a PHP file that is required for the application to work, so you will need a server that runs PHP in order to use this code on your own!

Gears Screencast: An Introductory Tutorial

Ben Lisbakken — Mon, 31 Mar 2008 19:36:00 +0000

Leap day hackathon for Google Gadgets, Maps, and more

Ben Lisbakken — Tue, 26 Feb 2008 16:37:00 +0000

Written by Ben Lisbakken, Google Developer Programs

If you've got JavaScript skills and you'd like to implement such things as Google Gadgets or Maps on your site, bring your laptops and come hang out with us in Mountain View.

This Friday, my team (Google Developer Programs) is hosting a hackathon to get you started with our JavaScript APIs. There will be plenty of our engineers around to answer questions. We'll start with short introductions of the APIs and then break into groups for coding and camaraderie. There'll be food, and prizes too.

The featured JavaScript APIs:

Google Gears -- make your web applications work offline
Google AJAX Search/Feeds -- add Google search capabilities to your website
Google Gadgets -- create small programs that run on your iGoogle homepage
Google Maps -- embed and manipulate Google Maps on your web page
Google Calendar -- interact with Google Calendars on your website

When: Friday, February 29 - two sessions (you're welcome to attend both)

2-5:30 PM
6-10 PM

Where: The Googleplex
Building 40
1600 Amphitheatre Pkwy
Mountain View, CA 94043
Room: Seville Tech Talk, 2nd floor

See our map for parking locations and where to check in. (Soon, you too, will be making maps like this! :)

Just say yes and RSVP!

And no worries if you're busy this Friday; future hackathons will feature other APIs and more languages. Check out the Developer Events Calendar for future listings. Hope to see you soon.

gearsAJAXHelper: Use Google Gears with AJAX APIs for Faster Queries

Ben Lisbakken — Fri, 08 Feb 2008 16:14:00 +0000

Google Gears is an API that is known for giving developers the ability to have their webpage viewable offline. However, it can also be used to speed up your website. In the case of the AJAX APIs, you can use the Google Gears local cache and client-side database to have queries load fast with cached data while requests for fresh data are done in the background.

We decided it would be cool to write a small library to make it easy for you AJAX APIs developers to write quick-loading, always fresh searches/feeds. The gearsAJAXHelper has two main features - it allows you to store and return key/value pairs from the local database, and it allows you to choose whether you want all resources files on the page (images, CSS, Javascript, HTML) to automatically be cached in the Gears cache.

The key/value pair database feature let's you store the query/results as a key/value pair. Then, the next time the query is made, the results can be served from the database while fresh results are being retrieved. This dramatically reduces the latency in queries/feed grabs.

The (optional) automatic cacheing of resource files will make it so that each time the user visits your webpage they will be getting resources served from their Google Gears cache, not new versions from the internet. Be careful when using this feature, as you might not want stale content to be served. There is also a refresh function, to clear the Google Gears cache of old files.

Here is a sample application that uses the gearsAJAXHelper to quick-load feeds. Notice that after you have clicked on a candidate (or state) once, the next time you click it will quick-load the results. If the results in the database are stale, you will see fresh results populate the content area. Here's how the gearsAJAXHelper library is used in this code:

gearsAJAXHelper.initialize("election", "election", false);

This initializes the library. The first two parameters you pass in are what you want the name of the Gears LocalServer ResourceStore and Gears Database to be named, respectively. The third parameter specifies whether you want your page's resources to be automatically cached.

Then there are just three other main calls that are used:

gearsAJAXHelper.storeKeyVal(key, value);
gearsAJAXHelper.returnKeyVal(key);
gearsAJAXHelper.refresh();

When you make any requests, store the results using gearsAJAXHelper.storeKeyVal(key, value). Use the query/feed address as the key, and the results as the value. In the case of the Presidential Application, in the NewsBox.prototype.searchComplete function I wait until the results have been turned into the desired HTML, then I store that as the value and the query as the key.

The NewsBox.prototype.loadNewsBox function is called before any search is executed. In here, I use gearsAJAXHelper.returnKeyVal(key) to check if the query has been done before - if it has we will use the HTML returned. This should be a near-instantaneous operation. Immediately after, I execute the search we would have done so that when it completes fresh results will be served. If the database doesn't have the key/value pair stored, then we will execute the query as normal.

In some cases, you might want to clear the database of old entries as well as clear the Gears LocalServer cache - use the gearsAJAXHelper.refresh function for this.