Snippet Zone

Fibonacci Triangle Golfed

// by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld

f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}

```
`+f(n-1,b-a,(a+"").length-~p):''
```
```
 
```
```
console.log(f(20))
```

Great golfed solution to this question at codegolf stackexchange by user Arnauld

March 5, 2022

// codegolf // javascript // math

Thinking about DOM

```
const liveData = {}
```
```
const dom = new Proxy(liveData, {
```
```
  get(o, key) {
```
```
    if (o[key]) {
```
```
      return o[key]
```
```
    } else {
```
```
      const fn  = node.bind(null, key)
```
```
      return fn
```
```
    }
```
```
  }
```
```
});
```
```
 
```
```
const tags = {}
```
```
const isTag = tag => { 
```
```
  if (tags[tag] != null) {
```
```
    // already calculated
```
```
    return tags[tag]
```
```
  }
```

  const result = !/Unknown/.test(document.createElement(tag) + '')

```
  tags[tag] = result
```
```
  return result
```
```
}
```
```
 
```
```
const click = new WeakMap()
```
```
 
```
```
function pointerUp(e) { 
```
```
  const curr = e.target;
```
```
  if (!curr) return
```
```
 
```
```
  const action = click.get(curr)
```
```
  if (action) action(e)
```
```
 
```
```
  // bubble to parent
```

  if (curr?.parentNode?.tagName != 'BODY') {

    pointerUp({ target: e.target.parentNode })

```
  }
```
```
}
```
```
 
```

document.addEventListener('pointerup', e => {

```
  pointerUp(e)
```
```
})
```
```
 
```
```
function attrs(el, props) {
```
```
  const keys = Reflect.ownKeys(props)
```

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

```
    const key = keys[i];
```
```
    const val = props[key]
```
```
    if (typeof val != 'function') {
```
```
      el.setAttribute(key, val)
```
```
    } else if (key === 'click') {
```
```
      click.set(el, val)
```
```
    }
```
```
  }
```
```
}
```
```
 
```

const textarea = document.createElement('textarea')

```
 
```
```
function node(type, ...args) {
```
```
  let el;
```
```
  const namedEl = isTag(type);
```
```
  if (namedEl) {
```
```
    el = document.createElement(type)
```
```
  } else {
```
```
    el = document.createElement('div')
```
```
    el.className = type
```
```
  }
```
```
 
```
```
  const leng = args.length
```
```
  for (let i = 0; i < leng; i++) {
```
```
    const arg = args[i]
```
```
    if ((i === 1 || leng === 1)
```
```
      && typeof arg === 'string') {
```
```
        if (arg.includes('&')) {
```
```
          textarea.innerHTML = arg
```

          el.innerText = textarea.innerHTML

```
        } else { 
```
```
          el.innerText = arg
```
```
        }
```

    } else if (i === 0 && typeof arg === 'string') {

```
      el.classList.add(arg)
```
```
    } else { 
```
```
      if (typeof arg === 'object') {
```
```
        if (arg.el) { 
```
```
          el.appendChild(arg.el)
```
```
        } else {
```
```
          attrs(el, arg)
```
```
        }
```
```
      } 
```
```
    }
```
```
  }
```
```
  document.body.appendChild(el)
```
```
  return { el }
```
```
}
```
```
 
```
```
 
```

const { header, h1, h2, style, div, button } = dom

```
 
```
```
style(`
```
```
  body, html {
```
```
    font-family: sans-serif;
```
```
  }
```
```
  .edit-me {
```
```
    margin: 1em;
```
```
    outline: 1px solid red;
```
```
    padding: .5em;
```
```
  }
```
```
`)
```
```
 
```
```
header(
```
```
  h1('Dom Thoughts'),
```

  h2('sub-header', 'Can\'t help playing with this',

```
    { style: 'font-style: italic;' }
```
```
  )
```
```
)
```
```
div('main', 
```

  button('hello', 'Hello', { click: () => alert('hello') }),

  div('edit-me', 'Edit Me', { contentEditable: true })

```
)
```

Just playing around with DOM creation syntax, kind of reacty… This is the main part:

const { header, h1, h2, style, div, button } = dom

```
 
```
```
style(`
```
```
  body, html {
```
```
    font-family: sans-serif;
```
```
  }
```
```
  .edit-me {
```
```
    margin: 1em;
```
```
    outline: 1px solid red;
```
```
    padding: .5em;
```
```
  }
```
```
`)
```
```
 
```
```
header(
```
```
  h1('Dom Thoughts'),
```

  h2('sub-header', 'Can\'t help playing with this',

```
    { style: 'font-style: italic;' }
```
```
  )
```
```
)
```
```
div('main', 
```

  button('hello', 'Hello', { click: () => alert('hello') }),

  div('edit-me', 'Edit Me', { contentEditable: true })

```
)
```

March 4, 2022

// brainstorming // ui

What is Clicked?

document.addEventListener('click', e => console.log(e.target))

Try that one in your console and then click on stuff. I use that frequently when debugging…

March 3, 2022

// dom // tricks // ui

Cut Hole in Canvas (eraser)

document.body.style.background = 'gray';

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

```
const c = canvas.getContext('2d');
```
```
 
```
```
canvas.width = 300;
```
```
canvas.height = 300;
```
```
 
```
```
c.fillStyle='rgba(255, 0, 0, 0.8)'
```

c.fillRect(0, 0, canvas.width, canvas.height);

```
 
```

c.globalCompositeOperation = 'destination-out';

```
c.fillStyle = 'black';
```
```
c.fillRect(100, 100, 150, 50);
```
```
 
