Snippet Zone

Cistercian Numerals (semi-golfed)

```
N = -1
```
```
S = 30
```
```
H = 90
```
```
h = 45
```
```
d = document
```
```
b = d.body
```
```
m = _ => d.createElement(_)
```
```
a = _ => b.appendChild(_)
```
```
 
```
```
with(a(
```
```
    Object.assign(
```
```
      m`canvas`,
```
```
      { width: 80, height: 120 }
```
```
    )
```
```
  ).getContext`2d`
```
```
) { 
```
```
  a(m`br`)
```
```
 
```
```
  L = (a, b, C, d) => {
```
```
    moveTo(a, b)
```
```
    lineTo(C, d)
```
```
  }
```
```
 
```
```
  M = _ => L(0, 0, 0, H)
```
```
  O = _ => L(0, 0, S, 0)
```
```
  W = _ => L(0, S, S, S)
```
```
  T = _ => L(0, 0, S, S)
```
```
  F = _ => L(0, S, S, 0)
```
```
  X = _ => L(S, 0, S, S)
```
```
 
```
```
  D = [
```
```
    _ => {},
```
```
    O, W, T, F, 
```
```
    [O,F],
```
```
    X,
```
```
    [O,X],
```
```
    [W,X],
```
```
    [O,W,X]
```
```
  ]
```
```
 
```
```
  n = s => {
```
```
    [...s].reverse().map((l, i) => {
```
```
      save()
```
```
      translate(S+9, h+9)
```
```
      scale(N**i, N**~~(i/2))
```
```
      translate(0, -h)
```

      M() ;[D[l]].flat().map(x => x && x())

```
      restore()
```
```
    })
```
```
  }
```
```
 
```
```
  a(m`input`).oninput = e => {
```
```
    clearRect(0, 0, 80, 120)
```
```
    beginPath()
```
```
    n(~~e.target.value+'')
```
```
    stroke()
```
```
  }
```
```
}
```

Type any number from 0-9999 into the input field and see the corresponding Cistercian Numeral. This snippet is partially golfed, I left the canvas commands intact to make things a bit easier to understand.

Simpler SVG Version

This one hardcodes all numbers 0-9 as paths, unlike the canvas version which only defines 1,2,3,4 and 6 as paths and then combines them to create 5,7,8 and 9.

```
h='innerHTML'
```
```
C='children'
```
```
 
```
```
document.body[h]=`
```

<svg id=G width=99 viewBox="0 0 80 120"

  style="stroke:black;fill:none;overflow:visible">

```
  <g transform="translate(30,2)">
```
```
    <path d="M0 0L 30 0"/>
```
```
    <path d="M0 30L 30 30"/>
```
```
    <path d="M0 0L 30 30"/>
```
```
    <path d="M0 30L30 0"/>
```
```
    <path d="M0 30L30 0 0 0"/>
```
```
    <path d="M30 0L30 30"/>
```
```
    <path d="M30 30L30 0 0 0"/>
```
```
    <path d="M0 30L30 30 30 0"/>
```
```
    <path d="M0 30L30 30 30 0 0 0"/>
```
```
  </g>
```

  <g transform=translate(30,2)scale(-1,1)></g>

  <g transform=translate(30,92)scale(1,-1)></g>

  <g transform=translate(30,92)scale(-1,-1)></g>

```
  <path id=m d="M 30 2 L 30 92"/>
```
```
</svg>
```

<style>path:not(#m){opacity:0}</style><br>

```
<input id=I>`
```
```
 
```
```
c=G[C]
```
```
p=c[0][h] 
```
```
 
```
```
n = s => 
```
```
  [...s].reverse().map((l, i) => 
```

   l-1>-1 && (c[i][C][l-1].style.opacity=1))

```
 
```
```
I.oninput = e => {
```
```
  for(i=0;i<4;i++)c[i][h]=p
```
```
  n(~~e.target.value+'')
```
```
}
```

September 24, 2021

// arrays // canvas // codegolf // graphics // hacks // javascript // math

toString Hack Obfuscated

```
x=''+self 
```
```
j=''
```

'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'

```
.split``
```
```
.map(_=>j+=`x[0x${_}]+`)
```
```
console.log(eval(j+'""'))
```

Yesterday’s snippet saying something else…

It’s simpler than it looks:

```
x=''+self 
```
```
// becomes "[object Window]"
```
```
 
```
```
j='' 
```

// initialize `j` which will be javascript to pass to `eval`

```
 
```
```
'd1d7a17123456...' 
```
```
// this is a list of index values to 
```

// look up in `x` in hexidecimal so that each

```
// index is a single character
```
```
 
```
```
.split``
```

// split the index values into an array `[0xe, 0x2 ...`

```
 
```
```
.map(_=>j+=`x[0x${_}]+`)
```

// map over the index values and write a string like

```
// this `x[0xe]+x[0x2]+...` into `j`
```
```
 
```
```
console.log(eval(j+'""'))
```

// evaluate `j` with an empty string at the end

```
// `x[0xe]+x[0x2]+""` and log it out
```

September 13, 2021

// arrays // codegolf // golfed // hacks // hex // humor // javascript // obfuscation // strings // tricks

toString hack

```
x=self+''
```
```
console.log(
```
```
  x[8],x[9],x[6],' ',
```
```
  x[3],x[1],x[2],' ',
```
```
  x[10],x[4],x[8],' ',
```
```
  x[5],x[1],x[11]
```
```
)
```

Hit the “Try it out” and open the console….

September 12, 2021

// hacks // javascript // strings

Obfuscated Canvas Commands

