September 29, 2008 Progressively Enhancing the User Experience with jQuery (Karl Swedberg)
(Note: I thought that this session was going to be about the technique of progressive enhancement, or designing ajax sites that will still work with a reduced feature set when the user has javascript disabled. Turns out, not so much, it was more of a general intro to jQuery from a designer’s perspective.)
Philosophy of jQuery:
- unobtrusive javascript
- write less, do more
- basic model: select elements, interact with them
Interjection — Bri’s opinion:
* YUI is weaker on the select elements part, as well as the “write less” idea
* YAHOO.util.Dom.getElementsByClassName(”blue”)
* or, $(’.blue’)
* 46 characters, vs. 10 characters
* one of jQuery’s biggest strengths is its selector model which is both intuitive and expressive
* other strength: plugins!
Syntax stuff
- CSS selectors: same as in CSS, just wrapped in a $('’) (such as, $(’div.blue’) or things like that)
- form selectors: $(’:input’), $(’:button’), etc.
- custom selectors: $(’:visible’), etc
- traversal methods to move up, sideways, down, filter in various ways
- implicit iteration when doing operations on selector results ($(’li’).something() does for all li elements)
- methods to find width, heght, scrollpos, offsets
- event handling: .bind(), .unbind(), .trigger()
- built-in effects like slideIn, slideOut, fade, animate
* see documentation for more on all of these things
Tipz
- tip: store selectors in variables when used more than once
- tip: use length of selector to check for existence when necessary
- naming convention: use $variable when assigning a jQuery object
- tip: have to use string concatenation to pass in values within the $('’)
- tip: clone() is better for performance than creating new nodes from scratch, when adding lots and lots of new elements
* opinion: jQuery is pretty okay
* Then I thought we were going to get to progressive enhancement. He started showing a code example of a To Do list that he built using jQuery, which sort of used progressive enhancement in some ways, but not really. The end.