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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Kyle Bradshaw's JQuery Best Practices

4,401

Published on

Author : …

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

Published in: Education, Technology, Business
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,401
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
97
Comments
2
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×