WE05: Presentation notes for "JavaScript and the DOM"

5 October 2005

44 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/44

    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/44

    juque commented on 5 October 2005 @ 08:43

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

    Real picture

  3. 3/44

    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/44

    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/44

    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/44

    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/44

    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/44

    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/44

    Fransjo Leihitu commented on 7 October 2005 @ 17:42

    The form validator is HOT !!!!!

  10. 10/44

    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/44

    ronald commented on 8 October 2005 @ 06:17

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

  12. 12/44

    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/44

    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/44

    Anonymous commented on 10 October 2005 @ 06:49

  15. 15/44

    Radovan Dzurcanin commented on 10 October 2005 @ 09:40

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

  16. 16/44

    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/44

    Dan commented on 11 October 2005 @ 22:39

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

  18. 18/44

    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/44

    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/44

    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/44

    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/44

    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/44

    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/44

    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/44

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

     

  26. 26/44

    aaron commented on 16 March 2006 @ 01:05

    that Javascript OS X ....wow

  27. 27/44

    dhdgrzrapc commented on 17 June 2010 @ 02:32

    BuSbaK <a href="http://uohggsmyvljc.com/">uohggsmyvljc</a>, [url=http://nzfrfqzeimqk.com/]nzfrfqzeimqk[/url], [link=http://vimggdpzlfxt.com/]vimggdpzlfxt[/link], http://aafhfiugwtfi.com/

  28. 28/44

    ceqiivxzt commented on 17 June 2010 @ 04:33

    EFxAbz <a href="http://rgsdbncjqfcq.com/">rgsdbncjqfcq</a>, [url=http://zyjwcwnuecnm.com/]zyjwcwnuecnm[/url], [link=http://tvulzgpikwnw.com/]tvulzgpikwnw[/link], http://pdqngyscqzud.com/

  29. 29/44

    vncuiyn commented on 17 June 2010 @ 06:19

    20vrhR <a href="http://lpeetiurusvj.com/">lpeetiurusvj</a>, [url=http://nlgtmjywibkm.com/]nlgtmjywibkm[/url], [link=http://kpmtautslwwl.com/]kpmtautslwwl[/link], http://jwtxppgvvvez.com/

  30. 30/44

    ddvmbhg commented on 22 March 2011 @ 10:36

    FOnfh1 <a href="http://trkbwzofrlee.com/">trkbwzofrlee</a>, [url=http://gfuoaawtezrk.com/]gfuoaawtezrk[/url], [link=http://ezajrynujnvb.com/]ezajrynujnvb[/link], http://fbaxanisjmyx.com/

  31. 31/44

    hujnzpbv commented on 22 March 2011 @ 18:02

    g8GFqd <a href="http://lnmttkbzkeud.com/">lnmttkbzkeud</a>, [url=http://tngaobzwkdic.com/]tngaobzwkdic[/url], [link=http://oysejsehrsyx.com/]oysejsehrsyx[/link], http://tbqmoaysanpq.com/

  32. 32/44

    wotgntgqk commented on 23 March 2011 @ 02:16

    79cJXh <a href="http://tzmznmromngz.com/">tzmznmromngz</a>, [url=http://jbyntbyrgknd.com/]jbyntbyrgknd[/url], [link=http://fayhhyylayav.com/]fayhhyylayav[/link], http://gzijulpihahe.com/

  33. 33/44

    jgsxncvrhz commented on 23 March 2011 @ 08:46

    CHYSD3 <a href="http://odkldpgktmaa.com/">odkldpgktmaa</a>, [url=http://qjxovjejgdex.com/]qjxovjejgdex[/url], [link=http://adzvdpsqwpsg.com/]adzvdpsqwpsg[/link], http://vvpzpmndjboc.com/

  34. 34/44

    pjfxziu commented on 23 March 2011 @ 14:15

    Q90bpP <a href="http://pgsodhsddqzk.com/">pgsodhsddqzk</a>, [url=http://srppzxsvurrk.com/]srppzxsvurrk[/url], [link=http://vosfdzhtxmqv.com/]vosfdzhtxmqv[/link], http://eueifvghenfx.com/

  35. 35/44

    Lynsey commented on 20 May 2011 @ 21:10

    BION I'm ipmersesd! Cool post!

  36. 36/44

    Giggles commented on 21 May 2011 @ 08:05

    That's 2 clveer by half and 2x2 clever 4 me. Thanks!

  37. 37/44

    Adiana commented on 21 May 2011 @ 10:55

    Stands back from the keyboard in amazeemnt! Thanks!

  38. 38/44

    Betti commented on 21 May 2011 @ 12:18

    Good to see a tlnaet at work. I can’t match that.

  39. 39/44

    Marilu commented on 4 July 2011 @ 16:37

    I found just what I was neeedd, and it was entertaining!

  40. 40/44

    Henry commented on 26 August 2012 @ 15:34

    Thanks John,I feel the same way. I hope that Scott shares the email that I just sent him that sums up what I took away from the mtenieg and his keynote. He burst a bubble of the international school community that needed that for some time. Anyhow, best of luck to you and your family!-Jim

  41. 41/44

    Jesus commented on 26 August 2012 @ 16:04

    The nightly you are leilky running is 4.0b8pre since the tree on Beta 7 build was closed earlier this week. Beta 7 should be out sometime in November. possibly as early as this coming week. RC1 is leilky what won't be until December.

  42. 42/44

    Justin commented on 27 August 2012 @ 04:36

    It's ok to have public sniekapg fear, it's one of the top 10 phobias1. I would suggest taking Public Speaking (the class) if they offer it in your high school or a community college around you2. eat a banana, it helps with nervousness sometimes3. drink water before you go up or if your throat closes up, eat a cough drop3.5 take a deep breath before you start4. if your hands shake, put your hands to your sides and have your thumb and middle finger tip touching; if you're holding a manuscript, if there's a table available or lectern around you, put it on there and glance down every now and then to see where you are try to use an outline, so you don't rely on your manuscript word for word5. just know your stuff well and practice your speech over and over again (yes i know you said to not say this)but you're up there to inform a group of people something, not look nervous in front of them (which you probably don't) No one really knows you're nervous unless you say you are, which you shouldn't be telling them. Just don't do some weird continuous action like tapping your foot or twirling your hair, etcif you really need a manuscript and do bring one up with you, something a classmate of mine did was literally write in the text pause , look around at audience oh also, don't forget to time yourself during practice if there's a time limit. It helps if your speech is comfortably around the middle of the minimum and maximum time when you're practicing

  43. 43/44

    Juan commented on 27 August 2012 @ 05:34

    How to overcome EXTREME pibluc speaking fear??!!?Alright, I know pibluc speaking is unfortunately an important part of life, but now that i'm forced to do a million speeches my junior year i'm freaking out. I'm taking AP U.S History and at the end of the year there is a big presentation. If i'm up infront of a group of people for more than a three minute time span, my hands will start to shake, my heart will uncontrollably beat faster, and my voice will start to waver until all the hysteria gets to me, and i have to keep swallowing after every 5 words just to get a sentence out. I compare that feeling to, having your throat close on you. I literally wont be able to speak because of the physical anxiety. It almost feels as if i'm going to cry, (which i want to) but how can i overcome this fear? Please no cliche answers, like practice alot or picture them in their underwear . Not only am I too focused on trying not to cry but I'm also trying not to look like a fool. And with all this anxiety that I have, I dont want to stare at the audience and try and convert them into their undergarments.

  44. 44/44

    Alex commented on 27 August 2012 @ 15:50

    im 14, hate school so much and dread paltacurir lessons because of my phobia of reading out loud in front of the class. I can read out infront of my friends and sometimes can read out infront of the class but only if i feel that not everybody is actually watching me/all their chairs are faced exactly to where i am orr if i read a little bit then someone else reads then comes back to me and so on. i cant read longer than a 2 sentance paragraphy before getting really nervous, going bright red, shaking, feeling sick or feeling like i just wanna break down there and then and just stop everything. its my worst fear, i wish i could read out infront of a load of people and not get worried or emabress myself. please can anyone suggest antyhing that might help me overcome my fear and how to stop nerves taking you over? x

  45. Leave your own comment

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

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed