Web Tools Weekly
What a Tool!

Issue #243  (ES6 Array Destruct, Frameworks, JS Utils, Productivity)

DragDropr – Universal Visual Content Builder
DragDropr lets you create, edit and design the content for your website, webshop, or any other web content by simply dragging and dropping. It does not matter which CMS you use – DragDropr fits them all.
Start your 30 Day Free Trial today!

Previous tips focused on object destructuring in ES6. Let's now look at Array destructuring, which is based on the same principles with a few syntax differences and of course is used with arrays.

let fruits = [ 'apple', 'orange', 'pear'];
let [ fruitOne, fruitTwo ] = fruits;

console.log(fruitOne, fruitTwo);
// "apple"
// "orange"

Try on JS Bin

The syntax (as shown on line two above) is identical to object destructuring except for the use of square brackets in place of the curly braces that are used with object destructuring. And similarly, the variable names can be whatever you want.

The array that's destructured is not affected or changed in any way, so just like objects, this is simply an easy way to extract data from different parts of the array.

With array destructuring, you also have the option to omit items so you can get to only the ones you want. Here's how that would look using the same array as in the previous code block:
let fruits = [ 'apple', 'orange', 'pear'];
let [ , , fruitThree ] = fruits;

console.log(fruitThree); // "pear"

Try on JS Bin

Notice in order to extract the third item from the array, I've included two empty placeholders using two commas to "skip" the first two and get to the third item, which I've then logged.

Now on to this week's tools!

Front-end Frameworks

DragDropr – Universal Visual Content Builder
DragDropr, the only CMS-independent "What-You-See-Is-What-You-REALLY-Get" drag & drop page builder.   sponsored 

A set of React UI components that supports Pinterest’s design language.

Now at version 5+. Framework for server-rendered or statically-exported React apps.

Serverless with all the fixings: webpack, Babel, Jest, ESLint, and Prettier.

Angular Material
Now at version 6+ (beta). Material Design components for Angular.

Ionic PWA Toolkit
Still in beta. Ionic recommended solution for building lightning fast PWAs with 0 config and best practices built in. Go from 0 to production ready PWA with Ionic and Stencil.

Vue Bootstrap with Material Design
That covers almost every click-bait dev headline. jQuery-free Material Design for Bootstrap 4 (Vue version).

Front End Toolkit
A set of best practices from Devbridge Group, to start a project quickly without any JavaScript library dependency.

The most popular framework in the universe is now at version 4+ stable, after being in beta since the summer of 1873.

A module used to arrange card elements including content infinitely according to layout type.

Ready-to-go React app starter project, optionally available in TypeScript.

JavaScript Modules and Utilities

Small library that provides a template tag function for composing regular expressions.

Dragon Drop
Accessible drag and drop list reorder module. Test the demo out with your keyboard. Works nicely.

An iframe-based Shadow DOM "poorlyfill".

A vanilla JavaScript router that works everywhere.

Redux Rest Resource
Dead simple and ready-to-use store module for handling HTTP REST resources.

An extremely fast immutable list (i.e. array alternative) with a comprehensive functional API.

Make your Next.js application work offline using service workers via Google's Workbox.

Create the next immutable state by mutating the current one.

A mini Ajax library that provides Ajax, JSONP, and other features for simple web applications.

Detect when an element is ready in the DOM.

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

Productivity Tools

Send any links from your browser directly to your inbox in just one click.

Slack + GitHub
With two of your most important workspaces connected, you’ll get updates about what’s happening on GitHub—without leaving Slack.

Happy Mood Score
Feedback and employee engagement tool for agile companies, startups, or companies with remote employees, distributed teams, or digital nomads.

Stop being interrupted by alerts. Let a robot pig send you only what’s important.

A decentralised encrypted communication app for the Matrix.org ecosystem. Create, share, communicate, chat and call securely, and bridge to other apps.

Chrome extension. Turn a new tab into a checklist, note, or outline. Make lists, share notes, and brainstorm with your team.

A product documentation tool for managers, designers, and engineers, designed for small teams.

The definitive automatic time tracking tool for improving productivity and profitability. From billable hours and meetings, to travel and downtime.

Your personal assistant that brings email communication back to the 21st century. For Gmail and Apple Mail.

Type in your three most important things for the year and get a monthly reminder.

A Tweet for Thought

Luke Stevens' recent tweetstorm on AMP is an important one. Lots of controversy surrounding AMP lately and this thread includes some discussion and links on the subject.

Send Me Your Tools!

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

If you're drowning in email and feel a revolution is needed, you might want to try applying the tenets of the Email Charter.

Thanks to all for subscribing and reading!

Keep tooling,