Web Tools Weekly
What a Tool!

Issue #255  (Array.from(), Uncats, Git/CLI, Media)06/07/18

Segment Personas is Now Out of Beta
Personas allows you to combine user data and events into one universal customer profile. Then, you can build computed traits and custom audiences on top of your data and auto-sync to Facebook, Google, Redshift, and hundreds more.
Sign up today
Segment Personas

One of the most welcome additions to JavaScript in recent years is a feature that allows you to convert an array-like object to an array. This is now possible using the Array.from() method, added in ES6.

Array-like objects are quite common in front-end applications. Here's a common example to demonstrate how this feature works:

function doSomething (a, b, c) {
  console.log(Array.isArray(arguments)); // false
  let args = Array.from(arguments);
  console.log(Array.isArray(args)); // true

doSomething(1, 2, 3);

View on JS Bin

The above code uses one of the most common array-like objects – the arguments object contained in all functions. You can see that the object is initially not an array, but after using Array.from(), it becomes a valid array. From there, I then have the option to use any array method to manipulate the collection.

Array.from() can convert any array-like object or any iterable object and convert it to an array. As of this writing, Array.from() doesn't seem to work on DOM collections, even though it seems like it should. But if you want to convert a DOM collection to an array, you can use the spread operator, another ES6 feature:
let myLinks = document.querySelectorAll('li a');

console.log(Array.isArray(myLinks)); // false

myLinks = [... myLinks];
console.log(Array.isArray(myLinks)); // true

Try on JS Bin

I'm not entirely sure why Array.from() doesn't work on DOM collections. Maybe it's not supposed to, or else browsers haven't implemented that yet. If you have any info on that, feel free to reply to this email. Nonetheless, the spread operator technique is simple enough and technically uses less code.

Now on to this week's tools!

The Uncategorizables

Personas by Segment is now out of beta
Use Personas to treat your customers like people, not data points. Get started with Personas. sponsored 

An open source authentication server (OIDC) that handles user signup, login, profiles, management, and more.

Hooks Data
An API for real world data in real time. Get updates about thousands of topics in a single API.

Upload files for free. Secure, anonymous, free. It's the simplest way to send files from A to B.

OSS Ninja
Open Source licenses with just a link. Just select a license then insert the name of the organization and a custom link is ready to use.

Build natural and rich conversational experiences. Give users new ways to interact with your product by building engaging voice and text-based conversational interfaces powered by AI.

Crypto Tab
Chrome or Firefox extension to replace your browser New Tab page with a Bitcoin price chart.

A full-featured HTTP client for MacOS that lets you test and describe the APIs you build or consume.

Fax Rocket
The easiest way to send a fax. No subscriptions, contracts or gimmicks.

Lets you write simple, fast and quality type safe code while leveraging both the JavaScript and OCaml ecosystems.

Node.js API Framework with Headless CMS capabilities.

Recommended Reading for Developers
Learning React Book   Ruby for Beginners Book   CSS in Depth Book

Git, GitHub, and Command Line Tools

Git Enforcer
GitHub bot for validating pull request mergeability requirements and issues structure.

Git Project Manager
VSCode extension that allows you to open a new window targeting a Git repository directly from a VSCode window.

GitHub Contributions Chart Generator
Enter your GitHub user name and this tool will generate a chart of all your contributions as a downloadable image.

GitHub Review Filter
Chrome extension to filter files in GitHub code review using a glob pattern (filenames with a wild card character).

Gradient color component for Ink (React tool for interactive command-line apps).

A terminal based interface for viewing Git repositories.

Chrome extension to add IntelliSense hints to GitHub.

Lets you to write complex shell tasks using plain JavaScript without having to dabble with shell scripting.

Source code escrow for developers. A solution for software developers to provide clients with source code escrow as part of their service or license agreements.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Media Tools

Royalty-free music for commercial projects, in exchange for a link back.

Easy WebGL tool to animate images and videos.

Convert SVG icons into React components.

Streamline Emoji
A unique set (780+) of free, unique vector emojis.

Adds a GIF-like moving preview to video thumbnails. Supports YouTube, Vimeo, Dailymotion, and Streamable.

A remarkable set of 2,500+ premium icons covering 23 categories in 6 editable styles.

A JavaScript library for freehand drawing and creating sketches with simple shapes. A customizable WYSIWYG HTML canvas editor.

Image Trace Loader
JavaScript utility that loads images and exports traced outlines as image/SVG+XML URL-encoded data.

Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped).

A Tweet for Thought

This tweet by Evan Johnson kind of sums up what a library like React is all about.

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

Paper Programs, oddly enough, is a browser-based system for running JavaScript programs on pieces of paper.

Thanks to all for subscribing and reading!

Keep tooling,