greim

'use strict';

/*
 * Binary search tree with in-order iteration.
 * http://greim.github.io/gen/dist/00-intro.html
 */

class Tree {
  add(value) {
    if (this.root) this.root.add(value);

greim

type Queue a
  = Empty
  | Mono a
  | Multi a (Queue a) a

enq : a -> Queue a -> Queue a
enq val queue =
  case queue of
    Empty ->

greim

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems weird to me, and the docs aren't helping, so I jot down these notes because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking JSON Decoders

Preliminary: We'll be dumping Json.Decode into our namespace to reduce typing, such that we have naked functions such as int, which is actually Json.Decode.int, and so forth:

import Json.Decode exposing (..)

greim

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems... well, weird to me, and the docs aren't helping, so I jot down these notes in order to force myself to better grasp the topic, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Elm Functions

Background: In Elm, functions are pure. Given the same input, they'll always return the same output. That isn't the case in JavaScript, where for example a function can return different values on successive calls, like Math.random() or Date.now().

Thus, a function that takes zero args is conceptually no different than a variable. A variable holds a value. A zero-arg function only returns one possible value. This is reflected in Elm syntax. Look at how you annotate and declare a variable in Elm:

greim

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems weird, and the docs aren't helping, so I jot down these notes, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Markup

Building markup in Elm entails building a data structure, much like React's virtual DOM. That is, you're not building DOM nodes directly, but rather a lightweight data structure that tells the Elm runtime which DOM nodes you want to exist and it figures it out from there. There's really nothing special about Elm's Html; it's just another data type.

What does Html msg actually mean?

greim

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems... well, weird to me, and the docs aren't helping, so I jot down these notes in order to force myself to better grasp the topic, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Elm Components

The Elm architecture is cool because it's fractal. That is, you can break your program into components, each of which is a mini-expression of the overall Elm architecture. The Elm architecture is... turtles.

How is this done? I don't know! I'll figure it out and come back!

greim

class ProductDetailPage extends React.Component {

  componentDidMount() {
    ...
    const hasRealestate = this.props.viewportWidth > 800;
    const hasData = this.props.relatedProductInfo === undefined;
    if (hasRealestate && !hasData) {
      this.props.fetchRelatedProductInfo(this.props.productId);
    }
  }

greim

function ProductDetailPage({ viewportWidth, relatedProductInfo }) {
  const hasRealestate = viewportWidth > 800;
  const hasData = relatedProductInfo === undefined;
  return <div>
    ...
    { hasRealestate &&
      ( hasData
        ? <RelatedProducts products={relatedProducts}/>
        : <div data-vacancy={`relatedProducts/${id}`}>Loading...</div>
      )

greim

vacancies.listen('relatedProducts/:productId', async function(params, send) {
  const id = params.productId;
  const resp = await fetch(`/products/${id}/related`);
  const products = await resp.json();
  send({ type: 'RECEIVE_RELATED_PRODUCTS', id, products });
});

greim

/*
 * <UserProfile/> React component which
 * uses the vacancy observer pattern.
 */

function UserProfile({
  userId, // comes from the URL
  users, // collection of fetched items
}) {
  const user = users[userId];