mauroc8

module Stringify exposing
    ( Stringify
    , toString
    , int, float, string, unit
    , list, tuple, triple
    , lazy
    , Record, record, field, buildRecord
    , Union, union, variant0, variant1, variant2, variant3, variant4, buildUnion, Variant
    , bool, maybe, result
    )

mauroc8

Abstracting flexbox away

Flexbox's terminology is confusing and exposes implementation details.

I wrote this article trying to explain the abstractions I generally use to work with flexbox. The objective of these abstractions is to provide a layout system. I implement them as CSS classes.

mauroc8

type Dispatch<Action> = (action: Action) => void;

export function useReducerWithManagedEffects<State, Action, Effect>(
	reducer: (state: State, action: Action) => [ State, Effect ],
	runEffect: (effect: Effect, dispatch: Dispatch<Action>) => void,
	initialState: State
): [ State, Dispatch<Action> ] {
	const [ state, setState ] = useState(initialState);

mauroc8

/** A `TypeGuard` is a function that checks that an unknown value is of certain type. */
export type TypeGuard<A> =
    (value: unknown) => value is A;

const number: TypeGuard<number> = (value: unknown): value is number =>
    typeof value === 'number';

const string: TypeGuard<string> = (value: unknown): value is string =>
    typeof value === 'string';

mauroc8

import { useReducer, useEffect, useRef, useCallback } from 'react';

/** An alternative way to write component's stateful logic. In particular, you can write
 * any component without using the infamous `useEffect` hook.
*/
export function useReducerWithManagedEffects<
    State extends { effects: Effect[] },
    Action,
    Effect

mauroc8

class Square {
  public static double width;
}

class Rectangle extends Square {
  public static double height;
}

mauroc8

/** A helper function to create DOM elements in a declarative way.

Example:

```html
<span class="wrapper">
    <span class="icon" tabindex="0">
        <img src="..." />
    </span>
    <span class="info">

mauroc8

type LinkedList<A> = {} | { head: A; tail: LinkedList<A> };

type ToUnion<T> = T extends { head: infer N; tail: infer Tail }
  ? N | ToUnion<Tail>
  : never;

type ToArray<T> = T extends { head: infer N; tail: infer Tail }
  ? [N, ...ToArray<Tail>]
  : [];