I recently attended YUI's conference 2010. I created a small presentation which summarizes some of the most interesting sessions I watched during the three days of the conference.
Be aware! The presentation is written in HTML5 / CSS3, so I would suggest you to check it out in a decent browser, meaning Chrome/FF/Safari/IE9. ;)
Slides were based off http://slides.html5rocks.com/
"Forecast discontinuation of A-grade coverage for Internet Explorer 6 in Q1 2011; we expect to move IE6 to the C-grade browser list as of the next update."
The refreshed website, www.AnnualReviews.org, [is] packed with innovative features that make it easier than ever for researchers to find principal contributions in their field and stay up to date with new developments, including:
- The ability to quickly preview an article's figures from tables of contents, search results, and most popular content pages
- Tag-along navigation that keeps an article's figures, references, and related content visible while moving through the article
- Snippets from cited Annual Reviews articles that accompany the references, giving insight into the context of the citations
"As we continue to add content, features, and functions, this refresh provides a more effective interaction with our articles," said Steve Castro, CFO and Director of Sales and Marketing for Annual Reviews. "Our new review article page unlocks the full depth of our content, making it easier for researchers to discover the relevant literature and information they need."
XSLT sometimes can be a pain in the bum, for sure it's not one of my favorite languages. :)
So today, I was trying to fix the following problem:
XML snippet looked like this:
<tag1>
text 1
<tag11>
<tag12>text 2</tag12>
</tag11>
text 3
<tag21>
text 4
<tag22>text 5</tag22>
</tag21>
text 6
</tag1>
I wanted my output to look like this:
text 1 text 2 text 3 text 4 <a href="blah">text 5</a> text 6.
So pretty much what I needed to do was to get the text value of each node except from tag22 node, in which case I wanted to apply a template and output it as an anchor tag.
Here is the XSLT snippet which produces the desired result:
<xsl:apply-templates select="tag1" mode="foo"/> <xsl:template match="text()" mode="foo"> <xsl:value-of select"."/> </xsl:template> <xsl:template match="*" mode="foo"> <xsl:apply-templates mode="foo"/> </xsl:template> <xsl:template match="tag22" mode="foo"> <a href="blah"><xsl:value-of select="."/></a> </xsl:template>
Let me try to explain whats going on here.
WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with AJAX, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse (e.g mobile devices users). WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. (http://www.w3.org/WAI/intro/aria)
So, trying to make our content more accessible is a pretty important step in web development. By including roles, states and properties, ARIA helps us make our code semantically richer for the assistive technology user. ARIA enables semantic description of an element or widget behavior and enables information about groups and the elements within them. ARIA states and properties are accessible via the DOM.
A common use case is a navigation menu. Almost every site/blog out there has a tabbed navigation menu. How could we make these menus more accessible..? It just takes few attributes in our dom elements, such as "role".
role attribute enables us to create semantic structure on elements. Two notes about roles:
<div class="topMenuWrapper">
<div class="topMenuWrapperInner">
<ul class="topMenuList">
<li class="topMenuListItem">
<a href="#"><span class="menuItemContent">Menu item 1</span></a>
</li>
<li class="topMenuListItem">
<a href="#"><span class="menuItemContent">Menu item 2</span></a>
</li>
<li class="topMenuListItem">
<a href="#"><span class="menuItemContent">Menu item 3</span></a>
</li>
<li class="topMenuListItem">
<a href="#"><span class="menuItemContent">Menu item 4</span></a>
</li>
</ul>
</div>
</div>
By the way, here is the CSS to make a working example, with horizontal tabs:
body {
background-color: #F8F8F8;
}
.topMenuWrapperInner {
margin: 5em;
float: right;
}
.topMenuList {
margin: 0px;
}
.topMenuListItem {
margin-right: 10px;
padding: 6px;
display:inline;
background-color: #ddd;
border: 1px solid #ddd;
/* lets add rounded corners for real browsers :P */
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.topMenuListItem a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.topMenuListItem:hover {
background-color: #fff;
border: 1px solid #ddd;
}
.topMenuListItem:hover a {
color: #B0B0B0;
}
.menuItemContent {
padding:10px;
}
Now let's make our top menu accessible:
<div class="topMenuWrapper">
<div role="menu" class="topMenuWrapperInner">
<ul role="presentation" class="topMenuList">
<li role="presentation" class="topMenuListItem">
<a href="#" role="menuitem">
<span class="menuItemContent">Menu item 1</span>
</a>
</li>
<li role="presentation" class="topMenuListItem">
<a href="#" role="menuitem">
<span class="menuItemContent">Menu item 2</span>
</a>
</li>
<li role="presentation" class="topMenuListItem">
<a href="#" role="menuitem">
<span class="menuItemContent">Menu item 3</span>
</a>
</li>
<li role="presentation" class="topMenuListItem">
<a href="#" role="menuitem">
<span class="menuItemContent">Menu item 4</span>
</a>
</li>
</ul>
</div>
</div>
Now let's see what each attribute means:
<script type="text/javascript" src="yui-min.js"/>The seed file is about 10KB (6KB gzipped) and includes enough functionality to download any other YUI components in the Yahoo CDN (content delivery network). For example, if we want to use the DOM utility, we just need to specify its name within the YUI use() method. The use method will provide a callback that will be executed when the code is ready, an example piece of code is:
YUI.use("dom", function(Y) {
var testElmt = Y.one('#test123'); //gets element by id
// do something with the element
});
This code creates a new instance of the YUI object and then calls the use() method. The seed file has all the information about filenames and dependencies, so specifying "dom" actually builds up a combo-habdler URL with all of the correct dependency files and creates a dynamic script element to download and execute those files. When all of the code is available the callback method is called and the YUI instance is passed in as the argument, allowing to immediately start using the newly downloaded functionality.
The good thing with nonblocking scripts is that the JS files are downloaded as soon as the element is added in the page, so we don't need to actually block any other process in it.
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++) {
document.body.appendChild(document.createElement('div'));
}
Do you see anything wrong in this snippet of code? You would expect it to create one additional div for every div element in the DOM, so it should just double the number of div nodes in the document, right? Well, not really! This is actually an infinite loop. Why? Because the loop's exit condition is never met, as allDivs.length increases by one with every iteration.
As defined in the DOM standard, HTML collections are "assumed to be live", meaning that they are automatically updated when the underlying document is updated.
So, here is the solution: Store the collection in a local variable, cache the length outside the loop and then use a local variable inside the loop for elements that are accessed more than once. e.g
var coll = document.getElementsByTagName('div');
var len = coll.length;
for (var count = 0; count < len; count++) {
// if needed cache in here the elements, to work with
var el = coll[count];
// do whatever
}
This will do the magic and solve your problem!
Let's take it one step further. What if you want to touch every element you retrieve from this collection in a way that modifies the live collection. A common example is to replace a class from a collection of elements. e.g
var allDivs = document.getElementsByClassName('class1');
for (var i = 0; i < allDivs.length; i++) {
allDivs[i].className = 'class2';
}
This doesn't work, since allDivs changes with every iteration of the loop. In this case the best solution to go with is to actually copy the collection into an array and work with the array instead.
Something like this:
function toArray(collection) {
var result = [];
var len = collection.length;
for (var i = 0; i < len; i++) { result[i] = collection[i]; }
return result;
}
var allDivs = document.getElementsByClassName('class1');
var ar = toArray(coll); //copies a collection into an array
for(var i = 0; i < ar.length; i++) {
ar[i].className = 'class2';
}
Now let's look at another neat solution to this problem (unfortunately not supported by all browsers, i.e Internet Explorer 6 and 7). The document.querySelectorAll() method, is provided as a native DOM method. What's cool with it? You can provide a CSS selector as an argument and it will return you a non-live NodeList, an array-like object containing matching nodes, which will not represent the live structure of the document. Let me note here that in W3C's DOM specifications NodeLists are live, but in the case of querySelectorAll(), its explicitly specified that the returned Nodelist is static (not-live)! So, with this method we don't need to be as verbose as we used to be, e.g instead of calling
var elmts = document.getElementsById('menu').getElementsByTagName('a');
we can do something like:
var elmts = document.querySelectorAll('#menu a');
and of course there's no need to cache/copy variables, in order to access them.
Last but not least...use a library if possible! Avoid dealing with this problem and let the library (e.g YUI, jQuery) do its magic!
References: High Performance JavaScript, Nicholas C. Zakas (http://oreilly.com/catalog/9780596802806)
