JeffreyBarke.net

Back in August, Dave Shea came up with the CSS Sprites2 technique in A List Apart No. 266. He chose to implement it in jQuery, but added "consider this article an open invitation to port this technique to your library of choice." I intended to immediately port CSS Sprites2 to Prototype and script.aculo.us, but finally got around to it this weekend.

My version of CSS Sprites2 is almost exactly the same as Dave Shea's: it requires the same HTML, the same styling and includes a similar pre-built function used to invoke it. However, my version also includes keyboard support: there's a matching focus, blur, keydown and keyup event handler for each mouse event handler.

Get CSS Sprites2 for Prototype and script.aculo.us.

The New York Web Standards Meetup Group will meet this Thursday (28 August 2008) at theMechanism at 7:00 pm.

Margaret Michele Waldman (Sovereign Sites L.L.C.) will briefly discuss Ajax and present a number of coding variations, including rolling your own, using a JavaScript library and using Xajax. The examples will demonstrate how to consume XML, HTML and JSON.

Prior to the discussion, there will be a brief period for announcements. Afterwards, there will be an optional "show and tell" session. Show off sites you’re currently working on and get design feedback and technical assistance.

28 August 2008 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at the October or November meetup.

Notes and links from last night's Google I/O review at the New York Web Standards Meetup Group. Thanks to everyone who made it!

Note—There's a "curated" selection of Google I/O videos on this blog tagged io2008.

PowerPoint presentation

Demos/tutorials

• Gears
• Google AJAX Feed API

Advanced Gadget and UI Development Using Google's AJAX APIs. Derek Collison (Google)

The Google AJAX APIs can be used to build sophisticated Gadgets and UI controls for your website. For instance, you can by-pass complex server-side proxies and mash up feeds directly with a few lines of JavaScript using the Feed API. In this session, we'll dive into advanced uses of the raw Feed and Search APIs. We’ll also show you how to use Google's new Language API to broaden the global reach of your web applications.

Participants should be familiar with JavaScript and dynamic Web applications.

Presentation slides (PDF)

Source: YouTube

The New York Web Standards Meetup Group will meet this Thursday (24 July 2008) at theMechanism at 7:00 pm.

Google I/O was a two day developer gathering in San Francisco, 28–28 May 2008, which covered building the next generation of Web applications with Google and open technologies.

I attended and will talk about what I learned there, specifically focusing on Gears, Google App Engine and the Google Ajax APIs. Prior to the meetup, you can read a bit about my experience at theMechanism's blog and watch some of the videos I've gathered here.

24 July 2008 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at the September or October meetup.

State of Ajax: The Universe is Expanding. Dion Almaer (Google) and Ben Galbraith (Ajaxian.com)

The Ajax revolution is complete: sophisticated JavaScript user interfaces are nearly ubiquitous. Yet, the innovations in the Ajax community continue. In this session, Dion Almaer and Ben Galbraith, the founders of Ajaxian.com, discuss the latest Ajax developments, including multithreaded JavaScript technology-powered UIs, robust offline storage, choosing the right Ajax/JavaScript technology framework, Ajax outside of the browser and more. They use plenty of examples and a bit of live coding for dramatic effect. Come and learn how to use the latest technology to make your web applications sizzle. And, see if your heckling can throw them off balance!

Presentation slides (PDF)

Source: YouTube

I created a tutorial that will step one through how to create a density map with Prototype, the Google Maps API and the HeatMapAPI. The final product, a density map of liquor licenses in Milwaukee, WI, is below. While this map is based on real data, one limitation of the free HeatMapAPI is that only 100 data points can be submitted per call. Since there are approximately 1,300 liquor licenses in Milwaukee, this map isn't even close to accurate!

Creating a map like this takes four simple steps:

1. Getting everything ready
2. Create the Google map
3. Add the data
4. Create the density map

To step one!

Note—HMGoogleOverlay is an undocumented method of the HeatMapAPI. The documentation here is unofficial and unauthorized, and it simply represents my best guess as to what HMGoogleOverlay is.

class HMGoogleOverlay

A HMGoogleOverlay augments the map with a density map image. It implements the GOverlay interface and thus is added to the map using the GMap2.addOverlay() method.

Constructor

Note—HMGoogleOverlay does not have any public methods. It does not support either show() or hide().