Brandon Orther orther

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

Things I changed in this fork

Modified WhittlesJr's forked version to prevent some devices from loading its drivers. In my case, NVIDIA's USB Host controller is in the same IOMMU group, and specifying vfio-pci option didn't prevent the device from loading xhci_usb driver.

IOMMU Group 1   00:01.0 PCI bridge [0604]: Intel Corporation Xeon E3-1200 v5/E3-1500 v5/6th Gen Core Processor PCIe Controller (x16) [8086:1901] (rev 07)
IOMMU Group 1   01:00.0 VGA compatible controller [0300]: NVIDIA Corporation TU106M [GeForce RTX 2060 Mobile] [10de:1f11] (rev a1)
IOMMU Group 1   01:00.1 Audio device [0403]: NVIDIA Corporation TU106 High Definition Audio Controller [10de:10f9] (rev a1)
IOMMU Group 1 01:00.2 USB controller [0c03]: NVIDIA Corporation TU106 USB 3.1 Host Controller [10de:1ada] (rev a1)

Chakra React Select

UPDATE: I finally made an NPM package for this component! It is made with TypeScript, and now has a fully customizable styling system. It is also far ahead of this wrapper at this point. Check it out here if you'd like: https://github.com/csandman/chakra-react-select

In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation. There are also a few extra things you can do with this wrapper that pull from the chakra library.

You can pass the size prop with either sm, md, or lg. These will reflect the sizes available on the Chakra <Input /> component (with the exception of xs because it's too small to work).
In your options objects, you can add the key isFixed to emulate the exa

In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and
returning the cached result when the same
inputs occur again.
— wikipedia

	# Edit this configuration file to define what should be installed on
	# your system. Help is available in the configuration.nix(5) man page
	# and in the NixOS manual (accessible by running ‘nixos-help’).

	{ config, pkgs, ... }:

	{
	imports =
	[ # Include the results of the hardware scan.
	./hardware-configuration.nix

	import { useEffect } from 'react'

	type KeyPress = {
	key: string
	action: () => void
	}

	const useKeyPress = ({ key, action }: KeyPress) => {
	const onKeyDown = (e: KeyboardEvent) => {
	if (e.key === key) action()

	# Edit this configuration file to define what should be installed on
	# your system. Help is available in the configuration.nix(5) man page
	# and in the NixOS manual (accessible by running ‘nixos-help’).

	{ config, pkgs, ... }:

	{

	################################################################################
	# System

	import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
	import React from 'react'

	const channels = {}

	export function useBroadcastLeader(id = 'default') {
	const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)

	React.useEffect(() => {
	if (!channels[id]) {

	import { inspect } from '@xstate/inspect';
	import {
	assign,
	createMachine,
	interpret,
	sendParent,
	spawn,
	actions,
	send,
	SpawnedActorRef,

	import { XstateInspectLoader } from 'shared/util/XstateInspectLoader'

	const App = () => {
	<XstateInspectLoader>
	// rest of app goes here
	</XstateInspectLoader>
	}