1. jQCon
Condensed edition

2. Review
• Selector performance
– ID
– Tag name
– Name, Class
• Use CSS classes to control state
• Specificity helps
– Ex: $(‘div.ui-content’); instead of $(‘.ui-content’)

3. Performance
Visibility: Business:
– Install Firebug & Yslow – Performance is important for
– Know what is slowing down the product
your page loads – Performance can be expensive
– Optimize intelligently - weigh
the LOE and the utility gained
Interactivity:
– Performance is most important
– Profile your $.ready to sites that get millions of hits
– Minimize initialization on page
load
Tips:
– Low hanging fruit first
Responsiveness:
– Google Analytics to record data
– throttle/debounce events about your loads
– 8-bit PNG's with alpha

4. Contextual jQuery
• Handle initial state with CSS
• Write reusable code
• Delegate event handling
• Anticipate user actions
– Scrolling
– Focus/blur
– Typing
• .one()

5. Unit Testing
• qUnit
• qUnit
• qUnit
• And qUnit

6. Grunt
• Build tool for JS
• Included tasks
– Creates scaffolding
– Lint (JSHint)
– Unit testing (qUnit)
– Concat/Minify (UglifyJS)

7. PhantomJS
• Headless WebKit
– Like the horseman? Why is this cool?
• Grunt + PhantomJS + qUnit = ?

8. DEMONSTRATION

9. Recap of Steps
• brew install node
• brew install phantomjs
• npm install -g grunt
• grunt -help (Optional)
• grunt init (Optional)
• grunt init:jquery
• grunt qunit

10. Tools
• YSlow, PageSpeed
• JavaScript Errors Notifier Chrome Extension
• iWebInspector
• JSHint (for vim)

11. Resources
• Wiki pages
– jQuery Conf 2012
– Best Practices: jQuery
– Web Dev Quirks
• Read more
– Introducing Grunt
– jQuery Plugins w/ Grunt & qUnit
– https://github.com/cowboy/grunt
– qUnit Intro