It’s possible to identify how many separate fingers are touching the screen.

document.body.addEventListener("touchstart", (e) => {
  document.body.textContent = `${e.touches.length} fingers`;
});

You can use the (Network Information API)[https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation] to get information about the connection a device is using.

console.log(navigator.connection)

// Prints
NetworkInformation {
  downlink: 10,
  effectiveType: "4g",
  onchange: null,
  rtt: 250,
  saveData: false
}

Target the button of an <input> of <type="file"> using the ::file-selector-button selector.

<label for="upload">Select file</label><br />
<input type="file" id="upload" />

[type="file"]::file-selector-button {
  background-color: hotpink;
  padding: 0.5rem 1rem;
  border: 2px solid fuchsia;
  margin-block-end: 1rem;
  display: block;
  border-radius: 3px;
}

[type="file"]::file-selector-button:hover {
  background-color: aqua;
}

CSS: When an item is being hovered, select all the other items, but not the one that is being hovered.

.grid:has(.item:hover) .item:not(:hover) {
  mix-blend-mode: luminosity;
}

You can type ”.” when you’re in a Github repo and Github will open the repo in VSCode web for you

There exist a binary search algorithm to easily manage text-wrapping. Useful for page header.

The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.

.grid {
  grid-auto-flow: row dense;
}

You can pass an options object, which only has a single property, to the focus() method to prevent scrolling on focus.

document.querySelector("#anchor").focus({
  preventScroll: true,
});

Apparently fireEvent in Svelte Testing Library is async because it’s calling tick() under the hood

You can delete forward using “fn + delete” in macOS