Issue #276 (Renaming Modules, Testing, JS Utils, React)11/01/18
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!
|
Testing and Debugging 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 breakpoint widths and review all visual changes with a single click. sponsored via Syndicate
Denzi
Uptime, vulnerabilities, sales reporting made easy. The first monitoring tool specific for WordPress and WooCommerce.
filter-console
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.
Healthchecks.io
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.
Colorblindly
Chrome extension that helps developers simulate the experience blind users have on websites.
react-native-testing-library
Simple React Native testing utilities to help you write better tests with less effort.
Sitespeed.io
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.
Lookback
User experience recording made simple. See the screen, face, voice and touches of your users. Record in-house or remotely and without equipment.
latency
The simplest tool to test latency from multiple locations.
Reactotron
A desktop app (macOS, Linux, and Windows) for inspecting your React and React Native projects.
Checkly
Monitor the performance and correctness of your API endpoints and vital site transactions from a single, simple dashboard.
|
|
Recommended Courses for Developers
|
JavaScript Utilities
Meet Mason: Front end, no code required
Mason is the world's first front-end-as-a-service software platform. Design, deploy, and deliver on-demand front-end software solutions to any application or codebase—all with a single line of code. sponsored via ThoughtLeaders
fs-remote
Drop-in replacement for Node's `fs` module, designed for web browsers. It delegates all `fs` calls to a node server.
cross-pipe
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.
isect
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.
zet
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.
Tabulator
The easy to use, fully featured, interactive table JavaScript library. Now at version 4+ (details).
Trix
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
Ajax module in vanilla JavaScript.
spacetime
A lightweight JavaScript timezone library.
Xterm.js
Terminal front-end component written in JavaScript that works in the browser. Enables apps to provide full-featured terminals to their users.
excel4node
A full featured .xlsx file generation library allowing for the creation of advanced Excel files.
simple-data-table
Lightweight and simple data table with no dependencies.
|
|
Recommended Reading for Developers
|
React Tools
Meet Mason: Front end, no code required
Mason is the world's first front-end-as-a-service software platform. Design, deploy, and deliver on-demand front-end software solutions to any application or codebase—all with a single line of code. sponsored via ThoughtLeaders
React Storefront
Build and deploy e-commerce progressive web apps in record time.
react-typesetting
Experimental React components for creating beautifully typeset designs.
react-lodash
Use any lodash function as a React component.
tippy.js-react
React component for Tippy.js (a highly customizable tooltip and popover library).
react-recontext
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
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
