Subscribe via email
Yes, I discovered a few of them prior to spotting the article Top 10 custom JavaScript functions of all time
Simon Willison addLoadEvent function http://simon.incutio.com/archive/2004/05/26/addLoadEvent — I’ve struggled with how to load multiple events at once, no more!
Scott Andrew’s addEvent function
and some handy-dandy cross-browser event info from developer.apple.com
Saddled with those and my newfound document.getElementsByClassName, I’m a scripting fool!
Yesterday I was caught once again having to add onclick="highlight(this)" to a list of 20-some checkboxes in a row. In the past, I’d looked at how to add those events dynamically, particularly in light of the fact that the code was generic, I didn’t need to be passing in a specific id or anything.
After attending the DOM Scripting session at @Media a few weeks ago, I’ve been really wanting to see what we could automate using scripting. And lo and behold, one of the latest articles on A List Apart is by the presenter himself, Jeremy Keith. The article, behaviour separation, immediately struck a chord with me.
(x)HTML, CSS, DOM scripting. Separation of church and state content, presentation and behaviour. Yet we’ve become pretty good at separating content and presentation, but not content and behaviour.
Say hello to unobtrusive javascript.
Some more surfing around, I found Keith’s speaker notes from @Media 2005, on javascript. Will have to check that out as well!
eg:
<ul id="imagegallery">
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery" id="placeholder" />
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
}
}
window.onload=prepareGallery
HTML - structure
CSS - presentation
DOM - behaviour
-equivalencies between CSS selectors and DOM methods (both target elements and work with them)
CSS
#footer {}
DOM
document.getElementById(”footer”)
CSS
#nav a {}
DOM
document.getElementById(”nav”).getElementsByTagName(”a”);
CSS
* {}
DOM
document.getElementsByTagName(”*”);
CSS
.className {}
DOM
no equivalent! but can write your own..
function getElementsByClassName(clsName)
{
var arr = new Array();
var elems = document.getElementsByTagName("*");
for ( var cls, i = 0; ( elem = elems[i] ); i++ )
{
if ( elem.className == clsName )
{
arr[arr.length] = elem;
}
}
return arr;
}
As of yet, cannot do zebra tables using just css (may be supported in css3?) — looked at how to use DOM scripting to achieve this effect.
1. Plan
2. Which methods?
–get all tables (getElementsByTagName)
–loop through each
–get all table rows in each table (getElementsByTagName)
–loop through every 2nd
–set style
Where you can, don’t set styles directly, rather assign classes.
CSS3 - can assign multiple background images (already supported by Safari)
Rounded corners - unwinnable situation.
–use CSS that isn’t supported?
–add superfluous divs in the markup?
–use JS to generate superfluous divs
***note, code does not work in IE6/WIN…. 
Generated content
– there are accessibility concerns, as a buffer accessed from a screenreader does not get this ‘new’ content. Therefore, only use generated content for non-essential information
I really liked this session. I had had the concern about accessibility, which the speaker freely addressed. He did go through his examples quickly. often telling us to google for better code than his own, but his concepts were solid. I was disappointed after the fact to review his slides and see that the rounded corner example does not work in IE6/WIN. Still, I believe that DOM scripting can help us greatly, and I have already started using some of these techniques in my work.
Speakers: Andy Clarke (http://stuffandnonsense.co.uk/), Patrick Lauke (http://www.splintered.co.uk/), Ian Lloyd (http://accessify.com/) and Gez Lemon.
Significant new features to WCAG2.0 (Wuh-kag)
- Baselines, a method for preventing “doc rot”
- Move from user agents to technologies (css, scripting)
- Conformance claim (date, version of doc, “this part is not accessible”) ** not a get-out clause
- Biggest dislike – the goal of WCAG2.0 is to be technologically-agnostic, but it ends up being meaningless
Andy Clarke: “we should be guideline-agnostic. We should always be endeavouring to develop the best products we can, regardless of what the guidelines state. It is important to understand the core concepts, but ultimately our focus should be on users and user experience”
Patrick Lauke: “You’re not creating accessible websites, you’re creating websites that follow certain rigorous guidelines”
WaSP - Accessibility Task Force
P.O.U.R. Websites: Perceivable, Operable, Understandable, Robust.
I had been really looking forward to this session, but I’m afraid it disappointed. Perhaps I have a bias against panels, but I felt I didnt get as much out of this session as I’d hoped. Rather than go over specifics of the guidelines themselves, this was a more generic overview of the documentation out there ABOUT the guidelines. Particularly in light of recent articles disparaging the WCAG2.0 (for example, Joe Clark’s To Hell with WCAG2.0), I suppose I expected more tangible information on its merits (and/or, an agreement with fellow Canadian Clark).
- enable the publishing and sharing of higher fidelity information on the Web.
- small bits of (X)HTML that identify richer data types like people and events
eg:
<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn" rel="met friend colleague">Eric Meyer</a></cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints.</p>
</blockquote>
<p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>
- more than just “good class names”
- principles keep things “micro”
- process emphasizes getting real
- community minimizes duplicates
Principles:
1. solve a specific problem
2. simple as possible (evolutionary improvements)
3. humans first, machines second (presentable and parseable)
4. reuse from widely adopted standards
5. modularity/embedability
http://tantek.com/presentations/2006/06/microformats-evolution/
This was an interesting session, but not one I could really see a place for at work. I’ll admit I wondered if there could be some sort of tie-in to any of the Analyzer products or services, but I don’t think it’s really feasible.
-flexibility, preparedness
eg: What happens when images are turned off?
-there are three ways to be bulletproof on a site
1. content (text size, content amount)
2. editing (content changes, maintenance)
3. environment (device/browser)
-John Allsopp “A Dao of Web Design”
take away the design, is it still usable?
100% validation is difficult to maintain
validation during construction is key
-embrace flexibility
-let go of pixel pushing
A question was asked about radio buttons aligning with labels. His response? “maybe they don’t like up.. maybe that’s ok”.
I was very impressed with this session. Initially the speaker seemed a big nervous, but he knew his stuff.
What is Web2.0? “The ability to scale up to many users, better use of bandwidth, better ease of use .. and things like RSS feeds”
Jesse James Garrett “The Elements of User Experience”
1. Surface
- easy to get wrong
“putting users more in control, takes the designer away from deciding what’s important” (trust users with their own experience – more of a peer relationship)
I hadn’t really been looking forward to this session, but Jeff Veen was an incredibly charismatic, engaging speaker. He made me excited about ‘the next generation’, rather than simply overwhleming us with hype.
- window.external.AddSearchProvider([url])
- brings site search up to browser
- ** relevant to LN? how does it interact with authentication? Alternative to LNToolbar,
other 3rd party toolbars?
**mention that there will be forced address bars on pop-ups for security. Alters model
- Referenced http://www.positioniseverything.net/explorer.html list of IE bugs, fixed all but one
- Added support for maxwidth, minwidth, selectors: first-child, adj, attribute, child
- Alpha channel support for PNG images
- Native XMLHTTPRequest (no longer subject to ActiveXControls issues)
- Select element is now windowless (drop down issue resolved?)
- The bulk of these changes will only show in strict mode (w/ DOCTYPE) so that it doesn’t break old pages
- * html – targets IE only
- _height: 50px; - targets IE only
- height/**/: 50 px – targets all but IE
- html > body – targets all but IE
The preferred method of ‘targeting’ is to use conditional statements if you don’t want to use JS to fish for the user agent
- use “>=” not “=” to futureproof
- < ?xml prolog no longer throws brower into quirks mode
When?
-IE7 is set to be rolled out in the 2nd half of 2006.
What about running side by side versions of IE?
- they are looking at this moving forward, but it will never be backwards compatible
why not XHTML? (Doesn’t support mimetype)
-wants to avoid bad parsing, ensure it’s done right
Will it meet the ACID2 Test
-not now, but within 5 years. Right now, a lot of the ACID2 test is ‘nice to haves’, not standards.
Will IE7 be a recommended/required update?
- ”Strongly encouraged”
- see if your pages are ready: download toolkit
The next release will focus on more object model support (Yes, he stated that they had committed to at least two more releases of IE)
I was quite unimpressed with this session, it came off much like a sales pitch. I don’t know what I had been expecting, perhaps more of a demo or something like that. Still, I am encouraged that MS looked at the CSS bugs that are out there, and worked on fixing them.
One thing I found very interesting is how much they’ve beefed up security. This struck me in light of what Jeff Veen discussed in “Designing the Next Generation of Web Apps“, wherein the user is trusted more with their own experience. This seems moreso to attempt to protect users. Where’s the fun in that??