Snippet Zone

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

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Nonsense Words Golfed

```
vow = 'aeiou'.split``
```
```
con = 'bcdfghjklmnpqrstvwxyz'.split``
```
```
 
```
```
R = _ => Math.random()
```
```
r = a => a[~~(R() * a.length)]
```
```
 
```
```
part = _ => r(con) + r(vow) + (
```
```
  R() < .5 ? r(vow) : ''
```
```
)
```
```
 
```
```
wrd = _ => {
```
```
  n = ~~(R() * 3) + 1
```
```
  s = ''
```
```
  for (i = n; i--;) 
```
```
    s += part()
```
```
 
```
```
  return s + ' '
```
```
}
```
```
 
```
```
for(k = 30; k--;) 
```
```
  document.body.innerHTML += wrd()
```

Some nonsense words…

January 26, 2022

// humor // strings

1×1 Transparent Image DataUri Gif

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Have used this one in the past – super useful – guessing I got it from here but not totally sure…

If I ever get around to making the updated version of QuickShader available – it’s used in there…

EDIT:

```
// ¯\_(:P)_/¯
```

Object.assign(document.createElement`canvas`,{width:1,height:1}).toDataURL()

```
 
```
```
//// ... 
```

document.body.innerHTML=`<canvas id=x>`;x.width=x.height=1;x.toDataURL()

January 19, 2022

// graphics // humor // tricks

Polar Forking Tweak

```
const FOUR_PI = 6 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() { 
```
```
  c.fillStyle = 'rgba(0, 0, 0, .3)'
```

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

```
  c.fillStyle = 'white';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  let b = 5 * cos(inc);
```
```
  inc += .02;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 10 * sin(theta / 3));

    // randomly speed-coded and tweaked... leaving as is :D

    x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);

    y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);

```
    c.fillRect(x,y, 2, 2);
```
```
    theta += 0.04;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```
```
addEventListener('resize', resize);
```
```
 
```
```
draw();
```

Just randomly futzing with sin/cos…

January 12, 2022

// animation // canvas // curves // graphics // hacks // humor // math

Older Posts

Newer Posts

Acronym Definition Generator

Odd Gradient Notation

Nonsense Words Golfed

1×1 Transparent Image DataUri Gif

Polar Forking Tweak

Recent

Archive