Web Tools Weekly
What a Tool!

Issue #278  (Arrow Funcs, Git/CLI, React, Uncats)

If you still haven't used ES6's arrow functions much, then you might not be familiar with some of this feature's quirks and differences from regular functions. Besides the syntax, there are some things to keep in mind when using arrow functions.

First, unlike regular functions, the arguments object is not available inside the body of an arrow function:

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

// Error: arguments is not defined
console.log(myFunc(1, 2));

Try it on JS Bin

Second, you might be aware that if your arrow function has only a single line, the return value is implied without the use of the return keyword. But if you want to return an object literal, you have to wrap the literal in parentheses:

// This won't work
let myFunc = a => { one: a, two: 'b' };

In the above code I'm attempting to return the object literal, but the browser will throw an error because it thinks the first curly brace is the beginning of the function body. Here's the corrected version with the return value shown:

// This works
let myFunc = a => ({ one: a, two: 'b' });

/* Return value:
[object Object] {
  one: 6,
  two: "b"

Try it on JS Bin

The final quirk I'll mention here, which is intended to reduce confusion surrounding the use of the this keyword, is the fact that this is not defined inside an arrow function. This might trip you up if you are accustomed to referencing this inside an event handler. For example:

btn.addEventListener('click', function () {
  console.log(this); // references the button
}, false);

btn.addEventListener('click', () => {
  console.log(this); // undefined
}, false);

Try it on JS Bin

I do this all the time, so it's certainly something that will likely prevent me from using arrow functions with event handlers. But if you're intending to do this sort of thing, just know that you can't use this inside an arrow function as part of an addEventListener() call.

Now on to this week's tools!

Many of my previous JavaScript/DOM tips have been released in e-books:

JS & DOM Tips Volume 1 >
JS & DOM Tips Volume 2 >
JavaScript E-Books

Git, GitHub, and Command Line Tools

Public issues for private repos. Creates a public interface to GitHub issues on a repository-by-repository basis.

A free, open-source, self-hosted code search and intelligence server that helps developers find, review, understand, and debug code. Use it with any Git code host for teams of any size.

A command-line tool to turn web pages into beautifully formatted PDFs.

Define commands, using plugins, to execute across all your repositories.

CLI for creating reusable, modern React libraries using Rollup and create-react-app.

Transform your TypeScript module into a CLI. Leverages the TypeScript type system to generate a CLI based on the exported function signature of your module.

A fast and friendly Git client for Mac and Windows.

Discover the open source projects your organization is using that need financial support.

GitHub Stats
Embed your GitHub profile anywhere you want.

Add your files/content to a GitHub gist easily with a single command.

Recommended Courses for Developers
Fullstack Advanced React & GraphQL   ES6 for Everyone

React Tools

The Platform
Web APIs turned into React hooks and Suspense-friendly React components.

React version of Tabulator, an advanced JavaScript table library with many useful features.

React Tiny FAB
A tiny (~1kb gzip'd) WAI-ARIA compliant floating action button for React.

React Twitter Embed
The simplest way to add Twitter widgets to your React project.

React Progressive Loader
Utility to load images and React components progressively, and get code splitting for free.

React Webcam
A webcam component for React.

A component built to display and manage calendar "gantt" charts. Uses virtual rendering to be reactive an efficient.

A rebuild of react-bootstrap-table, a flexible and customizable data table component for React.

React Truncate String
React component to truncate a long string of text in the middle (or wherever you want) with an ellipsis.

Input masking component for React compatible with IE8+.

A React component for anchoring a fixed position element, such as a dropdown menu, to the edge of an element on the page.

Recommended Reading for Developers
Vue.js in Action   CSS Master   CSS Secrets Book
Have you 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.

The Uncategorizables

No ads, no tracking, just comments. Hosted commenting that's painless to embed, a pleasure to use, and a breeze to moderate.

Back up your files from all your computers, to anywhere. Automatically copies your files to multiple places, just in case.

PDF table extraction for humans. Makes PDF table extraction easy. Download the extracted tables as CSVs or an Excel spreadsheet.

A free, open source and self-hosted platform for selling digital downloads like ebooks.

A fork of Chromium without the Google integration.

A simple, powerful way to store, manage and grow your creative network.

The perfect tool to store and share web and interface design screens–in perfect order.

Powerful Mac App to zoom into pixels, sample colors, measure distances, check alignments, and much more.

Turn your designs into playable user flow diagrams that tell a story.

Start accepting cryptocurrencies with a few lines of code.

Domain Wheel
Website name, URL, and business name generator.‚Äč

A Tweet for Thought

A good reminder about the browser extensions we depend on and trust.

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

Websites in 2018. This is both humorous and sad.

Thanks to all for subscribing and reading!

Keep tooling,