Snippet Zone

Map vs WeakMap

```
const map = new Map()
```
```
 
```
```
map.set(1, 'one')
```
```
 
```
```
console.log(map.get(1))
```
```
 
```
```
const weakMap = new WeakMap()
```
```
 
```
```
// this will fail with an error:
```
```
// weakMap.set(1, 'one')
```
```
 
```
```
// console.log(weakMap.get(1))
```

Noticed this gotcha the other day. For some reason WeakMap can’t have integers as keys. After years of using WeakMap I guess I’ve only ever used objects as keys and assumed it could just have keys of any type. Using a Map instead solves the problem, but you’ll need to be careful to manager your references to properly clear the Map. Anyway, just one of those things… Maybe I’ll write more about it when I have some time to dig deeper.

March 30, 2022

// gotchas // javascript // objects // tricks

Toggle a Class

```
// lazy hack for css
```
```
document.body.innerHTML = `
```
```
  <style> 
```
```
    button { 
```
```
      cursor: pointer; 
```
```
    }
```
```
    .red { 
```
```
      background-color: red; 
```
```
    } 
```
```
  </style>
```
```
`
```
```
 
```
```
const btn = document.body.appendChild(
```
```
  Object.assign(
```
```
    document.createElement('button'), 
```
```
    { innerText: 'click me' }
```
```
  )
```
```
)
```
```
 
```
```
btn.addEventListener('click', e => {
```
```
  e.target.classList.toggle('red')
```
```
})
```

classList.toggle brings back memories…

March 29, 2022

// css // dom // ui

Decompose Matrix

const deltaTransformPoint = (matrix, point) => {

```
  return {
```

    x: point.x * matrix.a + point.y * matrix.c,

    y: point.x * matrix.b + point.y * matrix.d

```
  }
```
```
}
```
```
 
```
```
const decomposeMatrix = matrix => {
```

  let px = deltaTransformPoint(matrix, { x: 0, y: 1 })

  let py = deltaTransformPoint(matrix, { x: 1, y: 0 })

  let skewX = FROM_RADS * Math.atan2(px.y, px.x) - 90

  let skewY = FROM_RADS * Math.atan2(py.y, py.x)

```
 
```
```
  return {
```
```
    tx: matrix.e,
```
```
    ty: matrix.f,
```

    scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),

    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),

```
    skewX: skewX,
```
```
    skewY: skewY,
```
```
    rotation: skewX
```
```
  }
```
```
}
```

Get the scale, translation, rotationa and skew values from a matrix.

Great stackoverflow answer from user dave

March 28, 2022

// graphics // math // matrix

Bad JavaScript Poem

```
with (self) with (Math){ typeof self
```

with (window) with (sin) if (true) self }

This could be dangerous. Bad js poetry:

With self With Math Type of self With window With sin If true self

March 27, 2022

// humor

Very Bad JavaScript Poem

```
if (window . i) {
```
```
  if (window . you) {
```
```
    if (window . we) {
```
```
      with (window . blue) {
```

        for ( window . what in window . how ) {

          for ( window . how in window . who ) {

```
            do {} while (true)
```
```
          }
```
```
        }
```
```
      }
```
```
    }
```
```
  }
```
```
}
```

Bad js poem:

if window i if window you if window we with window blue for window what in window how for window how in window who do while true

March 26, 2022

// humor

Older Posts

Newer Posts

Map vs WeakMap

Toggle a Class

Decompose Matrix

Bad JavaScript Poem

Very Bad JavaScript Poem

Recent

Archive