November 25, 2008

Last night I had the opportunity to speak at the Web Tech November Meetup in Baltimore about jQuery. I focused mainly on traversing since I believe once you fully grasp some of the built in jQuery traversing methods you can do just about anything using jQuery and do it easily.

Preparations

I spent about three weeks getting this presentation together with the hopes that everything I talked about would be self-explanatory. For the most part it was, there was some items that I should have wrote differently as to not make it look complicated. Over all I think most of the items just flowed well.

My preparations went something like this, first I went through most of the code I had written over the past two months. As I went through the code I made a tally of what traversing methods where used and how often. I was suprise to see that I used .eq() quite often, guess I am glad jQuery brought that back quickly after the move to the .slice() method back at 1.1.4. The others that ranked pretty high were .is(), .hasClass() and .not().

Since that list is pretty small I decided to go through some of the “help” emails, IMs and twitter messages I have gotten over the past couple of months and although I took some more complex routes with the answers I provided, after looking at them again they could have been accomplished better by using some of the family methods. Yes, I am coining a new phrase for a group of methods. Those methods are .children(), .parent(), .parents(), .siblings(), and the cousins .next() and .prev(). I also through in .end() since this can be a very useful method and helps the chaining a bunch of calls together.

I know that I am much better presentor when i present on the fly with minimum talking points, so actually creating a slideshow and talking off of that slide show was going to very hard for me. After many, many edits to my talking points that I had written down and desided to put pen to paper or mouse pointer to web browser. I signed up for an account with 280slides, started making my slide. Although the app does not offer the same flexiblity or features that a desktop app would provide, it was pretty damned close. My hat goes off to the developers of that app, it is quite nice.

After some time, about two weeks, I finally got the presentation done the day before I was to present. I went to the slides over and over again and noted what points I should make what points were less important and depending on how well the presentation was going, I would expand on those talking points.

The Presentation

The meetup did not have a big turn out so the nervousness I had before hand disapated enough for me to get in to my zone. I started off by introducing myself and did my best to keep away from any self depricating statements that I am so very skilled at. Told the group what I would be focusing on, Selecting, Caching, Traversing, and we were on our way.

The group consisted of a few JavaScript rookies and JavaScript novices but for the most part, everyone knew CSS. So for selectors, I focused on if you know CSS then you know how to select DOM elements in jQuery. It really is that simple. I explained the Hierarchy Selectors since a good majority of people I’ve helped over the years don’t fully grasp them. The main ones are the prev + next and prev ~ siblings selectors since if you don’t see it is use, you can’t really grasp the purpose of them. I also showed the built in Custom Selectors but did not go into detail with them.

Caching was pretty straight forward so there was not much explanation needed for that.

Finally I jumped in to Traversing, focusing the methods I mentioned above. The .is(), .hasClass() and .not() methods were pretty easy to explain, but for the family methods I actually had to show a family, my family. I created a family tree for the group to better demonstrate .children(), .parent(), .parents(), .siblings(). I think it went over pretty well, I think for ease, I will put this grab in between each of the family method slides. Moving back and forth between slides was a bit time consuming.

Explaining the .next() and .prev() methods was pretty easy and straight forward, there were some questions, but mainly because I was using a bad term, can’t remember what it was now.

To demonstrate .end(), I pulled up a few pieces of code from projects that I’ve been working on and explained what each line was doing, much like what I did for the “Slide in tab” post I did a few weeks back.

The Close

There really was not a ton of questions thrown my way, that could mean that I did an excellent job of explaining myself or it means people were totally confused and felt I could not help them. For the questions that were asked, I was able to answer them pretty easily.

My thoughts

There are obviously a few things I feel I need to work on and will try to do so. I want to do some more talks, maybe focusing on the same topic at first till I feel that one is working the way I want and then maybe move on to more complicated jQuery topics.

The slide show I used for my presentation is below, feel free to have a look at it and let me know your thoughts. As soon as slideshare is done processing it I will post the slideshare link here, till then feel free to check out the presentation via 280slides.