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

Simple Way to Validate CSS Colors

  1. function isColor(col) {
  2.   const cache = isColor[col]
  3.   if (cache != null) {
  4.     console.log('- reading cache')
  5.     return cache
  6.   }
  7.   isColor.el.style = ''
  8.   isColor.el.style.color = col
  9.   return isColor[col] = !!isColor.el.style.color
  10. }
  11. isColor.el = document.createElement('div')
  12.  
  13.  
  14. console.log('is "red" a color?', isColor('red'))
  15. console.log('from the cache: ', isColor('red'))
  16.  
  17. console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
  18.  
  19. console.log('is "#0f0" a color?', isColor('#0f0'))
  20.  
  21. console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
  22. console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
  23.  
  24. console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
  25.   isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
  26.  
  27. console.log('is "snippetZone" ?', isColor('snippetZone'))

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

// color // css // dom // graphics // hacks // hex // html // javascript // tricks

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

Multiple Class Trick

  1. .thing.thing.thing {
  2.   color: green;
  3. }
  4.  
  5. .thing.thing {
  6.   color: red;
  7. }
  8.  
  9. .thing {
  10.   color: blue;
  11. }

What color would p.thing be?

// css // tricks // ui

Odd Gradient Notation

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. D = document
  4. ang = {
  5.   '|': 180,
  6.   '-': 90,
  7.   '\\': 135,
  8.   '/': 225
  9. }
  10.  
  11. box = def => {
  12.   def = def.split(/\s+/)
  13.   form = def.length
  14.   I = i => parseInt(def[i], 16)
  15.  
  16.   ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},
  17.     _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},
  18.     _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}
  19.   ][form]()
  20.  
  21.   c = c.split``
  22.  
  23.   ca = c[0]
  24.   ca = ca+ca+ca
  25.   cD = ang[c[1]]
  26.   cb = c[2]
  27.   cb = cb+cb+cb 
  28.  
  29.   D.body.appendChild(
  30.     D.createElement`div`
  31.   ).style = `
  32.     position: absolute; left: ${x}px; top: ${y}px;
  33.     width: ${w}px; height: ${h}px;
  34.     background: linear-gradient(${cD}deg, #${ca}, #${cb})
  35.   `
  36. }
  37.  
  38. const parse = prog => prog.trim()
  39.   .split(/\n+/m)
  40.   .map(line => box(line.trim()))
  41.  
  42. parse(`
  43.   0 64 0/f
  44.   64 64 0\\f
  45.   a0 f0 30 54 f\\0
  46.   0 6f 20 60 0-c
  47.   f 7f 20 60 0|c
  48.   1f 8f 30 30 c/0
  49. `)

Just playing around… odd micro-gradient notation:

  1. '0 64 0/f'
  2. // x=0 y=0 width=0x64 height=0x64
  3. // 0/f = gradient black to white top right to bottom left
  4.  
  5. '64 64 0\\f'
  6. // x=0 y=0 width=0x64 height=0x64
  7. // 0\\f = black to to white gradient top left to bottom right
  8.  
  9. '0 6f 20 60 0-c'
  10. // x=0 y=0x6f width=0x20 height=0x60
  11. // 0-c = gradient black to grey (#ccc) left to right
  12.  
  13. // etc... ( | ) is top to bottom grad
// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

CSS Checkbox

  1. <div class="toggle">
  2.   <input class="check" type="checkbox" tabindex="0">
  3.   <label></label>
  4. </div>
  5.  
  6. <style>
  7.   .toggle {
  8.     position: relative;
  9.   }
  10.   .check {
  11.     position: absolute;
  12.     width: 3rem;
  13.     height: 3rem;
  14.     margin: 0;
  15.     opacity: 0;
  16.     cursor: pointer;
  17.   }
  18.   label {
  19.     position: absolute;
  20.     pointer-events: none;
  21.     content: '';
  22.     width: 3rem;
  23.     height: 3rem;
  24.     background: black;
  25.     cursor: pointer
  26.   }
  27.   .check:checked + label {
  28.     background: red;
  29.   }
  30. </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…

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