Issue #417  (import.meta, Testing, React, Git/CLI)07/15/21

When using ES6 modules, you have the ability to access an object called import.meta, which provides metadata about the currently executing module. This object is only accessible inside a module.

So for example your page might reference a module like so:

Within that module, you can reference import.meta:

If you log that object to the console like the code above, depending on the browser used, you'll see an object that you can expand and view the properties of.

The import.meta object currently exposes a single property: import.meta.url. This is the URL from which the module was loaded (in Node this is a file:// URL).

In JavaScript: The Definitive Guide, David Flanagan explains the practical value for this feature:

"The primary use case of import.meta.url is to be able to refer to images, data files, or other resources that are stored in the same directory as (or relative to) the module."

He goes on to provide an example where a string needs to be localized for a URL built using the URL() constructor, which requires passing in a base URL as the second parameter. That parameter would be import.meta.url.

As mentioned, the url property is the only metadata exposed. I'm assuming more properties could be added later if the spec expands this feature. For now, that's a nice tidbit to know about if you need easy access to the location of the module being executed.


Now on to this week's tools!

Testing and Debugging Tools

Ship Embedded SaaS Integrations in Minutes with a Native iPaaS
Building native integrations between your app and your customers' 3rd party SaaS apps, such as Salesforce or Slack? See how a native iPaaS could save your team weeks of development and endless maintenance in the guide below.   sponsored 

Prestige
A text-based HTTP client in the browser, an interface-less Postman.

Semgrep
A lightweight static analysis tool for many languages to help you find bugs and enforce code standards.

Miniflare
A simulator for developing and testing Cloudflare Workers. An alternative to wrangler dev, written in TypeScript, that runs your workers in a sandbox implementing Workers' runtime APIs.

OutFront JS
An onscreen console for mobile browsers. Intercepts all your console.log, console.warn, console.error, and errors and logs them to a popup on screen.

RTL:WTF
Read the web like Right-to-Left readers do and learn about the challenges and how to help solve them.

HTTP/3 Check
Yes, HTTP/3 is a thing now. Enter a URL to check if a website is HTTP/3 ready.

Web Component DevTools
Chrome extension that adds a DevTools panel to allow a quick look at custom elements on the current page, enabling modification of attributes and properties of the components.

Temp API
Test your front-end apps with temporary REST APIs featuring custom headers, dynamic responses, and configurable delayed responses.

Testing Playground
A simple and complete DOM testing playground that encourages good testing practices.

UpTime.onl
24/7 Website health and monitoring service that has a decent free plan.

On the Release Radar:

• Size Limit - JS cost analysis, now at version 5+
• jest-puppeteer - Now at version 5+
• Polypane - RWD browser/testing now at version 6+

React Tools

TLDR Newsletter - Byte Sized News for Busy Techies
TLDR is a free daily newsletter for developers with links and TLDRs of the most interesting stories in tech 📱, science 🚀, and coding 💻!   sponsored 

React Starter Kit
Front-end starter kit using React, Relay, GraphQL, and JAM stack architecture.

gooey-react
Generate 'gooey' SVG-based blobs in React that can be customized and animated.

testing-react
Testing utilities that allow you to reuse your Storybook stories in your React unit tests.

Vision Camera
A library that allows you to build a feature-rich camera app with React.

Simple React Validator
A simple react and react native form validator inspired by Laravel validation.

react-dictate-button
A button to start speech recognition using the Web Speech API, with an easy to understand event lifecycle.

Rooks
A collection of 60+ regularly-used custom hooks as utils for React.
 
react-geolocated
A React higher-order component for using the Geolocation API.

react-icon-blur
A tiny React library to create a frosted glass effect on icons.

React Styleguidist
Isolated React component development environment with a living style guide.

React Drag and Drop Files
Light and simple React drag-and-drop files library with flexible options that allow you to use whatever you want for the drop area.

react-thumbnails
React component to show photo thumbnails with various on-screen options. The live demo works nicely and is the best way to grasp what this does.
 

Git, GitHub, and CLI Tools

TLDR Newsletter - Byte Sized News for Busy Techies
TLDR is a free daily newsletter for developers with links and TLDRs of the most interesting stories in tech 📱, science 🚀, and coding 💻!   sponsored 

gitmoji-cli
A gitmoji interactive client for using gitmojis on commit messages.

fsxx
File system in the style of zx (the Bash alternative).

Magit
A complete text-based user interface to Git that fills the gap between the Git command-line interface and various GUIs.

GitHub Exporter
A Typescript-based set of packages to make exporting artifacts from GitHub easier. Useful for those migrating information out of github.com.

simple-git-hooks
A lightweight, dependency-free Git hooks manager for small projects.

DocToc
Generates a table of contents for Markdown files inside a local Git repository. Links are compatible with anchors generated by GitHub or other sites.

Axolo
A pull request collaboration tool for tech teams working on GitHub and Slack.

Kallithea
A free software source code management system that supports Mercurial and Git, and has an easy-to-use web interface.
 
Lotus
Not free. A native Mac app that helps you keep up with GitHub notifications without stress.

ShellHistory
Not free. Mac app to backup, sync, and organize your shell history.

npmx
An advanced CLI interface for npm that lets you search packages from the terminal, install a selected package with one keystroke, and more.

m4b-tool
Older tool. A wrapper for ffmpeg and mp4v2 to merge, split, or manipulate audiobook files with chapters.
 

Want the latest in productivity tools and articles? Try my other newsletter, Tech Productivity. Includes tools, articles, and tips on productivity and remote work.

A Tweet for Thought

Sometimes the advice to "just read the docs" doesn't always help.

 

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

Can't afford a Computer Science degree? The Open Source Society University (OSSU) provides a path to a free self-taught education in Computer Science via online materials.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris