Maciej Adamczak macku

Preact, Without Build Tools

This is a demonstration of using Preact without any build tooling. The library is linked from the esm.sh CDN, however a standalone JS file exporting HTM + Preact + Hooks can also be downloaded here.

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production
- Create React App
- Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

Methods of Signing Git Commits on MacOS

Last updated March 13, 2024

This Gist explains how to sign commits using gpg in a step-by-step fashion. Previously, krypt.co was heavily mentioned, but I've only recently learned they were acquired by Akamai and no longer update their previous free products. Those mentions have been removed.

Additionally, 1Password now supports signing Git commits with SSH keys and makes it pretty easy-plus you can easily configure Git Tower to use it for both signing and ssh.

For using a GUI-based GIT tool such as Tower or Github Desktop, follow the steps here for signing your commits with GPG.

	import React from "react";
	import useMutableReducer from "./useMutableReducer";

	const reducer = (draft, action, state) => {
	switch (action) {
	case "increment":
	draft.count++;
	break;
	case "decrement":
	draft.count--;

	import React from 'react';

	function onlyChild(children) {
	return Array.isArray(children) ? children[0] : children;
	}

	export function combineContext(contexts) {
	class Provider extends React.Component {
	render() {
	const init = this.props.children;

	import React from 'react';
	import UserListItem from './UserListItem';

	class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	users: [
	{ id: 1, name: 'Cory' },
	{ id: 2, name: 'Meg' }

	_registry = {};
	importPolyfill = path => {
	if(!(path in _registry)) {
	const entry = _registry[path] = {};
	entry.promise = new Promise(resolve => entry.resolve = resolve);
	document.head.appendChild(Object.assign(
	document.createElement('script'),
	{
	type: 'module',
	innerText: `import * as X from '${path}'; _registry['${path}'].resolve(X);`,

	import hify from './create-element';
	import React from 'react';
	import { render } from 'react-dom';

	const h = hify(React.createElement.bind(React));

	class Test extends HTMLElement {
	static observedAttributes = ['attr']
	attributeChangedCallback (name, oldValue, newValue) {
	this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;