)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Map vs WeakMap

  1. const map = new Map()
  2.  
  3. map.set(1, 'one')
  4.  
  5. console.log(map.get(1))
  6.  
  7. const weakMap = new WeakMap()
  8.  
  9. // this will fail with an error:
  10. // weakMap.set(1, 'one')
  11.  
  12. // 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.

Toggle a Class

  1. // lazy hack for css
  2. document.body.innerHTML = `
  3.   <style> 
  4.     button { 
  5.       cursor: pointer; 
  6.     }
  7.     .red { 
  8.       background-color: red; 
  9.     } 
  10.   </style>
  11. `
  12.  
  13. const btn = document.body.appendChild(
  14.   Object.assign(
  15.     document.createElement('button'), 
  16.     { innerText: 'click me' }
  17.   )
  18. )
  19.  
  20. btn.addEventListener('click', e => {
  21.   e.target.classList.toggle('red')
  22. })

classList.toggle brings back memories…

// css // dom // ui

Decompose Matrix

  1. const deltaTransformPoint = (matrix, point) => {
  2.   return {
  3.     x: point.x * matrix.a + point.y * matrix.c,
  4.     y: point.x * matrix.b + point.y * matrix.d
  5.   }
  6. }
  7.  
  8. const decomposeMatrix = matrix => {
  9.   let px = deltaTransformPoint(matrix, { x: 0, y: 1 })
  10.   let py = deltaTransformPoint(matrix, { x: 1, y: 0 })
  11.   let skewX = FROM_RADS * Math.atan2(px.y, px.x) - 90
  12.   let skewY = FROM_RADS * Math.atan2(py.y, py.x)
  13.  
  14.   return {
  15.     tx: matrix.e,
  16.     ty: matrix.f,
  17.     scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
  18.     scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
  19.     skewX: skewX,
  20.     skewY: skewY,
  21.     rotation: skewX
  22.   }
  23. }

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

Great stackoverflow answer from user dave

// graphics // math // matrix

Bad JavaScript Poem

  1. with (self) with (Math){ typeof self
  2. 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

:/

// humor

Very Bad JavaScript Poem

  1. if (window . i) {
  2.   if (window . you) {
  3.     if (window . we) {
  4.       with (window . blue) {
  5.         for ( window . what in window . how ) {
  6.           for ( window . how in window . who ) {
  7.             do {} while (true)
  8.           }
  9.         }
  10.       }
  11.     }
  12.   }
  13. }

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

// humor
snippet.zone ~ 2021-24 /// {s/z}