Issue #274 (ES6 Modules, Testing, Media/SVG, React)10/18/18
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!
|
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.
Colorable
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.
Highground.js
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.
Dumper.js
A better and pretty variable inspector for your Node.js applications.
StREST
Set up tests for REST in seconds with YAML.
cypress-app-watcher-preprocessor
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.
UptimeBar
A simple OS X menu bar app that notifies you if any of your websites are down.
DebugBear
Monitor and understand your front-end code. Identify performance regressions and compare previous page versions.
WireMock
Mock your APIs for fast, robust, and comprehensive testing.
|
|
Recommended Reading for Developers
|
Media Tools (SVG, Charts, Images, etc.)
Muze
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.
jsQR
A pure JavaScript QR code reading library. Takes in raw images and will locate, extract, and parse any QR code found within.
CodeZen
Online tool to create attractive images (PNG or JPEG) of code snippets for use in presentations, slide decks, screencasts, etc.
Morph
Open-source tool for creating designs, animations or interactive visualizations from data.
AgentMaps
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.
Finetone
Packs of premium royalty free sounds for your app, website, game etc.
Svgbob Editor
Convert your ASCII diagram scribbles into SVG.
|
React Tools
Create React App
The popular starter project to get up and running with React projects is now at version 2+ (details).
Next.js
The popular React framework is now at version 7+ (details).
libreact
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.
react-notifications-component
Highly configurable and easy to use React component to notify your users.
react-formular
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.
mdx-deck
Presentation decks built with MDX (the JSX in Markdown format).
react-flame-graph
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
