Intro to jQuery: Learn jQuery with Street Fighter and Hadoukens

http://www.thinkful.com/learn/intro-to-jquery

by carlsednaoui • 13 years ago

35 31 13 years ago

thinkful.com

t3hprofit2• 13 years ago

while it's a bit of a face dive into jQuery, this is amazing.

carlsednaoui12• 13 years ago

Author here, glad you enjoyed it :)

Definitely let me know if you have any feedback or suggestions.

tachion2• 13 years ago

Hey, on Chrome 32.0.1700.19 beta this:

Use the keyboard shortcut Command: Option + J (Mac)

doesnt work, as the shortcut seems to be Option + Alt + J.

1337biz• 13 years ago

Thank you! If I can make one suggestion it would be to add somewhat at the end a demo of the final project. The first thing I do with tutorials is always to scroll to the end and see what I am going to end up with.

carlsednaoui12• 13 years ago

Thanks for the suggestion 1337biz. If you scroll down to "Your First jQuery Project" you should see the example we're creating in the guide. Let me know if there's anything else.

jenius• 13 years ago

+1 for the share button up top (https://github.com/carrot/share-button) - but adjust that hover color to blue or grey!

</shameless plug>

carlsednaoui12• 13 years ago

hahaha, thanks Jeff, I'll change that on the next revision ;)

tsumnia3• 13 years ago

Nice! I actually used a horrible version of Street Fighter for my Intro to Programming course. We were learning conditionals, so I thought, "Why not teach them character selection and Event listeners?" A little confusing, but kept everyone interested.

carlsednaoui12• 13 years ago

That's really interesting. Mind sharing a link to it (if you have one)? Would love to check it out.

tsumnia3• 13 years ago

No link, but I'll clean it up and email you a copy.

Its hideous, the gif's animation continues to repeat itself because the steps to play a gif once in VB is way too complicated. However, we built an onscreen gamepad so clicking left and right moved the character. It uses 3 BG stages and 3 characters (Ryu, Guile, and Chun-Li). I'll also include a link to where I got the gif's and sound effects.

hodgesmr2• 13 years ago

While I applaud the time the author took to write this, isn't the message a bit misguided? Wouldn't it be more useful to encourage people to "Learn JavaScript and how to read an API"?

carlsednaoui12• 13 years ago

Hi hodgesmr, author here. Could you expand a bit more on your comment, would love to hear your suggestions.

hodgesmr2• 13 years ago

I think the tutorial is nice and does a good job demonstrating the power that jQuery offers over plain old JS. But if a newcomer to web dev came across this, it seems to not relay the point of what jQuery is: a JavaScript library. IMO, "learning jQuery" is a rather abstract concept and in the grand scheme, developers would be better off spending time with plain old JavaScript and making themselves familiar with how to read the jQuery API. I know this sounds rather "RTFM" of me, but that's not quite what I'm going for.

Good job on the tutorial. But I hope new-comers will look for JavaScript references for future education.

Cederfjard• 13 years ago

I'm not able to scroll down the page on my iPad - it doesn't seem to hang, I just can't scroll. Any idea why?

Will definitely check it out when I'm on my laptop, seems cool!

carlsednaoui12• 13 years ago

Hi Cederfjard, author here, the guide won't work on iPad (or mobile devices) :(

Let me know if you have any problems looking at it from your computer.

sparkygoblue• 13 years ago

Consider caching your element selectors like this:

var $image = $('#my-div img');

This way jQuery doesn't have to traverse the DOM more than once to select the element.

Also, I believe you can do all of your mousedown() event code in one block.

Edit: oops, upon further inspection, I see you are doing this all in the console. Caching the selector is still possible, but now I understand why you did the mousedown() event the way you did.

carlsednaoui12• 13 years ago

Hi sparkygoblue, author here, thanks for the feedback! As you mentioned in your edit, I tried to break every step into simple-to-follow pieces.

Def let me know if you have any other suggestions :)

alevans4• 13 years ago

What is the purpose of the opacity fade at the bottom? Stylistic? I'd really rather be able to see everything clearly. Looks like there is some good content otherwise.

MWil• 13 years ago

I agree. It's more distracting than it is helpful, perhaps even just allowing more to be visible at a time.

adsr2• 13 years ago

Just wanted to mention that this console is available in Safari as well, presumably a consequence of webkit.

carlsednaoui12• 13 years ago

Thanks, author here, the reason I mention to use Chrome is to make sure the screenshots on the guide match what the user sees on their screen.

adsr2• 13 years ago

Ok I see, makes sense. Anyway, nice hands on tutorial, I like it. :) Thanks

libria• 13 years ago

Really neat and approachable tutorial with clear goals. Effective instruction is difficult, so good work!

carlsednaoui12• 13 years ago

Author here, thanks so much!

nopeavi• 13 years ago

Enjoyable read, but that share button was annoyingly as all hell. Easy enough to delete, though, as we were already in the web inspector.

Intro to jQuery: Learn jQuery with Street Fighter and Hadoukens

Related Stories