Web Tools Weekly
What a Tool!

Issue #256  (Array.from() map, Productivity, Frameworks, JS Utils)06/14/18

Advertisement via Paved
The New Generation of Project Management Tools is Here and it’s Visual
monday.com is a project management tool your team will actually enjoy using. It makes it fun and easy for everyone to collaborate, focus on what's important, and get more done at work. monday.com is a visual project management tool that’ll help you and your team collaborate and achieve more together.
Start Your Free Trial Now

The ES6 Array.from() method that I introduced previously allows you to pass in an optional map function as a second argument. The map function gets called on every element in the array-like object that you're converting to an array, so you can manipulate the items in some way as you convert them. Here's an example:

function doNums () {
  return Array.from(arguments, (item) => item + 10);

let myNums = doNums(20, 30, 40, 50);

console.log(myNums); // [30, 40, 50, 60]

Try it on JS Bin

Here the doNums() function returns the object being converted to an array (again, it's the arguments object). Only this time, as I'm converting the items to an array, I'm altering each of the items using the second argument passed into Array.from(). In this example, I'm using ES6's arrow function, but you could use a regular function instead.

So the result for the above example produces an array from an array-like object, and the numbers that were passed in were changed – in this case, by adding 10 to each one.
As you can see, Array.from() is a simple but powerful feature that allows you to manipulate collections using clean syntax rather than a bunch of complex utility functions that can get messy.
Now on to this week's tools!

Productivity Tools

A project management tool your team will actually enjoy using. It makes it fun and easy for everyone to collaborate, focus on what's important, and get more done at work.    sponsored via Paved

Slack Save
Slack plugin to quickly save Slack messages into an HTML file.

Work anywhere without worrying about your data. All your work, files, and messages—encrypted, shareable, decentralized.

MacOS tool. The fastest way to measure anything on screen.

An online whiteboard. Start drawing anywhere and share with your team.

Narrates articles from Medium, Pocket, or any website using superior quality voices and customizable playlists.

Microsoft To-Do
Web, iOS, Android, or Windows to-do list app from Microsoft.

This looks cool. A playful hardware gadget that will track your time for different projects based on a flip of a dice-like object.

Monitors you Mac's mic and webcam, alerting you when the internal mic is activated, or whenever a process accesses the webcam.

Easy automation for busy people. Moves info between your web apps automatically, so you can focus on your most important work.

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

Front-end Frameworks

A minimalistic framework for building static websites using Vue.js.

React Native Auth Boilerplate
A React Native boilerplate with authentication already implemented.

Professionally built React components designed to be a comprehensive set of rich UI components that can be easily integrated into existing or new applications.

Create React Redux App Structure
A highly opinionated React + Redux app structure with build configurations.

An Angular universal PWA boilerplate prepared for easy deployment in a serverless environment.

Smooth UI
An open source component library built with React and Styled Components, focused on developer experience and accessibility.

Now at version 2+. A framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

A large suite of React components including buttons, modals, form elements, grid components, and lots more.

Mustard UI
Not your average CSS Framework. A starter CSS framework that actually looks good.

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

JavaScript Utilities

Tiny 1.5kB utility library enabling functional props composition for components.

Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element and its targets.

Timeline Line
A tiny library to draw a line around DOM elements, to help visually with a vertical timeline.

Observe the rect (x, y, top, bottom, width, etc.) of a DOM element.

A general purpose, Web Worker driven, remote namespace with classes and methods.

Very small and simple utility to bind event listeners to elements.

Really fast deep clone utility for cloning objects.

Prevent `require` from searching upwards for required modules.

A small, standalone JavaScript library for working with ranges of numbers.

A Tweet for Thought

Here's how to answer a written interview coding test question.

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

In case you haven't seen enough on the GDPR, here's a nice website to help you generate the needed documentation to suit your website or app's needs.

Thanks to all for subscribing and reading!

Keep tooling,