Cancel JavaScript Event Listeners with AbortController

One of the new features that was added in Chrome 88 is the ability to pass an AbortController‘s signal into addEventListener.

const controller = new AbortController();
const { signal } = controller;

document.querySelector('…').addEventListener('foo', (e) => {
  // …
}, {signal});

By calling controller.abort();, you can remove the listener from the event target, just like when calling element.removeEventListener.

💁‍♂️ Did you know you can use the AbortController to abort promises? It was its first intended use case when it was introduced back in 2017.

~

An excellent use-case here is that you can cancel multiple Event Listeners at once using it, as shared by Jake Archibald:

In the example above there are two competing event listeners. Whenever one of them finishes controller.abort(); is called, thus also removing the other one. Cool!

~

🔥 Like what you see? Want to stay in the loop? Here's how:

Snowpack v3.0

Version 3.0 of the aforementioned Snowpack got released, and it’s quite exciting I must say!

  • Pre-bundled streaming imports – Import any npm package, on-demand.
  • Integrated build optimizations – Built-in bundling, preloading, minification, and more.
  • JavaScript API – Integrate with Snowpack’s brand new native JS API.
  • Node.js Runtime API – Import your Snowpack-built files directly into Node.js.

The streaming imports will most likely have the biggest impact on us all:

Streaming imports make it possible to import any package directly into your project, pre-built and pre-bundled for immediate use. It’s the power of the entire JavaScript ecosystem, at your fingertips.

With streaming imports we can now simply write import statements, and Snowpack will fetch the package for us from Skypack — No npm install needed!

And since it uses esbuild under the hood it’s fast. Blazing fast.

Snowpack v3.0 →

The serverless gambit: Building ChessMsgs.com on Cloud Run

Interesting read how Greg Wilson built ChessMsgs.com, a website that can track chess games played by sending links to eachother.

Instead of tweeting moves back and forth, players tweet links back and forth, and those links go to a site that renders the current chessboard, allows a new move, and creates a new link to paste back to the opponent. I wanted this to be 100% serverless, meaning that it will scale to zero and have zero maintenance requirements.

The board’s state is represented as a string using the Forsyth–Edwards Notation (FEN)

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

That same FEN is also fed to service that generate static images of the board for use in the meta tags.

The serverless gambit: Building ChessMsgs.com on Cloud Run →
ChessMsgs Source (GitHub) →

State of JS 2020

Following up on last year’s 2019 edition the results for the State of JS are in. 23,765 people answered the survey resulting in an overview of what’s hot and not for JavaScript and its ecosystem.

It’s great to see that language features like Destructuring, Nullish Coalescing and Optional Chaining seem to be common nowadays. However, just like last year, do take this all with a grain of salt though as 43% of the participants consider them to be experts in … CSS 🤨

State of JS 2020 →

☝️ For CSS a likewise survey was done: the State of CSS 2020

Update 2020-01-14: If you’re thinking the survey is too biased towards white male Americans, be sure to read State of JS 2020: Common Criticisms by author Sacha Greif.

10 Next.js Tips You Might Not Know!

Next.js can do a lot for you — which means there’s features you probably haven’t used! This video covers ten tips you might not know about Next.js.

Litepicker Date Range Picker

I like that the daterange needs to be entered in one single input, and that Litepicker is used as a progressive enhancement on top.

Installation per NPM:

npm i litepicker

At its core, usage is really simple:

import Litepicker from 'litepicker';

const picker = new Litepicker({ element: document.getElementById('litepicker') });

Highly configurable too!

Litepicker — Date range picker – lightweight, no dependencies →

Using Nintendo Switch Joy-Con Controllers on the Web with the WebHID API

Thomas Steiner:

WebHID allows websites to access devices that use the human interface devices (HID) protocol via JavaScript. Here is a little Christmas present 🎄 to the community to celebrate the API approval: releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. If you have Joy-Cons, be sure to check out the demo to get a feel for what is possible.

Installation per NPM:

npm install joy-con-webhid

Once a Joy-Con has been paired, you can listen to hidinput events:

joyCon.addEventListener('hidinput', ({ detail }) => {
    // Careful, this fires at ~60fps.
    console.log(`Input report from ${joyCon.device.productName}:`, detail);
});

💡 The code does not use on the Gamepad API but the WebHID API as the former does not have support for orientation, a feature the Joy-Con controllers use extensively.

Releasing Joy-Con WebHID →
Joy-Con WebHID Repo (GitHub) →

Related: Jumping the Hurdles with the Gamepad API →

Writable Getters

Lea Verou:

A pattern that has come up a few times in my code is the following: an object has a property which defaults to an expression based on its other properties unless it’s explicitly set, in which case it functions like a normal property. Essentially, the expression functions as a default value.

Think of a post slug for example: if none is set, then one should be automatically generated from the title. But if one is explicitly set, then that one should be returned.

The easiest way to implement this is to delete the previously stored getter upon setting a value:

let lea = {
	name: "Lea Verou",
	get id() {
		return this.name.toLowerCase().replace(/\W+/g, "-");
	},
	set id(v) {
		delete this.id;
		return this.id = v;
	}
}

But that’s not really scalable and requires code duplication if you have multiple occurrences of this pattern. Lea provides us with some reusable code, so that we can eventually simply call this one-liner to achieve the same result:

makeGetterWritable(lea, "id", {enumerable: true});

Writable Getters →

HTML and CSS techniques to reduce your JavaScript

Anthony Ricaud, writing for the Web Performance Calendar, on the extra load that JavaScript can put on your site, and how you can replace some things with basic HTML and CSS:

Relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These solutions generally have the advantage of using less code, thus reducing maintenance efforts for a development team (for example, no need to update the libraries used).

In this article, we will explore some of these native solutions that are available to the majority of your users.

It’s things like smooth scrolling, sticky items, carousels, etc. — those all can be implemented using pure CSS nowadays.

HTML and CSS techniques to reduce your JavaScript →