[uf-discuss] Tutorial on AHAH (such a cool technology!)

[Paul Wilkins]

Mike Schinkel wrote:
> Printable version please! Ane that doesn't take 12 pages to print...  (He
> also grumbles about lack of back button in presentation but glad the
> presentation was not 96 pages...)

The slideshow was built using S5, A Simple Standards-Based Slide Show
System from Eric Meyer.
http://meyerweb.com/eric/tools/s5/

Eric built S5 to scratch an itch, and now many others have taken to using it 
too.

There are several ways to go back, arrow keys, page up, or mouse down to the 
info back and click on the arrows.

Keyboard controls for it can be found at
http://meyerweb.com/eric/tools/s5/features.html#controlchart

The keyboard controls aren't easily discoverable, especially for people 
viewing the slideshows and perhaps that's an improvement that can be 
suggested.

You're right about the printing issue. a page per screen is too much. I 
wonder if there's a way to print on a virtual a5, and have two of those a5's 
appear on a single a4 page.

<snip>

> Lastly, <a
> href="javascript:ahah('Waldorf-Astoria-Photo.html','Photo');">photo</a>
> hides the content from search engines, which is not good.

> Another alternative that seems cleaner to me would be to code it like this
> and let your ahah.js annotate the link for you:
>
>     <a href="Waldorf-Astoria-Photo.html" rel="ahah">photo</a>
> Oh course this last suggestion will probably run me afoul of the
> microformat
> police since rel="ahah" hasn't even been officially proposed yet and I
> didn't bring it up on [uf-new]... ;-P

Give it an id and the script can be robust while you're at it.

I don't like the idea of javascript scraping the page for class names.
Dustin Diaz covers this particular issue very well in
http://www.dustindiaz.com/class-name-widget-philosophy/

While it's convenient, it's slow, demanding, and at high risk of breaking.

If we're going to try to not use the class tag as an identifier for 
javascript functions, the trouble comes in making it easy for people to add 
the script to their page and use it.

The following seems to do the trick.

<a href="Waldorf-Astoria-Photo.html" rel="ahah" id="waldorf">photo</a>

<div class="ahah-waldorf">&nbsp;</div>

Then the script can get only what it needs, like the anchors, filter through 
them much more rapidly, perhaps with the wonderful forEach technique from 
http://dean.edwards.name/weblog/2006/07/enum/ and add the behavior to those 
elements with something like addEvent from 
http://www.dustindiaz.com/rock-solid-addevent/
(Yeah, more Dustin, he does great stuff)

And if the script uses object notation, like the searchplay object at
http://www.dustindiaz.com/javascript-searchplay/ then there won't have to be 
a
lot of functions like ahahinit, ahahdoit, ahahdone.

It might start to look something like this

// beware, untested code, dragons may be lurking
ahah = {
  init : function() {
    var els = document.getElementsByTagName('a');
    Array.forEach(els, function(el) {
      if ('ahah' == el.getAttribute('rel')) {
        var href = el.getAttribute('href');
        var id = 'ahah-' + el.getAttribute('id');
        addEvent(el, 'click', 'function(){ahah.get("'+href)+'", 
"'+id+'")}');
      }
    }
  },
  get : function(url, target, delay) {
   // code as per normal
  }
};

How close would something like this get to cleaning things up?

-- 
Paul Wilkins