Web Tools Weekly Issue #54 (Array.some(), JS Utils, Frameworks, Uncats)

Issue #54 (Array.some(), JS Utils, Frameworks, Uncats)07/31/14

In a previous issue I briefly introduced Array.prototype.every(), which lets you check all the values in an array against a condition. The method returns true if all values meet the condition, and false if at least one does not. Hence "every".

You also have the option to use a similar method: Array.prototype.some(). It's somewhat of a misnomer but it basically does the reverse of what every() does. Here is an example:

var a = [1, 3, 5, 7, 9],
    b = [1, 3, 4, 8, 9];

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

console.log(b.some(function (c) {
  return c % 2 === 0; // true
}));

(JS Bin demo) Similar to the examples with every(), we're using a modulus operator function as the condition to check if the arrays contain "some" even numbers. And by "some", we mean "at least one".

The first example returns false because all the numbers in the first array are odd. The second example returns true because it has two even numbers, hence "some" of the array items are even numbers.

As is the case with every(), some() lets you provide an optional second argument where you tell it what value to use as this when executing the function.

It should also be noted that in the case of both methods, they will stop iterating over the values as soon as they determine what value to return. So in the second console.log example shown above, the script wouldn't get to the "8" in the array because it will return true as soon as it gets to the "4", which is an even number, thus meeting the required condition and then exiting the iteration.

Array.prototype.some() is supported in IE9+, and there is a polyfill shown on the MDN page.

Now on to this week's tools!

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

JavaScript Utilities and Mini Libraries

LazyJsonUndoRedo
"A 'drop in' history handler with automatic undo/redo functionality for nested javascript objects, using ES6 Object.observe() or Polymer shim. Best for small editor tools."

Please JS
"JavaScript Library for creating random pleasing colors and color schemes."

collection.js
"This package provides JavaScript implementations of common collections, with many useful features."

angular-smarty
"Autocomplete UI written with Angular JS."

Chart.js
"Simple, clean and engaging charts for designers and developers."

Card
"Make your credit card form better in one line of code." Nice on-page demo showing how easy it is to use along with the effect.

DropKick
Now at version 2.x, it's a "plugin for creating beautiful, graceful, and painless custom dropdowns."

Autopolyfiller
A gutsy library. "This is like Autoprefixer, but for JavaScript polyfills. It scans your code and applies only required polyfills."

WURFL.io
"A JavaScript file that provides information about the device that is accessing your page. Whether it is a desktop browser, a tablet, a mobile phone, a smart TV, game console or someone with his wristwatch."

fast.js
"A collection of micro-optimisations aimed at making writing very fast JavaScript programs easier. It includes fast replacements for several built-in native methods."

Front-end Frameworks

Base
"A super simple, responsive framework built for all devices big, small and in-between."

IVORY
A responsive front-end web framework that makes your front-end development faster and easier. "Takes you all the way from 1200px on down to 320px."

Concise
"A better front-end framework. Give up the bloat. Stop tripping over your classes. Be Concise."

SUIT CSS
"A reliable and testable styling methodology for component-based UI development."

Web Starter Kit
From Google: "Start your project with the Web Starter Kit and ensure you're following the Web Fundamentals guidelines out of the box."

Chopstick
"The lightweight, responsive, plug & play design framework."

Flatstrap
"Always free, always Open-Source. Sometimes a project doesn't need gradients and drop shadows. We got rid of them."

skelJS
"A www frontend framework. One 20kb file. Four powerful components: CSS Grid System, Responsive Handler, CSS Shortcuts, Plugin System."

rails-bootstrap
"Installing Bootstrap for Rails 4.1. Guide and tutorial from the RailsApps Project."

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

The Uncategorizables

Extensionizr
A starting point for generating a template for Chrome extension development.

Breach
"A browser for the HTML5 era. Entirely written in Javascript. Free. Modular. Hackable."

Cockpit
"An API-driven CMS without forcing you to make compromises in how you implement your site."

Park.io
".io Domain Backorders for $99."

Self-Destructing Cookies
Firefox add-on that "gets rid of a site's cookies and LocalStorage as soon as you close its tabs. Protects against trackers and zombie-cookies. Trustworthy services can be whitelisted."

What's My Browser Size?
Exactly what you think.

ChromeMyAdmin
A Chrome extension that "provides you the administration GUI of MySQL server. It is like phpMyAdmin, Sequel Pro."

Targeted.io
"Painlessly email your users based on their interest in your app."

A Tweet for Thought

Norman Clarke informs us that you're never too young to start thinking like a JavaScript developer.

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

I recently came across this 1994 Wired article by Joshua Quittner where he describes his experience of trying to convince McDonald's that they should grab mcdonalds.com, which, at the time, was still available.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly