Home

jQuery OSCMS presentation slides

Mar 23, 2007

Update: a raw video is now available of (almost) the entire session. Thanks to Jon F Hancock for recording it.

Today I did my second session at OSCMS, which was basically a repeat of the jQuery talk I did at DrupalCon Brussels.

You can download a PDF (2.2MB) of the (slightly tweaked) presentation slides.

Very nice...

Mar 24, 2007 John Resig

Very nice... did people seem to grok it fairly well? How long did you have to present all of this information? Great job, as usual :-)

Hey Steven, Great presentations at OSCMS 07. While I had experimented with jQuery before, it was nice to have someone fill in the knowledge gaps and explain it in a very clear manner. Plus, now I finally "get" the full power of Firebug. ;)

Also really enjoyed your design presentation. Much thanks!

-pat

John: Presentation time

Mar 24, 2007 Steven

The presentation took about an hour, with some simple live demos (maybe 10-15 minutes with FireBug) and questions at the end included. Generally people seemed to grok it well.

The only thing I noticed is that, after getting used to jQuery, everything about it is so ridiculously obvious that it's difficult not to gloss over some of the basics when you're trying to explain it to newcomers :).

Posting the Code Snippets?

Mar 26, 2007 Kent Bye

Hey Steven,
Great presentation and overview. It helped clear up a few things and was great to see how you used FireBug as well.

You were going through a number of jQuery code snippets during your live demo. Would you be willing to post them here -- or at least copy and paste them into pastebin?

Thanks,
-Kent.

FireBug Question

Mar 26, 2007 dave

During your live demo, you had a separate pane on the right side of FireBug where you could enter multi line jQuery. I can enter jQuery from the console tab of FireBug, but something just seems different from what you were doing. What am I missing? Were you using Inspect > Script > Watch?

Outstanding presentation by the way.

Firebug Console & Snippets

Mar 26, 2007 Steven

There is a little arrow button on the right side of the console to switch from a single-line layout to a multi-line layout.

Here are some of the snippets I prepared before hand (though some of the later stuff was just made up on the spot):

$('img').slideUp('medium');

$('img').fadeIn('slow');

$('p:nth(0)').css('color', 'red');
$('p')[1].style.color = green;

$('#sign-up a').click(function () {
  $(this).hide();
  $('#sign-up form').fadeIn('slow');
  return false;
});

$('<p><a href="http://acko.net/?width=400&amp;height=300&amp;TB_iframe=true" class="thickbox">Woot woot</a></p>').appendTo('body');

TB_init();

$('<input type="text" name="colorfield" id="colorfield" value="" />').appendTo('body');
$('#colorpicker').farbtastic('#colorfield');

(note that the usage above of thickbox is in fact not sanctioned , and thickbox does not support attaching itself to run-time created objects... the only reason it worked was because there were no existing thickbox links, and I only called TB_init() once)

Watch on Google Video...

Mar 29, 2007 Alan Pritt

Ack! I'm trying to provide a link to the video on Google of the presentation, but the comment submission form is calling me a spammer and telling me to go away!

Hmm... maybe it will work if I praise you for a very informative and exciting presentation and tell you it inspired me to take a closer look at jQuery.

Okay, let's try again.

http://video.google.com/videoplay?docid=8359290939840291444&hl=en

Yours page

Oct 16, 2007 David

Your page is beutiful. I mos liked this colors. Relly good job