Back to the Basics

Part 2

last meeting we covered...

  • selectors
  • manipulation
  • ajax

Tonight we talk about...

  • css
  • effects
  • utilities
  • contributing

Bootstrap Your Site

with Yeoman we'll quickly setup a new website
Yeoman.io
	
	$ mkdir mywebsite
	$ cd mywebsite
	$ yeoman init quickstart
	
			                    
now we have
jQuery + Modernizr + HTML5 boiler plate
Bootstrap

:)

Where are the demos?

here


CSS

.css()
change one property
http://jsbin.com/urevor/1/edit
	
	$("#foo").css("border", "3px dotted orange")
	
			        

change more than one style
http://jsbin.com/urevor/2/edit

	
	$("#foo").css({
	   "border" : "3px dotted orange",
	   "opacity": ".5",
	   property : value
	   ...
	});
	
			        
Adding Classes
	
	$("div").addClass("foo");

	// multiple classes
	$("div").addClass("foo bar");
	
			    
Removing Classes
	
	$("div").removeClass("foo");

	// multiple classes
	$("div").removeClass("foo bar");
	
						

http://jsbin.com/urevor/5/edit

Use a function to remove a class ...


http://jsbin.com/urevor/4/edit
	
  $("div").removeClass(function() {
  	return $(this).prev().attr('class');
  });
	
			        

or remove all classes ...

	
	$("div").removeClass();
	
			    

http://jsbin.com/urevor/6/edit


EFFECTS


  • Based on duration (not frames)
  • CSS3 vs JS animation
  • easing "swing" or "linear"
  • hide/show
  • fadein/out
  • slide up/down
  • toggle

hide/show

http://api.jquery.com/category/effects/basics/
	
	$("div").hide();

	// restores el to original value
	// ex: display:'inline-block'
	$("div").show("fast");

	$("div").toggle()
	
			        

http://jsbin.com/urevor/8/edit

fade

http://api.jquery.com/category/effects/fading/
	
	$("div").fadeIn("slow");
	$("div").fadeOut("fast");
	$("div").fadeTo(2000, 0.5);
	
			        

http://jsbin.com/urevor/9/edit

slide

http://api.jquery.com/category/effects/sliding/
			            
	$("div").slideUp("slow");
	$("div").slideDown("fast");
	
			        

beware of padding pop!


Greg will talk about this later...

stop();

prevent animation from 
continuously firing, watch... 

jQuery look: Tim Van Damme


	$("div").hover(function(){
		$(this).slideDown();
	}, function(){
		$(this).stop().slideUp();
	})
	

http://jsbin.com/urevor/16/edit

Chaining Animation

each animation will run until it completes
then the next will start
	
	$("div").slideDown().fadeOut();
	
			

http://jsbin.com/urevor/17/edit

animate

http://api.jquery.com/animate/

*All animated properties should be animated to a 
single numeric value

			            
	$("div").animate({
	   "left"     : "+=100px",
	   "height"   : "-=50px",
	   "font-size": "60px"
	} , 2000);
	
			        

http://jsbin.com/urevor/10/edit

if position is set to "static" (the default) animating top, bottom, left and right will have no effect.

animate color with the jQuery-color plugin


http://jsbin.com/urevor/15/edit

CSS3 with jQuery fallback

Test for CSS3 support


"webkitTransition" in document.documentElement.style
	
						
better yet just use Modernizr

	if (Modernizr.csstransitions){
		// CSS3
		$('div').addClass('myTransition');
	} else {
		// jQuery fallback
		$('div').animate( ... );
	}
	

http://jsbin.com/urevor/18/edit
Modernizr + YepNope.js to conditionaly load CSS3 animation with jQuery fallback

	Modernizr.load({
	  test: Modernizr.csstransitions,
	  yep : 'animate-with-css.js',
	  nope: 'animate-with-jquery.js',
	  complete: function(){
	    // initialize the animation
	  }
	});
	

callbacks vs. deferreds



Greg Franko

Github: gfranko

Twitter: gregfranko

Callbacks

You can pass a callback function as a parameter to the jQuery animate() method.
					
$(".example").animate({
         
	opacity: 1.0
  
}, 4000, function() {
    
	// Animation complete
	console.log("One of the example animations completed");
  
});
					
					

Deferreds

jQuery Deferred Objects are super helpful for writing maintainable code when dealing with async code (ie. ajax, animations, etc), without resorting to callback hell.
jsbin example
					
// Wait method that waits x number of seconds to return
function wait(secs) {
	
	var deferred = new $.Deferred();

	setTimeout(function() {

		deferred.resolve("Finished!");

	}, secs * 1000);

	return deferred;

}

// Tells the wait method to wait 3 seconds
wait(3).done(function(msg) {
      
	console.log(msg);
      
});
					
					

Deferreds and Animations

Deferred/promises fire when a targeted element(s) have completed all animations
					
$(".example").animate({
         
	opacity: 1.0
  
}, 4000);

$(".example").promise().done(function() {
        
	// All animations have completed
	console.log("All of my the animations are complete");
        
});
					
					

Animation Differences

  • Callbacks will be called each time a single animation completes.
  • Deferred/promises fires when all elements have completed the animation

jsbin example

jQuery plugin example

jQuery Utility Functions

  • $.extend()
  • $.data()
  • $.map()
  • $.grep()

$.extend()

Merges the contents of two or more objects together into the first object.
jsbin example
					
var greg1 = {
	name: "Greg Franko",    
	occupation: "JavaScript Engineer",
	interests: {
		"sports": "Golf, Tennis"
	}
}
        
var greg2 = {
	name: "Greg Lavallee",
	occupation: "Web Developer",
	interests: {      
		"reading": "Nerd books"
	}
}
        
var newPerson = $.extend(true, {}, greg1, greg2);
console.log("New and Improved Greg:", newPerson);
					
					

$.data()

Store and returns arbitrary data associated with the specified element.
jsbin example
					
$(".test").data("clicked", 0);
      
$(".test").bind({
        
	"click": function() {          
      
		$(this).data("clicked", $(this).data("clicked") + 1);
      
	},
        
	"hover": function() {
   
		console.log($(this).data("clicked"));
    
	}
        
});
					
					

$.map()

Allows you to run a function against each item in an array and update each value. Returns a new array.
jsbin example
					
      var numbers = [3, 6, 10], isEven;      
      
      isEven = $.map(numbers, function(val, index) {
      
        return val % 2 === 0;
      
      });         
      
      // [false, true, true]
      console.log("New Array", isEven);
					
					

$.grep()

Allows you to filter an existing array to only return specific values. Returns a new array.
jsbin example
					
var numbers = [3, 6, 10], evenNumbers;
    
evenNumbers = $.grep(numbers, function(val, index) {
      
	return val % 2 === 0;
      
});   
// [6, 10]
console.log("Even Numbers Array", evenNumbers);
					
					

Contributing to jQuery

How you can help (and get help)

Bugs, bugs, bugs

http://bugs.jquery.com/

Is that really a bug? Make sure to check:

Bug reporting basics

  1. Specify version(s) of jQuery, OS, browser(s)
  2. Reduce the bug to a test case on jsFiddle, jsbin, etc.
  3. Stay up to date on your bug!

IRC is your Friend

Limechat, freenode web, etc.

[insert warning here]

Straight to the Source

[http://github.com/jquery/jquery]

Don't just report it. Fix it!

  1. Fork it
  2. Clone it:
    > git clone https://github.com/jquerydc/jquery.git
  3. Get in there:
    > cd jquerydc
  4. Add the master:
    > git remote add upstream https://github.com/jquery/jquery.git
  5. Fetch and merge the master
    > git fetch upstream
    	> git merge upstream/master
  6. Run tests!

Write tests for what you fix

If you don't, you'll be asked to.

Check out browserstack for cross browser testing.

Test swarm is rad

Pull!

Create a pull request. Include information about the ticket from bugs.jquery.com and update the ticket with a link back.

Thanks