mauroc8

function $(x, y) {
  return y ? x.querySelector(y) : document.querySelector(x);
}

function $$(x, y) {
  return Array.from(y ? x.querySelectorAll(y) : document.querySelectorAll(x));
}

/* Usage:
  const div = $("div");

mauroc8

/* Implementing a Maybe type to learn about typescript.

Maybe API: https://package.elm-lang.org/packages/elm/core/latest/Maybe

The first approach is just trying to copy the exact same functions you'd have in a functional language:
*/

type Maybe<T> =
  | { tag: 'Just'; value: T }
  | { tag: 'Nothing' }

mauroc8

elm-ui developer tools

The idea of this document is to imagine an implementation of a browser plugin for elm-ui, similar to Vue devtools or React Developer Tools.

These developer tools add new panels to the browser's devtools whenever Vue or React components are detected.

It is not fully specified what exactly an elm-ui "devtool panel" could be able to do. The bare minimum requirement is to visualize the "element tree" similar to the way the Inspector panel lets you visualize the DOM tree.

The idea

mauroc8

const numbers =
  input
    .trim()
    .split("\n")
    .map(Number)
        
const sums =
  numbers
    .flatMap(n =>

mauroc8

Functions in Elm

Elm is the simplest language I know. Whenever possible, there's only one way of doing things.

Functions in elm can only take one argument. For example:

\n -> n + 1

mauroc8

module Utils.NodeId exposing (NodeId, child, root, toZipper)

import Tree exposing (Tree)
import Tree.Zipper as Zipper exposing (Zipper)



--- NODE ID

mauroc8

// Herencia por prototipado
var a = Object.create(null) // Esta es la única forma de crear un objeto sin prototipo
a.__proto__ === null
var b = Object.create(a)
b.__proto__ === a // true
a.x = 5
b.x // 5, la propiedad `x` se busca primero en `b` y luego en `b.__proto__`
b.x = 6
b.x // 6, la propiedad `x` se busca en `b`

mauroc8

// Supongamos que tenemos una función para ver si dos cosas son *estructuralmente* iguales:

// (Sí tenemos una función así, en algún `utils.ts`)

function equals(a, b) {
  // Implementación sumamente ineficiente pero que sirve para este ejemplo
  return JSON.stringify(a) === JSON.stringify(b);
}

// El `...` significa algo distinto cuando se

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

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
    )