Issue #278 (Arrow Funcs, Git/CLI, React, Uncats)11/15/18
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) => {
console.log(arguments);
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' };
console.log(myFunc(6));
|
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' });
console.log(myFunc(6));
/* 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!
|
Git, GitHub, and Command Line Tools
Percy: Automated Visual UI Testing
Catch visual bugs before your users do. Percy’s all-in-one visual testing solution makes it easy to test your UI across browsers and responsive widths and review all visual changes with a single click. sponsored via Syndicate
BugBucket
Public issues for private repos. Creates a public interface to GitHub issues on a repository-by-repository basis.
Sourcegraph
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.
percollate
A command-line tool to turn web pages into beautifully formatted PDFs.
Autogit
Define commands, using plugins, to execute across all your repositories.
create-react-library
CLI for creating reusable, modern React libraries using Rollup and create-react-app.
typescript-to-cli
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.
Fork
A fast and friendly Git client for Mac and Windows.
BackYourStack
Discover the open source projects your organization is using that need financial support.
GitHub Stats
Embed your GitHub profile anywhere you want.
gistpush
Add your files/content to a GitHub gist easily with a single command.
|
|
Recommended Courses for Developers
|
React Tools
Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more. Sign up for free. sponsored via Paved 
The Platform
Web APIs turned into React hooks and Suspense-friendly React components.
react-tabulator
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.
react-gantt-timeline
A component built to display and manage calendar "gantt" charts. Uses virtual rendering to be reactive an efficient.
react-bootstrap-table2
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.
react-input-mask
Input masking component for React compatible with IE8+.
react-float-anchor
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
|
The Uncategorizables
Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more. Sign up for free. sponsored via Paved 
CommentBox.io
No ads, no tracking, just comments. Hosted commenting that's painless to embed, a pleasure to use, and a breeze to moderate.
Relica
Back up your files from all your computers, to anywhere. Automatically copies your files to multiple places, just in case.
Excalibur
PDF table extraction for humans. Makes PDF table extraction easy. Download the extracted tables as CSVs or an Excel spreadsheet.
Zipsell
A free, open source and self-hosted platform for selling digital downloads like ebooks.
ungoogled-chromium
A fork of Chromium without the Google integration.
Stitch
A simple, powerful way to store, manage and grow your creative network.
Drafta
The perfect tool to store and share web and interface design screens–in perfect order.
QuickLens
Powerful Mac App to zoom into pixels, sample colors, measure distances, check alignments, and much more.
Overflow
Turn your designs into playable user flow diagrams that tell a story.
AcceptCrypto
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
