Skip to content

Instantly share code, notes, and snippets.

View davidkpiano's full-sized avatar
🎹
Working on XState Dev Tools

David Khourshid davidkpiano

🎹
Working on XState Dev Tools
View GitHub Profile
@gullyn
gullyn / flappy.html
Last active January 24, 2025 00:41
Flappy bird in 205 bytes (improved!)
<body onload=z=c.getContext`2d`,setInterval(`c.width=W=150,Y<W&&P<Y&Y<P+E|9<p?z.fillText(S++${Y=`,9,9|z.fillRect(p`}*0,Y-=--M${Y+Y},P+E,9,W),P))):p=M=Y=S=6,p=p-6||(P=S%E,W)`,E=49) onclick=M=9><canvas id=c>

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)
@steveruizok
steveruizok / render-state.js
Last active November 17, 2020 14:01
Render a State Designer state in the terminal.
import log from "ololog"
class Grid {
rows = []
width = 0
height = 0
chars = {
active: ["┌", "─", "┒", "┃", "┛", "━", "┕", "│"],
inactive: ["┌", "─", "┐", "│", "┘", "─", "└", "│"],
@raphaeltraviss
raphaeltraviss / inputsampler_component.ts
Last active November 7, 2020 20:20
Basic XState model for moving/striking with "looking at" vector in PhaserJS
import { assign, interpret, Machine, Interpreter, EventObject } from 'xstate';
// Phaser implicitly available
interface PawnContext {
moveTowards?: Phaser.Math.Vector2,
}
@steveruizok
steveruizok / distributeEvenly.ts
Last active November 23, 2020 19:01
A function to distribute boxes evenly along either the x or y axis.
function distributeEvenly<
T extends { x: number; y: number; height: number; width: number }
>(axis: "x" | "y", boxes: T[]) {
const mboxes = [...boxes]
const extent = axis === "x" ? "width" : "height"
mboxes.sort((a, b) => a[axis] - b[axis])
// Overall boxes span
const last = mboxes[mboxes.length - 1]
const dist = last[axis] + last[extent] - mboxes[0][axis]

Build the logic for a network quality indicator:

Requirements:

  1. Every time the REPORT_NETWORK_QUALITY event comes in, I want to assign its results to context (no matter what else happens)
  2. If the network quality is bad or worse, we want to show a warning
  3. If the network quality gets better, we want to hide the warning again
  4. The warning must show for a minimum of 2 seconds, we don't want any weird flickering.
  5. The user should be able to dismiss the warning forever using the DISMISS_NETWORK_QUALITY_WARNING. The warning should never show again.
/* So how does this work?
I'm using ANSI escape sequences to control the behavior of the terminal while
cat is outputting the text. I deliberately place these control sequences inside
comments so the C++ compiler doesn't try to treat them as code.*/
//
/*The commands in the fake code comment move the cursor to the left edge and
clear out the line, allowing the fake code to take the place of the real code.
And this explanation uses similar commands to wipe itself out too. */
//
#include <cstdio>
@cevr
cevr / editableTextMachine.ts
Last active November 14, 2021 15:25
xstate fp utils POC
import * as x from './xstate-fp';
export enum EditableTextState {
idle = 'idle',
editing = 'editing',
}
export enum EditableTextEvent {
mouseenter = 'mouseenter',
mouseleave = 'mouseleave',
@gatsbyjs-employees
gatsbyjs-employees / Open letter to the Gatsby community.md
Last active February 23, 2021 00:24
Open letter to the Gatsby community

To the Gatsby Community,

We want to start by specifically thanking Nat Alison. We support her and commend her bravery in speaking out. It is not easy to stand alone. What she experienced at Gatsby was unacceptable and speaks to wider issues. We thank her for putting pressure on the company to fix them. We vow to double down on those efforts.

While we have worked hard to give feedback and help create a healthy work environment over the past few years, change has been far too slow and the consequences have been real. The previous weeks have intensified the need for rapid change by increasing employee communication and allowing us to collectively connect some dots. We are just as outraged. As a result, we have posed a series of hard questions to management as well as a list of concrete actions they need to take.

Kyle Mathews' public apologies to both Nat Alison and Kim Crayton are small actions swiftly taken that signal the possibility for change but don't speak to the systemic issues that must be addressed.

@aleclarson
aleclarson / rollup-typescript.md
Last active February 28, 2025 16:13
The best Rollup config for TypeScript libraries

It's 2024. You should use tsup instead of this.


Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
.d.ts bundle + type-checking