Web Tools Weekly
What a Tool!

Issue #242  (ES6 Object Destruct, Uncats, CSS/HTML, React)03/08/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.

Continuing on the topic of ES6 destructuring, the power of destructuring is evident in the ability to navigate into nested object structures to get specific bits of information as needed.

For example, let's say you have the following object:

let myObj = {
  name: "Pat",
  location: "Earth",            

  status: {
    initial: {
      start: 1,
      end: 2

    other: {
      start: 10,
      end: 20


Using destructuring, you can assign deeply nested values from this object to variables for use later in your code:
let { status: { initial }} = myObj,
    { status: { other }} = myObj;

console.log( initial.start ); // 1
console.log( other.end ); // 20

View on JS Bin

In previous destructuring examples, the element(s) inside the first curly brace represented the variable(s) that would be used to hold the destructured value(s). In this case, however, the variable is inside another nested set of curly braces. The first thing before the colon here indicates the object where you want to start searching.

Each nested set of curly braces allows you to go deeper into the object. You can then use dot notation to access the property you want, as I've done in the code above when logging the values.

If you want to use a different variable name for the object you're accessing,  you can do this:
let { status: { initial: initialValue }} = myObj;

console.log( initialValue.end ); // 2

View on JS Bin

In this case, I'm assigning the status.initial object to a variable called initialValue. This adds a little extra complexity to the process, and might make the code a little harder to maintain, but it's an option if that's something you need to do.

Now on to this week's tools!

The Uncategorizables

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

A modern URL shortener that lets you set custom domains for your shortened URLs, manage your links, and view the click rate statistics.

Transform your LinkedIn into a spectacular resume.

Query your devices like a database. Uses basic SQL commands to leverage a relational data-model to describe a device.

The ultimate collection of beautiful, realistic PSD mockups to showcase your work. Available for free, just how you like it.

The self hostable cloud to run Lamba functions and microservices.

Connect your MailChimp mailing list to your Facebook Page and start growing your subscriber list in Messenger.

A fast micro web server. An extremely minimal, highly performant Express.js alternative.

Paid newsletters made simple. Makes it simple for a writer to start an email newsletter that makes money from subscriptions.

A place to share your computer setup (hardware) with others.

Give thanks to the open source maintainers you depend on. Run this in your project and it will tell you which of your dependencies accept donations.

CSS and HTML Tools

A curated newsletter with all the cool, wacky and the obscure tech news on a weekly basis (you’ll get it on Tuesdays). Is free and will help you earn the most Slack reactions in your office   sponsored

Unused CSS
Scan a website for unused CSS selectors.

Hey Meta
Quality check and generate meta tags for your website.

Standalone parallax scrolling with CSS variables. Allows you to dynamically update the variables depending on the scroll position.

Create awesome emails in minutes with drag-and-drop simplicity.

CSS gradient generator. Create lovely CSS color gradients for your designs.

React CSS Themr
Easy theming and composition for CSS Modules.

A new, modified version of Normalize.css by Sindre Sorhus.

a micro-interaction library built with CSS animations and controlled by JavaScript.

CSS Gridish
Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.

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

React Tools

Lightweight portal system for React. Mega seeds included.

React Morph
Morphing UI transitions made simple.

A simple component for making elements draggable.

React Component ... Component
Declarative version of React.Component. Because sometimes you want a lifecycle or some state but don't want to create a new component.

Highlight keywords and add colors to text.

Proton Native
Create native desktop applications through a React syntax, on all platforms.

React Agent
A JavaScript library for your client store, server querying, and database management.

A simple React popup component. Use it as a tooltip, modal, sub-menu, etc.

Next.js-like framework for server-rendered React apps built with React Router 4.

Draw 2D primitives in sketchy style with React.

A Tweet for Thought

A useful new Flexbox feature in Firefox's DevTools, from the Mozilla team.

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

How to Read the ECMAScript Specification by Timothy Gu... written in the form of a web specification.

Thanks to all for subscribing and reading!

Keep tooling,