WE05: Presentation notes for "JavaScript and the DOM"

5 October 2005

26 comments

A Blue Perspective: WE05: Presentation notes for

Although you won't be able to get the full effect of my crazy spinning bowtie and manic grin, you can download my presentation notes and example files for "JavaScript and the DOM" below. Voted "Most Smartarse Presentation of the Conference"!

Most of the examples will only work in Firefox due to the fact I couldn't be bothered CSSing them for anything else. (Plus, alpha transparent PNGs are way cool.) No guarantees are made for how they'll work online, I was only concerned with performance in an offline presentation environment. You can download the entire presentation as a ZIP file, if that's a concern.

Presentation notes

Most of the content of the presentation was delivered as spoken addendums to what's on the slides, but I've bastardised Eric's s5 code to display the slides on one page, and added some annotations inside <ins> tags (styled light blue), so you can get the gist of what was going on.

GeekBox '98: Meyer vs. Bowman

Yes, the game that started the vicious rivalry between two previously affable compadres. Use the left mouse button or any keyboard button to give Doug Bowman his comeuppance.

Slideshow Transitions

An example of some moderately cool effects in JavaScript. (Works fine on my 3GHz desktop, but will probably chug on anything else.)

Form Usability

Hit the submit button to see the JavaScript error handling on each of these:

JavaScript OSX

Not to be outdone by Dean Jackson's SVG OSX dock impersonation, here's my version. Except it's the whole OS! Well, I cheated a little bit (again, because I didn't want to spend too much time on CSS). But, you can:

  • Drag any of the desktop icons around
  • Drag any of the desktop icons into the trashcan
  • Double click the "IAUDIO" icon to open up a finder window (just a big image)
  • Drag the finder window around by click-hold-dragging the window title
  • Close the finder window
  • Mouseover the dock to get a magniyfing effect (dodgy PNGs I pulled from OSX screenshots ahoy!)
  • Click on the Safari icon to open up a Safari window
  • Click on the Safari "Bookmarks" menu item to get a dropdown menu
  • Click on "The Man in Blue" in the "Bookmarks" dropdown to go there
  • Visit any web site by selecting the address field and typing in an address
  • Drag the Safari window around by click-hold-dragging the window title
  • Minimise the Safari window
  • Restore a minimised Safari window

Bugs: I don't wanna know about 'em.

This is fairly image intensive, so you'll definitely get a better experience if you download the ZIP and run it off your own computer.

Obviously, to code a fully functioning interface would take a while, but you could extend the code here fairly easily, so go for it :)

widgEditor (progressive enhancement)

widgEditor is a WYSIWYG editor that features graceful degradation to a simple textarea for non-JavaScript-enabled user agents.

ZIP of whole presentation (1.2MB)

If you'd like to experience the true, "right there on my computer" experience, here's a ZIP file of the original presentation (no annotations) and the examples.

Update: Although this opens me up to all sorts of Photoshoppery and revenge boxing matches, photos of my presentation are available on flickr. Kindly uploaded by the lens-master himself, Amit Karmakar.

Categories

, , ,

