Skip to content

Add a new category for "Common Mistakes and Workarounds" #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajpiano opened this issue Mar 28, 2012 · 3 comments
Open

Add a new category for "Common Mistakes and Workarounds" #98

ajpiano opened this issue Mar 28, 2012 · 3 comments

Comments

@ajpiano
Copy link
Member

ajpiano commented Mar 28, 2012

Too many people are making the exact same mistakes and re-implementing the same anti-patterns. Borrow from fixingthesejquery.com and expand into articles so that these traps are well-documented canonically.

Some things that instantly leap to mind (let's expand this list) are:

  • Injecting malformed HTML in IE (never works)
  • Using HTML strings instead of actual manipulation methods to move things around the DOM (A lot of people who ask for an outerHTML solution need it because they're trying to do $("#bar").append( $("#foo").outerHTML() ) instead of the more practical $("#bar").append( $("#foo").clone() ) (or $("#foo").clone().appendTo("#bar")) (pretending for a second here that dupliateIDs are not a problem)... which leads me to...
  • Duplicate IDs
@addyosmani
Copy link
Member

Some more common mistakes:

  • position() and offset() don't work on hidden elements, but this doesn't seem to be as commonly known as it should
  • Some jQuery methods, whilst looking like they might accept jQuery objects as arguments, will not. e.g contains() only works with DOM nodes. Returns true if you pass it a jQuery object (always will)
  • People often use $('[type=text]') and $(':text') as if they're the exact same when $('<input>').is('[type=text]'); // false and $('<input>').is(':text'); // true
  • eq() doesn't work with a negative index
  • event.stopimmediatepropagation - doesn't work when binding events to elements using .live()
  • Could talk about the misunderstanding between $.each(), $.fn.each() and other lower/higher level methods

There also may be still some relevant content to flesh out from Paul's 2010' anti-patterns talk http://www.slideshare.net/paul.irish/perfcompression

@addyosmani
Copy link
Member

@ajpiano do these need to be anything more than a paragraph or two each or were you thinking of a complete article? With some of these that much content might be a stretch.

Also worth cc'ing in @cowboy in case he has more common mistakes worth adding to the list.

@ajpiano
Copy link
Member Author

ajpiano commented Jul 11, 2012

"Slightly Better Ways To Do Things You Really Shouldn't Do In The First Place" might also be an interesting article. For instance, using $("a:contains(Something)").click(function(e) { e.preventDefault(); }); is a not a great idea, and first the article could explain how doing $("a").filter(fn) would be slightly more performant, but ultimately would really explain why using the inner text of elements to structure your JavaScript application is actually a brittle approach. Basically, the goal here would not be to encourage the "slightly better way," but rather to discourage bad patterns outright.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants