Web Tools #417 - Testing Tools, React, GitHub/CLI Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #417 • July 15, 2021

Advertisement
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.
Get the Guide Today
Paragon

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:

<script src="js/main.js" type="module"></script>

Within that module, you can reference import.meta:

console.log(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.

HTTP/3 Check

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:

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

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

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.

A Tweet for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #416 - ImageKit.io, CSS Tools, React, Jamstack

Saturday, July 10, 2021

Web Tools Weekly WEB VERSION Issue #416 • July 8, 2021 The following intro is a paid product review for ImageKit.io, a global image CDN with built-in optimization, real-time transformations, and more.

Web Tools #414 - Frameworks, JS Utils, Uncats

Thursday, June 24, 2021

Web Tools Weekly WEB VERSION Issue #414 • June 24, 2021 Advertisement IntersectionObserver Examples Practical, real world React examples of Intersection Observer. • No external JavaScript or CSS

Web Tools #413 - DebugBear, VS Code, Build Tools, React

Thursday, June 17, 2021

Web Tools Weekly WEB VERSION Issue #413 • June 17, 2021 The following intro is a paid product review for DebugBear, a Lighthouse-based website speed monitoring tool that provides in-depth reports for

Web Tools #412 - Git/CLI, Media/SVG, Jamstack

Thursday, June 10, 2021

Web Tools Weekly WEB VERSION Issue #412 • June 10, 2021 Advertisement Engineering Leaders Need to Know How to Structure a Remote Hiring Process A new era of remote work suddenly arrived and managers

Web Tools #411 - Frameworks, Testing Tools, JS Utilities, Polymorphism

Thursday, June 3, 2021

Web Tools Weekly WEB VERSION Issue #411 • June 3, 2021 Advertisement Learn How Remote Pair Programming Can Increase Your Team's Efficiency Suddenly, the future of work materialized, and when your

JSK Daily for Jul 26, 2021

Monday, July 26, 2021

JSK Daily for Jul 26, 2021 View this email in your browser A community curated daily e-mail of JavaScript news Understanding 'this' keyword in JavaScript If you belong to a programming

Max Q - How about I knock off $2 billion?

Monday, July 26, 2021

TechCrunch Newsletter TechCrunch logo Max Q logo Monday, July 26, 2021 • By Darrell Etherington The space industry is still abuzz with the aftermath of Jeff Bezos' brief jaunt, and the

Mapped | Visualizing GDP per Capita Worldwide in 2021 💰

Monday, July 26, 2021

GDP per capita is one of the best measures of a country's standard of living. This map showcases the GDP per capita in every country globally. FEATURED STORY Mapped: GDP per Capita Worldwide in

3-2-1: The State of Developer Ecosystem 2021, Future of Web, Hidden Door to Build Personal Brand, How to Run Good Meetings, Guidelines to Write High Quality CSS and Bonus

Monday, July 26, 2021

Hello my friends! Here are 3 hand-picked articles from the tech world, 2 web development guides, and 1 best Tweet of the week. 🔥 Picks from the tech world 1. The State of Developer Ecosystem 2021​ This

Playing Games to Earn a Living in the Metaverse

Monday, July 26, 2021

“As a player, you actually earn 2-3x more than an entry-level job” - Gabby Dizon, co-founder of Yield Guild Games ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

You’re Invited: Getting Maximum Value from Cloud-Native Master Data Management

Monday, July 26, 2021

Webinar on August 10, 9am PT Hi there, Investing in high-quality, curated customer data fuels business results, from revenue growth to analytics adoption and productivity gains. However, quantifying

Just Launched: Startups of the Year 🚀

Monday, July 26, 2021

4.5k+ Cities; 37k+ Startups: Who'll Achieve Startup of the Year Status in Your City? Vote for 2021's Startups of the Year with Hacker Noon! How's it hanging, Hacker? 👋 Hacker Noon just

The best SaaS products with a free plan

Monday, July 26, 2021

This past week on Twitter, I asked people what their favorite SaaS products with a free plan were. The list is full of gems. Hiten's Pick The Highest Forms of Wealth What does it mean to be wealthy

Daily Coding Problem: Problem #476 [Medium]

Monday, July 26, 2021

Daily Coding Problem Good morning! Here's a solution to yesterday's problem. This is your coding interview problem for today. This problem was asked by Google. You are given an array of length

What ransomware victims saved thanks to free decryption tools

Monday, July 26, 2021

The best cheap VPNs; Beyond Raspberry Pi ZDNet Facebook Twitter LinkedIn ZDNet Tech Today July 26, 2021 placeholder Ransomware: Here's how much victims have saved in ransom payments by using these