Snippet Zone

)

}

}

)

(

}

{

)

)

(

)

(

(

{

}

)

(

)

}

)

)

{

(

(

)

)

}

)

(

}

About All Posts Warning Random

Simple Way to Validate CSS Colors

```
function isColor(col) {
```
```
  const cache = isColor[col]
```
```
  if (cache != null) {
```
```
    console.log('- reading cache')
```
```
    return cache
```
```
  }
```
```
  isColor.el.style = ''
```
```
  isColor.el.style.color = col
```

  return isColor[col] = !!isColor.el.style.color

```
}
```

isColor.el = document.createElement('div')

```
 
```
```
 
```

console.log('is "red" a color?', isColor('red'))

console.log('from the cache: ', isColor('red'))

```
 
```

console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))

```
 
```

console.log('is "#0f0" a color?', isColor('#0f0'))

```
 
```

console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))

console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))

```
 
```

console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',

  isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))

```
 
```

console.log('is "snippetZone" ?', isColor('snippetZone'))

I find this technique is usually good enough to validate colors…

July 17, 2023

0

// color // css // dom // graphics // hacks // hex // html // javascript // 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

0

// css // dom // ui

Multiple Class Trick

```
.thing.thing.thing {
```
```
  color: green;
```
```
}
```
```
 
```
```
.thing.thing {
```
```
  color: red;
```
```
}
```
```
 
```
```
.thing {
```
```
  color: blue;
```
```
}
```

What color would p.thing be?

March 19, 2022

0

// css // 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

0

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

CSS Checkbox

```
<div class="toggle">
```

  <input class="check" type="checkbox" tabindex="0">

```
  <label></label>
```
```
</div>
```
```
 
```
```
<style>
```
```
  .toggle {
```
```
    position: relative;
```
```
  }
```
```
  .check {
```
```
    position: absolute;
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    margin: 0;
```
```
    opacity: 0;
```
```
    cursor: pointer;
```
```
  }
```
```
  label {
```
```
    position: absolute;
```
```
    pointer-events: none;
```
```
    content: '';
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    background: black;
```
```
    cursor: pointer
```
```
  }
```
```
  .check:checked + label {
```
```
    background: red;
```
```
  }
```
```
</style>
```

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

February 16, 2022

0

// css // html // ui

snippet.zone ~ 2021-23 /// {s/z}