Web Tools Weekly
What a Tool!

Issue #270  (Arrow Functions, Uncats, Front-end Frameworks, React)

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:

let myFunc = value => value;

console.log(myFunc('Hi')); // "Hi"

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:

var myFunc = function myFunc(value) {
  return value;

console.log(myFunc('Hi')); // "Hi"

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:

let myFunc = (a, b) => {
  a = a - 1;
  return a + b;

console.log(myFunc(4, 5)); // 8

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:

let myFunc = () => 2 + 3;

console.log(myFunc()); // 5

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!  

Did you enjoy this week's coding tip? Previous tips are compiled in my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


The Uncategorizables

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

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.

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

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

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.

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

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

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

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.

Recommended Reading for Developers
Learning React Book   You Don't Know JS: this & Object Prototypes book   Using SVG with CSS3 & HTML5 book

BTW - If you've written a book for developers that's available on Amazon, reply to this email and let me know. I'll consider including it here. No charge.

Front-end Frameworks

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.

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.

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.

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

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

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

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

The most complete UI framework for React.

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

React Tools

React Proto
React prototyping for designers and developers.

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

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

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.

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

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,