Paul Irish

I've used queue() for delaying a non animation method before. I wanted to fade a menu over a full second, and remove a class from the parent LI after half a second.

$this.children('ul').fadeOut(1000).end().delay(500).queue(function(next){
	$this.removeClass(className);
	next();
});

Got this in blog bullet form somewhere?

that async recursion tip is sick! never knew about prefixing function with ! or + tho. i love "exotic" syntax. it's so magical.

;_; Vimeo regularly craps out on me on Linux, and this one is no exception. Any chance you could get this up on Youtube where I can use the player instead?

return 'jqueryscreencastsarethebest!!!!!LOL';

I think you missed a few ‘1’s in between the exclamation marks. Otherwise, great screencast!

this works too. i wonder what the real advantage to this is other than one less char — if you don't care what the returned value is.

~function x(){return;}();

Did you get a haircut half way through this, Paul?

Hey Paul!
I've just seen this screencast (nettuts+ ;)) and am totally amazed. I wish my profs could explain like you do!

The only thing I miss here: I can't really find a) the code b) the slides of your talk…

–
Asmodiel

You've talked about recursive periodicals, but how do you stop them, because you cannot use clearInterval anymore?

doScrollCheck segment made me last my ass off.

"… immediately we're like, whatever dude, do it all over again. go back go back, 1 millisecond. it like no no no. and then finally at some point doScroll is not gonna raise an exception and then ah yeah we're good …"

In general, do you think people use $.support instead of $.browser?

Simply awesome, Learned a lot with this, Thank you very much.

I totally enjoyed your screencast. Useful stuff and I love your humor :D :D Thanks!

Are there any stack-overflow concerns (An actual stack-overflow, not stackoverflow.com) when calling a function recursively every 100 milliseconds via setTimeout? I always figured setInterval was better.

Cool screencast, thanks!

I have a few questions:

1) Surely having a short (1ms) timeout in doScrollCheck places quite a load on the CPU and might actually slow down the DOM processing? Why not a longer value like 5ms? (I suspect that the answer may simply be that using the function is an edge case for <=IE6 anyway so nobody cares, but I thought I'd ask)

2) RE animation jerkiness hack for IE: I don't see how/why increasing the duration helps, that just means that the animation has to calculate twice as many frames over twice the time, which is still the same frame rate and thus CPU load. It's the kind of time regulation hack that old school games programmers used for the IBM PC 286 that then broke spectacularly when 386s came out and ran everything so much faster! Surely it would be much better to automatically throttle the animation FPS (i.e. alter the interval) depending on the time taken to render the previous frame, which would also be completely browser & CPU independent (i.e. scaling automatically)?

3) Were you a little drunk when you recorded this screencast, or just very tired? ;)

You blew my mind. I did not even think my brain had capacity for this much new knowledge. Thanks a lot. I also have to second korbsan - I loved your humor throughout the presentation; it made it a pleasure to follow along.

Sorry that should have read "do you think people should use $.support instead of $.browser?" I think your use case in the video is one I find myself needing a lot–IE<8. Could that easily be targeted with $.support?

Hey Paul,

Would appreciate if you can post a brief list of the 10 topics some where,
so pros can just scan through if you have touched any new patterns.
Would be hard to watch the entire video and be disappointed to see nothing

Great screencast, very useful, congratulations!
I always wanted to dig into the jQuery code, but couldn't find the time / courage to do so.

Loved the async recursion pattern - now I have a name for it!
Duck punching - ruby folks (and probably others) call it monkey patching.
Very cool JSON evaluation with the Function constructor!
Thought $.browser was deprecated in favor of support…

One other thing: I suspect that shortening the jQuery lib by cutting on the dependency direction will not work because there is no way you can tell the dependencies are not a graph instead of a tree - unless that was a conscious decision of jQuery contributors.
You can try it, but you can only be sure it does not break in call-time, not in eval-time…I think…
… or am I missing something here?

Watched all of it! Thanks for the screencast, now I won't be afraid to dig deeper into jQuery.

BTW: Whats your setup for making the screen cast? The experience was great.

Very useful Paul, if only every 50 minutes could be as productive as this.
Changing a good few of my setIntervals as we speak!

Cheers fella

Killer talk man—I picked up a lot of cool stuff.

You mentioned ECMA 5 strict and that made me wonder about your approach to code QA. Do you try to code to strict? Do you make use of JSLint? Or do you mainly approach QA with unit tests?

