Web Tools Weekly Issue #82 (array.forEach(), CSS/HTML, JavaScript Utilities, CLI Tools)

Issue #82 (array.forEach(), CSS/HTML, JavaScript Utilities, CLI Tools)02/12/15

If you're like me, you probably still write your loops using a standard for loop. But I keep having to remind myself that, in many cases, the ES5+ array.forEach() method is often the best choice.

The forEach() method is supported in IE9+ and is similar to jQuery's each(). Here's an example of its use:

var arr = ['one', 'two', 'three', 'four'];

arr.forEach(function (v, i, a) {
  document.body.innerHTML += i + ': ' + 
                             v + ' - from array: (' + 
                             a + ')<br>';
});

(JS Bin demo)

Here's a bullet rundown of how forEach() works:

It's an array method, so it will work only in certain cases.
The lone required argument is a callback function to be executed once on each array item.
The function passes three arguments (current element, index, and the array itself).
forEach() takes an optional second argument that allows you to define the value of this in the function.
If the array is modified, the third argument will reflect the changes, however, the loop will visit only the elements that were part of the array before execution began.

In the example above, I'm outputting the index, the current value of the array item, then I'm stating where the item came from by outputting the full array (which doesn't get modified), just to demonstrate the basics.

The real power of this method becomes clear when you are modifying the array on the fly or when you are providing a custom value for the this keyword. And of course, the syntax is much nicer than a standard loop.

Also, note that in my example, I'm using an anonymous function right inside the forEach() method, but you're probably better off doing this:

function doSomething() {
  // code here...
}

var arr = ['one', 'two', 'three', 'four'];

arr.forEach(doSomething);

Which allows your function to be reused elsewhere and just makes the whole thing much cleaner.

If you need this to work in IE8, MDN has a polyfill as well as lots more detailed info and examples.

Now on to this week's tools!

CSS and HTML Tools

grunticon
"A Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support."

Stylup
"A markup language for managing HTML class names in responsive designs. It parses a custom syntax into conventional HTML class names so your markup is less repetitive."

TACHYONS
"Fully responsive, performance first css patterns." Touted as "the fastest CSS framework in the world."

Amadeus
"Keeping CSS variables logical and well-organized can quickly become unwieldy. Amadeus is a set of conventions to keep syntax organized and intuitive."

AngularCSS
"CSS on-demand for AngularJS. Optimize the presentation layer of your single-page apps by dynamically injecting stylesheets as needed."

css.js
"A lightweight, battle tested, fast, CSS parser in JavaScript."

SelectorGadget
Chrome extension. "An open source tool that makes CSS selector generation and discovery on complicated sites a breeze."

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

JavaScript Utilities and Mini Libraries

ResponsiveSlides.js
A simple and lightweight responsive slider jQuery plugin. (Corrected link from last week)

accounting.js
A tiny JavaScript library providing simple and advanced number, money, and currency formatting.

Docchi
"Parses comments in JavaScript code and outputs the structure and context of the comments in any particular format, JSDoc is the default."

PleaseWait
"A simple library to show your users a beautiful splash page while your application loads."

libphonenumber
"Google's common Java, C++ and JavaScript library for parsing, formatting, storing and validating international phone numbers."

Barn
"Fast, atomic persistent storage layer on top of localstorage."

Shortcut.js
"A keyboard shortcut library, Shortcut.js listens for common keyboard shortcuts and triggers custom events for you to use."

QS
"Helps you extract and manipulate all query string tokens from a given or current URL: you can check if a specific query string key exists, then check its value."

ImagesLoaded
"Detect when images have been loaded."

vitullo-spinner
"A simple to use loading spinner for React."

Git, GitHub, and Command Line Tools

letswork / letsfun
"A CLI tool to disable all your distractions."

git-open
"Git command to open the GitHub page for the repo."

Ajour
"A simple way to keep a collaborative journal in Git projects to make small notes, write down thoughts, ideas and comments or just managing a journal in personal projects."

Your GitHub Portfolio
Allows you to build a curated portfolio page based on your GitHub account.

drumcommit
"Plays a drumroll sound every time you commit on Git."

Writefully
Converts your GitHub repository into a content management system.

trash
"Cross-platform command-line app for moving files and directories to the trash - a safer alternative to rm."

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

A Tweet for Thought

From Dmitry Baranovskiy: Is operator precedence in JavaScript really this difficult?

Suggestions / Corrections

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

Before I Go...

If you're considering a hardware purchase, you might want to do your research using Product Chart, an interactive, category-based, product comparison tool. Looks really easy to use and useful.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly