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>]
  : [];

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

class Square {
  public static double width;
}

class Rectangle extends Square {
  public static double height;
}

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

/** 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

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

Abstracting flexbox away

Flexbox is the newest and most powerful CSS layout algorithm that can be used in production in 2022. But its 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

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

// Cada una de estas líneas se puede ejecutar en la consola de un navegador:

window; // El scope global. Todas las variables globales viven acá, por ejemplo:

var a = 6;

window.a === 6;

requestAnimationFrame === window.requestAnimationFrame;

mauroc8

Clausuras

Las clausuras o closures son funciones lambda que acceden a un "contexto".

Cualquier lambda en cualquier lenguaje con Garbage Collection (Java, C#, Javascript, Haskell, Scala, etc...) casi seguro es también una closure. En el caso de Rust (y de C++?) la "clausura" y el "lambda" se diferencian.

Las clausuras son funcionalmente equivalentes a las clases. Es fácil traducir una clase a una función que devuelve una clausura y viceversa. Veamos un ejemplo en javascript: