AEAChicago2007 – “Be Pure. Be Vigilant. Behave.” by Jeremy Keith

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:
on, 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 - 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 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'POST', 'basket-update.php', true);  (true says is
	asynchronous request)
request.onreadystatechange - if ready and status done, set
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

About Jennifer Berk

I'm an analytics and data leader with a marketing and product mindset. I like online newspapers, science fiction and fantasy, and ugly fish.
This entry was posted in Conference, Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.