Please add download link for this video

Ok, so this was the most informative and entertaining jQuery screencast ever. Not sure if you've done these before, but I sure hope they continue!! Thanks for sharing the knowledge!

Great screencast.

I was wandering, when you talked about selector performance you compared

$('#id some.tag') to $('#id').find('some.tag')

I on the other hand normally use $('some.tag', '#id'), is it like using "find"?

@Tom Bigelajzen
oh, I haven't read your slides…
nm, I'm smarter now.

Awesome screencast. I especially dig the alternative

x = (new Function('return '+data))();

as opposed to
eval('('+data+')');

It's nice to know there's a better alternative to parsing JSON–and that now I can just use jQuery :)

Now I'm going to dig a lot more into the jQuery source, which I had been ignoring before :)

Paul! You're my new idol :D

This is probably the best hour I've spent all week, thank you.

Beautiful, I got my hands dirty with jQuery about a year ago. I was making a mozilla plugin but wanted some of the cool jQuery features and while I was trying to get the two to work together I ended up running into the oddities you explained. Now I make it a point to view the source throughly if i use it often, you never know what goodies you will find. The 10 minutes you spend could save you 2 hours of trouble shooting in the future.

Thanks again, Paul

Hey Paul, big fan.

I ran a practical test and found that $('#id tag.class') actually runs faster than $('#id').find('tag.class'). Here's the link:
http://jsfiddle.net/jsKtU/
(will need to open Firebug console or Inspect Element console to see results)

Can you explain if I'm understanding something wrong?

Thanks for the precise answer!

Wooh, nice one but I found a hiddenhancement!
Within your getScript(), you declared "times" as global, by intentionally replacing the "," with a ";"! Sneaky!

Awesome video Paul. Are the slides available anywhere for the original talk? Thanks!

hi, what textmate theme did you use?

Wonderful effect.

Thanks @paulirish i am tired but i really enjoyed it. i love the undefined part :P i am waiting for another video exploring more jquery source. reading code is dry, watching video is good :)

sick! thanks for taking the time to bust out with the knowledge.

In the first part about anonymous functions, you said that (function () { })() would be the same as function () { }()

Maybe I'm missing something but I just put document.write("I'm anonymous!"); inside and if you leave the parenthesis off of the front of the function () it will not work but once I add the parenthesis it goes off without a hitch.

That was brilliant, and I will totally make little explosion noises when ever I delete code from now on. And the lasers when finishing blocks. Awesome.

@Adam Eivy
new Function(string) actually does create a closure just like function() {}, so it doesn't have any advantages over eval.

Great video, and interesting points.

Not sure if you've seen, as it seems to have been picked up by a load of blogs in next to no time, but I released this a couple of days ago:

http://www.keyframesandcode.com/resources/javascript/jQuery/deconstructed/

It's an interactive, visual breakdown of the code, with heavy hyperlinking and some other nice featurettes.

Enjoy :)

Glad to contribute :)

Not sure if you got my mail about Array-like objects, but I think I'm going to be going the Prototype JS Lib way and extending an Array for my Collections objects. That also allows me to subclass any Collections superclass as well, so it's perfect for me.

As I'll be digging around the Prototype library, I'll most likely do a Prototype Deconstructed as well. Hell… why stop there!? MooTools, watch out ;)

@Paul Harrington

The advantage of new Function instead of eval is that it is *much* faster on a large JSON object when Firebug is running. For some reason Firebug causes eval to run much slower, but it doesn't affect the speed of new Function.

I am not a programmer and I have been never dunked into jquery, but your screencast makes me very curious. So you did a great job when somebody watches 53 minutes of something he understood as good as nothing ;)
Thank you!

Hey Paul,

Excellent video, i was wondering which editor are you using in that presentation ?

Cheers,

@Michael Geary, Campbell, CA
Ah, thats kinda wacky. Oh well, thanks for the info.

awesome video
your presentation is really great
Learned a lot of things, many thanks

Thanks for sharing your knowledge, god bless you.

baidu

@Paul Harrington
Whoops, this is lies.

Great video. Two quick comments:

1. I tried to write an anonymous self-executing function without parentheses surrounding the function and Firefox, Safari, Opera and Chrome (not tested in IE) all gave a syntax error. Am I missing something?

2. You mentioned that the _jQuery and _$ are local variables, but if a variable is defined without using 'var' it is defined on global object (window).

Awesome Video thanks! Can I ask which font you are using?