Comments

  1. 1/26

    AkaXakA commented on 5 October 2005 @ 07:44

    That slideshow is magical! It'd prolly chug less if images were being preloaded, as I found that only lag in the connection slowed them down.

  2. 2/26

    juque commented on 5 October 2005 @ 08:43

    "GeekBox '98: Meyer vs. Bowman", funny, absolutely funny, LOL

    Real picture

  3. 3/26

    Nick Cowie commented on 5 October 2005 @ 09:12

    So Cameron what is the vicious rivarly between you and Russ Weakley?

    Enjoyed your presentation and good to see you survive the friday night adventure.

  4. 4/26

    Nathan Kelly commented on 5 October 2005 @ 09:13

    Thanks for sharing Cameron, this should help refresh my memory. So much happened over the 2 days my head is still trying to process all the information.

  5. 5/26

    Dmitry Baranovskiy commented on 5 October 2005 @ 10:25

    Cool stuff as allways, but dock is not working as original. When you try to point at the icon dock poping up and moving icon away from cursor. I did something like this year ago, but facing rounding problem. My buggy dock. 

  6. 6/26

    ben commented on 5 October 2005 @ 10:34

    fantastic work cameron.
    it was nice to meet you and i enjoyed your presentation.
    are you ablet to get safari to load as quick in the real osx?

  7. 7/26

    Ben Buchanan commented on 6 October 2005 @ 18:59

    <q>"Most Smartarse Presentation of the Conference"!</q>

    ...in the nicest possible way, of course! :)

  8. 8/26

    Andrew K. commented on 7 October 2005 @ 16:05

    It's alright Cameron, I'm sure you'll have time to learn Flash one day... ;D

  9. 9/26

    Fransjo Leihitu commented on 7 October 2005 @ 17:42

    The form validator is HOT !!!!!

  10. 10/26

    trovster commented on 7 October 2005 @ 23:23

    I did a similar thing of the OSX desktop for WinXP desktop. It has dragable icons, working start menu + run box (use edit to view DOS edit), working clock, four different themes and more!

  11. 11/26

    ronald commented on 8 October 2005 @ 06:17

    can i kiss your foots?...
    this is too damn amazing!!!!!!!

  12. 12/26

    Henrik commented on 8 October 2005 @ 09:22

    The javascripting going on there is wonderful and beautiful - especially the image slideshow.

    Perhaps you'd get it to work in Opera 8.5 if you add a preloading <link> for all the images, because I noticed that when the image is in cache it works great, but not if it needs to be loaded before shown.

    It flows perfectly fine on my comp - 3.4 GHz, 1 GB DDR2 RAM ;)

  13. 13/26

    Rutger de Jong commented on 8 October 2005 @ 19:39

    The widgeditor thing doesn't work in Safari... I do have Javascript enabled though, as my own website admin interface, also written in javascript, does work.

  14. 14/26

    Anonymous commented on 10 October 2005 @ 06:49

  15. 15/26

    Radovan Dzurcanin commented on 10 October 2005 @ 09:40

    I liked it as well! Really cool! Thanks...

  16. 16/26

    Carla commented on 10 October 2005 @ 11:18

    Hi!
    i got really surprised with ur work...
    i knew about it cause i have a friend who is always updated with all this technological stuff...( actually he has already written u : Ronald)
    Its kinda weird to understand all u can find at the internet..
    until now, for me is hard to see how man has understood the internet world creating those amazing things like the one u did.
    Felicitaciones!
    *Carla*

  17. 17/26

    Dan commented on 11 October 2005 @ 22:39

    That form validator is really cool! Can it also validate checkboxes and radio buttons?

  18. 18/26

    The Man in Blue commented on 12 October 2005 @ 02:14

    The example doesn't do radio buttons and checkboxes, but they'd be pretty trivial to include.

  19. 19/26

    Brian commented on 22 October 2005 @ 10:02

    Is it just me or is the widgEditor buggy in Firefox? It seems like I need to change window focus or move the text area out of the viewable window and back in before I can focus on it and type. I really like the simplicty of it and would like to use it on some projects, but I can never get it to work smoothly.

    Also, thanks for providing the form validation examples. Its hard to find nice examples to use for us non-javascript gurus out there :)

  20. 20/26

    Juan Manuel Caicedo commented on 25 October 2005 @ 11:00

    <h3>If you'd like to add visual effects to your S5 presentations, you could try Presentacular
    <h3> <h3><h3>

  21. 21/26

    Lars Olesen commented on 5 November 2005 @ 04:18

    Regarding the markup of your form. I have been very interested in your markup of forms, as you with the label-tag surrounding a input-fileld was using very clean markup. But when I see your example now, you are using span for the actual label-tag. Wasn't it better then, to use a div to enclose both the label and the input and do them in a classic way? For me this would seem like a more clean markup?

  22. 22/26

    Jamal Abdou Karim Bengeloun commented on 7 November 2005 @ 16:27

    I don't want to play the parseltongued or anything but although slideshow is great stuff... Sometimes flash is better/faster/cheaper (see http://www.jasonsantamaria.com/photo/ and a thousand other websites) - But I think it was more a proof of concept than anything.

  23. 23/26

    Jamal Abdou Karim Bengeloun commented on 8 November 2005 @ 05:22

    Can I use the code of Javascript OS X in one of my projects?

  24. 24/26

    The Man in Blue commented on 8 November 2005 @ 15:50

    > Can I use the code of Javascript OS X in one of my projects?

    Go for it.

  25. 25/26

    best osx website ive seen! commented on 3 February 2006 @ 16:27

     

  26. 26/26

    aaron commented on 16 March 2006 @ 01:05

    that Javascript OS X ....wow

    27. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

Monthly Archives

Popular Entries

My Book: The JavaScript Anthology

The JavaScript Anthology

The JavaScript Anthology contains over 100 solutions to common Web development challenges such as drag-and-drop interfaces, client-server communication with AJAX/remote scripting, DHTML animation, and many more.

All code used in the book is unobtrusive and accessible, and a key focus is placed upon creating modern, cross-browser scripts.

RSS feed