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

We can use the :empty selector in CSS to hide empty DOM element without JS.

.classname:empty {
  display: none;
}

The theme-color value for the name attribute of the element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />