Snippet Zone

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

PointerUp Before Click

document.body.innerHTML += 'click/tap anywhere<br>'

```
 
```

document.addEventListener('click', () => {

  document.body.innerHTML += 'click<br>'

```
})
```
```
 
```

document.addEventListener('pointerup', () => {

  document.body.innerHTML += 'pointerup<br>'

```
})
```

pointerup fires before click

March 16, 2022

// dom // events // javascript // touchEvents // ui

What is Clicked?

document.addEventListener('click', e => console.log(e.target))

Try that one in your console and then click on stuff. I use that frequently when debugging…

March 3, 2022

// dom // tricks // ui

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Martin Kleppe’s Golfed Blobs Quine

<pre id=p style=background:#000><svg onload='setInterval(f=n=>

{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>

(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))

(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>

Great golfed snippet from Martin Kleppe – can’t wait to fork it… 😀

This was updated a bit later to be even smaller:

<body onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+f)[i],"o"][c=0|(h=v=>(M=Math).hypot(i/30-7+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'bgcolor=X><pre id=p>

December 22, 2021

// dom // golfed // graphics // hacks // html // humor // javascript // math // strings // tricks

Older Posts

Newer Posts

Toggle a Class

PointerUp Before Click

What is Clicked?

Odd Gradient Notation

Martin Kleppe’s Golfed Blobs Quine

Recent

Archive