Quick tips from RockingCode.com

1. { jQuery Quick Tips
From @RockingCode
Slides by @roch_br (Rochester Oliveira)
Visit us: RockingCode.Com

2. {*} So, what is this about?
It's pretty cool on how we can do crazy things with a few lines of
jQuery. But sometimes we forget that after those simple statements,
several functions start. Then, my friend, we can see the difference
between ordinary Padawans and Jedi Masters.
Here, we will see a couple of good practices that will help you code
better and better.
Hope you like it, and you’ll find more content like this at
RockingCode.com

3. {1}
Don’t use Javascript.

4. {1} Don’t use javascript.
I know it’s pretty strange hearing this from me (who actually does a
living from this stuff) but yeah, you read it right.
My point is, if you can do it via CSS with a good browser support,
forget about javascript.
Because jQuery's possibilities can seduce us, you have to be smart,
and cut that cool hover blinking & shaking effect.

5. {1} Don’t use javascript.
Fancy effects with CSS, HTML & Images

6. {2}
If you do,
do it unobtrusive.

7. {2} If you do, do it unobtrusive.
Unobtrusive javascript is an art, actually. Basic functionality has to be
done with basic HTML, CSS, & Server-Side scripting. Then all
javascript does, is just comes brighten your work.
If you disable JS and can't do basic stuff (like see link's content), you've
done it wrong, my friend.
Also, you have to keep in mind that your code may not work or even
worse, may work in a way that you didn’t expect, since we have a lot
of parsing differences between real browsers and IE.

8. {2} If you do, do it unobtrusive.
Api.jQuery has live search with js enabled, but works without it well.

9. {3}
Use pure JavaScript.

10. {3} Use pure JavaScript.
I shall remind you now, little Grasshopper, that jQuery is just one way
to implement JS.
It is NOT Javascript itself.
And many times it isn't even the best way to do things. If you are
doing simple things, like getting attributes from an element, you'd
better do ol' JS.
Before learning any jQuery, be a Master of JS art. For real. It’ll be much
easier to do better code when you have raw coding alternatives.

11. {3} Use pure JavaScript.
Google Doodles could easily be done with jQuery, but ol’ JS is way better.

12. {4}
Cache everything
you can!

13. {4} Cache everything you can.
Every time you call the $(element), jQuery will search DOM tree
and see what the element is.
But if your document doesn't change it too often, it'll be way better
if you store your results inside a simple var, so jQuery will do it
only once. All you have to do is call it from that var.
var $body = $(“body”); //starting with $ so I know it’s a jQ object

14. {4} Cache everything you can.
One of your amazing 1WD’s plugins code

15. {5}
Chaining is good for
you.

16. {5} Chaining is good for you
Another good thing you can do for your performance is chaning.
Well, if you execute operations with jQuery objects in different lines
[$elem.op1(); $elem.op2(); ] jQuery will call our dear friend $elem
twice. Even if we are caching it (if you don't, I'll punch you in your
face!), we can group things like this with a cool method called
chaining and have a ultra-better-optimized-golden-plus-plus code.
//bla bla cool stuff here
$elem.addClass(“ohYeah”).fadeIn(400);

17. {6}
Always do readable
code!

18. {6} Always do readable code
After doing a fancy code, a few days pass, and you decide to change
something on it. Well, then you notice that your code looks
more like a new category, “minified production” version, no
comments, no indentation but no compressing also.
When you start doing anything just comment what your basic logic
is. Try to detail some obscure parts and don’t forget that the
TAB key is there for one reason: So, USE IT.

19. {6} Always do readable code
jQuery source (Development version). Pretty cool, huh?

20. {7}
Avoid (too many)
plugins.

21. {7} Avoid (too many) plugins
We have A LOT of cool plugins out there, but many of them are just
useless.
A plugin that does things that you can do with a few lines of code is
dangerous for performance.
They add an extra HTTP request and can potentially mess up things
since you don’t know exactly how things are done with it. Besides,
you may not need that fancy effect that costs you 15kb and 30s in
page rendering.

22. {8}
Don’t forget about
mobile devices.

23. {8} Don’t forget about mobile devices
jQuery mobile is getting more and more power. You have to be ready
for more and more drag & drop instead of hover and clicks.
Also you have to optimize you code for smaller processing power and
smaller screens that are usually found in mobiles.
It's more than just doing responsive things. It's about doing things
thinking on a whole new platform, a whole new modus operandi,
and you must figure out what you can do for the best user
experience.

24. {8} Don’t forget about mobile devices
Wikipedia mobile is really good.
Actually we’ll do a plugin with such functionalitty soon 

25. {9}
Avoid fancy selectors.

26. {9} Avoid fancy selectors
Id’s are the best performers. Anything else, will just cost you
precious time.
Avoid all those non-built-in selectors, like classes, tags, pseudo-
selectors, and everything else. These are bad, bad guys.
Specially if you have total control over HTML (like it’s not
changing every time or even if you’re dealing with dynamically
generated content).

27. { 10 }
Find() what you
need.

28. { 10 } Find() what you need
Sizzle (jQuery selector) does pretty much the same thing as you are used to with
CSS (yeah, Sizzle too), but we have one main difference that you must to
notice: Performance.
Look, since Sizzle works from right to left (yeah, opposite of what you're doing
right now) if you write it this way $(“h1 a”), it will search for every “a”, then
check if it has a “h1” as an ancestor.
As you may notice, that’s really bad for performance since you can have a lot of
a's in your page. So when you need this kind of search, use find() or even
children(). First, you search for ancestor, then start a new search for your
element.
$(“h1”).find(“a”); //get all “h1” and them look for “a” elements

29. That’s all... Thanks for reading!
Slides by @roch_br (Rochester Oliveira)
Visit us: RockingCode.Com