Issue #41  (Array.every(), Text Editors, JS Utils, Media)05/01/14

Check out this week's main sponsor:
WatchMeCode WatchMeCode

Get the JavaScript skills you need from years of experience,
boiled down in to byte-sized screencasts every week!

Use this discount code to get 35% off: webtoolsweekly

In ES5 there were added a number of new Array methods, including Array.prototype.every(). With this method you can check all the items inside an array for a condition that's defined in a callback function.

The method will return true if all items meet the conditions, but will return false as soon as it finds one item in the array that doesn't meet the specified condition.

Here is a simple example:
var set1 = [2, 4, 6, 8, 10];
var set2 = [2, 4, 5, 8, 10];

console.log(set1.every(function (a) {
  return a % 2 === 0;
})); // true

console.log(set2.every(function (a) {
  return a % 2 === 0;
})); // false

(Demo) Here we have two numeric arrays defined. We log every() method call for each of the arrays. Notice the function that's passed as an argument into every(). That's the function that defines our condition to be met.

In this case, we're checking to ensure all the numbers in the array are even numbers, using the modulus operator (%). As shown in the trailing comment for each log, the first array passes the test, but the second one doesn't (it has a "5" in it).

As you can see, this is a very simple way to loop through all the items for a specific check, without incorporating too much complex logic.

Other things to note:
  • every() doesn't alter the original array.
  • It takes an optional second argument where you tell it what value to use as this when executing the callback function.
  • Supported in IE9+, so it's pretty safe to use and you can find a polyfill for IE8 and below.
  • More info on MDN

Now on to this week's tools!

Text Editors, IDEs, Conversion Tools

Exactly what it says. Simple with a visual table display for the output, and it gives you the option of selecting the raw data or downloading as a CSV file.

"Transform & Enrich JSON using JavaScript. No Setup. Step by Step Manipulation. Go back at any Time. CSV to JSON & JSON to CSV Import/Export. Fully client-side; Works offline."

Diet Coda
From the folks who made Coda, this is a text editor and file management system for iPad.

"Textastic is an advanced code editor for iPad with rich support for syntax highlighting, (S)FTP and Dropbox."

Create slides for presentations from Markdown.

A collaboration tool to help coders code in pairs remotely in real time. Supports Sublime Text, Vim, and Emacs.

Package Control
"The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date."

JavaScript Scope Context Coloring
A scope highlighter for your JavaScript.


JavaScript Utilities and Mini Libraries

"A JavaScript library for creating, reading and editing .zip files, with a lovely and simple API."

"Mini html parser for webworkers / node. Parses and builds a simplified DOM tree in one go. Intended for well-formed HTML."

"The world's smallest and fastest classical JavaScript inheritance pattern, augment, is a seven line function which allows you to write CoffeeScript style classes with a flair of simplicity."

"Multithread is a simple wrapper that eliminates the hassle of dealing with Web Workers and transferrable objects. Run any code you'd like asynchronously, in its own thread, without interrupting the UX."

"Brings the hygienic macros of languages like Scheme and Rust to JavaScript. Macros allow you to sweeten the syntax of JavaScript and craft the language you’ve always wanted."

"An event-based loop class which can take arbitrary numbers of intervals/callback pairs."

Voix JS
"A JavaScript library to add voice commands to your sites, apps or games."

A simple pane splitter for AngularJS, allowing resizing of the panes.

"A JavaScript library committed to improving user experience by empowering users to interact with web apps using the keyboard."

"Easy easter eggs (konami code, etc) for your site."


Multimedia Tools

Project Naptha
"Highlight, copy, and translate text from any image." It's pretty amazing, try it on the home page.

Create diagrams or flow charts in ASCII and it converts it to a fun-looking version of your diagram in PNG on the fly.

"An application and library that transforms image files to data URIs and embeds them into a single CSS file."

Perfect Icons
"The easiest way to create resolution independent social icons."

A simple animated, SVG-based loading indicator.

"Use the HTML5 Web Audio API for dynamic sound synthesis. It's like jQuery for your ears."


A Tweet for Thought

When it comes to a client's budget, I'm sure we can all relate to this tweet from designer Emir Ayouni.


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

Here's an interesting service called Email It In that lets you email attachments to yourself and they are automatically added to Google Drive, Dropbox, or OneDrive.

Thanks to all for subscribing and reading!

Keep tooling,
Copyright © Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp