Web Tools Weekly Issue #53 (TreeWalker, Code Playgrounds, Media, Git/CLI)

Issue #53 (TreeWalker, Code Playgrounds, Media, Git/CLI)07/24/14

In last week's issue I briefly introduced the NodeIterator DOM traversal interface. There's another, more advanced traversal method that I'll introduce here. It's called the TreeWalker interface and it too is supported in all browsers including IE9+.

TreeWalker has the same functionality as NodeIterator (including previousNode() and nextNode(), but adds some useful methods:

parentNode() - Goes to the current node's parent.
firstChild() / lastChild() - Goes to the first or last child of the current node.
nextSibling() / previousSibling() - Goes to the next or previous sibling of the current node.

Using the same HTML as last week (which focused on a DIV wrapping an unordered list), here's an example:

var el = document.getElementById('wrap'),
    op = document.querySelector('output'),
    walker = document.createTreeWalker(
               el, NodeFilter.SHOW_ELEMENT, null, false
             );

var node = walker.firstChild();

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

(Demo)

Here I'm using the firstChild() method to move to the UL element from the original #wrap div. Then, once inside the loop that runs through the elements, I'm moving right to the parent node using the parentNode() method. I could instead use firstChild() or even lastChild() to quickly jump into the list items themselves.

You can see the display of the accessed elements on the page, which lists UL and DIV, since those are the two elements we jumped to using TreeWalker.

MDN has more detailed info on their TreeWalker article.

Now on to this week's tools!

Text Editors, Code Playgrounds, etc.

Polymer Design Tool
A very cool drag-and-drop visual/code editor for working with the Polymer Web Components library.

Response-for-Brackets
A responsive design tool for the Brackets code editor.

lollytin
An HTML5 tag editor with a drag and drop interface to insert various elements

Chrome Dev Editor
A Chrome extension that lets you "develop apps on the Chrome platform in Dart and JavaScript", with Polymer support.

Vim Awesome
"Awesome Vim plugins from across the universe."

Python Fiddle
A Python cloud IDE.

WriteCodeOnline.com
Test PHP code online.

RapidMoon
"A Web-based platform with ready-made components you can drag/drop to create Responsive Front-ends."

Responsive Layout Maker Pro
"Fluid grids, custom breakpoints, draggable elements. Visually design responsive layouts from the content out."

sublime-autoprefixer
"Sublime plugin to prefix your CSS."

Multimedia Tools

SVG Placeholder Image Generator
"For making placeholder images without calling an external reference, using SVG, JavaScript, and DataURIs."

SVG for Everybody
"Use external SVG spritemaps today. SVG for Everybody minds the gap between SVG-capable browsers and those which do not support external SVG spritemaps."

SVG Editor
A tool that reduces the file size of SVGs in real time.

Spritebox
"A WYSIWYG tool to help web designers create CSS from sprite images."

ImageAlpha
"Greatly reduces file sizes of 24-bit PNG files (including alpha transparency) by applying lossy compression and conversion to a more efficient PNG8+alpha format."

CoverVid
"Make your HTML5 video behave like a background cover image with this simple jQuery extension."

Intense Images
A JavaScript library for creating a gallery of images where the clicked image goes full screen.

musicmetadata
"Streaming music metadata parser for node and the browser."

Gifffer
A tiny JavaScript library that prevents the autoplaying of animated Gifs.

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

Git, GitHub, and Command Line Tools

Revisr
"A Git and WordPress database plugin that allows you to keep track of your web projects in version control."

doitlive
"A tool for live presentations in the terminal. It reads a file of shell commands and replays the commands in a fake terminal session as you type random characters."

Octicons
GitHub's icon font.

magpie
"An attempt to make a reasonably sufficient Evernote replacement where the users control their data... a web tool for managing text files in a git repo."

drawille
"Pixel graphics in terminal with unicode braille characters."

Octotree
A Chrome extension that displays GitHub code in tree format. Useful for developers who frequently read source code on GitHub but don't want to checkout too many repositories.

Betty
"Friendly English-like interface for your command line. Don't remember a command? Ask Betty."

gh-pages/repo switch
"Bookmarklet to quickly switch between a repo and the gh-pages (github.io) view."

A Tweet for Thought

Luke Wroblewski reminds us, with visual proof, that the "hamburger" icon just isn't quite working.

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...

You might want to subscribe to a cool new tech/dev daily called Versioning. It's produced by a couple of the editors over at SitePoint (where I'm currently one of the editors). It's a simple mailing with all sorts of cool articles, tools, and news to check out.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly