Skip to content

Instantly share code, notes, and snippets.

steveruizok / cache.ts
Last active March 31, 2023 14:43
weak map gist
export class Cache<T extends object, K> {
items = new WeakMap<T, K>()
get<P extends T>(item: P, cb: (item: P) => K) {
if (!this.items.has(item)) {
this.items.set(item, cb(item))
return this.items.get(item)!
karol-majewski / homogenous-array.ts
Last active July 8, 2020 00:13
Homogeneous arrays in TypeScript
* @author
* @see
type UnionToIntersection<Union> =
(Union extends any
? (argument: Union) => void
: never
) extends (argument: infer Intersection) => void
? Intersection
threepointone /
Last active August 26, 2023 15:43
For Snook

‪“‬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.

// UPDATE: don't use this. when it re-partitions the list when time moves forward, it does not correctly keep hashes
// Use a real merkle tree instead:
import Timestamp from './timestamp';
// This is a compact data structure that keeps track of a list of
// hashes (representing messages) over a range of time in order to
// figure out what has changed between clients, kinda like a Merkle
// tree. It creates "buckets" that represent different time ranges,
// and divides time into smaller buckets the more recent they are. The
yelouafi /
Last active June 29, 2024 20:05
Operational Introduction to Algebraic Effects and Continuations

Algebraic Effects in JavaScript part 1 - continuations and control transfer

This is the first post of a series about Algebraic Effects and Handlers.

There are 2 ways to approach this topic:

  • Denotational: explain Algebraic Effects in terms of their meaning in mathematics/Category theory
  • Operational: explain the mechanic of Algebraic Effects by showing how they operate under a chosen runtime environment

Both approaches are valuables and give different insights on the topic. However, not everyone (including me), has the prerequisites to grasp the concepts of Category theory and Abstract Algebra. On the other hand, the operational approach is accessible to a much wider audience of programmers even if it doesn't provide the full picture.

gaearon /
Last active May 3, 2024 12:56
A Gentle Introduction to Prepack, Part 1


When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
didMount({ setState }) {
disabled: false,
didUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {

In this tutorial we're going to build a set of parser combinators.

What is a parser combinator?

We'll answer the above question in 2 steps.

  1. What is a parser?
  2. and, what is a parser combinator?

So first question: What is parser?

threepointone / 0
Last active March 21, 2023 01:53

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' };
import React from 'react'
import revalidation from 'revalidation'
import gql from 'graphql-tag.macro'
import { filter } from 'graphql-anywhere'
import { curry } from 'ramda'
import { compose, withProps, withHandlers } from 'recompose'
import { graphql } from 'react-apollo'
import { Button } from '../common/styled'
import { getValue } from '../form/utils'
import { isRequired } from '../../utils/validation'