• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Let jQuery Rock Your World
 

Let jQuery Rock Your World

on

  • 2,941 views

Slides from the presentation given at Future of Web Design 2012 in London, 14th-16th May. ...

Slides from the presentation given at Future of Web Design 2012 in London, 14th-16th May.

Session description:

"Are you new to jQuery? Maybe you’ve been using it for a while? Regardless of your skillset or previous experience, join Matt Gifford, developer, author, speaker and lover of jQuery, as he reviews why you should be using it, how not to use it, and some vital tips to assist your jQuery development as well as some common pitfalls to watch out for."

Statistics

Views

Total Views
2,941
Views on SlideShare
2,807
Embed Views
134

Actions

Likes
7
Downloads
0
Comments
2

5 Embeds 134

http://lanyrd.com 117
http://collection.flowkr.com 7
https://twimg0-a.akamaihd.net 4
http://us-w1.rockmelt.com 3
http://www.linkedin.com 3

Accessibility

Categories

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…
  • Hi Matt,

    Great slides, but I don't understand why you don't allow download.
    I saw you at FOWD 2012 in London and got the link to the video of your presentation.
    Now I am going to have to make screenshots of your slides (like everybody else will probably do).
    I don't understand the difference?
    So my friendly advice: Please allow download.

    Kind Regards,
    Ivan.
    Are you sure you want to
    Your message goes here
    Processing…
  • nice slides
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Let jQuery Rock Your World Let jQuery Rock Your World Presentation Transcript

    • Matt Gifford@coldfumonkehwww.mattgifford.co.uk
    • I build stuffand I write about building stuff, too
    • rocks my world
    • Today is just another dayToday I’m going to create something amazing
    • PIONEERS &INSPIRATION
    • http://www.flickr.com/photos/lukasvermeer/3807984599/
    • How Easy...?
    • This Easy!$(document).ready(function() { /* Write your kick ass code here */});
    • http://www.flickr.com/photos/spierisf/4258461086/
    • docs.jquery.com
    • Plugins
    • (function( $ ) { $.fn.myPlugin = function() { /* Fill your boots with custom plugin code */ };})( jQuery );
    • http://www.flickr.com/photos/jonhoward/5715290367/lightbox/
    • http://www.flickr.com/photos/mrpbps/2678732649/
    • http://www.flickr.com/photos/mrpbps/2678732649/
    • http://www.kylebean.co.uk
    • DOM Manipulation Good... var  myList  =  $(#list);     var  myListItems  =  <ul>;         for  (i  =  0;  i  <  1000;  i++)  {            myListItems.append(<li>Item  number    +  i  +  </li>);     } myListItems  +=  </ul>;     myList.html(myListItems);   Better... var  myList  =  $(#list);     var  myListItems  =  <ul>;         for  (i  =  0;  i  <  1000;  i++)  {            myListItems  +=  <li>Item  number    +  i  +  </li>;     } myListItems  +=  </ul>;     myList.html(myListItems);  
    • Class Selectors
    • Think ʻHardboiledʼhttp://hardboiledwebdesign.com/
    • Class Selectors Good... $(".className") Better... $("div.className") or... $(".className",  "#myDiv")
    • Animation http://www.flickr.com/photos/waltimo/3816059877/
    • $(#button).click(function() { $(#myElement).animate({ opacity: 0.75, left: 50, }, 2000, function() { // Animation complete });}); http://www.flickr.com/photos/waltimo/3816059877/
    • http://www.flickr.com/photos/waltimo/3816059877/
    • Text http://www.flickr.com/photos/druclimb/879511557/
    • Look! Moving things here... yay!Content down here
    • Core Mode http://www.flickr.com/photos/xtnsgo/5934924558/
    • Core Mode jQuery... $(HTML).addClass(JS);     CSS... .JS  #myDiv{display:none;}  
    • It’s all about... timing
    • MAKE IT FAST http://www.flickr.com/photos/ujh/4307773392/
    • http://www.flickr.com/photos/alancleaver/2661425133/
    • http://code.jquery.com/jquery-latest.jshttp://code.jquery.com/jquery-latest.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
    • CACHEEVERYTHING
    • Cache Variables Good... $(#item).css(color,  #ffff00);     $(#item).html(monkeh  lovin  is  good  lovin);     $(#item).css(background-­‐color,  #ffffff);   Better... var  item  =  $(#item);            item.css(color,  #ffff00);            item.html(monkeh  lovin  is  good  lovin);            item.css(background-­‐color,  #ffffff);  
    • http://www.flickr.com/photos/chrisjames_taylor/5644434680/
    • Chaining From this... var  item  =  $(#item);            item.css(color,  #ffff00);            item.html(monkeh  lovin  is  good  lovin);            item.css(background-­‐color,  #ffffff);   To this... var  item  =  $(#item); item.css(color,  #ffff00) .html(monkeh  lovin  is  good  lovin) .css(background-­‐color,  #ffffff);  
    • Good things stillcome in smallpackages http://www.flickr.com/photos/thunderchild5/6201699610/
    • http://www.flickr.com/photos/franzlife/820495364/
    • What would we do without... Opera DragonFly Firebug / FireQuery Chrome Developer Tools Companion JS
    • TESTING
    • http://gnoack.wordpress.com/category/unit-tests/
    • Unit Testing QUnit JSUnit FireUnit
    • Beautiful Code - Style Guides Idiomatic.js jQuery Core Style Guide Google Javascript Style Guide
    • CHEATING is ok
    • rocks my worldmaybe it can rock your world too
    • You’re ALLINSPIONEERS
    • Today is just another dayToday I’m going to create something amazing (again)
    • http://www.flickr.com/photos/spierisf/4258461086/