Web Tools Weekly
What a Tool!

Issue #276  (Renaming Modules, Testing/Debugging, JS Utilities, React)

I've discussed ES6 modules in multiple tips, but there's one small detail I still didn't cover. When exporting or importing bindings from modules, you have the choice to use different names for the bindings than originally used when they are defined.

For example, let's assume my secondary.js file (the one I'm using for exports to main.js) is exporting two bindings, a variable and a function. Here's what I can do when exporting:

function add(n1, n2) {
  return n1 + n2;

let mynum = 10;

export { add as addFunc };
export { mynum as myNumber };

Notice two things here. First, I'm not exporting when the function and variable are defined; I'm exporting references to those bindings, which I discussed previously.

But more significantly, notice the "as" keyword used inside the curly braces, which is what allows me to give these exported items new names. This is similar syntax to when I previously namespaced my references by attaching them to a specific object on export (see previous tip).

Now when I import them into main.js, I would have to use the new names:

import { addFunc, myNumber } from '../js/secondary.js';

console.log(addFunc(5, myNumber)); // 15

The original names for these bindings ("add" and "mynum") would not work. They have to be referenced using the exported names.

And one final note here: When I exported the add() function and the mynum variable with their new names, I could have done this with a single line, like this:

export { add as addFunc, mynum as myNumber };

That's similar to what I'm doing in main.js when I import the items. Something to keep in mind if you're exporting multiple references.

Now on to this week's tools!

Are you learning JavaScript? You'll love my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


Testing and Debugging Tools

Uptime, vulnerabilities, sales reporting made easy. The first monitoring tool specific for WordPress and WooCommerce.

Filter out unwanted console.log() output. Useful when you don't control the output, for example, filtering out PropType warnings from a third-party React component.

Monitors the heartbeat messages sent by your cron jobs, services and APIs. Get immediate alerts you when they don't arrive on schedule.

Favicon Checker
Compare your favicons on all major web browsers, including native dark and light modes.

Chrome extension that helps developers simulate the experience blind users have on websites.

Simple React Native testing utilities to help you write better tests with less effort.

Now at version 7+ (details). A set of Open Source tools that makes it easy to monitor and measure the performance of your web site.

User experience recording made simple. See the screen, face, voice and touches of your users. Record in-house or remotely and without equipment.

The simplest tool to test latency from multiple locations.

A desktop app (macOS, Linux, and Windows) for inspecting your React and React Native projects.

Monitor the performance and correctness of your API endpoints and vital site transactions from a single, simple dashboard.

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

JavaScript Modules and Utilities

Drop-in replacement for Node's `fs` module, designed for web browsers. It delegates all `fs` calls to a node server.

Create two streams that are cross piped. Useful if you have an API that accepts a stream but want to return a stream that represents that pipeline as well.

Intersection detection library. Allows you to find all intersections in a given set of segments.

Nuxt.js basic auth module
Provide basic authentication to your Nuxt.js application.

ES6 sets have no methods for computing the union (∪), intersection (∩) or difference (⊖). This is an extension for ES6 sets, similar to how sets work in Python.

The easy to use, fully featured, interactive table JavaScript library. Now at version 4+ (details).

Now at version 1+ (details). A rich text editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of.

Ajax module in vanilla JavaScript.

A lightweight JavaScript timezone library.

Terminal front-end component written in JavaScript that works in the browser. Enables apps to provide full-featured terminals to their users.

A full featured .xlsx file generation library allowing for the creation of advanced Excel files.

Lightweight and simple data table with no dependencies.

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.

React Tools

React Storefront
Build and deploy e-commerce progressive web apps in record time.

Experimental React components for creating beautifully typeset designs.

Use any lodash function as a React component.

React component for Tippy.js (a highly customizable tooltip and popover library).

A lightweight state management inspired by Flux, Redux, based on the latest React Context API.

React Move
Beautiful, data-driven animations for React.

React Mock
Declarative mocks for React state and global APIs. Aim is to isolate all components, not just presentational and stateless components.

React Numpad
An extensible number pad component for number, date, and time.

React Color Tools
A set of tools as React components for working with colors.

Reuse different React components to create new ones (similar to using multiple CSS classes on HTML elements, in the style of atomic design).

React EdiText
A React component that converts text into editable content.

A Tweet for Thought

As this thread demonstrates, there are actually people who find the concept of "burning CDs" archaic and mysterious. Now I feel really old.

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

Flashcards for Developers is a curated list of flashcards to boost your professional skills. Includes flashcards for React, Vue, Front-end Interview questions, and lots more.

Thanks to all for subscribing and reading!

Keep tooling,