Web Tools Weekly Issue #343 (globalThis, Testing, Media, Uncats)

Issue #343 (globalThis, Testing, Media, Uncats)02/13/20

A little while ago I heard rumblings that ECMAScript was considering adding a globalThis property that would solve many of the issues with the `this` keyword in different JavaScript environments. In case you missed it (like I seemed to!), globalThis is now a standard and has already been added to most current browsers. The main culprits lacking support are Opera and Edge.

Historically, developers have often required getting a reference to the global object in their JavaScript programs. The problem is that there was no universal way to access the global object, whatever it might be. Here's a summary of the problems trying to do this before globalThis:

In the browser, you could access the global object using window
You could also access the same object using the lesser-known window.self or window.frames
In a Web Workers environment, you can only use the self property to get a reference to the global object
In a Node.js environment, you would use global
In strict and non-strict mode, the this keyword usually references the global object
In non-strict mode inside a function, the this keyword still references the global object; but in strict mode this is undefined
The this keyword is also undefined inside modules

You can see how problematic this has been when trying to use `this` as the global object. The globalThis property solves all these inconsistencies, allowing a developer to reference the global object (whatever it might be, depending on the context) using a single consistent keyword.

Here are a few examples using globalThis in a browser:

// Reference to the new globalThis object

        console.log(globalThis); // Window

        // Same as Window.name in a browser

        console.log(globalThis.name);

        // this is undefined, but globalThis is the window

        function myFunc () {

          'use strict';

          console.log(this); // undefined

          console.log(globalThis); // Window

        }

        myFunc();

Try it on CodePen

You can find more information on MDN's article on the subject, and that page also links to an ES6 shim that helps get better browser support if you need it.

Now on to this week's tools!

Testing and Debugging Tools

40% Off Everything at Manning.com
Looking to make your web apps shine? It doesn’t matter which tools or frameworks you love using, now you can take your skills to new heights with insight from Manning books and videos⁠—all available at 40% off with the exclusive discount code nlimpressive on manning.com! sponsored

Page Speed Benchmarks
An interactive dashboard that lets you explore and compare web performance data for leading websites across several industries – from retail to media.

Playwright
Node library to automate Chromium, Firefox and WebKit with a single API

Baretest
A minimalistic alternative to Jest. A fast and simple JavaScript test runner. that offers near-instant performance and easy-to-use API, making testing tolerable.

Mockadillo
Mock your APIs during development. Have a live version of your API before the first line of code by using this API mocking service.

TestMace
A modern powerful cross-platform tool for working with an API and creating automated API tests.

xScope
A powerful set of tools for Mac OSX, ideal for measuring, aligning, and inspecting on-screen graphics and layouts.

Sentry
Now at version 10+. Provides self-hosted and cloud-based error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.

Falco
An open source WebPageTest runner that helps you monitor, analyze, and optimize your websites.

AVA
Now at version 3+. A test runner for Node.js with a concise API, detailed error output, new language features, and process isolation.

MachMetrics
Continually monitors the speed of your website so you know exactly how your pages are performing throughout the day, around the world, and on various devices.

JetOctopus
A full-service SEO website crawler and auditor that helps you get valuable on-page data on every URL and improve SEO performance.

Advanced React (68 HD Videos)
ES6+ for Everyone (77 HD Videos)
Beginner JavaScript (88 HD Videos)
React for Beginners (29 HD Videos)

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

react-cola
React version of WebCola, a library that creates constraint-based layouts for high-quality graph visualization and exploration.

rgbKineticSlider
A fully customizable WebGL slider/carousel based on PixiJS and GSAP.

Motion
A free native Mac and Windows app that helps you build animated SVG icons using a simple interface.

Pancake
A charting library for Svelte applications that allows you to visualize data with a combination of HTML and SVG, with no JavaScript rendering.

progressive-image element
Custom element that works as a lazy-load option for images by progressively enhancing the images.

React Webcam
Webcam component for React, now at version 5+.

Compress-Or-Die
An advanced online compression tool for JPEG, PNG, GIF, and WebP.

Upscale Pics
This tool uses AI to increase the resolution of images up to 8x without losing quality. Haven't tried it but sounds like a bold claim!

Voicen
Audio transcription powered by AI. Upload audio/video files or use a YouTube URL and let AI do the work.

react-icons
Include popular icons in your React projects easily, based on ES6 imports.

The Uncategorizables

PaperCall.io
Service that enables event organizers to easily manage their call for papers and talk submissions.

WPCOM
A curated directory of WordPress resources, tools, courses, deals, etc.

Viewst
A builder tool to create ads. Includes pre-built templates, video ads, animations, and more.

FastComments
A commenting service that's 7.62kb with no dependencies, prioritizes speed and user experience, and no ads or tracking.

Schema.org
The well-known structured data standard is now at version 6.

Flookup
Fuzzy matching and lookup functions for Google Sheets.

Matomo
A web analytics platform that gives your business 100% data ownership and user privacy protection.

CalVer
An alternative to SemVer. A versioning convention based on your project's release calendar instead of arbitrary numbers.

Cloud Run
Run stateless containers on a fully managed environment. A fully managed, serverless platform that automatically scales your stateless containers.

BeTheme
A multi-purpose WordPress theme that has hundreds of permutations applicable to all sorts of possible websites in different industries.

Anchor
An all-in-one platform where you can create, distribute, and monetize your podcast from any device, for free.

Dot Grid
Figma plugin. Easily generate beautiful dot grids for your Figma designs.

A Tweet for Thought

Twitter thread by Shopify CEO Tobi Lutke where he covers how Shopify got so big and whether it's necessary to work 80 hours per week to be successful.

Got a Tool Suggestion?

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

One of the latest trends is developers putting up a "uses" page, which lists setup, gear, software, etc. You can find lots of categorized uses pages on uses.tech.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris