Skip to content

Instantly share code, notes, and snippets.

@threepointone
threepointone / sto.js
Created July 28, 2015 07:12
a lightweight flux style store as a component
import React from 'react';
export class Sto extends React.Component{
static defaultProps = {
store: x => x
}
state = {
value: this.props.store()
}
dispatch = action => this.setState({
@threepointone
threepointone / iframe.tsx
Created December 8, 2020 00:16
An iframe loader powered by Suspense
import { Suspense, useLayoutEffect, useRef, useState } from 'react';
type IFrameProps = React.ComponentPropsWithRef<'iframe'> & {
fallback?: JSX.Element;
};
export function IFrame(props: IFrameProps) {
const { fallback, ...rest } = props;
return (
@threepointone
threepointone / durable-objects-001-fundamentals.md
Last active September 29, 2023 12:14
Notes on Durable Objects. Part 1 - Migrations.

Note: Since writing this, I've been pointed to some exciting new research/tooling called Project Cambria https://www.inkandswitch.com/cambria.html I'll likely have to rewrite this article taking that into account. Leaving this up for posterity's sake.


(This series isn't meant to be a primer/tutorial, though we might do something regarding it in the future. For official documentation and starters, see https://developers.cloudflare.com/workers/learning/using-durable-objects.

Further - these are my personal views; I expect to be wrong about a lot of them. Indeed, I'm not paying much attention to presenting these well at the moment, simply writing down thoughts. As such, expect these writeups to change often, particularly as the platform takes shape. I'm also mostly a front end guy, so don't get mad if I get it very wrong. Give me feedback! Always happy to learn and make changes.)

Durable Objects are a fascinating new storage primitive from cloudflare for their workers platform. There's a lot of 'cool'

@threepointone
threepointone / for-snook.md
Last active August 26, 2023 15:43
For Snook

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

const bypass = [
// function names to avoid logging
];
const collapsed = [
// function names to groupCollapsed
];
module.exports = function(babel) {
const { types: t } = babel;
const wrapFunctionBody = babel.template(`{
@threepointone
threepointone / eggs.md
Last active July 16, 2023 15:54
Sunil's Gochujang eggs

Sunil's Eggs.

These are my eggs. I like this recipe because it's delicious, doesn't take too much time to make, and goes well with other meals in my life.

All instructions are negotiable, adjust based on vibes.

Start by slicing up an onion. I like using a milder tasting onion, or a banana shallot. I like slices so I can taste it in the final product, but feel free to chop it finer if you'd like.

In a bowl, make the 'sauce'. A teaspoon each of gochugang paste, soy sauce, sesame oil, a couple of pinches of brown sugar, mirin or rice vinegar (I prefer mirin because it doesn't smell as strong, but the vinegar is more 'traditional'). Also add a teaspoon of garlic paste, and a teaspoon of ginger paste.

@threepointone
threepointone / feature-flags-client-implementation.md
Last active June 1, 2023 18:35
Implementing a client for feature flags

On implementing a client for feature flags in your UI codebase

This document isn't an explainer on Feature Flags, you can find that with my amateur writeup, or literally hundreds of better writeups out there.

This document is also agnostic to the choice of service you'd use: LaunchDarkly or split.io or optimizely or whatever; that's orthogonal to this conversation.

Instead, this document is a list of considerations for implementing a client for using Feature Flags for User Interface development. Service providers usually give a simple fetch and use client and that's it; I contend that there's a lot more to care about. Let's dive in.

To encourage usage, we'd like for the developer experience to be as brutally simple as possible. So, this should be valid usage:

@threepointone
threepointone / feature-flags.md
Last active May 24, 2023 11:03
Feature flags: why, how, all that

(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)

Feature flags

This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).

So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.

Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -

@threepointone
threepointone / FiduciaryContributorLicenseAgreement.md
Created April 17, 2023 11:40
Fiduciary Contributor License Agreement

Fiduciary License Agreement 2.0

based on the

Individual Contributor Exclusive License Agreement

(including the Traditional Patent License OPTION)

Thank you for your interest in contributing to PartyKit, Inc.'s PartyKit ("We" or "Us").

@threepointone
threepointone / 0 basics.md
Last active March 21, 2023 01:53
css-in-js

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };