Web Tools Weekly
What a Tool!

Issue #274  (ES6 Modules, Testing, Media/SVG, React)10/18/18

Advertisement via Syndicate
The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to:
✓ Get ‘in-the-moment’ visual feedback
✓ See how people are really using your site
✓ Uncover insights to make the right changes
Try it for free today

Continuing on the topic of ES6 modules, here are a few more notes and tips to keep in mind when using this feature in your projects.

Normally, the value of this at the top level of any script in the browser will be equal to the Window object. Inside of a module, however, the value of this is undefined:

import { one, two } from '../js/module.js';

console.log(this); // undefined

Another thing you'll want to take note of is that HTML-style comments are not allowed inside modules. Maybe you're not even aware that HTML-style comments can be used in regular JavaScript, but I discussed it back in issue 221, if you want to know why. But just know you can't use them in modules.

Another thing that separates modules from scripts is the fact that all modules run in strict mode with no way to opt out. Also, when functions and variables are defined inside a module, they are available only in the top-level scope of that module. Each module has its own encapsulated scope and anything defined in a module won't pollute the global scope like top-level variables and functions in regular scripts. Only when a module's variables are exported will these be available outside the module.

Another tip: You don't have to export something when it's defined. Consider the following code:

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

export { add };

In this module, I'm not exporting the add() function when it's defined, but instead I export it as a reference. Notice the curly braces around the reference to the add() function after the export keyword.

The last point I'll mention here is that when you import a function or variable from a module, it will act as if it was defined using const. For example, if my module file contains the following:

export let color = 'yellow';

Notice what happens if I try to redefine the color variable after it's imported:

import { color } from '../js/secondary.js';

console.log(color); // yellow
color = 'pink';

// Chrome: Uncaught TypeError: Assignment to constant variable.

// Firefox: TypeError: "color" is read-only

Again, even though the color variable was defined using let, it's treated as if it was defined using const, because it's imported from a module. Imported functions and classes will likewise be read-only. I've printed the errors that Chrome and Firefox display when I attempted to do this with the color variable.

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

The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to get ‘in-the-moment’ visual feedback, see how people are really using your site, and uncover insights to make the right changes.    sponsored via Syndicate 

JavaScript Visualizer
A tool for visualizing execution context, hoisting, closures, and scopes in JavaScript.

Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

htaccess tester
Online tool to test your htaccess rewrite rules.

Still in Beta. A fast, easy way to test your ES6 applications. It is inspired by Mocha and Jest, but written for simplicity in ES6.

A better and pretty variable inspector for your Node.js applications.

Set up tests for REST in seconds with YAML.

Super-fast test-driven workflow with Cypress. Rerun your tests automatically along with your app.

What Has Focus?
Bookmarklet to tell you what element has focus. When something receives keyboard focus via the tab key, the current element will be logged to the JavaScript console.

A simple OS X menu bar app that notifies you if any of your websites are down.

Monitor and understand your front-end code. Identify performance regressions and compare previous page versions.

Mock your APIs for fast, robust, and comprehensive testing.

Recommended Reading for Developers
Learning React Book   CSS Master   MobX Quick Start Guide: Supercharge the client state in your React apps with MobX
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.

Media Tools (SVG, Charts, Images, etc.)

Build composable visualizations for the web with a data-first approach
Compose data-driven layers to create interactive visualizations in JavaScript with relational algebra supported data model.

A pure JavaScript QR code reading library. Takes in raw images and will locate, extract, and parse any QR code found within.

Online tool to create attractive images (PNG or JPEG) of code snippets for use in presentations, slide decks, screencasts, etc.

Open-source tool for creating designs, animations or interactive visualizations from data.

A JavaScript library for building and visualizing dynamic social systems on maps. Based on the Leaflet interactive mapping library.

Shrink Me
Ad-free online lossless image compressor that works offline.

SVG Filters
Playground for fiddling with and getting code for SVG filters.

SVG 3D Builder
An elaborate tool to create 3D models with SVG.

Icon Transition Generator
Create a snappy transition between two icons and download the SVG code.

Packs of premium royalty free sounds for your app, website, game etc.

Svgbob Editor
Convert your ASCII diagram scribbles into SVG.

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

React Tools

Create React App
The popular starter project to get up and running with React projects is now at version 2+ (details). 

The popular React framework is now at version 7+ (details).

A collection of useful React components that can be used in any project.

React Schedule Selector
A mobile-friendly when2meet-style grid-based schedule selector.

Highly configurable and easy to use React component to notify your users.

An experimental approach to bind forms and its inputs and editors together using the new React Context API.

React Select
Now at version 2+ (details). A flexible and beautiful Select Input control for React with multiselect, autocomplete, async, and creatable support.

Presentation decks built with MDX (the JSX in Markdown format).

React component for visualizing profiling data.

RESTful React
A consistent, declarative way of interacting with RESTful backends.

A Tweet for Thought

This is definitely the best answer to the request to "Write the scariest tech presentation title you can using only 4 words."

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 like keeping up with the latest in tech, TLDR Newsletter provides "byte sized" news for busy techies. It's a daily, curated newsletter with links and tl;drs of the most interesting stories in tech.

Thanks to all for subscribing and reading!

Keep tooling,