Skip to content

Instantly share code, notes, and snippets.

Jamie Kyle jamiebuilds

Block or report user

Report or block jamiebuilds

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View print-with-generator.js
let INDENT = { op: "indent" }
let OUTDENT = { op: "outdent" }
let NEWLINE = { op: "newline" }
let SPACE = { op: "space" }
function* printNode(node) {
if (node.type === "Program") {
for (let item of node.body) {
yield* printNode(item)
View tree.js
class Tree {
constructor() {
this.children = []
add(value, parentValue) {
let newNode = { value, children: [] }
if (parentValue === null) {


In a generic sense (aka, not within any particular tool or framework, not the behavior of the tool or framework that you work in)...

If you had an HTML file that looked like this:

<!doctype html>
<script type="module">
  export default "jsvalue"
jamiebuilds / 1-state.tsx
Last active Mar 6, 2019
Unstated 3.0 proposal
View 1-state.tsx
import React from "react"
import { render } from "react-dom"
import { createContextState, useContextState, Provider } from "unstated"
‪let Count = createContextState(0)
‪function useCounter() {
let [count, setCount] = useContextState(Count)
let increment = () => setCount(count + 1)
let decrement = () => setCount(count - 1)

The Challenge

Compare two (or more) tools that are trying to solve a similar set of problems, without discussing any of the following:

  • Community
  • Programming Language
  • Documentation/Examples/Demos/etc
  • Stars/Forks/Downloads/Issues/PRs/Stack Overflow Answers/etc
  • Age/Maturity of tool

A Redux Story

Developer: "Doo Doo Doo... Working on the new Redux rewrite. Gotta write some fetch actions..."

FETCH_USERS -> function fetchUsersAction() {...}
FETCH_PAGES -> function fetchPagesAction() {...}
FETCH_FRIENDS -> function fetchFriendsAction() {...}
FETCH_GROUPS -> function fetchGroupsAction() {...}
FETCH_EVENTS -> function fetchEventsAction() {...}
View a-single-piece-of-code-on-github-that-does-that.js
.set(“a”, “A”)
.set(“b”, ”B”)
.set (“etc”, “ETC”);
View map-with-create-value.js
class AwesomeMap extends Map {
get(key, createValue) {
if (!this.has(key) && createValue) {
let value = createValue();
this.set(key, value);
return value;
} else {
return this.get(key);

High-level file system organization for company-wide monorepo

The following are some high level options for organizing a company-wide monorepo.

This is assuming use of a multi-package system like Yarn, Bolt, or Lerna.

Option 1: Flat

Keep all of the packages at the top level so that you don't have to navigate deep into folders to find the package you are looking for. It's always one cd package-name away. It does mean that you have to name folders carefully so that related ones get grouped together.

  • /my-website/
    • package.json
    • /src/
      • /pages/
        • index.html
        • about.html
      • /assets/
        • site.css
        • site.js
        • service-worker.js
You can’t perform that action at this time.