Skip to content

Instantly share code, notes, and snippets.

@threepointone
threepointone / after.js
Last active Feb 4, 2021
converted a function to a generator; simpler, more efficient, cooler.
View after.js
// recursively get all files in a folder
function* getAllFiles(dirPath: string): Iterable<string> {
for (const file of fs.readdirSync(dirPath)) {
const pathToCheck = path.join(dirPath, file);
if (fs.statSync(pathToCheck).isDirectory()) {
if (file !== 'node_modules') {
yield* getAllFiles(pathToCheck);
}
} else {
yield pathToCheck;
@threepointone
threepointone / feature-flags-client-implementation.md
Last active Mar 1, 2021
Implementing a client for feature flags
View feature-flags-client-implementation.md

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 / iframe.tsx
Created Dec 8, 2020
An iframe loader powered by Suspense
View iframe.tsx
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 Apr 12, 2021
Notes on Durable Objects. Part 1 - Migrations.
View durable-objects-001-fundamentals.md

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'

View something.test.ts
import tree from "./tree";
test("it should serialise the tree", () => {
expect(tree("path/to/folder")).toMatchInlineSnapshot(); // jest will fill this in automatically
});
@threepointone
threepointone / feature-flags.md
Last active Apr 30, 2021
Feature flags: why, how, all that
View feature-flags.md

(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 -

View git-sparse-checkouts.md

(This is a draft for something I'm writing internally but figured it would be useful for everyone.)

tl;dr -

  • make sure git --version returns 2.27.0 or higher.
  • git clone --filter=blob:none --sparse <repo> --depth=1
  • cd <repo>
  • git sparse-checkout set <path> <path> <...path>

View download-zoia-patches.js
import "isomorphic-fetch";
import https from 'https'
import fs from 'fs'
async function get(url) {
return await (
await fetch("https://patchstorage.com/api/alpha/" + url)
).json();
}
View console-function-names.js
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 / settled.react.md
Last active Aug 4, 2020
Ember's settled() test helper, for React
View settled.react.md

settled

Stealing an idea from ember's settled test helper.

Assuming these conditions are true in your unit tests -

  • you're using Jest
  • and Jest's fake timers
  • and all your data requests are happening via fetch