```
const oCan = (
```
```
  d = document,
```
```
  b = d.body,
```

  canvas = b.appendChild(document.createElement('canvas')),

```
  c = canvas.getContext('2d'),
```
```
  props = [],
```
```
  o = {},
```
```
  docs = {},
```
```
  cmds = [],
```
```
  L,
```
```
  k,
```
```
  du,
```
```
  j,
```
```
  draw,
```
```
  id
```
```
) => {
```
```
  ;(onresize = () => {
```
```
    canvas.width = innerWidth
```
```
    canvas.height = innerHeight
```
```
    if (draw) {
```
```
      clearTimeout(id)
```

      id = setTimeout(() => cmds.forEach(v => draw(v)), 500)

```
    }
```
```
  })()
```
```
 
```

  Object.assign(b.style, { margin: 0, height: '100%' })

```
 
```

  // longer way: console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(c)));

```
  for (let i in c) props.push(i)
```
```
 
```

  // make alphabetical since object keys have

```
  // no order
```
```
  props.sort().map(i => {
```
```
    L = i.match(/[A-Z]/)
```
```
    k = i[0]
```
```
    if (L) k += L[0]
```
```
    du = 0
```
```
    if (o[k]) {
```
```
      j = 0
```
```
      while (o[k]) k += i[++j]
```
```
    }
```
```
 
```
```
    o[k] =
```
```
      (typeof c[i])[0] == 'f'
```

        ? (...args) => c[i].apply(c, args)

```
        : v => (c[i] = v)
```
```
    docs[i] = k
```
```
  })
```
```
 
```

  console.log('docs:', JSON.stringify(docs, null, 2))

```
 
```

  return (draw = (s, cmd, currFn, args = [], part, fn, num) => {

```
    cmd = s.split(/\s+/)
```
```
    cmds.push(s)
```
```
    c.save()
```

    for (let i = 0; i < cmd.length; i++) {

```
      part = cmd[i]
```
```
      fn = o[part]
```
```
      if (fn && currFn != fn) {
```
```
        currFn && currFn.apply(c, args)
```
```
        currFn = fn
```
```
        args = []
```
```
      } else {
```
```
        num = parseFloat(part)
```

        args.push(!isNaN(num) ? num : part)

```
      }
```
```
    }
```
```
    currFn && currFn.apply(c, args)
```
```
    c.restore()
```
```
  })
```
```
}
```
```
 
```
```
const c = oCan()
```
```
// `font` & text not suppoted
```
```
// make str a function so resize works?
```
```
c(`
```
```
  fS #ccc
```
```
  fR 0 0 400 ${innerHeight}
```
```
  fS blue
```
```
  fR 40 0 20 20
```
```
  gCl difference
```
```
  ro .25
```
```
  fR 50 0 30 30
```
```
  gCl source-over
```
```
  fS rgba(200,100,9)
```
```
  fR 100 100 40 40
```
```
  `)
```

I’ve had this idea for a long time, never bothered doing it until now. I wrote it in a semi-golfed style for no reason… Anyway, this lets you write canvas code in a strange obfuscated syntax that looks like this:

```
c(`
```
```
  fS #ccc
```
```
  fR 0 0 400 ${innerHeight}
```
```
  fS blue
```
```
  fR 40 0 20 20
```
```
  gCl difference
```
```
  ro .25
```
```
  fR 50 0 30 30
```
```
  gCl source-over
```
```
  fS rgba(200,100,9)
```
```
  fR 100 100 40 40
```
```
  `)
```

This snippet logs out some JSON that shows all the method aliases for the canvas context.

September 10, 2021

// canvas // codegolf // color // golfed // graphics // hacks // humor // javascript // json // strings // tricks

Proxy Quick DOM

```
const spec = {
```
```
  get(o, key) {
```
```
    return o[key] != null ? 
```
```
      o[key] : o[key] = (...args) => {
```

        const el = document.createElement(key);

```
        args.forEach(arg => { 
```

          if (typeof arg === 'string') {

            const span = document.createElement('span');

```
            span.innerHTML = arg;
```
```
            el.appendChild(span);
```

          } else if (typeof arg === 'object') {

```
            if (arg.tagName != null) {
```
```
              el.appendChild(arg);
```
```
            } else {
```
```
              for (let i in arg) {
```

                el.setAttribute(i, arg[i]);

```
              }
```
```
            }
```
```
          }
```
```
        });
```
```
        return el;
```
```
      }
```
```
  },
```
```
  set(o, key, v) {
```
```
    o[key] = v;
```
```
  }
```
```
}
```
```
 
```
```
const dom = new Proxy({}, spec);
```
```
 
```
```
document.body.appendChild(
```
```
  dom.div(
```
```
    dom.button('cool'), 
```

    dom.h2('some text', { style: 'font-style: italic' }),

```
    dom.br(), 
```
```
    dom.input({ placeholder: 'zevan' })
```
```
  )
```
```
);
```
```
 
```
```
const { div, input, label } = dom;
```
```
document.body.appendChild(
```
```
  div(
```
```
    label(
```
```
      'Slider:',
```
```
      { 
```
```
        for: 'slider', 
```

        style: 'padding:1em;display:block'

```
      },
```

      input({ id: 'slider', type: 'range' })

```
    )
```
```
  )
```
```
);
```

In this snippet a proxy is used that makes all html node tagNames valid methods. Each method can take strings and HTMLElements as arguments in any order to create a dom structure. This may look familiar to people who have looked a bit deeper into the inner workings of some of the popular UI libraries of the last decade.

September 9, 2021

// dom // hacks // javascript // proxies // tricks // ui

Older Posts

Newer Posts