Web Tools Weekly
What a Tool!

Issue #240  (Obj Destructuring, Productivity, JS Utils, Content)02/22/18

Advertisement (via Syndicate)
See How Users Experience Your Designs
Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free.

Another useful feature added in ES6 is object and array destructuring. Even if you aren't familiar with the technique, you've likely heard the phrase thrown around in ES6 conversations.

In brief, destructuring allows you to extract data from objects and arrays using a simpler and less redundant syntax. Prior to ES6, if you wanted to assign an object's properties to variables, you might do something like this:

let groceries = {
  dairy: 'milk',
  grains: 'bread',
  vegetables: 'celery',
  fruits: 'apples'

let dairy = groceries.dairy,
    grains = groceries.grains,
    vegetables = groceries.vegetables,
    fruits = groceries.fruits;

console.log(dairy, grains, vegetables, fruits);
// "milk" "bread" "celery" "apples"

View on JS Bin

The above works fine for grabbing these values, but the code is too repetitive. With destructuring, the same thing can be accomplished with the following brief and elegant code:
let groceries = {
  dairy: 'milk',
  grains: 'bread',
  vegetables: 'celery',
  fruits: 'apples'

let { dairy, grains, vegetables, fruits } = groceries;

View on JS Bin

The log in this example (omitted in the code above, but used in the demo) will produce the same result as in the previous.

That's the basics of object destructuring, but there's much more to be said about the concept. For example, what about nested objects? Can you define default values for missing properties?

I'll try to cover a few more tips related to destructuring in future issues, but in the meantime, feel free to do a search for more info. There are lots of resources covering this subject in depth. 

Now on to this week's tools!

Did you buy my previous JavaScript/DOM tips book? Here's the latest one...
70 JavaScript & DOM Tips for $5 (Volume 2)

Productivity Tools

Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free.   sponsored via Syndicate

All My Desktops
Remote Desktop from any browser. No need to install plugins or client software to connect. All your computers are always one click away from any browser.

Better technical interviews. Code belongs in git. Not on a whiteboard. Show candidates you value their time. Get better results.

Manage and share your collection of sites. Create own Groups of your favorite content and share with your friends or colleagues.

An intelligent tool for tracking the current status of a development process, monitoring the workflow, flexible project and team management.

Modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems.

Visual Project and Process Management. Organize tasks and ideas the way they look in your mind.

Record and share video clips and screencasts to make remote work way better.

Tree Style Tab
Firefox add-on. Displays browser tabs in a tree-like format in a side panel, organized according to where they originated when opened.

A powerful and flexible personal assistant. Human + machine intelligence for executing work on demand.

JavaScript Utilities

Learn everything about automated web testing with Selenium. Features 29+ lessons and 100+ screencasts covering JavaScript, Java, C#, Ruby, Python. 50% Launch Discount available!  sponsored

Tiny ~1200-byte Express-inspired client-side router.

Transforms arrays into virtual DOM trees; a terse alternative to JSX

A tiny, open source library for building reactive, spreadsheet-like calculations in JavaScript.

The fastest math typesetting library for the web. Simple API, no dependencies – yet super-fast in all major browsers.

Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

Easy to use timer/chronometer/countdown library compatible with AMD and Node.

Increment/decrement number values in text inputs using up and down arrow keys. No external dependencies (under 1kB gzip'd).

A tiny library (and collection of adapters) for easily implementing FLIP transitions (a concept to improve animation perf). Still in beta.

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

Databases, Content, JSON, etc.

A JSON-like data structure that can be modified concurrently by different users, and merged again automatically.

Allows you to serialize and revive objects containing circular references, dates, regexes, class instances, etc.

Create dashboards using YAML/JSON files.

Datasette Publish
Lets you upload one or more CSV files and turn them into a browseable web interface and JSON API using Datasette.

A clever, simple, and fast library letting any web site provide APIs.

Apollo GraphQL
Provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on back-end changes.

Array data management made fast and easy. Manages massive dense and sparse multi-dimensional array data that frequently arise in important scientific applications.

A documentation builder for inclusive designers and those trying to be inclusive designers.

AST explorer
Paste or drop code into the editor and inspect the generated AST (Abstract Syntax Tree).

A Tweet for Thought

Whitney Williams addresses the idea that maybe CSS isn't taken as seriously as it should be in hiring.

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

I don't usually care much for flashy, experimental demos, but this CodePen is worth checking out. Nice use of sound, animation, and functionality.

Thanks to all for subscribing and reading!

Keep tooling,