Kyle Bradshaw's JQuery Best Practices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Kyle Bradshaw's JQuery Best Practices

on

  • 6,436 views

Author :

Author :
• Kyle Bradshaw
Front End Web Developer
• Blog - http://somedirection.com
• AIM - kyledbradshaw
• Twitter - @ky

Statistics

Views

Total Views
6,436
Views on SlideShare
6,141
Embed Views
295

Actions

Likes
5
Downloads
96
Comments
2

10 Embeds 295

http://supriya-surve.blogspot.com 89
http://supriya-surve.blogspot.in 80
http://tayyar-code.blogspot.com 78
http://www.slideshare.net 22
http://feeds.feedburner.com 12
http://www.supriyasurve.com 7
http://hasan.posterous.com 4
http://supriya-surve.blogspot.mx 1
http://www.blogadda.com 1
http://tayyar-code.blogspot.com.tr 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Kyle Bradshaw's JQuery Best Practices Presentation Transcript

  • 1. jQuery
  • 2. What is jQuery? • jQuery is a JavaScript Framework • jQuery takes away the pain • jQuery is a designers best friend • jQuery is designed to change the way that you write JavaScript.
  • 3. jQuery Simplifies • CSS Selectors $(“a”).css(“color”,”red”); • Chainable $(“a”).css(“background-color”,”green”).click(function(){ return confirm(“Are you sure?”); }); • Web 2.0 Effects • Easily Extensible • Enhanced Browser Support.
  • 4. Separation • CSS - Presentation from markup. • jQuery - Behavior from markup. • *Degradation* (but do so gracefully) • No more <a onclick=”doSomething()” href=” ... • Cleaner, Easier to manage code
  • 5. Why I love it • Immediately productive • Excellent documentation http://docs.jquery.com • Simple Syntax Prototype: new Ajax.Updater('placeholder', url, { method: 'get', parameters: par }); jQuery: $('#placeholder').load(url + par); • Active Community • Less is More
  • 6. Demo: Rating http://kylebradshaw.com/presentations/jQuery/rating.php
  • 7. Tips • Speed + Efficiency (jrules.js) http://somedirection.com/2008/03/14/structuring-jquery- for-speed-and-efficiency/ • <body id=”home”> • if ($("body#home").size()) { // only applies rules on the homepage }
  • 8. Tips • Start building the degraded version FIRST • Turn off JavaScript while testing • Leverage Plugins • Utilize <noscript> • Inline JS isn’t necessary
  • 9. Demo: Comments • Toggle-able Items? - Degrade Show/Hide with CSS .toggle_me (display:none;) Enhance with jQuery $(".toggle_me").show(); $(".hide_me").hide(); • Ex. Comment Form http://kylebradshaw.com/presentations/jQuery/comments.php
  • 10. Avoid • Never use jQuery inline these practices do not degrade with JS turned OFF • http://reboot.com <a id="showAndHideComments" href="javascript:toggleVisibility('toggle');"> • http://rightsagent.com <img onclick="return ra.popups.showPopup('register', 'txtNewUserEmail');" style="cursor: pointer;" src="/ media/images/Register.gif"/> • Building HTML in JavaScript • Ignoring Degradation - “With great power comes great responsibility”
  • 11. Tools • Firefox • Web Developer Plugin • Firebug • TextMate • Sync http://somedirection.com/?s=agile+development+workflow • MacBook (this is how I roll)
  • 12. Plugins • jQuery Form Plugin http://malsup.com/jquery/form/ • Thickbox Plugin http://jquery.com/demo/thickbox/ • jQuery Validation Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/ • Live Query Plugin http://brandonaaron.net/docs/livequery/ • jQuery UI Plugins http://ui.jquery.com/
  • 13. About Me • Kyle Bradshaw Front End Web Developer • Blog - http://somedirection.com • AIM - kyledbradshaw • Twitter - @ky