Control the behavior of JavaScript imports with Import Maps

Shipping in Chrome 89 are Import Maps, which allows control over what URLs get fetched when importing modules. Let’s take a look at this very welcome addition. When importing ES Modules (on the web), you need to refer to them using their full filenames or URLs: import moment from “/js/moment/moment.js”; import { partition } from …

My first impressions of building a project with Snowpack

Jonathan Yeong tried out Snowpack and is equally excited as I am about it. Related: 🙋‍♂️ If you’re looking for a detailed step-by-step post on Snowpack, check out Learn Snowpack: A High-Performance Frontend Build Tool to get you started.

JavaScript performance beyond bundle size

Nolan Lawson, on how we might focus too much on JavaScript bundle size: Performance is a multi-faceted thing. It would be great if we could reduce it down to a single metric such as bundle size, but if you really want to cover all the bases, there are a lot of different angles to consider. …

Before You React.memo()

Dan Abramov shares 2 techniques to try before resorting to optimize with React.memo() In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance. These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good …

Easily see the JavaScript Keyboard Event KeyCodes with keycode.info

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc. As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to …

How I Build JavaScript Apps In 2021

Tim Daubenschütz on how he builds JavaScript Apps In 2021 I avoid build processes. I avoid transpiling. I avoid the new and shiny. I test EvErYtHiNg. I optimize for performance and quality. I use my own work I use open source to my advantage. Don’t agree 100% with the third point though, as React Hooks …

Observing Rendered DOM Nodes

Sam Thorogood has been looking into all kinds of changes that can happen to DOM Nodes: This post will explain how to be notified when: an element is added or removed from the DOM the bounding box of an element changes (i.e., resizes) an element moves around the page for any reason Expect some ResizeObserver, …

What’s new in ES2021

With the January meeting of TC39 behind us, the Stage-4 features that will make it into ES2021 have been selected. The following features will be part of ES2021, which will be formalised mid-2021: String.prototype.replaceAll Promise.any WeakRefs + FinalizationRegistry Logical Assignment Operators Numeric Separators Apart from the linked-to posts above, Pawel Grzybek has done a writeup …

Don’t use functions as callbacks unless they’re designed for it

Solid advice by Jake: Here’s an old pattern that seems to be making a comeback: import { toReadableNumber } from ‘some-library’; const readableNumbers = someNumbers.map(toReadableNumber); Here’s the problem: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it’s more like: const readableNumbers = someNumbers.map((item, …