Web Tools Weekly Issue #52 (NodeIterator, CSS/HTML, jQuery, Productivity)

Issue #52 (NodeIterator, CSS/HTML, jQuery, Productivity)07/17/14

All browsers, including IE9 and higher, support a lesser-known way for traversing the DOM: The NodeIterator interface. Let's look at a brief example of how it's used.

Let's say we have this HTML:

<div id="wrap">
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Peaches</li>
    <li>Bananas</li>
    <li>Mangoes</li>
  </ul>
</div>

<div id="wrap-2">
  <p>Paragraph <span>example</span>.</p>
</div>

We can iterate over all elements starting from the #wrap element like this:

var div = document.getElementById('wrap'),
    op = document.querySelector('output'),
    iterator = document.createNodeIterator(
                 div, NodeFilter.SHOW_ELEMENT, null, false
               );

var node = iterator.nextNode();

while (node !== null) {
  op.innerHTML += node.tagName + ' ';
  node = iterator.nextNode();
}

(Demo) Here we use the createNodeIterator() method, which takes four arguments. They are:

The root element from which you want to start searching.
A "bitmask" to determine which nodes to visit. In this case, we're specifying element nodes. We could also specify "SHOW_ALL" which would also show text nodes and white space nodes, or even "SHOW_TEXT", which shows only text nodes.
A function that acts as a custom filter. We didn't include a filter, so we just used "null".
A Boolean value that has no effect on HTML pages, so we could just leave this out.

The example code also uses the nextNode() method, and there's also an opposite previousNode().

There's lots you could do with this, creating filters and using various options in the 2nd argument. For more info on the accepted values for the 2nd argument, check out the NodeIterator article on MDN.

Now on to this week's tools!

CSS and HTML Tools

CSS Prefixer
Similar to the now-defunct Prefixr from Tuts+, this one is based on autoprefixer.

Aria Validator
Scans an HTML page for WAI-ARIA implementation issues. Not an HTML5 validator, just ARIA and nothing else.

Normalize-OpenType.css
"Adds OpenType features—ligatures, kerning, and more—to Normalize.css."

ungrid
"A responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced."

CSS Shrink
A CSS minifier. "Because CSS is on the critical path to rendering pages. It must be small!"

BTNS
"A small css module for building beautiful, responsive buttons."

Kite
"A flexible layout helper CSS library." Based on inline-block, not flexbox.

Hologram
"A Ruby gem that parses comments in your CSS and turns them into a beautiful style guide."

Devicons
An icon font "made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds." Includes logos for HTML5, GitHub, IE, PHP, and lots more, with the option to search via filter links.

CodyHouse
"A free library of HTML, CSS, JS nuggets."

jQuery Plugins

jNottery
"Lets you add notes and markers to webpages. All the data is encoded as a part of an URL which makes it easy to share or save."

Shuffle Images
"Display and shuffle multiple images by moving cursor around or several other ways to trigger."

BrickWork
"A responsive jQuery plugin to create Dynamic layouts"

ScrollMe
"For adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page."

Select or Die
"Yet another jQuery plugin to style <select> elements."

scrollToBySpeed
Keeps scroll animations at a consistent speed, regardless of the distance needed to scroll.

Skippr
"A lighter, faster slideshow plugin for jQuery."

IgniteUI
An extensive jQuery controls UI library, including options for data visualization, form elements, data grids (tables), and lots more.

Morrigan jQuery Editor
"WYSIWYG editor with predictable behavior, persistence and consistency."

jquery-sticky-alert
"A minimal jQuery plugin to add a sticky alert bar to the top of your website."

taggingJS
A plugin to add a tagging system to an app or website (e.g. allowing users to add tags to some kind of post).

Support Web Tools Weekly: 384 pages of CSS for $7

Productivity Tools

CodeSnip.it
"A free code snippet tool to keep all your best coding moments safe." Is searchable and has syntax highlighting.

Assistant.to
A Chrome extension that adds an enhanced meeting scheduling system into Gmail.

Remind
"Ever wish you had a home screen shortcut to quickly send yourself an email?"

Laverna
An encrypted, open source, note taking app that uses Markdown.

Notifyr
"Receive iOS notifications on your Mac."

A Tweet for Thought

As Bill Robbins says, even the recent World Cup broadcasts reminded us of the importance of testing edge use cases in designs.

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.

Before I Go...

This is a really creative use of Instagram: Ikea essentially built a website inside of Instagram, using Instagram's tagging system to advertise their products. Great outside-the-box thinking there.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly