• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Kyle Bradshaw's JQuery Best Practices
 

Kyle Bradshaw's JQuery Best Practices

on

  • 6,255 views

Author :

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

Statistics

Views

Total Views
6,255
Views on SlideShare
5,960
Embed Views
295

Actions

Likes
5
Downloads
94
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

12 of 2 previous next

  • 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 Kyle Bradshaw's JQuery Best Practices Presentation Transcript

    • jQuery
    • 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.
    • 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.
    • 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
    • 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
    • Demo: Rating http://kylebradshaw.com/presentations/jQuery/rating.php
    • 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 }
    • Tips • Start building the degraded version FIRST • Turn off JavaScript while testing • Leverage Plugins • Utilize <noscript> • Inline JS isn’t necessary
    • 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
    • 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”
    • Tools • Firefox • Web Developer Plugin • Firebug • TextMate • Sync http://somedirection.com/?s=agile+development+workflow • MacBook (this is how I roll)
    • 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/
    • About Me • Kyle Bradshaw Front End Web Developer • Blog - http://somedirection.com • AIM - kyledbradshaw • Twitter - @ky