Back to main AEAChicago2007 post
how to approach adding behavior to your site
will give copies of his book, Bulletproof AJAX, away to good questions
be pure: separation between HTML, CSS, JavaScript
so progressive enhancement, beginning with a solid structure and then
building on top
begin with the content, add structure, then presentation on top and
behavior on top of that
structure = HTML, presentation = CSS, behavior = JavaScript
the beauty of this is you can strip away each layer and still have
something useful
CSS and JavaScript are subservient to structure
DOM = document object model, the vocabulary used to talk about the
loaded document
CSS and JavaScript are in some ways similar
for CSS, use p{}. for DOM, document.getElementsByTagName("p")
not that different from CSS in terms of visualizing the page
page is elements with properties
English: get all the p elements
lolcat: i can has p elementz
CSS: #foo{} vs DOM: document.getElementById("foo")
CSS: #foo p{} vs DOM:
document.getElementById("foo").getElementsByTagName("p")
on adactio.com, right-hand column has behaviors
Click on headline and content will hide
Customize choose a theme part
think about it in English first, then translate
get all the headers in the sidebar, then attach the toggleHeader
behavior to each onclick
toggleHeader finds all the elements in the same div and hides all
but the header
didn't touch the markup. just added the behavior. "I'm being *pure*."
in the real world, sometimes have to add extra div or class
"The standards police aren't going to come visit you in the night."
be vigilant: try to avoid mixing layers
try not to use inline styles
similarly, don't do <a href="javascript:..."> "This is the spawn
of Satan."
because it's not a valid hypertext reference (href). JavaScript
isn't a protocol.
avoid it like the plague, there's no good reason ever to use it
similarly <a href="#" onclick="..."> "href equals octothorpe"
it's mixing up your behavior and your markup when you should
keep them separate
think about the semantics - is it a link, is it a paragraph
common pattern of "add your review and rating" page
can do star hovering rating with CSS
semantic purpose of star rating isn't five links, it's a select
(or radio buttons)
so mark it up as a select, then enhance
stolen code for function selectReplacement from Aaron Gustafson
it replaces a select element with a dropdown unordered list
you can style
new book Advanced DOM Scripting, final chapter by Aaron about
this code
redeparede.com - started as Brazilian version of Craigslist, now spread
select category, then select related subcategory (i.e. Community
Discussion, Art)
first semantically mark up, with subcategories related to categories
- optgroup element
optgroups are a way of associating sets of options in a select
so just make one select for the subcategory, since can figure out
category from subcategory
sometimes more clicks are better: subcategory list is long but only
one click
better to click twice and have the category and subcategory
so use createSelectFromOptgroups to replace the one subcategory
select with two
"Feel free to nitpick the code and tell me what I'm doing wrong."
JavaScript has started to be used unobtrusively instead of evilly in
the past few years
and then AJAX came along, and people suddenly started ignoring
separation of behavior
but can apply progressive enhancement to xmlhttprequest: he calls
this "hijax"
"If I've learned anything from Jesse James Garrett, it's that buzzwords
will get you everywhere."
if you want to build an AJAX website, build a non-AJAX website first
once that's all working, then go in and intercept those clicks: hijack them
use xmlhttprequest to shuttle data back and forth to the server
"Don't try to do business logic in JavaScript in the browser; that way
lies madness."
that's creating an unnecessary technological barrier to getting stuff done
rapha.cc example - expensive cycling wear
widget on page for adding to shopping basket - just changes shopping
basket part of page
built with full page refreshes first
request.open('POST', 'basket-update.php', true); (true says is
asynchronous request)
request.onreadystatechange - if ready and status done, set
basket.innerHTML
challenges of AJAX don't lie in the code, though
tricky bit is the design challenges
you're taking the browser out of the equation (browsing model) and
must replicate functionality
what's happening? what happened? what does the Back button do?
what does bookmarking do?
browsers have progress bar or spinning icon to show they're working
you need to provide status information - progress bar, spinning circle, etc.
look to the Flash world because they've had to do this for years
conventions can be good, especially since AJAX is new and scary
37Signals's yellow fade indicating something just updated
if users want to bookmark a changed state, you probably shouldn't be
using AJAX
same for using the Back button
you're changing too much of the page, and users aren't comfortable
to see whether you're changing too much, do user testing
if you're changing the markup with JavaScript, how can you say
you're separating behavior?
create new markup, not new content in the document. rearranging is OK.
same thing Eric was talking about with
for rollover images that are links that just pop up info, what use instead
of href="#"?
using link because links do :hover properly
would suggest using onmouseover instead of CSS
:hover and :focus are getting behavior in presentation
"Hover considered harmful" blog post
he'll use :hover for changing link color, etc., though
difference between GET and POST?
don't use GET to create, update, delete anything on the server
had Delete links in Basecamp - it's private instead of spiderable,
but things got autodeleted
people had Google Accelerator that prefetches links, so it was
prefetching the Delete links
because the links were GET instead of POST
no one supports PUT or DELETE requests
