Snippet Zone

HTML Fraction

```
<style>
```
```
  .frac {
```
```
    display: inline-block;
```
```
    position: relative;
```
```
    vertical-align: middle;
```
```
    letter-spacing: 0.001em;
```
```
    text-align: center;
```
```
  }
```
```
  .frac > span {
```
```
    display: block;
```
```
    padding: 0.1em;
```
```
  }
```
```
  .frac span.bottom {
```
```
    border-top: thin solid black;
```
```
  }
```
```
  .frac span.symbol {
```
```
    display: none;
```
```
  } 
```
```
</style>
```
```
 
```
```
<div class="frac">
```
```
  <span>1</span>
```
```
  <span class="symbol">/</span>
```
```
  <span class="bottom">2</span>
```
```
</div>
```
```
 
```
```
&#xb7; 
```
```
<div class="frac">
```
```
  <span>3</span>
```
```
  <span class="symbol">/</span>
```
```
  <span class="bottom">4</span>
```
```
</div>
```

I saw this trick on stackoverflow by user lokesh. It will display:

1 / 2

3 / 4

November 7, 2021

// css // html

Array Range from 1

```
Object.assign(Number.prototype, {
```
```
  *[Symbol.iterator]() {
```
```
    for (let i = this; i--;) 
```
```
      yield this - i;
```
```
  }
```
```
});
```
```
 
```
```
console.log([...3]);
```

I saw this on twitter a little while back. Tweet was from James Padolsey. A fun trick, the thread is pretty entertaining.

November 6, 2021

// arrays // hacks // humor // javascript // tricks

elementUnderPoint and elementsUnderPoint

document.addEventListener('mousemove', e => {

  const el = document.elementFromPoint(e.clientX, e.clientY);

```
 
```

  // msElementsFromPoint for old IE versions (which will thankfully be gone soon)

  const els = document.elementsFromPoint(e.clientX, e.clientY);

```
  if (el != null) { 
```
```
    console.log(
```
```
      el.className, 
```
```
      els
```
```
    )
```
```
 
```

    el.style.border = '1px solid white';

```
  }
```
```
});
```
```
 
```
```
// prevent scrolling
```

document.addEventListener('touchmove', e => e.preventDefault(), { passive: false });

```
 
```
```
// hardcoded for clarity
```

document.addEventListener('touchmove', e => {

```
  const x = e.touches[0].clientX;
```
```
  const y = e.touches[0].clientY;
```

  const el = document.elementFromPoint(x, y);

  const els = document.elementsFromPoint(x, y);

```
 
```
```
  if (el != null) { 
```
```
    console.log(
```
```
      el.className,
```
```
      els
```
```
    )
```

    el.style.border = '1px solid white';

```
  }
```
```
});
```
```
 
```
```
Object.assign(document.body.style, {
```
```
  background: '#000', 
```
```
  margin: 0
```
```
});
```
```
 
```
```
// put some boxes on the page
```
```
for (let i = 0; i < 200; i++) { 
```
```
  const size = 10 + Math.random() * 80;
```
```
  const halfSize = size / 2;
```
```
  const x = Math.random() * 120 - 10;
```
```
  const y = Math.random() * 120 - 10;
```

  const rot = x * 3 + Math.random() * 90 - 45;

```
  const col = `hsl(${rot}, 50%, 50%)`;
```
```
  document.body.innerHTML += `
```
```
    <div class="box box-${i}" 
```
```
      style="
```
```
        transform: rotate(${rot}deg);
```
```
        position: absolute;
```
```
        background: ${col};
```
```
        width: ${size}px; 
```
```
        height: ${size}px;
```
```
        left: ${x}%;
```
```
        top: ${y}%;
```
```
      "></div>`;
```
```
}
```

Obtain the element or elements underneath the mouse or touch point. Open your dev console to see the results.

November 5, 2021

// dom // javascript // ui

This kind of thing is often showcased on UI Framework demo pages. I thought it would be interesting to create it in the simplest way possible while still being readable. This is the only code needed for the entire web page… the browser will figure out the rest… 😀

November 4, 2021

// javascript // tricks // ui

Low Resolution Sine Table

```
const sin = [
```

0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,

9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,

1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,

-8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,

-10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,

-6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];

```
 
```
```
const c = document.body.appendChild(
```
```
  document.createElement('canvas')
```
```
).getContext('2d');
```
```
 
```
```
const size = 200;
```

c.canvas.width = c.canvas.height = size;

```
 
```
```
let x = 0;
```
```
let tick = 0;
```
```
let xOff = 30;
```
```
let lines = 14;
```
```
let pad = 10;
```
```
let stagger = 8;
```
```
 
```
```
const loop = () => {
```
```
  tick++;
```
```
  c.fillStyle = 'red';
```
```
  c.fillRect(0, 0, size, size);
```
```
  c.fillStyle = 'white';
```
```
 
```
```
  for (let i = 0; i < size; i++) {
```
```
    for (let j = 1; j < lines; j++) { 
```

      x = xOff + sin[(i + j * stagger + tick) % 125];

```
      c.fillRect(x + j * pad, i, 1, 1);
```
```
    }
```
```
  }
```
```
  requestAnimationFrame(loop);
```
```
};
```
```
loop()
```

This is a low resolution sine table. I created this array to run on the original gameboy sometime last year… worked great for that…

November 3, 2021

// canvas // javascript // math

Older Posts

Newer Posts

HTML Fraction

Array Range from 1

elementUnderPoint and elementsUnderPoint

Bad/Simple UI Counter

Low Resolution Sine Table

Recent

Archive