Web Tools Weekly
What a Tool!

Issue #241  (Destruct Assignments, Testing, GitHub/CLI, Mobile)03/01/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.

Previously, I introduced the concept of object destructuring, a new feature in ES6, using an example that incorporated variable declarations. In addition to that technique, you also have the option to use destructuring in an assignment expression.

So instead of this:

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

You would do this:
({ dairy, grains, vegetables, fruits } = groceries);

Assuming, of course, that groceries represents an object that has the number of properties expected (in this case, four).

In the latter example, I'm using four variables that have already been given values in another part of the code (not shown above), but they will be updated to reflect the values taken from the destructured groceries object.

Notice that the syntax is slightly different in the assignment statement: there are parentheses placed around the entire statement. This is because the opening curly brace looks like a block statement to the JavaScript parser and a block statement cannot appear on the left side of an assignment statement.

This feature opens up lots of possibilities because you can put a destructuring assignment expression anywhere you would normally put a value. So you can even use it as an argument in a function call:
function doSomething (foods) {
  console.log(foods.fruits); // "apples"
  console.log(grains, vegetables, fruits);
  // "bread", "celery", "apples"

doSomething({ grains, vegetables, fruits } = groceries);

Again, the above assumes you've already defined a groceries object. Here's a full demo.

Now on to this week's tools!

Testing and Debugging 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

React Scope
Visualize your React components as you interact with your application.

Screenshots at scale based on headless Chrome.

Page Analyzer
Web scraping page analyzer. Loads the page using headless Chrome and analyzes the HTML and JavaScript objects on the page.

A simplified zero-configuration wrapper around Karma, webpack, Jasmine, and Puppeteer.

A static type checker for JavaScript.

Pinpoint UI component bugs instantly. Ensures UI consistency in React components, down to the pixel. Every commit is automatically tested for visual changes.

Chrome extension that adds a colored border around websites that match user inputted preferences. Useful for visually identifying dev server vs. test, production, etc.

Crawl an HTTPS-website (entire website, recursively, following internal links) and search for non-secure images, scripts, etc.

Rocket Validator
The fastest way to validate HTML5 on large sites. Find accessibility and HTML issues in your large sites, in seconds.

A scriptable browser for Web developers. Allows you to interact with a web page through an external script.

Git, GitHub, and CLI Tools

Keep track of your productivity, apps and websites you use for work. Real-time task efficiency feedback, time tracker, built-in website blocker, and more. Helps to perform better every day.     sponsored

fish shell
A smart and user-friendly command line shell for macOS, Linux, and the rest of the family.

Instant terminal sharing. A fork of tmux (app that allows multiple terminal sessions in one window) that provides an instant pairing solution.

Search for availability of domain names via the terminal.

Use template literals in shell scripts.

GitHub File Icon
Chrome or Firefox extension to add useful icons to different files when browsing repos on GitHub.

Refined GitHub
Browser extension (Chrome, Firefox, Opera) that simplifies the GitHub interface and adds useful features.

View a website's technology stack from the terminal.

A CLI React performance optimization tool that identifies potentially unnecessary re-rendering.

TLDR Pages
A community effort to simplify the beloved `man` pages (UNIX docs) with practical examples.

Augment your Mac Terminal with easy native UI. Instant, native micro-GUIs for shell scripts and command line apps.

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

Mobile Tools

Mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web.

Aspect Ratio
Aspect ratio calculator and device resolutions reference for designers and developers.

Create better native apps for iOS and Android with a new breed of development tools.

Native Directory
A curated list of 277 React Native libraries to help you build your projects.

JavaScript view library for building performant hybrid mobile applications.

Supernova Studio
The world's first true design-to-code platform. Turn Sketch designs into native mobile apps in minutes.

Code-free mobile app building platform with e-commerce, monetization features, and lots more.

A Tweet for Thought

According to Nicholas, here's the reason you don't write code comments.

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 recently stumbled upon Rob Hope's YouTube show called Yo!, for designers and developers. I've considered doing something like this for Web Tools Weekly, but I don't think I can match the production quality of this one. Nicely done.

Thanks to all for subscribing and reading!

Keep tooling,