Issue #246 (Destruct Args, React, Uncats, Media)04/05/18
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 || {};
let 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
redux-remote-datatable
A React and Redux-based table for server-processed data.
draft-regex
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.
Pagedraw
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.
Undux
Dead simple state management for React.
react-lazyload-fadein
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.
FormState
A simple form state component for React.
|
The Uncategorizables
Segment
Simplify your analytics. Collect customer data with one API and send it to hundreds of tools for analytics, marketing, and data warehousing. sponsored
Zeplin
Build pixel perfect apps in peace. Design hand-off has never been easier. Generate styleguides and resources, automatically.
Slidewriter
Turn your notes into presentations instantly using Markdown, built-in themes, and options for custom fonts and colors.
Coherence
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.
Observable
A better way to code. Discover insights faster and communicate more effectively with interactive notebooks for data analysis, visualization, and exploration.
Catalog
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.
Stylish
Customize any website to make it look and feel anyway you want.
YouTubeTutor
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.
Cargo
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.
modern-server
Basic web server framework built with Go, with HTTP/2 and Let's Encrypt.
Keylogs
Easily dive into Google's Search Console Data: Identify opportunities, track rankings, mark changes, and grow your traffic.
mdn-browser-compat-data
Repository that contains compatibility data for Web technologies as displayed on MDN.
|
Media Tools
Rough.js
Create graphics with a hand-drawn, sketchy, appearance.
react-vis
A collection of react components to render common data visualization charts.
media.io
Online audio file converter.
Sirv
Easy image management, manipulation and delivery. Drive your business forward with the new breed of image CDN.
libvips
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.
imageflow
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.
unDraw
Like Unsplash, but for SVG art.
Symbolicons
A friendly and versatile icon family with thousands of icons in three distinct styles.
|
|
