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

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

HWB Colors

  1. // Safari and Firefox only... no Chrome support at time of this post
  2. Object.assign(document.body.style, { 
  3.   margin: 0,
  4.   display: 'grid',
  5.   'grid-template-columns': '1fr 1fr 1fr',
  6. });
  7.  
  8. const hwbBlock = () => {
  9.   const hue = Math.round(Math.random() * 360)
  10.   const white = Math.round(
  11.     Math.random() * Math.random() * 100)
  12.   const black = Math.round(
  13.     Math.random() * Math.random() * 100)
  14.   const col = `hwb(${hue} ${white}% ${black}%)`
  15.   document.body.innerHTML += `
  16.     <div 
  17.       style="
  18.         width: 100%;
  19.         height: 4em;
  20.         font-family: sans-serif;
  21.         text-align: center;
  22.         line-height: 2.3;
  23.         color: white;
  24.         text-shadow: 1px 1px 5px black;
  25.         background:${col}">${col}</div>
  26.   `
  27. }
  28.  
  29. Array(102).fill(0).map(hwbBlock);

HWB color format… Looking forward to better support on this CSS color format…

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