Issue #270  (Arrow Functions, Uncats, Frameworks, React)09/20/18

Getting the most out of MongoDB on AWS In this webinar, we will introduce you to the options for deploying, managing, and optimizing MongoDB on AWS. We will also provide various tips to ensure your deployments are configured for optimal security, HA, and query performance.   Save your spot

There are a number of different quirks related to arrow functions in ES6. My feeling around arrow functions is that they're best used in simple examples where you're not too concerned about the value of this in a particular scope. I'll get to some of the quirks in other tips, but I thought in this tip I'll just introduce some common ways you'll see arrow function syntax expressed.

Here's the simplest example:

Try it on JS Bin

When passing a single argument to the arrow function, you can omit the parentheses around the arguments. In this case, I'm passing in a single argument, value.

Also, since there is only a single line in the function body (in this case, just a reference to the value argument), there's no need for the return keyword or curly braces around the function body. Both are implied, and the function will return whatever is evaluated in the body.

So the above would be more or less equivalent to:

Being so accustomed to writing ES5, I have to admit I find this much more readable (and this is what you'd get if you converted the previous snippet into ES5 using a tool like Babel). Not seeing the return keyword in there seems more confusing than it should be at first glance. It also seems more elegant with the inclusion of the word "function".

The next example is much better because it uses multiple arguments and the function body consists of two lines:

Try on JS Bin

This is a much more readable example. The parentheses clearly indicate the arguments received and the function body is much more understandable, especially with the use of the return keyword (which is required in this instance since there are multiple expressions in the body).

If you are defining an arrow function that has no arguments, then you have to include a set of empty parentheses, like this:

Try on JS Bin

This arrow function receives no arguments and simply returns the lone expression's evaluation. No return keyword and no curly braces, just like the first example.

That's arrow functions in a nutshell, and I've only scratched the surface since I haven't even begun to describe any of the quirks and gotchas associated with them when used in more complex situations.

Now on to this week's tools!  

The Uncategorizables

Getting the most out of MongoDB on AWS
In this webinar, we will introduce you to the options for deploying, managing, and optimizing MongoDB on AWS. We will also provide various tips to ensure your deployments are configured for optimal security, HA, and query performance.   sponsored via Paved 

Flute
A highly reliable email API with a powerful search engine, router, and failover capabilities. Plug-in your provider or server in minutes.

ReLaXed
Creates PDF documents interactively using HTML or Pug (a shorthand for HTML). Allows complex layouts to be defined with CSS and JavaScript, while writing the content in a friendly, minimal syntax close to Markdown or LaTeX.

Wexond
An extensible web browser with a beautiful UI, built on top of Electron, React and styled-components.

mdx-go
Lightning-fast MDX-based dev server for progressive documentation.

Codementor
On-demand marketplace for software developers. Find a developer for live programming help and freelance jobs.

Pair & Compare
Lets you find the best fonts and font pairings for your next project easily and smoothly: Try all Google fonts (and more) without the hassle.

Malvid
Generate an interactive UI to develop, preview and document web components.

Local
Local WordPress development made simple. Stop debugging local environments and spend more time launching WordPress sites.

SESS
Simple Email Sending Service. A minimalist email and newsletter sending platform.

Postman
Complete API development environment, for API developers, available for Mac OS X, Windows, and Linux. Makes working with APIs faster and easier by supporting developers at every stage of their workflow.

Front-end Frameworks

Fusion.js
A plugin-based universal web framework. Gives you the developer experience you expect from a React/Redux setup and provides tools to take project quality to the next level.

Reakit
Toolkit for building interactive UIs with React.

Sing App Lite
Free admin dashboard template with a responsive layout and high quality UI built with Bootstrap 4.

Teutonic CSS
A 12KB of CSS to jump start your HTML. A modern CSS framework – versatile, well documented.

Stream
A beautiful Open Source Bootstrap 4 UI Kit.

Themes For App
Free (do whatever you want), fully-responsive Bootstrap 4 themes for your next startup and side-project.

dejavu
The Missing Web UI for Elasticsearch: Import, browse and edit data with rich filters and query views, create search UIs visually.

Deck
A beautiful cross-platform UI kit for designing card-based interfaces and media websites.

Evie
MIT licensed template bundled with a minimal style guide to build websites faster. Extremely lightweight, customizable, and works in modern browsers.

Papaya
Fast, responsive, customizable, pay-what-you-want, open license landing page templates for any project.

PrimeReact
The most complete UI framework for React.

React Tools

React Proto
React prototyping for designers and developers.

Code Surfer
React component for scrolling, zooming and highlighting code.

Re-bat
A simple state management library for React applications, built with the new Context API.

Mauerwerk
A react-spring driven masonry-like grid with enter/exit and shared element transitions.

React Editable JSON Tree
React component to display, edit, and update JSON data in a tree format.

React Toast Notifications
A configurable, composable, toast notification system for React.

React Async Elements
Suspense-friendly async React elements for common situations.

React Step Wizard
A modern flexible step wizard component built for React.

React Values
A set of tiny, composable React components for handling state with render props.

downshift
Now at version 2+ (details). Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, drop-down, select, combobox components.

Reaptcha
reCAPTCHA component (for spam/bot protection on forms) for React.

React Loads
A headless React component to handle promise states and response data.

A Tweet for Thought

This 7-year-old knows exactly what a podcast is.
 

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

If you haven't done so already, go fill out the State of JavaScript 2018 survey. You can sign up to be notified when the results are in, and I'll probably link to them in this spot in the future.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris