fabiospampinato

:where(abbr), :where(address), :where(area), :where(article), :where(aside), :where(audio), :where(b), :where(base), :where(bdi), :where(bdo), :where(big), :where(blockquote), :where(body), :where(br), :where(caption), :where(cite), :where(code), :where(col), :where(colgroup), :where(data), :where(datalist), :where(dd), :where(del), :where(details), :where(dfn), :where(dialog), :where(dl), :where(dt), :where(em), :where(embed), :where(fieldset), :where(figcaption), :where(figure), :where(footer), :where(form), :where(h1), :where(h2), :where(h3), :where(h4), :where(h5), :where(h6), :where(head), :where(header), :where(hgroup), :where(hr), :where(i), :where(input), :where(ins), :where(kbd), :where(keygen), :where(label), :where(legend), :where(li), :where(link), :where(main), :where(map), :where(mark), :where(menu), :where(menuitem), :where(meta), :where(meter), :where(nav), :where(object), :where(ol), :where(optgroup), :where(option), :where(output), :where(param), :where(picture), :where(pre), :where(progress

joepie91

ES Modules are terrible, actually

This post was adapted from an earlier Twitter thread.

It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual advantages to it. At all.

It looks shiny and new and some libraries use it in their documentation without any explanation, so people assume that it's the new thing that must be used. And then I end up having to explain to them why, unlike CommonJS, it doesn't actually work everywhere yet, and may never do so. For example, you can't import ESM modules from a CommonJS file! (Update: I've released a module that works around this issue.)

And then there's Rollup, which apparently requires ESM to be u

steveruizok

import * as React from "react"
import { getRef } from "./getRef"

export default function App() {
  const rCanvas = React.useRef<HTMLCanvasElement>(null)

  React.useEffect(() => {
    const canvas = getRef(rCanvas)
    canvas.width = window.innerWidth
    canvas.width = window.innerHeight

jamiebuilds

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

ivancuric

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]

"Courier New (TrueType)"=""
"Courier New Bold (TrueType)"=""
"Courier New Bold Italic (TrueType)"=""
"Courier New Italic (TrueType)"=""

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes]

slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

developit

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

WebReflection

// used to retrieve template content
const templates = new WeakMap;

// used to retrieve node updates
const updates = new WeakMap;

// hyperHTML, the nitty gritty
function hyperHTML(chunks, ...interpolations) {

  // if the static chunks are unknown

zachleat

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FOFT, or FOUT with Two Stage Render</title>
	<style>
	@font-face {
		font-family: Lato;
		src: url('/web/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'),