Issue #16  (DocumentFragment, CSS/HTML, Testing, Image Tools)11/07/13


If you've read anything about JavaScript-related performance, then you've probably heard that you should try to touch the DOM as little as possible. One specific DOM feature that helps with this is DocumentFragment.

DocumentFragment lets you create a sort of imaginary object that can hold any type of node that you could insert into a regular document. You use it as a temporary placeholder, then "empty" it by inserting its contents into the DOM all at once. This has an advantage over createElement because the root element disappears as soon as you empty it.

Let's consider a typical example of its use: Adding elements to a list.

Here's the HTML:

<ul id="list">
    <!-- add nodes here -->
</ul>

To add items to this empty list, we could do so one by one, interacting with the DOM each time. But we'll do it more efficiently with a document fragment:

var myList = document.getElementById('list'),
    tempFrag = document.createDocumentFragment(),
    i, listItem;

for (i = 0; i < 5; i += 1) {
    listItem = document.createElement("li");
    listItem.innerHTML = "List item #" + (+i + 1);
    tempFrag.appendChild(listItem);
}

myList.appendChild(tempFrag);

Notice that the interaction inside the loop appends items to the document fragment (represented by the tempFrag variable). When the fragment has the full collection of nodes for the list, the whole thing is added in a single line at the end.

Here's a demo

Many experienced developers are likely already familiar with this technique and its benefits. But you might not be aware of some of the new additions coming to the DocumentFragment API, including:
  • DocumentFragment.children
  • DocumentFragment.firstElementChild
  • DocumentFragment.lastElementChild
  • DocumentFragment.childElementCount
  • DocumentFragment.find()
  • DocumentFragment.findAll()
  • new DocumentFragment()
While DocumentFragment in general has excellent basic support everywhere, the new features shown above are listed as "experimental" and have little or no support. Nonetheless, they give us a good preview of what's to come when using document fragments. In the meantime, we can utilize this useful technique today using standard DOM methods.

For more details on this or the above new features, here are a few links:

Now on to this week's tools!


CSS/HTML Tools


CSS Explain
A simple tool that tells you the specificity of any selector, along with an opinionated efficiency rating for the selector.

CSS Kit for Chrome Extensions
A small CSS library for styling the options/settings page for a Chrome extension that imitates the look of the native settings page in Chrome.

grunt-spritesmith
"Grunt task for converting a set of images into a spritesheet and corresponding CSS variables." Uses the syntax of your choice (Sass, LESS, etc.)

Daturi
A simple and easy to use tool to convert images to Data URIs.

Word to Clean HTML
"A free converter tool for documents produced by Microsoft Word and similar office software" that "strips out invalid or proprietry tags, leaving clean HTML behind for use in web pages and ebooks."

HTML_CodeSniffer
"A client-side script that checks HTML source code and detects violations of a defined coding standard." Lets you define your own coding standards.

Ouroboros Sass/CSS Spinner
A loading spinner/indicator built with Sass, for modern browsers.

css-animations.js
"A library to work with CSS3 keyframe animations from javascript. You can add, modify, and remove individual keyframes from existing animations, in addition to creating and deleting animations themselves."


Performance/Testing/Deploy Tools


fresh-chrome.sh
"Use this script on OS X to launch a new instance of Google Chrome with its own empty cache, cookies, and user configuration."

Lineman
"a command-line utility that ... provides a thin wrapper around a number of client-side productivity tools (primarily Express, Grunt, and Testem), with the goal of helping developers focus on writing awesome web apps instead of worrying about workflow configuration."

PHP Image Cache
"A tiny PHP class that accepts a .png, .jpg, or .gif image then compresses, moves, and caches the image in the user's browser. It then returns the new source of the image to be printed in an image tag."

StatusPage.io
Hosted status pages for your company with lots of features. Displays downtime and incidents, and includes performance metrics and notifications via SMS, Webhooks, RSS, and Atom.

Version.js
"Test a different script version with the switch of a query string." An example mentioned is a jQuery plugin being tested against different versions of jQuery to ensure compatibility.

YUI Pure generator
A Yeoman generator for YUI Pure.

YeoPress
A Yeoman generator for WordPress.

BitBalloon
"Programmable HTML5 Hosting." One-line deployment along with automatic asset organization and CDN integration.

Blind
"You're a web developer. You use a retina display. You want to see what your site looks like on a 1x display. Run Blind concurrently with your normal browser to see what your site looks like in 1x resolution."

 

Image Tools


SVGeneration
A tool to generate SVG backgrounds with the necessary CSS, which includes fallback options for browsers that don't support SVG.

gif.js
"Full-featured JavaScript GIF encoder that runs in your browser. Uses typed arrays and web workers to render each frame in the background, it's really fast."

Compress PNG
"Compress PNG images into PNG-8 format with transparency support and full browser compatibility."

Gif Countdown
"An embedable gif countdown that takes the viewing user's timezone into account. It automatically shows the user's local time and uses a streaming animated gif to update in real time."

ImageOptim-CLI
"Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process."

Gifrocket
A Mac app to create animated GIFs from video.


Suggest Your Tool via Twitter

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.


384 Pages of CSS... Or just donate!

To help Web Tools Weekly stay ad free, you can offer support:

Criticism? Corrections?

Suggestions, corrections, improvements? Feel free to reply to this email.


Before I Go...

I've recently discovered Monocle, which is a Hacker News-like feed that, according to its creator Alex Maccaw, is "an experiment in creating a friendly and intelligent community around sharing quality content with a focus on technology, startups and frankly anything that appeals to the inquisitive mind." Although participation in discussion is currently limited due to early beta status, the content has been really good.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp