From my presentation at the London jQuery meetup, 4th July 2011. External links made in the slides can be found at http://bit.ly/ross-london-jquery

1. taken by Jeremy Keith - http://www.flickr.com/photos/adactio/
Writing jQuery JavaScript that doesn’t suck
Monday, 4 July 2011

2. Introductions
Ross Bruniges
Monday, 4 July 2011

3. Introductions
taken by Mike Morgan - http://www.flickr.com/photos/morgamic/
Ross Bruniges, Web Developer at Mozilla
Monday, 4 July 2011

4. Introductions
careers.mozilla.com
We’re hiring!
Monday, 4 July 2011

5. Introductions
taken by Mike Morgan - http://www.flickr.com/photos/morgamic/
Ross Bruniges, Regular drinker at Pub Standards
Monday, 4 July 2011

6. Introductions
taken by Caz Mockett - http://www.flickr.com/photos/rugbymadgirl/
So what am I going to be talking about?
Monday, 4 July 2011

7. Introductions
taken by Julian Burgess - http://www.flickr.com/photos/aubergene/
A JavaScript mixed bag.
Monday, 4 July 2011

8. Organisation
Leaving things as you would like them to be found
Monday, 4 July 2011

9. Organisation
JSLint is a JavaScript program that looks for
problems in JavaScript programs. It is a code
quality tool.
More information on the JS Lint at http://www.jslint.com/lint.html
Remember to useJavaScript
Lint your eventDelegation
Monday, 4 July 2011

10. Organisation
application = some large JS app (global)
function eatMe() {
// accessing the global variable
application = false;
}
eatMe();
application.shouldWork();// now returns false
Beware Remember to use eventDelegation
global variables, they are easy to overwrite
Monday, 4 July 2011

11. Organisation
application = some large JS app (global)
function eatMe() {
// now accessing a local variable
var application = false;
}
eatMe();
application.shouldWork()// now works
Beware Remember to use eventDelegation
global variables, they are easy to overwrite
Monday, 4 July 2011

12. Organisation
return
{
javascript : "fantastic"
};
Example by Douglas Crockford
Don’t rely on semi-colon insertion to work
Remember to use eventDelegation
Monday, 4 July 2011

13. Organisation
return; // Semicolon inserted, believing the
statement has finished. Returns undefined
{ // Considered to be an anonymous block, doing
nothing
javascript : "fantastic"
};// Semicolon interpreted as an empty dummy line
and moved down
Example by Douglas Crockford
Don’t rely on semi-colon insertion to work
Remember to use eventDelegation
Monday, 4 July 2011

14. Organisation
return {
javascript : "fantastic"
};
Example by Douglas Crockford
Hug your brackets and remember to include your semi-colons
Remember to use eventDelegation
Monday, 4 July 2011

15. Organisation
1 == true // returns true as 1 is a ‘truthy’
value and gets converted to such
1 === true // returns false as no conversion is
applied
Remember to use eventDelegation
Always use === and !==
Monday, 4 July 2011

16. Organisation
More Crockford facts at http://crockfordfacts.com/
Remember to for Douglas
Do it use eventDelegation
Monday, 4 July 2011

17. Organisation
$(‘#foo’).click(function(){console.log(‘please
stop this madness’);}).end().filter
(‘div.urgghhh’)
Pain for someone down the line
Avoid long chained statements use eventDelegation doesn’t mean
Remember to - just because you can
that you should.
Monday, 4 July 2011

18. Organisation
Remember to likes eventDelegation
Everyone use a nice chain
Monday, 4 July 2011

19. Organisation
But you can end up looking use eventDelegationget too much
Remember to like a douche if you
Monday, 4 July 2011

20. Organisation
$(‘#foo’)
.click(function(){
console.log(‘please stop this madness’);
})
.end()
.filter(‘div.urgghhh’);
Remember to use eventDelegation
This works just fine
Monday, 4 July 2011

21. Organisation
Remember of a JS Design Pattern
Make use to use eventDelegation
Monday, 4 July 2011

22. Organisation
http://addyosmani.com/blog/essentialjsdesignpatterns/
Remember to use eventDelegation
Free book!
Monday, 4 July 2011

23. Organisation
var clean = function() {
var debug = false;
var init = function() {
console.log(‘fail’);
};
return {
init : init
};
}();
clean.init();
Revealing Module Pattern - clean, tidy and easy to understand
Remember to use eventDelegation
Monday, 4 July 2011

24. Organisation
Remember to well eventDelegation
Modules play use with JS loaders
Monday, 4 July 2011

25. Organisation
Remember over complication
Avoid to use eventDelegation
Monday, 4 July 2011

26. Organisation
Just because you THINK it to use be cool doesn’t mean it will be.
Remember might eventDelegation
Especially if no one has asked for it.
Monday, 4 July 2011

27. Organisation
function poorlyThoughtOut() {
// OK I’m going to get some elements
// add a class or two
// parse some data from the elements
// remove some DOM elements
// parse some data from someplace else
// fade the background to yellow to highlight
the change
// update the screenreader buffer
}
Don’t stuff your functions until they burst
Remember to use eventDelegation
Monday, 4 July 2011

28. Organisation
function parseData() {}
function updateBuffer() {}
function betterPlanned() {
// OK I’m going to get some elements
// add a class or two
// parseData()
// remove some DOM elements
// parseData()
// updateBuffer()
}
Smaller functions are easier useunderstand and more modular
Remember to to eventDelegation
Monday, 4 July 2011

29. Organisation
In your code trigger an event
$.trigger(‘carousel_move’);
If someone needs it they can use it later
$.bind(‘carousel_move’, function(e) {
console.log(‘event functionality without
needing to alter the existing code base’);
});
Custom events to to use for future development
Remember allow eventDelegation
Monday, 4 July 2011

30. Organisation
//
// Dear maintainer:
//
// Once you are done trying to 'optimize' this
routine,
// and have realized what a terrible mistake that
was,
// please increment the following counter as a
warning
// to the next guy:
//
// total_hours_wasted_here = 39
//
comment from stackoverflow thread - http://stackoverflow.com/questions/184618/
Remember to useyour code
Comment eventDelegation
Monday, 4 July 2011

31. Organisation
/**
* Change the role of the employee.
* @param {integer} employeeId The id of the
employee.
* @param {string} [newRole] The new role of the
employee.
*/
function recast(employeeId, newRole) {
}
project homepage at http://code.google.com/p/jsdoc-toolkit/
JSDocToolkit - commentseventDelegation out
Remember to use in, documentation
Monday, 4 July 2011

32. Organisation
/*
@name vehicle.Sled#reindeer
@function
@description Set the reindeer that will pull
Santa's sled.
@param {string[]} reindeer A list of the
reindeer.
@example
// specifying some reindeer
Sled().reindeer(['Dasher', 'Dancer', 'Rudolph',
'Vixen']);
*/
full article by Frances Berriman at http://24ways.org/2010/documentation-driven-design-for-apis
Documentation-Driven Design,eventDelegationcode second
Remember to use document first
Monday, 4 July 2011

33. Organisation
// TODO: Fix this. Fix what?
comment from stackoverflow thread - http://stackoverflow.com/questions/184618/
WhateverRemember to use eventDelegation the start.
you choose ensure you do it from
Monday, 4 July 2011

34. Organisation
/**
* Always returns true.
*/
public boolean isAvailable() {
return false;
}
comment from stackoverflow thread - http://stackoverflow.com/questions/184618/
Remember to it upeventDelegation
Keep use to date
Monday, 4 July 2011

35. Performance
diagram from http://www.sapdesignguild.org/
Monday, 4 July 2011

36. Performance
taken by pi.kappa - http://www.flickr.com/photos/27890120@N08/
Don’t prematurely optimise - you’re just ASSuming
Monday, 4 July 2011

37. Performance
$(‘#foo div’) = bad, it will search first for ALL
divs in the document;
$(‘div.me’) is better it will only search for
divs with that specific class
$(‘div#me’) = best, all JS parses will look only
for that specific element
Write good selectors (sizzle parse right to left - in IE6 and 7)
Monday, 4 July 2011

38. Performance
var expensive-selector = $(“.section:first”),
reused-json-object = $.getJSON(‘docs.json’),
reusable-regex = /d(b+)d/g;
Cache quicker for reuse
Monday, 4 July 2011

39. Performance
Exit quickly to avoid silent fails
Monday, 4 July 2011

40. Performance
var elm = $(‘#findMe’);
if (!elm.length) { return false; }
We now know that this code will only be run if
the element actually exists.
Exit quickly to avoid silent fails
Monday, 4 July 2011

41. Performance
from The Mysteries of JavaScript Fu, Dan Webb - http://www.slideshare.net/danwrong/java-script-fu-
Remember to use eventDelegation
Monday, 4 July 2011

42. Performance
.live() example - quick and dirty
$('tr').live('click', function(event) {
// this == tr element
});
Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
Monday, 4 July 2011

43. Performance
.delegate() example - also chainable
$('table').delegate('tr', 'click', function(event){
// this == tr element
});
Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
Monday, 4 July 2011

44. Performance
Handrolled example - maximum control
$('table').bind('click', function(event) {
// this == table element
var $tr = $(event.target).closest('tr');
});
Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
Monday, 4 July 2011

45. Performance
Cause minimal reflows use eventDelegation in IE)
Remember to and repaints (especially
Monday, 4 July 2011

46. Performance
“Repaint - also known as redraw - is what happens
whenever something is made visible when it was
not previously visible, or vice versa, without
altering the layout of the document.”
Quote from http://dev.opera.com/articles/view/efficient-javascript/?page=all
Remember to use eventDelegation
Repaints
Monday, 4 July 2011

47. Performance
“whenever the DOM tree is manipulated, whenever a
style is changed that affects the layout,
whenever the className property of an element is
changed, or whenever the browser window size is
changed...
In many cases, they are equivalent to laying out
the entire page again.”
Quote from http://dev.opera.com/articles/view/efficient-javascript/?page=all
Remember toReflows
use eventDelegation
Monday, 4 July 2011

48. Performance
Remember to use eventDelegation
Use the latest version of jQuery!
Monday, 4 July 2011

49. Don’t forget your accessibility
taken by Drew McLellan - http://www.flickr.com/photos/drewm/
Monday, 4 July 2011

50. Don’t forget your accessibility
Don’t forget your focus (and blur)
Monday, 4 July 2011

51. Don’t forget your accessibility
$(‘#foo’).bind(‘mouseenter focus’, function(e) {
code goes here
});
$(‘#foo’).bind(‘mouseleave blur’, function(e) {
code goes here
});
If you use .bind (opposed to .click) you can include multiple events
Monday, 4 July 2011

52. Don’t forget your accessibility
Invalid mark-up is still invalid mark-up even when inserted via JS
Monday, 4 July 2011

53. Don’t forget your accessibility
Remember to update the screenreader buffer
Monday, 4 July 2011

54. Don’t forget your accessibility
1. Update the value of a hidden input field
2. Ensure that you have a tabIndex value of -1 on
the element that you’ve altered
3. .focus() on the newly inserted content
The old(ish) way
Monday, 4 July 2011

55. Don’t forget your accessibility
“Live region markup allows web page authors to
specify when and how live changes to specific
areas of a web page should be spoken or shown on
a Braille display by a screen reader.”
Read more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions
The new(ish) way - ARIA live regions
Monday, 4 July 2011

56. Don’t forget your accessibility
aria-live - sets the frequency of updates to AT
aria-controls - associates a control with an
area. All actions on that control are announced
by AT
aria-relevant - states what changes to the live
region are to be announced to AT
Read more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions
The new(ish) way - ARIA live regions
Monday, 4 July 2011

57. Don’t forget
Performance your ‘edge cases’
Monday, 4 July 2011

58. Don’t forget your ‘edge cases’
If things can goto use eventDelegation
Remember wrong then normally will
Monday, 4 July 2011

59. Don’t forget your ‘edge cases’
Remember to code for when the server doesn’t return
a value - it might be down or the app might be
broken.
The server might take longer to reply than expected
and cause a timeout meaning an empty return value.
If things can go wrong then normally will
Monday, 4 July 2011

60. Don’t forget your ‘edge cases’
$.ajax is the backbone to all jQuery AJAX methods
like $.getScript or $.getJSON and allows for much
greater flexibility.
$.ajax({
url : “foo.php”,
dataType : “json”,
success : function(data) {
gets sent the JSON response
},
error : function() {
gets sent the error type and text
},
timeout : 1000
});
Remember toto the rescue
$.ajax use eventDelegation
Monday, 4 July 2011

61. Don’t forget your ‘edge cases’ - like other browsers!
Remember toause eventDelegation
jQuery isn’t 100% magic bullet
Monday, 4 July 2011

62. Thanks for listening!
http://bit.ly/ross-london-jquery
Remember to use eventDelegation
Looking for the links?
Monday, 4 July 2011

63. Taken by Mark Klotz - http://www.flickr.com/photos/markklotz/
Remember toCheers!
use eventDelegation
Monday, 4 July 2011