Jeremy Nguyen jeremy-code

The Temporal API is very nearly baseline with support in 67.52% of browsers including beta opt-in support in Safari and support in Node.js 26. Of course, the polyfills @js-temporal/polyfill and temporal-polyfill also exist.

One of the larger points of contention is the parsing and formatting support in the Temporal API. Regarding parsing, in addition to object literals or epochNanoseconds/epochMilliseconds, there is currently support for parsing RFC 9557, JavaScript.toString(), ISO 8601, RFC 7231.[^1] While there originally was a proposal for a Temporal.parse API, it has since been abandoned based on the claim that "A type-span

Switching from Radix UI to React Aria

Differences

No <ScrollArea>

Radix UI offers a custom <ScrollArea> implementation both as its own component and in some of its components (e.g. Select).

Per adobe/react-spectrum#7286, React Aria maintainers claim that due to accessibility issues and being unable to adhere to user system preferences, they don't intend on supporting a customizable scroll area. Per this tweet, it seems maintainer Devon Govett strongly dislikes overriding user preferences.

getImageDimensions TypeScript function using Image constructor and onLoad/onError. Much faster than Window.createImageBitmap. Uses imageOrientation = "from-image" to set width and height based on Exif data.

Pdfimages seems to only extract images with transparency from PDFs by downloading it alongside the image mask. You can probably use something like ImageMagick if you only have a couple of images to convert it back into a PNG with transparency, but since there was a lot of images in my case, this is the script I used.

It uses pdf.js and sharp. Sharp was probably overkill but it makes the exporting part a bit cleaner.

Examples of React Aria use in production

Repositories

Argos - argos-ci/argos (MIT) (blog)
Openstax - openstax/ui-components (MIT)
Rocket.Chat RocketChat/fuselage (MIT)
GoDaddy - godaddy/antares (MIT)
Signal - signalapp/Signal-Desktop (GNU AGPLv3)
British Columbia - bcgov/design-system (Apache-2.0)

If you're working with Files or Blob objects, you can't really do anything with them besides read their size and type unless you use one of its methods (e.g. bytes, arrayBuffer, slice, stream, text), all of which (besides stream) return a Promise.

For me, in React, if I'm expected to handle a Promise, my mind gravitates to either React Query or SWR. Something like this:

import { useQuery } from "@tanstack/react-query";

const Component = ({ file }: { file: File }) => {
  const { data: arrayBuffer } = useQuery({
    queryKey: ["Component", file],

const data = new Uint8Array([1,0,1,0])
const blob = new Blob([data])
const newData = await blob.bytes() // [ 1, 0, 1, 0 ]
newData === data // false
data[1] = 1
await blob.bytes() // Uint8Array(4) [ 1, 0, 1, 0 ]

	import { Decimal } from "decimal.js";

	const DEFAULT_MAX_ITERATIONS = 10;
	const DEFAULT_TOLERANCE = 1e-10; // = 1/10_000_000_000

	/**
	* Computes the continued fraction coefficients [a_0, a_1, ..., a_n] for a
	* non-negative finite number
	*
	* @see {@link https://en.wikipedia.org/wiki/Simple_continued_fraction}


	@custom-variant data-horizontal (&[data-orientation="horizontal"]);
	@custom-variant data-vertical (&[data-orientation="vertical"]);

	@custom-variant data-open (&[data-state="open"]);
	@custom-variant data-closed (&[data-state="closed"]);
	@custom-variant data-active (&[data-state="active"]);
	@custom-variant data-inactive (&[data-state="inactive"]);
	@custom-variant data-checked (&[data-state="checked"]);
	@custom-variant data-unchecked (&[data-state="unchecked"]);

	import { useSyncExternalStore } from "react";

	enum ReadyState {
	EMPTY,
	LOADING,
	DONE,
	}

	const useFileReader = () => {
	const fileReader = new FileReader();