jamesknelson

create-react-app myapp
cd myapp/src
mkdir containers routes utils views
touch config.js contexts.js 
mv App.* routes
sed -i '' -e 's/.\/App/.\/routes\/App/g' index.js

jamesknelson

A React app can be split into a number of different types of functions and components, where *each type can depend only on the types above it in the hierarchy*.

This makes gives you a way to split up components and functions over your filesystem. It also helps you to keep components from growing too large, and encourages practices that make testing easier.

```
types (TypeScript typings)
  ^
utils (plain javascript functions)
  ^
contexts (React context, and provider components)

jamesknelson

import { map, redirect, route } from 'navi'

function UpdatePasswordForm({ submitErrors }) {
  return (
    <Form
      method='post'
      submitErrors={submitErrors} 
      validate={value =>
        value.password !== value.passwordConfirmation &&
        {

jamesknelson

/**

UPDATE:

This component and hook based routing/fetching API won't work, as `useAsync()`
is an impossible component.

In order to use async functions to respond to route changes, the functions will
need to be registered with a parent cache/provider with a unique key. As such, a
more natural component-based architecture would involve a `<Route path>` component

jamesknelson

mapObservableToChunkIterator(observable, mapValueToChunks, mapErrorToChunks?): Generator<Promise | Chunk[]>

A function that accepts an Observable with a subscribe() method, and optionally with a getCurrentValue() or getCurrentResult() method.

It returns a Generator that yields Promise (when waiting for a new value) or Chunk objects (i.e. objects that extend { type: string }).

By default, mapErrorToChunks takes the error emitted by an observable, and yields [{ type: 'error', error: error }].

When the observable is complete, the Generator's next() function will return { done: true }.

jamesknelson

const CombinedStream = require('combined-stream2');

function concatStringsAndStreams(strings, ...args) {
  let combinedStream = CombinedStream.create()
  combinedStream.append(Buffer.from(strings[0], 'utf8'))
  for (let i = 0; i < args.length; i++) {
    let arg = args[i]
    let string = strings[i+1]
    if (arg && arg.pipe) {
      combinedStream.append(arg)

jamesknelson

A 4-line shell script to convert your movies into gifs. Defaults to 10fps, 700px wide.

WIDTH=420 FPS=12 togif input.mov

You'll need to have ffmpeg installed -- on mac, you can do this with brew:

brew install ffmpeg

jamesknelson

const requests = {}

export const createSubscribe = (asyncFn) => {
  return subscribeToData = (params, onUpdate) => {
    onUpdate('pending')

    const key = JSON.stringify(params)
    const request = requests[key]
    if (!request) {
      request = requests[key] = {

jamesknelson

const PurgeDelay = 1000

class Model {
  fetcher: (id: string) => Promise<any>

  cache = {}
  callbacks = {}
  holds = {}
  purgeTimeouts = {}

jamesknelson

<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
<style>
  body {
    background-color: black;
  }

  h1 {
    color: #EEE;
    font-family: 'Squada One', cursive;
    font-size: 60px;