Snippet Zone

Bind All Methods to a Class instance JavaScript

```
function bindAll(target) {
```

  const keys = Object.getOwnPropertyNames(target.constructor.prototype);

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

```
    const key = keys[i];
```
```
    const propOrMethod = target[key];
```

    if (typeof propOrMethod === 'function') {

      target[key] = target[key].bind(target);

```
    }
```
```
  }
```
```
}
```
```
 
```
```
class Test {
```
```
  constructor() {
```
```
    bindAll(this);
```

    document.addEventListener('click', this.onClick);

```
  }
```
```
  onClick(e) {
```
```
    console.log('click', this);
```
```
  }
```
```
  otherMethod(e) {
```
```
    console.log('test', this);
```
```
  }
```
```
}
```
```
 
```
```
const test = new Test();
```
```
 
```
```
setInterval(test.otherMethod, 1000);
```

This is useful when you know you need many methods of a given class to be bound to the classes instance. Another way to do this is to selectively use instance properties:

```
class Test {
```
```
  constructor() {
```

    document.addEventListener('click', this.onClick);

```
  }
```
```
  onClick = e => {
```
```
    console.log('click', this);
```
```
  }
```
```
  otherMethod e => {
```
```
    console.log('test', this);
```
```
  }
```
```
}
```

Avoiding classes is another way to not have to deal with this issue 😉

December 12, 2021

// humor // javascript // oop

valueOf for Shorter Function Calls

```
r={valueOf:_=>Math.random()}
```
```
console.log(+r)
```
```
console.log(+r)
```
```
console.log(+r)
```

Use valueOf to shorten function calls. I learned this trick over at stackexchange codegolf here from user cyoce.

December 11, 2021

// codegolf // javascript // math // random

Exponential Notation JavaScript

```
console.log(1e1); // 10
```
```
console.log(1e2); // 100
```
```
console.log(1e3); // 1000
```
```
console.log(1e4); // 10000
```
```
console.log(12e3); // 12000
```

This can be helpful when you need big numbers like 100000.

December 10, 2021

// javascript // math

Gray Gradient Texture

function rect(x1, y1, x2, y2, col, blur = 0.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```

const blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(

```
  ','
```
```
);
```
```
const cols = ['black', 'white'];
```
```
 
```
```
function gen() {
```

  [...document.querySelectorAll('div')].forEach(d =>

```
    d.parentNode.removeChild(d)
```
```
  );
```
```
  for (let j = 0; j < 4; j++) {
```
```
    const rects = [];
```
```
    for (let i = 0; i < 10; i++) {
```
```
      const x = Math.random() * 100;
```
```
      const y = Math.random() * 100;
```

      const s = Math.random() * Math.random() * Math.random() * 30 + 3;

      const col = cols[~~(Math.random() * cols.length)];

      rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));

```
    }
```

    const el = document.body.appendChild(document.createElement('div'));

    el.style.backgroundImage = rects.join(', ');

    el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];

```
  }
```
```
}
```
```
gen();
```
```
 
```
```
document.body.innerHTML += `
```

  <button id="regen">Regenerate</button>

```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
    div {
```
```
      position: absolute;
```
```
      top: 0; left: 0;
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
    #regen {
```
```
      position: absolute;
```
```
      width: 100px;
```
```
      height: 30px;
```
```
      background: #ccc;
```
```
      border: 1px solid white;
```
```
      margin: 1em;
```
```
      cursor: pointer;
```
```
      transition: all 250ms ease-out;
```
```
      z-index: 999;
```
```
    }
```

    #regen:hover { background: #333; color: white; }

```
  </style>
```
```
`;
```
```
 
```
```
regen.onclick = gen;
```

Playing around some more with lots of linear gradients.

December 9, 2021

// color // css // gradients // graphics // hacks // javascript // speed-coded

Conic Accident

```
conicBtn.onclick = () => {
```
```
  document.body.innerHTML += `
```
```
  <style>
```
```
    div {
```

      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

```
    }
```
```
  </style>
```
```
  `
```
```
}
```

get ready….

When I created the gradient conic snippet from a few days ago – I accidentally applied the rule to the entire page…. thought it was funny enough to be worth making a snippet out of 😀

December 8, 2021

// css // gradients // graphics // hacks // javascript

Older Posts

Newer Posts

Bind All Methods to a Class instance JavaScript

valueOf for Shorter Function Calls

Exponential Notation JavaScript

Gray Gradient Texture

Conic Accident

Recent

Archive