6 ms·
Intro to jQuery: Learn jQuery with Street Fighter and Hadoukens
- Cederfjard 13y agoI'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!
- carlsednaoui 13y agoHi 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.
- t3hprofit 13y agowhile it's a bit of a face dive into jQuery, this is amazing.
- carlsednaoui 13y agoAuthor here, glad you enjoyed it :) Definitely let me know if you have any feedback or suggestions.
- tachion 13y agoHey, 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.
- carlsednaoui 13y agoDoh! Didn't know they changed it. Thanks for the heads up! Did the menu access change? Or is it still View > Developer > JavaScript Console.
- tachion 13y agoNope, that one worked, and this is how I figured out the proper shortcut ;)
- t3hprofit 13y agocmd + option + i always worked for me on mac. never tried J.
- 1337biz 13y agoThank 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.
- carlsednaoui 13y agoThanks 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 13y ago+1 for the share button up top (https://github.com/carrot/share-button https://github.com/carrot/share-button) - but adjust that hover color to blue or grey! </shameless plug>
- carlsednaoui 13y agohahaha, thanks Jeff, I'll change that on the next revision ;)
- tsumnia 13y agoNice! 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.
- carlsednaoui 13y agoThat's really interesting. Mind sharing a link to it (if you have one)? Would love to check it out.
- tsumnia 13y agoNo 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.
- carlsednaoui 13y agoAwesome, looking forward to it!
- tsumnia 13y agoSince I figured someone else might like to use it, I added some comments and uploaded a copy to GitHub. Here you go: https://github.com/tsumnia/Visual-Basic-Street-Fighter https://github.com/tsumnia/Visual-Basic-Street-Fighter
- carlsednaoui 13y agoAwesome, thank you! Will check it out when I get home tonight.
- hodgesmr 13y agoWhile 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"?
- carlsednaoui 13y agoHi hodgesmr, author here. Could you expand a bit more on your comment, would love to hear your suggestions.
- hodgesmr 13y agoI 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.
- sparkygoblue 13y agoConsider 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.
- carlsednaoui 13y agoHi 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 13y agoWhat 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 13y agoI agree. It's more distracting than it is helpful, perhaps even just allowing more to be visible at a time.
- adsr 13y agoJust wanted to mention that this console is available in Safari as well, presumably a consequence of webkit.
- carlsednaoui 13y agoThanks, 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.
- adsr 13y agoOk I see, makes sense. Anyway, nice hands on tutorial, I like it. :) Thanks
- libria 13y agoReally neat and approachable tutorial with clear goals. Effective instruction is difficult, so good work!
- carlsednaoui 13y agoAuthor here, thanks so much!
- nopeavi 13y agoEnjoyable read, but that share button was annoyingly as all hell. Easy enough to delete, though, as we were already in the web inspector.