An Intensive Exploration Of jQuery With Ben Nadel (Video Presentation)
The following video and slide show is my presentation: An Intensive Exploration Of jQuery With Ben Nadel. The presentation covers most aspects of the very robust feature-set provided by the jQuery library. While I cannot go too in-depth on any one particular topic, I do try to cover and thoroughly demonstrate what I feel are the most important parts of the jquery library. I hope that in this presentation I can at truly get across to you how essential the jQuery library is to optimal web development; I tell you this in all seriousness - I will never start another web development project without jQuery.
| |
|
|
||
| |
 |
|
||
| |
|
|
The following is a table of contents for the video, An Intensive Exploration Of jQuery With Ben Nadel:
- Introduction
- What Is jQuery
- UI Effects - Pain Free Animation
- Why I Didn't Like jQuery At First
- jQuery For Developers
- Anonymous Methods
- $() Factory Method
- Wrapping DOM Elements
- jQuery Selectors
- jQuery Selector Moment of Bliss
- Working With The $() Collection
- Attributes And Values
- Moving Elements Around
- Traversing The DOM
- Filtering The jQuery Collection
- Iterating Over The Stack
- jQuery Closures - Awesome Voodoo Magic!
- Eventing Binding And Triggering
- Custom Event Types
- jQuery AJAX
- Monitoring AJAX Requests
- jQuery Data() Method
- Extending jQuery - Plugins And Selectors
- jQuery Is Mad Awesome
- jQuery Resources
- Thank You For Listening
Reader Comments
Very well done. I've been in love with jQuery since I started looking into it.
I would have to say so far my favorite feature would be the ability to do this:
function show(i){
$('ul.li').eq(i).show().siblings().hide();
}
after I learned how to use it, the ".siblings()" function really rocked my world.
Great job Ben! Was hoping you'd post this. You have a great teaching style. Hope you do more of these in the future.
Great presentation, Ben. I'm only 10 minutes in, but am loving it already. I've done a litle jQuery development, and like you, was pretty "humbugged" out about it being "all UI."
Heresy!
Suffice to say, I'm getting comfortable and watching the rest :)
Yay! wOOt!
</cliff>
Good job Ben, I think it's indispensable to get the CF community more in touch with javascript. It's worth noting that most js frameworks are capable of the things you describe in your preso, and as such I always invite people to have a look at several frameworks (jQuery, Ext, Prototype, Dojo, Mootools, etc.) so they can see which one "feels" best for them (and sometimes see what plugins are available). They're fine choices (at least as far as the main ones go), it's usually down to preference.
@Thomas,
During the live presentation, someone asked, "Why do you think jQuery has become so popular with ColdFusion developers." I basically said that, well one, its becoming popular everywhere, so we're just part of that revolution. But two, when you try jQuery, there's something that just feels "right" about it. Even if you've tried other Javascript libraries, jQuery feels more natural for some reason. I can't even put my finger on it, it just does.
@Ben,
You're kinda making my point there. hehehe What feels right/more natural to some feels wrong/awkward to others. I personally don't like jQuery as much. I like Prototype and Ext better. And so nobody can say I'm set in my ways, I started with Prototype, then tried jQuery and didn't like it as much so stayed with Prototype. I later tried Ext and liked it, so now that's what I use. Some of my friends also didn't really like jQuery for whatever reason. That's why I say try them all out. As far as the basic features, it's pretty quick to give them a spin and see what feels right/better. Having said that, I don't want anybody to take this as a knock on jQuery. It's an excellent framework.
@Thomas,
At the end of the day, you gotta go with what feels best for you, cause at the end of the day, you need to get your work done as efficiently as possible.
Just as a point .. you were referring to 1000 seconds with the delay/speed for the effects.. while it says 1000 it's milliseconds, thus 1000 = 1 second.. but i'm assuming you already know this :)
@BinaryKitten,
Ahh, yes, thanks. That's the nerves talking :)
None of your scripts work in my Netscape 4! What are you trying to pull?
What software did you use to make the presentation?
Did you post it somewhere else? Maybe UGTV?
@Mike Leung
re: Netscape 4.... urmm ... http://browser.netscape.com/ they stopped support and production of the netscape browser completely in march 2008.
@Mike,
If it makes you feel any better, it doesn't work in my Hyper Text Player either :)
@Henry,
I used Camtasia.
Thanks Ben for posting this online. Great presentation
Great presentation, Ben! It seems like so long ago that we first discovered jQuery. And the engineering under the hood has only improved since then!
If you haven't already, you might want to take a look at Slideshare (http://www.slideshare.net). I see it used for slides in presentations by front-end developers at Yahoo, Google, and Mozilla - including jQuery's John Resig.
@David,
Thanks for the kind words. I love jQuery and I don't mind trying to get others to love it to :)
I like in Slide 4 when you say "Someone" showed you jQuery and you thought it was lame. I don't know who did that, but they were definitely lame! Morons like that probably showed you CSS too and you thought that was lame at first too. Probably showed you Flex before it was popular! Those kinds of people irk me to no end.
Man, if I could get my hands on THAT guy, I would teach him a thing or two. Give him whatfore!
By the way, the next thing you don't like yet, but you will is ExtJS. It's for business applications.
@Ben
I agree that you have to use what you are comfortable with, but at the same time you do need to at least try to get comfortable with what a majority of the community is using. The only reason that I say that is because there are times when you will leave a project and others will have to come in behind you. If you are using some obscure library (not to say that jQuery, prototype or mootools are) you have created a bigger issue than there needed to be.
@Glen,
When I talked about my initial response, I said it was a "fear response," not a legitimate one :) jQuery is awesome, and yes, your advice is always much appreciated.
@Brandon,
That is a good point. If you are jumping in and out of projects, having the same library understanding creates a common language and methodology.
Awesome! The best jQuery Video Tutorial of the Web!
@Fernando,
Rock on! Thanks a lot.
Ben,
I started watching the presentation last night and then finished it the first thing this morning. Great job! I'm a newbie to jquery and even to java script. Of course I jumped into it with the jqGrid plugin and I've managed to create a subgrid in a grid without really understanding what the code was doing. Your presentation help bring some light where there was only darkness. Like most folks I don't get to start at the edge of the pool, but get thrown right into the middle of the deep end. You've given me a life preserver so at least I'm keeping my head above the murky water.
Thanks again, Jim
Holy s-word Ben.
That was maybe the most effective, comprehensive, well-architected presentation I've ever even seen. You literally took people foreign to jQuery from beginner to intermediate knowledge in under 2 hours, with a primer on plug ins and a pretty good overview of the voodoo of closures!
So impressive. Thanks a million, on behalf of the world.
Also, it wouldn't hurt to post a link where folks can donate to "The Ben Nadel Educational Fund" to cover the cost of your Camtasia license and all of the extra bandwidth you're going to need when you start doing video blogs 24/7 instead of textual, hint.
Also, since Camtasia lets you do record a sub-selection of your screen it doesn't hurt to position your IDE/slideshow/browser chromelessly around a 640x480 portion of the screen to cut down the filesize dramatically. That resolution is usually enough for good code visibility and audio isn't affected obv. I noticed your blow was down for a while last night, I'm assuming because of 8 million people watching that video at the same time.
Blog. That was the most ridiculous typo probably in history (judged by the distance between the intended letter (g) and the typed letter (w). That'll teach me to try to author comments while conversing on a telephone.
@Jim, @David,
Thank you guys so much for the kind words. That really means a whole lot to me! Really, you have no idea.
@David,
I will play around with the 800x600 next time. I thought about going that way, but it just seemed so small. The size I did was actually a sub-section of my screen (I have a huge monitor). But, the live presentation was done on an 800x600 and it went find. Good feedback.
Thanks for the great video!
Cheers,
Amazing tutorial, I love jQuery, but there is alot of boring stuff about it out there. This tutorial really makes me realize how strong it actually is. Thanks so much!
WOW! Great presentation! As a professional educator, may I say you have a rare gift. There are a lot of people in the world who understand a subject well, but have little talent when it comes to communication that knowledge. You obviously have both. Even though I had only a modest knowledge of programing in general and none of jQuery, I found your presentation both understandable and engaging. The only thing I would change (if indeed your authorware has this option) would be to include a pause button so viewers could stop and digest the information every so often (your explanation of closures was great, but afterward I needed a break, so some kind of mental-Tums!). Thank you.
Great job Ben!
I've been using JQuery for awhile now. I started with prototype and quickly switched to JQuery.
While I'm not a big fan of Microsoft, I was pleased to hear that Microsoft announced plans (Sept. 2008) to incorporate it into their Visual Studio toolset which does provide JQuery some weight as far standards go.
http://www.eweek.com/c/a/Application-Development/Microsoft-Adopts-OpenSource-jQuery-JavaScript-Library/
Hi Ben - Brilliant presentation from what I have seen so far - any chance of making it available as a download? The length creates problems for me watching on line in one go. Cheers, Bruce
@Fred,
Thank you so much for the kind words. Coming from an actual teacher, what you say has serious weight and is very meaningful to me.
@Bruce,
I can look into figuring that out.
Ben - I'll second the request for an 'offline' copy of this.
All the best
</cliff>
Superb video Ben, your presentation style is very clear and easy to follow. Seems you're a natural?
I've already got an off-line version by the way - looked in my browser cache (I use Opera) found a huge file (134Mb), changed the extension to .flv - plays back in any media player that includes FLV playback!
Hope you don't mind?
<goes scurrying to look in his cache... B->>
@RPR,
No problem my man. At the end of the day, I'm just trying to add value to your work life :)
OK - so I've been trying to capture a copy using both Firefox and Opera on a work PC running Vista which I'm not familiar with. Can anyone tell me where the cache for Opera or Firefox could be on this machine?
cheers
Bruce
offline version pls
Fanstastic presentation sir...
you should have put your work-out credentials on the screen also :-).
Any luck making an offline version available?
This is by far the best video presentation on JQuery I have seen on the internet; and I have searched far and wide, high and low.
@LBJ,
Thank you very much! That is a great compliment.
Super Good Lessons. Thanks for your time and effort!
@Geoffrey,
Thank man, glad to know its appreciated.
Hi Ben me again. Just watched this for the third time (I have a copy on local). There's a lot to take in (nearly 2 hours) but each viewing makes things clearer.
Was wondering if your presentation material (html/cfm) is available anywhere? The code examples (demos) you show would be good to study in more detail?
It looks as though you've done these materials on some fancy server-side thing, so maybe it's not straight-forward for you to just zip-up and offer as a download?
Sorry Ben, ignore my last (stupid) comment. Yes, there's a link at the top!!
Very impressive, thanks a lot for this fantastic work.
@Axel,
Glad you liked it!
Amazing.
Really opened my eyes to the power of jQuery, and demonstrated the possibilities excellently with good clear easy to understand English.
Thank you Ben.
@Trevor,
Glad you liked it. jQuery is really awesome. I seriously never start a web application project without it! It's as essential as the keyboard in front of me.
I personally use only plain javascript when short scripts are required, but when it get too tedious to write it "pure js" then I use JQuery - fantastic for animations and ajax calls.
Very nice site you have done, have you done all the design by yourself? I'm impressed (wish I had the photoshop skills you have).
@Marko,
Nothing wrong with some plain old Javascript :) Of course, when you include jQuery in every site, the need for it becomes less. Although, even in the callback methods, I still find myself using the THIS object rather than wrapping it in $() every time... depends on what I need to do.
Great video. Added this to http://TUTlist.com
Thanks Ben for doing and sharing this. I am in love with jQuery, it's bad my boyfriend is a jealous type :)
@Anna,
No worries - it just forces him to up the effort to compete ;)
awesome!!
Thanks, nice stuff.
Need I say WOW!
It looks really amazing so far.... I'm trying it out now as we speak... (Fingers Crossed) Also how do you get Adobe ColdFusion Certified? Is it worth it? How much does it cost?
@Jody,
I think the test was like $150 or something. You just have to sign up to take it at a testing center. I can't remember where I found the list of testing locations (they are not Adobe specific - just general testing centers that host it). I think it was worth it because it really got me to look into things I had not previously explored.
Amazing work Ben. Best tutorial i've every watched, took a while to get through but it covered so much. Thanks for sharing your knowledge. Praise be to jQuery!!
Thank you for this! You definitely helped build my knowledge of jQuery (I've only been using it for about a week now); especially to do with the closure stuff you mentioned.
Awesome presentation!!! I've used jQuery before and I loved it right away. But I never got the chance to learn all the possibilities of it. Thanks for the Video and the inspiration.
greez, Timo
PS: I blogged an article about your presentation on my website.
@Timo,
Really glad you liked it!
nice presentation! Is there a way to download this video?
Ben... this is by far the most educational and easy-to-watch jQuery video/tutorial/introduction I've come across. I'm a designer who started to learn dev by necessity a few years ago, and began working in JS just recently, and jQuery very shortly thereafter.
I was already amazed by jQuery's ability to make working in JS faster and easier, just as it's said to be, but your video has really opened my eyes.
Thank you! Not only that, but I plan to spend a lot more time learning new tricks as I continue to scan thru your blog. Thanks Ben, your obvious enthusiasm and excitement for your field not only shows, but is contagious as well. Kudos!
Cheers,
Lelando
@Lelando,
Wow, that's awesome! It's great to hear the perspective from a designer and know that it's making sense. Trust me, the more you play with jQuery, the more you're going to love it.
Excellent presentation. Very laconic and informative. Thanks
Hey I guess the video is down. Is there anyway you can upload to youtube or vimeo or some other service? Greatly appreciated.
@Billy,
The site may have been down for some reason - it seems to work now. It's hosting up on S3 so it should be pretty stable (assuming the video HTML page serves up).
It's not the best streaming - you might need to give it a minute to start depending on your connection.
Ben it is a very nice video. Can you not make it download able to make it maximum good to use.
Ben, I must say that you have done incredible job with this video. I'm new to jQuery and started reading about it today only. Somehow I reached to your blog but believe me I never felt so easy with any new technology as I'm feeling about jQuery now.
I'm not able to locate the download link of your demo application/s which you shown in the video. Can you share that with me? I would probably do some hands-on that.
Thanks,
Rohit
I really appreciate your hard work.And this is an amazing tutorial.Thanks a lot.
@Haansi, @Rohit,
Thanks guys - I'm really glad you liked the video. I don't have a download link directly (I'm relatively new to creating such large videos). If you look at the source of the video page, you can probably just grab the video SRC value from the HTML markup.
@LV,
Thanks!
In slide 6 when you refer to anonymous methods, I think the term is "late binding". This is a fantastic introduction to jQuery though. Thanks for you hard work and expertise, Ben!
@Elliott,
"Anonymous method" was the right term for what that slide was trying to show. Methods that don't have a name are anonymous. The example shown was an onload type of function (specifically, "document ready"). But it could just as easily have been done with a named function:
function myNamedFunc ()
{alert("I have a name!");}
$(myNamedFunction);
That too would have been late binding (execution time binding of an event handler), but it wouldn't have been an anonymous method.
Ben was trying to show the "(function(){something})" syntax. That's what jQuery makes heavy use of, to avoid cluttering up the namespace with function names that would are going to be used only once anyway.
If you really like late binding, even later than Windows DLLs and Unix SOs, check out Objective C. You don't so much call a method as pass a message to it, like Smalltalk. So you can add and remove objects at execution time, as if it were an interpreted language, such as JavaScript. A compiled language with the freedom of an interpreted language! Awesome!
Love this video. I'm doing alot of ajaxy event driven stuff at the moment with jquery, this video is really informative and acts as a really good refresher on the jQuery api as well.
This is as useful (if not more) than the paid for peepcode series on the subject.
Thanks a lot Ben
@Elliott, @Steve,
Oh man, I tried Objective-C for about a week (when curious about iPhone development). All that allocation and deallocation of memory is enough to drive a man insane :) Thank goodness for garbage collecting on the server!
@Steve,
Glad you like it my man. If you have any suggestions on other topics, feel free to drop me a line.
@Ben,
I honestly don't think you need any more praise with regards to your great work with making this video - but i thought i would give you some anyway :)
I am a very recent convert to jQuery, and like you i think I cant go back. The Ajaxy stuff seems way to simple.
Thanks alot dude.
ps.
I wonder what jQuery would be like if implemented for Java itself...
Ben, Thanks a million for posting this.
I finally had time to circle back to combine jquery with ExtJS and your presentation was a huge spring board. I especially appreciate the code demos at: www.bennadel.com/resources/presentations/jquery/
@Richard,
Ha ha, thanks :) I agree, the AJAX stuff in jQuery is just really easy to use. And, what's great is that you can always fall back on the $.ajax() method if you need more control. Glad that you're enjoying the language; I started using it a while back and am still very much in love with it.
@Steven,
Very cool my man. The ExtJS stuff you've demoed in the past looks really awesome. It's great to see that jQuery and ExtJS can be mutually beneficial.
Nice. Is there a downloadable version of the video ? It would make a great reference material.
Awesome presentation, very clear and understandable a great kick start to anyone learning JQuery. Although I have used it for some time I have only touched on the basics, thanks and hope to see other such presentations in the future. Maybe OO Development using JQuery? best practices?
P.S.wish I lived in the US, so little going around on JavaScript and JQuery in the UK in the way of conferences and talks.
in the section 17. jQuery closures, the code
<CODE>
var jThis = $(this)
</CODE>
seems superfluous.
because .each() passes objLink as the second argument to the function.
Other than that, a nice overview.
@Quinton,
Glad you liked it my man. jQuery has come a long way since this - but the basics still hold pretty constant.
@Terrence,
The object passed to the each() callback is the same as "this". However, neither of these is the same as $(this), which is a jQuery collection containing the current DOM element context. In other words, assuming I'm remembering correctly, "this" and "objLink" are both DOM node references, not jQuery references (which would be $(this) or $(objLink)).
... it's been a while, so I might be remembering incorrectly.
Fantastic intro to jQuery! I'm curious if there's a place to get one's hands on the page you used to demonstrate selectors. I think that alone could be a great demo for evangelizing for jQuery in the workplace.
Wow. I couldn't leave without saying that was freaking awesome man. Mad props for you and your time. I'm much more confident to use jQuery now. Cheers from NZ!
@Matthew,
Glad you liked it. This was one of my first presentations... ever. I guess I never got around to making a zip file of the slides. I can do that.
@Mido,
Thanks my man! This is a bit old, but the basics are still the same. Glad this was able to help out.
Sad its not downloadable :(
Fantastic exploration!
This is the most fantastic jQuery video tutorial. This is the video tutorial that made me fell in love with jQuery and JavaScript in general. This is now in top 10 search results on Google! Great Job!
Do you have a plan to do an updated jQuery video. That would be greeeat!
please is there any place i can download the whole folder with one link,like torrent.thanks
I know this is a bit dated, but as I am just able to start using jQuery in my client's CF site recently, I've found this to be helpful. Good job. Thanks Ben!
Thank you for your generosity in sharing this little gem. The time and effort you've put into this are much appreciated.
Thanks guys! Sorry the video is so dated at this point. Maybe one of these days I'll try to create a more up-to-date version!!
Excellent presentation ! I have just started to learn jQuery and done a few video course, yours is by far the best...very easy to follow/understand. You mentioned you may create an updated version soon...please do !