Issue #256 (Array.from() map, Productivity, Frameworks, JS Utils)06/14/18
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
monday.com
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.
Graphite
Work anywhere without worrying about your data. All your work, files, and messages—encrypted, shareable, decentralized.
PixelSnap
MacOS tool. The fastest way to measure anything on screen.
Witeboard
An online whiteboard. Start drawing anywhere and share with your team.
Play.ht
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.
TimeFlip
This looks cool. A playful hardware gadget that will track your time for different projects based on a flip of a dice-like object.
OverSight
Monitors you Mac's mic and webcam, alerting you when the internal mic is activated, or whenever a process accesses the webcam.
Zapier
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
|
Front-end Frameworks
Saber.js
A minimalistic framework for building static websites using Vue.js.
React Native Auth Boilerplate
A React Native boilerplate with authentication already implemented.
Zippytech
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.
ng-toolkit
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.
Electron
Now at version 2+. A framework for creating native applications with web technologies like JavaScript, HTML, and CSS.
RSUITE
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.
|
JavaScript Utilities
ProppyJS
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-rect
Observe the rect (x, y, top, bottom, width, etc.) of a DOM element.
workway
A general purpose, Web Worker driven, remote namespace with classes and methods.
event
Very small and simple utility to bind event listeners to elements.
rfdc
Really fast deep clone utility for cloning objects.
strict-import
Prevent `require` from searching upwards for required modules.
Ranger
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
