Snippet Zone

Label Thoughts

```
main:{
```
```
  header:{
```
```
    {'Tasker'}
```
```
    newCol:{'New Column'}
```
```
  }
```
```
 
```
```
  columns:{
```
```
    scroll:{
```
```
      NoteCols:{}
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
NoteCol:{
```
```
  title:{['editable', 'focus']
```
```
    close:{
```
```
      {'&times;'}
```
```
    }
```
```
  }
```

  newNote:{['editable', 'placeholder="New Note..."']}

```
  hr:{}
```
```
  noteContainer:{
```
```
    Notes:{}
```
```
  }
```
```
}
```
```
 
```
```
Note:{['focus']
```
```
  close:{
```
```
    {'&times;'}
```
```
  }
```
```
  checkbox:{}
```
```
  content:{['edtiable']}
```
```
}
```
```
 
```
```
console.log('no errors :D');
```

The above is actually valid javascript, just a bunch of labels, blocks and a few arrays

February 18, 2022

// javascript // tricks // ui

CoffeeScript Ikeda Map

canvas = document.querySelector "canvas"

```
c = canvas.getContext "2d"
```
```
locX = 120
```
```
locY = 400
```
```
xn1 = xn = yn1 = yn = tn = 0
```
```
u = .7
```
```
steps = 10
```
```
iterations = 200
```
```
scale = 180
```
```
 
```
```
c.fillStyle = "black"
```

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

```
c.fillStyle = "rgba(255,255,255,0.2)"
```
```
 
```
```
run = setInterval ->
```
```
  clearInterval run if u > 1
```
```
  i = 0
```
```
 
```
```
  while i < steps
```
```
    u += 0.00015
```
```
    j = 0
```
```
 
```
```
    while j < iterations
```
```
      xn = xn1
```
```
      yn = yn1
```

      tn = 0.4 - (6 / (1 + xn * xn + yn * yn))

      xn1 = 1 + u * (xn * Math.cos(tn) - yn * Math.sin tn)

      yn1 = u * (xn * Math.sin(tn) + yn * Math.cos tn)

      c.fillRect locX + xn1 * scale, locY + yn1 * scale, 1, 1

```
      j++
```
```
    i++
```
```
, 30
```

I do quite miss CoffeeScript sometimes… here is an old codepen of the Ikeda Map:

See the Pen Ikeda Map by Zevan Rosser (@ZevanRosser) on CodePen.

February 17, 2022

// animation // canvas // graphics

CSS Checkbox

```
<div class="toggle">
```

  <input class="check" type="checkbox" tabindex="0">

```
  <label></label>
```
```
</div>
```
```
 
```
```
<style>
```
```
  .toggle {
```
```
    position: relative;
```
```
  }
```
```
  .check {
```
```
    position: absolute;
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    margin: 0;
```
```
    opacity: 0;
```
```
    cursor: pointer;
```
```
  }
```
```
  label {
```
```
    position: absolute;
```
```
    pointer-events: none;
```
```
    content: '';
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    background: black;
```
```
    cursor: pointer
```
```
  }
```
```
  .check:checked + label {
```
```
    background: red;
```
```
  }
```
```
</style>
```

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

February 16, 2022

// css // html // ui

Soundex

```
// Minimum length of Soundex keys.
```
```
var minLength = 4
```
```
 
```

// Soundex values belonging to characters.

// This map also includes vowels (with a value of 0) to easily distinguish

```
// between an unknown value or a vowel.
```
```
var map = {}
```
```
 
```

map.a = map.e = map.i = map.o = map.u = map.y = 0

```
map.b = map.f = map.p = map.v = 1
```

map.c = map.g = map.j = map.k = map.q = map.s = map.x = map.z = 2

```
map.d = map.t = 3
```
```
map.l = 4
```
```
map.m = map.n = 5
```
```
map.r = 6
```
```
 
```
```
/**
```

 * Get the soundex key from a given value.

```
 *
```
```
 * @param {string} value
```
```
 * @param {number} [maxLength=4]
```
```
 * @returns {string}
```
```
 */
```
```
function soundex(value, maxLength) {
```

  var lowercase = String(value).toLowerCase()

```
  /** @type {Array.<string|number>} */
```
```
  var results = []
```
```
  var index = -1
```
```
  /** @type {string} */
```
```
  var character
```
```
  /** @type {number} */
```
```
  var previous
```
```
  /** @type {number} */
```
```
  var phonetics
```
```
 
```
```
  while (++index < lowercase.length) {
```
```
    character = lowercase.charAt(index)
```
```
    phonetics = map[character]
```
```
 
```
```
    if (index === 0) {
```
```
      // Initial letter
```

      results.push(character.toUpperCase())

    } else if (phonetics && phonetics !== previous) {

```
      // Phonetics value
```
```
      results.push(phonetics)
```
```
    } else if (phonetics === 0) {
```
```
      // Vowel
```
```
      phonetics = null
```
```
    } else {
```

      // Unknown character (including H and W)

```
      phonetics = previous
```
```
    }
```
```
 
```
```
    previous = phonetics
```
```
  }
```
```
 
```

  return pad(results.join('')).slice(0, maxLength || minLength)

```
}
```
```
 
```
```
/**
```

 * Pad a given value with zero characters. The function only pads four characters.

```
 *
```
```
 * @param {string} value
```
```
 * @returns {string}
```
```
 */
```
```
function pad(value) {
```
```
  var length = minLength - value.length
```
```
  var index = -1
```
```
 
```
```
  while (++index < length) {
```
```
    value += '0'
```
```
  }
```
```
 
```
```
  return value
```
```
}
```
```
 
```
```
console.log(
```
```
  soundex('Joe'),
```
```
  soundex('Smith'),
```
```
  soundex('Ed'), 
```
```
  soundex('Vilowat')
```
```
)
```

Was talking with someone about Soundex… I grabbed this implementation from the soundex-code npm package from Titus Wormer…

Soundex has always been super interesting to me for some reason.

February 15, 2022

// javascript // strings

Little Galaxy ES5

var canvas = document.createElement('canvas'),

```
    c = canvas.getContext('2d'), 
```
```
    SIZE = 350;
```
```
 
```
```
canvas.width = SIZE;
```
```
canvas.height = SIZE;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, SIZE, SIZE);
```
```
 
```
```
c.fillStyle = 'white';
```
```
 
```
```
var spa = function(ts) {
```
```
  var r = 0, t =  0;
```

  var jitterX, jitterY, jitterT, jitterR;

```
  for (var i = 0; i < 100; i += 0.5) {
```
```
    t = ts + i / 15;
```
```
    r = i;
```
```
    jitterR = 5 + i / 5;
```

    jitterT = Math.random() * 2 * Math.PI;

    jitterX = Math.random() * jitterR * Math.sin(jitterT);

    jitterY = Math.random() * jitterR * Math.cos(jitterT);

    c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;

```
    c.fillRect(
```

      SIZE / 2 + r * Math.cos(t) + jitterX,

      SIZE / 2 + r * Math.sin(t) + jitterY,

```
      3, 3
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
spa(0);
```
```
spa(Math.PI);
```

I made this in response to a question from a friend of mine a few years back…

February 14, 2022

// canvas // graphics

Older Posts

Newer Posts

Label Thoughts

CoffeeScript Ikeda Map

CSS Checkbox

Soundex

Little Galaxy ES5

Recent

Archive