Web Tools Weekly
What a Tool!

Issue #244  (Array Destruct Swap, Productivity, JS Libs, Media)03/22/18

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 14 Day Free Trial today!

Continuing the theme of ES6 destructuring, here's a quick tip that allows you to use array destructuring to swap the values of two variables.

Before ES6, to do this you'd normally have to incorporate a temporary variable, something like the following:

let one = 'Dogs',
    two = 'Alligators',

temp = one;
one = two;
two = temp;

console.log(one); // "Alligators"
console.log(two); // "Dogs"

Try it on JS Bin

That code is fine. It's not difficult to understand and it does the job. But with array destructuring, look how much cleaner the same swap can be done:
let one = 'Dogs',
    two = 'Alligators';

[ one, two ] = [ two, one ];

console.log(one); // "Alligators"
console.log(two); // "Dogs"

Try it on JS Bin

The third line above uses an array destructuring assignment. The main difference here from the previous tip on array destructuring is the fact that the right side of that line is using an array literal. And of course, the left side is the array destructuring pattern where the variables that will absorb the array are named.

I could have used different variable names on the left side of the equal sign (e.g. [ three, four ]), but that would defeat the purpose of the swap I want to achieve. Also, I'd have to ensure that I initialized the variables properly with let or const. The right side, however, has to be an object to be destructured, so I'm simply dropping the variables into it to build the array literal.

As mentioned, either technique is fine, but the ES6 method is just a little bit cleaner.

Now on to this week's tools!

Productivity Tools

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

Legal Leaf
Chrome extension that uses AI to read and summarize terms and conditions for you, in plain english, right in your browser.

Chrome extension that makes pages load faster, based on turbolinks.js.

Href Tools
Online web tools to get your work done faster. Includes code compressors, CSV to JSON, image to text, image compression, and more.

Chrome, Firefox, or Vivaldi extension to help you instantly find websites again without bookmarking. Simply search what you remember about them.

The most comprehensive app that helps you easily manage all your projects and teams' timesheets without clutter and complexity.

Chrome extension. A lightweight productivity suite for email that keeps your conversations and tasks from slipping through the cracks. Set timed reminders that arrive at the top of your inbox when you need them.

The easiest way to start and manage your freelance business. They streamline the whole process and help you with every tool you need in one place.

Provides all you need to make great software, including project management, issue tracking, and support, fused with just enough process to help you deliver.

Online tool for creating interactive sitemaps for web development and planning better UX.

New tab Chrome extension that offers a solution to continually having too many tabs open. Also offers tools for a quick view of GitHub Issues, Stack Overflow, and more.

Free, simple, and private bookmarking for everyone.

Recommended Reading (Affiliate Links via Amazon)

JavaScript Libraries and Frameworks

A super lightweight library that simulates some basic features of jQuery. Supports IE10+.

A tiny (3kB minified & gzipped) JavaScript framework that doesn't use any kind of diffing algorithm nor virtual DOM, which makes it really fast.

Now at version 2+. An open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications.

A reactive programming library for JavaScript that provides a simple API for writing event-based programs in a declarative style.

A beautiful, fun language designed to maximize your JavaScript productivity.

The popular web application framework is now at version 3+.

Open-Source JavaScript survey library. Also offers a visual survey builder and a service for data storage and analysis.

Just Animate
A robust JavaScript animation library that plugs nicely into the Web Animations API.

Now at version 3+. A fast, fun, and free open source HTML5 game framework.

A template for writing distributable JavaScript libraries.

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

Media Tools

Advanced image optimization tool. Reduce weight of images but not quality. Deliver images faster. Save on bandwidth and storage.

Online vector graphics editor, still in active development.

Leaflet TrueSize
A plugin for easily comparing sizes of geographical shapes.

Make any web visualization interactive via pan and zoom, for mobile and desktop, using just one line of code.

Now at version 1+. HTML5 2D canvas library for desktop and mobile applications.

Heroicons UI
A set of 104 free premium SVG icons.

Chrome extension to quickly preview and get all SVG assets from a website.

D3 Discovery
A search engine for D3.js plugins.

A modern editor for videos, GIFs, and images. Includes a meme maker, resizer, subtitle maker, filters, and more.

A JavaScript API for drawing unconventional text effects on the web.

SVG Backgrounds
Customizable SVG patterns and background designs for websites and blogs.

A Tweet for Thought

Developers will always find a flaw in the advancements of humanity.

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

This year Ashley Nolan is running another Front-end Development Tooling Survey. If you have a few minutes, fill it out. It'll be helpful to Ashley and anyone who reads the results when they're published.

Thanks to all for subscribing and reading!

Keep tooling,