Mauro Cano mauroc8

class Square {
  public static double width;
}

class Rectangle extends Square {
  public static double height;
}

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.

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:

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

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


	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


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


	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);

	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
	)

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