Helping you understand jQuery
Some recent articles have discussed the need for having “really good” tutorials for JavaScript libraries.
As always, we’re working to make the jQuery documentation better and more useful, so I want to pose the following question: What are some tutorials that would help you better use or learn jQuery? Make sure it’s something simple (like “Building a drop-down menu.”) and not something really complex (like “Building a complete shopping cart system”). Feel free to post your suggestions here in the comments, it’ll help to give us a good idea of what people want and what needs better explaining.
We’ve recently started working on the reorganization of the jQuery documentation wiki. Right now it’s quite messy and all over the place. As you can see from the new wiki’s structure, however, is that we’re going for a much more thorough representation of jQuery itself. Within each of these topics we want to include a number of useful “common case” tutorials that will help you to better understand the functions in the jQuery API.
So please: (Taking into account what you see of the new wiki’s structure) What would help you better learn, and use, jQuery?
Hey John,
Personally, I don’t think the Wiki is the way to go. Your online API reference is a much better idea and deserves the attention instead.
There was a website (http://home.cogeco.ca/~ve3ll/jstutor0.htm) labeled “The Best JavaScript Example Page I have Seen Yet!!” on digg a few days ago. I personally like this format as it makes Javascript accessible and fun.
IMO, Because your API page is simple and terse, it actually makes exploring the JQuery methods fun. If someone wants more detailed information, let them drill down for it. I think you should apply the same idea, but just organize it by feature/goal.
Also, I think you should adopt a system where people can submit their own code examples ala PHP documentation. It wouldn’t show up by default, but you could load it up when a person clicks on a “Show User Submitted Code” link.
BTW, I’ve been having a lot of fun with JQuery lately. I’ve written a few extensions lately and I’m looking forward to posting them.
@Steve: Just to clarify, the API documentation isn’t going anywhere. It will continue to be built upon, clarified, and explained. The purpose of the documentation contained in the Wiki is to look at jQuery more in the form of a book. Taking the reader through jQuery step-by-step so that they better understand the different aspects of its design.
In addition to that, we’re shooting to “organize by feature/goal” – which is exactly what these tutorials are about. In the end, there should be three things: A fantastic jQuery cookbook (with tons of tutorials and walkthroughs for common situations), a complete guide to jQuery and all of its details (the documentation wiki), and the API method reference.
Ideally, the cookbook and API will be seamlessly integrated with the rest of the jQuery guide, to create a single resource that can be used as both a reference and as a great learning guide for new users.
you need better docs for plugins. if i am required to read source code for most plugins i would like to use i could write them myself.
there are more plugins doing the same thing. i know it’s hard but you should recommend one and write an article on how to use it.
Hi John,
Your video on the accordeon menu served me well to integrate into my test site that I use for Jquery experimentation. So additional video tutorials would be nice. Several ideas come to my mind:
1 I learn the best from seeing Jquery in action so perhaps you can take an example site which is jquery powered and explain the way it uses jquery. In addition to this perhaps a showcase of sites powered by Jquery would be a nice feature to publish on the wikifrontpage. A little showing off here is good. Who wouldn’t like to mention that http://www.mondediplomatique.fr is now running on Jquery? This serves multiple purposes – to attract potential devotees and to show the working of jquery in realworld examples.
2 In detail As you can see in my test site I play with the history plugin to inject remote files into the index file. Can you show how to apply effects on these remote files?
3 I like to know how to combine Jquery with serverside scripting, particularly RoR. Could you set up a tuturial to built a dynamic site combining both? I understand this is quite broad for a tutorial so maye it could have several episodes.
Geert
Hey John and everyone,
I wanted to throw my 2 cents in. First off, jQuery is my library of choice, and I’m thrilled its direction and the community effort behind it. I have a couple thoughts about how jQuery is presented in general, and I’ll share them in (somewhat) random order below:
1. All the pieces (SVN, trac, blog, site, api, etc) seem to be there, but I really feel like they are spread out all over the place. It’s tough to sit down and grasp exactly what jQuery is and does by just looking at jQuery.com. I love what they have going on at http://www.rubyonrails.com–a beautiful, clear front to a wealth of information.
2. I know this post wasn’t about jQuery.com, but I think that this is the key to getting people on board with it. I really have trouble using it especially because of the global navigation on the bottom. I’d wager than a ton of people never make it to those links in the first place. I loved the last iteration of the site when the options were at the top–and it seemed a lot simpler, too.
3. Re: documentation, I love the new Wiki. It seems like that could really be a great source of information. I love the idea of having cookbooks, too. I wanted to throw this link in here, the django book: http://www.djangobook.com/en/beta/ (that’s one awesome piece of documentation). Because there are so many people willing to contribute to the documentation, I love the wiki format versus the django book–but I thought that was just such a cool doc site.
4. Like I said, all the pieces are there–but they seem to be a little spread out. My personal preference (and again, this isn’t a shot at the amazing effort everyone puts in) would be to streamline jQuery.com, add a little bit of branding and design, and make it an umbrella for the main “pieces”.
5. With that said, I realize that jQuery.com already *is* an umbrella :) But I guess it just doesn’t feel like it because there is soooo much going on.
John, I love the project. I really want to see it go places. Thanks for the opportunity to sound off.
Steve O
John, I think it would be valuable to have a place for people to share “cookbook” type code. Good solid code examples like your zebra striping or Jörn’s simple example of adding a global loading indicator for all ajax requests are very useful and proves jQuery’s power. Whenever I post code on the mailing list, someone always responds with a better way to do it (you included). So, I think it would be valuable to have a library of useful cookbook examples for simple everyday stuff (not big and complex problems). This should also probably be moderated or there should at least be a way for people to improve code that’s been submitted. That’s my 2 cents.
@Steve O: The web site is definitely being worked on. I’m going to have another post on this soon (but there’s a 5 man team working on it! don’t worry!)
@Rich: That’s exactly what I’m looking for! Do you have any ideas as what would make for some good easy tutorials/screencasts? This way we can crank a couple out every week, keeping everyone up to date. (I mean, I have a couple planned right now – but I’m just curious as to what interests everyone else.)
FWIW, I’d like to see some screencast tutorials for some of the plugins out there, especially the interface stuff. Another thing that would be interesting would be some sort of tutorial on the core Ajax stuff; I realize it takes a bit of doing because there has to be some sort of back end (PHP or whatever), but the API to the Ajax stuff has been in flux a bit, so it would be nice to see some walkthroughs.
I’ve actually gotten Ajax stuff to work before, I’m just curious to see if I’m using it in the “right” or most efficient way.
Hey John, cheers for doing this!
In terms of jQuery what annoyed me the most was that I couldn’t find any _offline_ documentation. If I have overseen it, then I am to blame, but one of the really cool thing about JavaScript is that it does not need http (unless you do some Ajax stuff) and I can work on it offline.
So it’d be good if you could offer the docs in a printable and downloadable format. I know this brings up the issue of documentation getting out of date, but I am sure that it would help a LOT of people.
I’d like to see more tutorials / examples about the power of the chainability of jQuery. I think my jQuery-code can still use much improvement for optimalization.
Also a cookbook would be ideal where users can show tiny snippets of their code, and share them with others.
Greetings All,
I believe all the examples and tutorials need cross-references to the great API documentation. Currently things (examples vs. API documentation) feel like separate silos.
The examples and API should also extend the philosophy of “Find things, do stuff.†For example, for each API entry, should indicate if it is about finding things, or doing stuff.
Also, I think an expanded section on anonymous functions and using function handles would help the community as a whole.
Keep up the great work.
I agree with Giel(#10). More on chainability would be great for those of us who just aren’t sure we’re doing things the right/best way.
I also agree with Steve O(#5). Simplicity of jQuery.com is key to it’s mainstream success. jQuery itself is simpler and just as powerful as other libraries and I think the site needs to reflect that simplicity, power and depth.
And lastly I second Patrick’s comments(#8). Ajax is all the rage now but we need clear, concise tutorials on how to take full advantage of it in jQuery while also showing how to use it responsibly. And it would be pretty darn cool to show the server-side portion of the Ajax too. And when doing a tutorial do it from beginning to end and give live examples for dissection. I think doing short fragments of tutorials makes it more confusing.
I’m glad your gonna pull all the loose ends and creating a nice tight resource for jQuery. Can’t wait to see it done.
Pingback: 15 Days Of jQuery : jQuery Tutorial Ideas Wanted
As someone who is very new to website creating and rapidly having to learn as I go, I rely on all the documentation/tutorials/howto’s I can find. I’ve been very impressed/relieved by the relative ease of learning jQuery, particularly due the excellent API docs and some good tutorials (the 15daysofjquery.com has been v. good).
I’d like to see:
Cross referencing of tutorials/more examples in the API docs (as Shawn mentions)
More tutorials on the AJAX functions, especially with ref to the server-side (as mentioned in a few comments above).
Video tutorials are very useful.
Better plugin documentation – generally is good on the specific plugin’s website, but would be great to have it on the wiki.
Looking forward to even better documentation, and I second Josh’s comments to pulling loose ends together and creating a tight resource.
Oh yeah, I thought I would mention, I really love the wiki organization. Great stuff :)
The more I think about it, the more I realize that the best way I learn is by seeing real-world, well-commented, working examples of common things. Cookbook stuff. Like “How do I save a form via Ajax and hide the form after the save, show a spinner, and flash an “OK” message when I’m done?” Or… how do I make a dropdown menu? Or what’s the best way to handle XYZ. That’s why I love the wiki idea, because a cookbook can fit very well into that, and anyone can edit it.
– a star ranking tutorial that updates the amount of star votes on the backend via ajax. I’ve seen these all over and use them but havent seen a jquery one.
– when a user pushes the back button on a browser, preserving previous states of elements changed via DOM manipulation (jquery) — for example if a user opens a div on page A then moves to the page B, then clicks the back button to go back to page A – the div is then closed again (ugh I think thats the experience I was noticing the other day … it was a bit of an annoyance)
– more tutorials on accessing DOM elements via xpath
– in-place editing example
– counting words types into a text box example
– example of an event that fires an AJAX request and the response then kicks open a modal dialoge box for the users to respond and based on the response another event is triggers (reads a lot more difficult than it is I think)
– maybe more plugin example…just like .net has “controls” maybe we could see more of a jquery controls idea which I guess is the plugin.
— just a few ideas.
@kevin: That’s perfect – just what I needed! That’ll give us plenty of fodder to start working on new blog posts/screencasts/tutorials. Thanks!
John,
no probs. thank you for jquery!
another possible suggestion actually; i don’t know how I forgot this one:
– file upload ajax style (multiple file upload?)
That would be huge. And screencast? yummy!
Most tutorials are limited by the fact they generally only illustrate one way of doing something. I’d like to see a selector tutorial that demonstrated the numerous ways to select the same (or similar) pattern of elements in a given chunk of HTML. Perhaps with a few pointers to which might be the most appropriate in given circumstances.
Like others said above, I’d like to see more tutorials for plugins. I’m talking step by step starting-at-the-basics tutorials, as opposed to “here’s a giant test page that demonstrates every aspect of this plugin, and you need to then figure out what little pieces you need”. Specifically I’ve been having problems figuring out the form plugin. For those of us who learn by following basic tutorials and then building on piece by piece, things like that would be great.
Another idea, and this comes from your mailing list, is a tutorials for adding dom elements (ex A TR or DIV, whatever) to a grid like structure.
So, for example, if you have a basic TODO list application. Initially you could have one row, and a “add another” beneath it. Clicking the “add another” insert a structure with the input fields, with a naming convention that will make it simple to iterate through the results when posted.
This cat can be skinned a hundred ways, but I figured you guys would know best :P
I will second Ollie’s request for a comprehensive selector tutorial. When I was trying to grok this it seemed like all the API examples were using $(“p”) or similar, which doesn’t really demonstrate the specificity that you need to do real work.
I see many examples and tutorials that show brief snippets of code, but for the beginner trying to figure out “where everything goes” the small 2 or 3 lines of code wont help them. Maybe a “full code” version of each tutorial would be in order.
Thanks for the question. And a big respect for a great tool.
There are few things that can help new people dive into the library and will help them to write better scripts:
– When you were designing the library you kept in mind the way each API methods could be useful in development. In this case would be great to have comments from you (or from somebody from the team) on the way what is particular function could be used on best way. For example we can make AJAX request in JQ a many ways (.get – .post – .load – .ajax) – but seems like every method is designed for some specific purposes. For newbies like me would be great to have written somewhere a list of CASES and short EXAMPLES like: to retrieve hash or table data of medium size (like schedule of something or list of names with addresses) is good to use function(****); for hevy request use ****; for extreamly critical requests with post-processing use *****; for continuous retriving JSON use ***.
– could be great to have some advises (or links to external sites) on the suitable way of writing javascript with JQuery. It is so the documentation on the library itself but more on the WAYS of writing the code.
– also could be great to have a comfortable way to read discussion list: all links in RSS open jquery.com/discuss…. where I can’t follow the discussion. But in http://www.nabble.com/JQuery-f15494.html forum I can also check the whole tread of discussion – it is more comfortable!
Thanks and all the best in good project!
I’d like to see some more advanced tutorials on using the Interface Sortable plugin.