This will be my first panel. While I wait for things to get going, just a quick note about the morning. Spent the morning with H at her friend/boss’s house, helping to put mulch around plum trees. I haven’t worked that hard outside in that hot a weather since I was 17. But it was weirdly fun. Rural central Texas is quite beautiful, even if it also features intense heat and fire ants.
And I did get fed.
Now I’m back, caffinated, and the panel’s getting started.
“This will be easy because all you have to do is bluff” — Dom scripting is the new css. 🙂 They have comfy chairs onstage!
Jeremy Keith is there with Aaron Gustafson — ALA editor and a teacher.
DHTML vs DOM scripting….DHTML as the original bluffing. confusing…that’s how I always felt about it. “end up forking yourself and your application.” nothing particularly new (to me) here. guy in front of me is wearing an A List Apart shirt. Aaron had the same take on JS that I did for most of the last 5-7 yrs.
DOM scripting as the standards approach to scripting.
The Document. yr basic x/html document, nicely formed.
The Tree, with its nodes. Then the nodes inside a paragraph…I’m suddenly reminded of that video of going down really small with a microscope and really big with a telescope.
back to Jeremy. the dom being another way of looking at a page. use the skills you have in css/markup. (show of hands. mmmm….css nerds.) “getters” and “setters”
getter { setter; } …as in… #footer { font-size: small; }
in dom scripting, getting and setting are separate operations.
method ~= function
property ~= variable
if parentheses, then method. getElementById “does what it says on the tin”. to use getAttribute, you have to already have gotten the element. (this is a good refresher from the book. I want to find a quiet corner with the book and do some experimentation.)
“it’s not an array, but it plays one on TV” (getElementsByTagName). very much like PHP in its looseness, I think.
get the element with the id “content”
#content { }
document.getElementById(“content”)
get all the paragraphs in a document
p { }
document.getElementsByTagName(“p”)
dom is actually readable, because of verbosity.
get all the paragraphs within the element within the element with the id “content”
#content p {}
document.getElementsById(“content”).getElementsByTagName(“p”)
this is why his book worked so well for me!
“creating life!” — “unlimited power” (cranky quasi-joke re: Bush from Aaron.)
starting by showing the old way. document.write() and its cousin innerHTML. well supported but completely proprietary. like using a sledgehammer to crack a walnut.
then the new way. document.createElement(tagname) — document.creat…
“don’t need to memorize this stuff, you can look it up” — don’t I have this bit of his book marked with a florescent postit?!
created elements/text nodes must be assigned to a variable, or they’ll be in JS limbo!
oh, man, I’m drowsy.
and then inserting those limbo-ing nodes into the document.
“this is why we have google, this is why o’reilly writes books, so we don’t have to memorize this stuff”
cite attribute default is “bugger-all”. indeed. nice discussion of the similarity between css & dom scripting in re: over-riding the default display of the markup.
and he shows the most powerful part of his book: the pseudocode, or as he calls it “the script, but it happens to be in English”. working through one of the examples in the book. (I wonder if you could create a paper/excel grid that would help in the “translation”)
“view rendered source” in firefox?!
Ralph notes a slight tweak in the script to make it work in IE.
back to aaron: unobtrusive == the golden rule. do unto others. the zen master approach: if they can’t accept your “help” then at least let them continue along on their business.
planning! usable w/out js. then implementation: test for methods, not browsers. (I remember that from the book. very clean.) “object literal” — keep objects and methods separate from other scripts. also, object notation. work to be generic.
I can’t quite articulate it, but I think I’m connecting the dots in my brain just a little more between my existing php expertise & this js stuff.
example, replacing a select with an unordered list to make it pretty. (theoretically.)
“everybody hates email harvesters and getting lots of pen!s email” 😉 methods for hiding. start with the normal text spelling out… bob [at] example [dot] com, but showing a real mailto link in js.
link list at the end instead of the print css effect of urls in paren after each link. this is probably one of my favorite techniques from jeremy’s book.
stripey tables. this is the one that I actually improved on from the book by using modulus instead of a counter and just getting the trs instead of getting the tables first. (you know what, though? if the table is being generated by a script — php or whatnot — then it’s a trivial task. but I do still need to hand-code the occasional table. basketball scores, mostly…okay, Don does that one. let’s say…tuition.)
resizing…different layouts by screen size. I should do this just for Teri and her jumbotron.
“man in blue” inventor of the technique, is sitting in the audience! round of applause.
if you want to bluff well, show off your stuff. little cool examples and such.
on a really large table, is there a performance hit? ppk will know. refer to quirksmode.org. somebody else mentioned increasing counter by 2 instead of by 1.
practicality of using dom vs. innerhtml? on a very complex/enterprise site, generating lots of markup, innerhtml is much faster. but if you can use cloneNode that can be fast too.
simon willison! better to create whole node and then append rather than append a bit at a time.
with greater adoption of standards, how will future deal with the performance issues? mostly, just don’t use js to create yr whole document.
will frameworks help me bluff? no and a bit yes. don’t look like a fool! need to know what you’re doing.
pointing to Shaun Inman, his scroll-to script, which aaron used in combo with flash. hmmmm…could be useful for bulletin, or catalog?
start slowly, use incrementally, and know what the hell you’re doing.
the wrapup: you can bluff in css & js, but not markup!