Web Tools Weekly
What a Tool!

Issue #246  (Destruct Args, React, Uncats, Media)04/05/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!

Here's yet another useful technique associated with ES6 destructuring. You may have seen a pattern like the following:

function doStuff(one, two, options) {
  options = options || {};
a = options.a,
      b = options.b,
      c = options.c,
      d = options.d;

// more code here...

doStuff('example1', 'example2', {
  a: 'opt1',
  b: 'opt2',
  c: 'opt3',
  d: 'opt4'

Try it on JS Bin

The idea here is that the doStuff() function takes two mandatory parameters (one and two) along with a number of optional values as a final parameter in the form of an object (options). When you glance at the definition of the doStuff() function, however, you might not be able to tell right away that multiple values might be expected here.

You can use destructuring to make this more clear:
function doStuff(one, two, { a, b, c, d }) {
  console.log(a, b, c, d);

doStuff('example1', 'example2', {
  a: 'opt1',
  b: 'opt2',
  c: 'opt3',
  d: 'opt4'

Try it on JS Bin

How much nicer is that? Not only is the code shorter, but you can tell immediately by looking at the head of the function that the final argument is an object of options.

Of course, if you want the final object parameter to truly be optional, you have to provide a default value for it, otherwise the code will throw an error if the third object is not passed in. So you can do this:
function doStuff(one, two, { a, b, c, d } = {}) {
  console.log(a, b, c, d);

Try it on JS Bin

Now the browser won't throw an error because I've declared a default empty object value just in case a third argument isn't passed in.

Now on to this week's tools!

React Tools

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

A React and Redux-based table for server-processed data.

Plugins for Draft.js and React to improve TextEditor capabilities.

React Flickity Component
A React.js component for using Flickity, a touch-friendly, responsive, flickable carousel.

React Rotary Knob
Skinnable "knob" for React. Hard to explain, but the demo is pretty cool.

Redux Box
Modular and easy-to-grasp Redux-based state management, with minimal boilerplate.

Design your web UI, then use the design directly from code.  No more time wasted translating mockups to JSX and CSS.  Like adding another React developer to your team.

Dead simple state management for React.

Lazy load your React component and nicely fade it in when it's ready.

React Show More
Allows you to display a certain number of items in a list, then the user can click to show more until they reach the end of the list.

A simple form state component for React.

The Uncategorizables

Simplify your analytics. Collect customer data with one API and send it to hundreds of tools for analytics, marketing, and data warehousing.   sponsored 

Build pixel perfect apps in peace. Design hand-off has never been easier. Generate styleguides and resources, automatically.

Turn your notes into presentations instantly using Markdown, built-in themes, and options for custom fonts and colors.

Running any code on the Coherence servers is as easy as calling a function. Create scheduled, recurring jobs just as easy. No need for a task queue ever again.

A better way to code. Discover insights faster and communicate more effectively with interactive notebooks for data analysis, visualization, and exploration.

Living style guides for digital products. With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Customize any website to make it look and feel anyway you want.

Chrome extension. The best way to organize education by tutorials from YouTube. Extends YouTube functionality for collecting playlists as courses, tracking the progress of training, and more.

A browser with almost no UI, for people that hate using a mouse. Can be controlled using only a few keyboard shortcuts.

SSL Certificate Expiration Alerts
Get notified via email when an SSL certificate gets close to expiration.

Basic web server framework built with Go, with HTTP/2 and Let's Encrypt.

Easily dive into Google's Search Console Data: Identify opportunities, track rankings, mark changes, and grow your traffic.

Repository that contains compatibility data for Web technologies as displayed on MDN.

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

Media Tools

Create graphics with a hand-drawn, sketchy, appearance.

A collection of react components to render common data visualization charts.

Online audio file converter.

Easy image management, manipulation and delivery. Drive your business forward with the new breed of image CDN.

A fast image processing library with low memory needs.

Fastly Image Optimizer
Online image optimizer that lets you select image format, dimensions, quality, and more.

Open-source software that scales, edits, and optimizes images. Does not have a visual interface; designed to be embedded into software like WordPress, eBay, Craigslist, or Facebook.

Like Unsplash, but for SVG art.

A friendly and versatile icon family with thousands of icons in three distinct styles.

A Tweet for Thought

Here's one product that truly benefited from a redesign.

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 is most definitely the best way to write secure and reliable applications.

Thanks to all for subscribing and reading!

Keep tooling,