```
```
document.body.appendChild(canvas);
```

destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.

March 2, 2022

// canvas // color // graphics // tricks

Acronym Definition Generator

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
  <head>
```
```
    <meta charset="utf-8" />
```
```
    <title>Acro</title>
```
```
 
```

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
    <style>
```
```
 
```
```
      body {
```
```
        font-family: sans-serif;
```
```
        margin: 3em;
```
```
      }
```
```
 
```
```
      button {
```
```
        cursor: pointer;
```
```
        font-size: 1em;
```
```
        padding: .6em;
```
```
        margin-bottom: 2em;
```
```
      }
```
```
 
```
```
      h1 {
```
```
        font-size: 3em;
```
```
        text-decoration: underline;
```
```
      }
```
```
 
```
```
      hr {
```
```
        border: none;
```

        border-bottom: 1px dashed gray;

```
      }
```
```
 
```
```
      i {
```
```
        text-transform: lowercase;
```
```
      }
```
```
 
```
```
      #acro {
```
```
        position: relative;
```
```
        width: 100%;
```
```
        min-width: 350px;
```
```
        max-width: 700px;
```
```
        margin: 0 auto;
```
```
 
```
```
      }
```
```
 
```
```
      input[type=text] {
```
```
        padding: .5em;  
```
```
        margin-right: 1em;
```
```
        text-transform: uppercase;
```
```
      }
```
```
 
```
```
      #go {
```
```
        margin-right: .5em;  
```
```
      }
```
```
 
```
```
      #btn {
```
```
        float: right;  
```
```
      }
```
```
 
```
```
      .row {
```
```
        width: 100%;
```
```
        clear: both;
```
```
      }
```
```
      .uiBreak { display: none; }
```
```
 
```

      @media only screen and (max-width: 600px) {

```
        body {
```
```
          font-size: .8em;
```
```
          margin: 1em;
```
```
        }
```
```
 
```
```
      }
```
```
 
```

      @media only screen and (max-width: 400px) {

```
        .uiBreak { display: block; }
```
```
        #btn {
```
```
          float: left;
```
```
          display: block;
```
```
          clear: both;
```
```
        }
```
```
      }
```
```
 
```
```
    </style>
```
```
  </head>
```
```
  <body>
```
```
    <div id=acro>
```
```
      <h1>Acro</h1>
```
```
      <div>
```

        <input id=input type=text placeholder="enter acronym">

```
        <button id=go>go...</button>
```
```
        <br class=uiBreak>
```

        <button id=btn>generate random...</button>

```
      </div>
```
```
 
```
```
      <div id=acros></div>
```
```
    </div>
```
```
    <script>
```
```
(() => {
```
```
 
```
```
  const min = 3
```
```
  const max = 5
```
```
  const diff = max - min
```
```
 
```
```
  const { random } = Math
```
```
 
```
```
  const wordsByLetter = {}
```

  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``

```
  let words;
```
```
 
```

  alphabet.forEach(let => wordsByLetter[let] = [])

```
 
```
```
  console.log('loading...')
```
```
 
```
```
  fetch('words.txt')
```
```
    .then(data => data.text())
```
```
    .then(text => {
```
```
      console.log('prepping...')
```
```
 
```
```
      words = text.split(/\s+/m).sort()
```
```
 
```
```
      const chunk = 500
```

      const ticks = ~~(words.length / chunk)

```
 
```
```
      let idx = 0
```
```
      let count = 0
```
```
 
```

      let interval = setInterval(() => {

```
        if (count === ticks) {
```
```
          start()
```
```
          clearInterval(interval)
```
```
          return
```
```
        }
```
```
 
```

        for (let i = 0; i < chunk; i++) {

```
          const word = words[idx]
```
```
          if (word[0]) {
```

            const firstLetter = word[0].toUpperCase()

            wordsByLetter[firstLetter]?.push(word)

```
          }
```
```
          idx++
```
```
        }
```
```
        count++
```
```
      }, 1)
```
```
    })
```
```
 
```
```
  function start() {
```
```
    console.log('starting...')
```
```
 
```
```
    const rando = _ => {
```

      const leng =  ~~(min + diff * random())

```
      let word = ''
```
```
      for (let i = 0; i < leng; i++) {
```

        word += alphabet[~~(random() * alphabet.length)]

```
      }
```
```
      return word
```
```
    }
```
```
 
```
```
    const gen = custom => {
```
```
      if (!custom) return
```
```
      custom = custom.toUpperCase()
```
```
      const leng = custom.length
```
```
      const def = []
```
```
 
```
```
      for (let i = 0; i < leng; i++) {
```

        const sourceWords = wordsByLetter[custom[i]]

        def[i] = sourceWords[~~(random() * sourceWords.length)]

```
      }
```

      const div = document.createElement`div`

```
      div.className = 'row'
```
```
      div.innerHTML = `
```
```
        <h2>${custom}</h2>
```
```
        <i>${def.join` `}</i>
```
```
        <hr>
```
```
      `
```
```
      acros.prepend(div)
```
```
    }
```
```
 
```
```
    btn.onclick = () => {
```
```
      gen(rando())
```
```
    }
```
```
 
```

    go.onclick = () => gen(input.value);

```
    document.onkeydown = e => {
```

      if (e.key === 'Enter') gen(input.value);

```
    }
```
```
 
```
```
  }
```
```
})()
```
```
    </script>
```
```
  </body>
```
```
</html>
```

A friend of mine had this idea the other night so I coded it up…

Update: I forgot to mention, this uses this list of words from google…

February 28, 2022

// humor // javascript // speedcoding // strings

Older Posts

Newer Posts

Fibonacci Triangle Golfed

Thinking about DOM

What is Clicked?

Cut Hole in Canvas (eraser)

Acronym Definition Generator

Recent

Archive