)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Single Div Box Shadow CSS

  1. <div></div>
  2. <style>
  3.   div {
  4.     position: absolute;
  5.     left: 0; top: 0;
  6.     width: 1px; height: 1px;
  7.     box-shadow: 
  8.       140px 90px 0px 4px white,
  9.       140px 90px 0px 30px rgba(255, 0, 0, 0.2),
  10.       140px 90px 0px 10px teal,
  11.       90px 80px 0px 4px white,
  12.       90px 80px 0px 30px rgba(255, 0, 0, 0.2),
  13.       90px 80px 0px 10px teal,
  14.       70px 60px 0px 20px orange,
  15.       60px 50px 0px 20px blue,
  16.       50px 40px 0px 20px red,
  17.       40px 30px 0px 20px black;
  18.   }
  19. </style>

Many box shadows on a single div.

// css

Find preventDefault or stopPropagation JavaScript

  1. Event.prototype.preventDefault = () => {
  2.   debugger;  
  3. };
  4.  
  5. // @NOTE `stopPropagation` or `stopImmediatePropagation` could also be 
  6. // preventing events 
  7.  
  8. // Event.prototype.stopPropagation = () => {
  9. //   debugger;  
  10. // };

This is a real life saver – especially for large confusing legacy projects with lots of event logic. You can use this to track down an unwanted preventDefault and/or stopPropagation. I needed this recently to see which of many calls to preventDefault was preventing my touch events from working in a certain area.

I usually pop this into the console and step through things. If you’ve never seen debugger before read about it here…

// events // javascript

Track Mouse and Touch Events

  1. const evts = [
  2.   'touchstart', 'touchmove', 'touchend',
  3.   'mousedown', 'mousemove', 'mouseup', 
  4.   'click', 'mousenter', 'mouseleave'
  5. ]
  6. evts.forEach(type => {
  7.   document.addEventListener(type, e => {
  8.     console.log('event: ', type)
  9.   })
  10. })

See which mouse events are able to fire on the document.

I used this recently when fixing some issues with Android Talkback. Screenreaders will swallow mouse events in some cases.

You can add pointer events too if you need them…

// accessibility // events // javascript

Conic Gradient CSS

  1. <div></div>
  2. <style>
  3.   div {
  4.     width: 200px;
  5.     height: 200px;
  6.     background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  7.   }
  8. </style>


CSS conic gradient. I got this snippet from CSS Tricks article… 😀

// css // gradients // graphics // html

Letter Particles With Keyboard

  1. const Key = {
  2.   LEFT: 37,
  3.   UP: 38,
  4.   RIGHT: 39,
  5.   DOWN: 40,
  6.   disabled: false
  7. };
  8.  
  9. const keyDown = {};
  10.  
  11. function setupKeys() {
  12.   const alph = 'abcdefghijklmnopqrstuvwxyz'.split('');
  13.   const keys = {};
  14.   const aKey = 65;
  15.   alph.forEach((letter, i) => {
  16.     const idx = aKey + i;
  17.     keyDown[idx] = false;
  18.     Key[letter.toUpperCase()] = idx;
  19.   });
  20.  
  21.   keyDown.allLetters = () => {
  22.     const lettersDown = alph.filter(
  23.       letter => keyDown[Key[letter.toUpperCase()]]
  24.     );
  25.     return lettersDown;
  26.   };
  27.  
  28.   document.addEventListener('keydown', e => {
  29.     e.preventDefault();
  30.     if (!Key.disabled) {
  31.       keyDown[e.which] = true;
  32.     }
  33.   });
  34.  
  35.   document.addEventListener('keyup', e => {
  36.     e.preventDefault();
  37.     keyDown[e.which] = false;
  38.   });
  39. }
  40.  
  41. setupKeys();
  42.  
  43. // later:
  44.  
  45. const dots = {};
  46. let id = 0;
  47. function dot(letter = '') {
  48.   const el = document.createElement('div');
  49.   el.innerHTML = letter;
  50.   const size = 20;
  51.   const scale = 1 + Math.random() * 2;
  52.   const vel = (2 - scale / 2) / 4;
  53.   let x = innerWidth / 2 - size;
  54.   let y = innerHeight / 2 - size;
  55.   let vx = Math.random() * 6 - 3;
  56.   let vy = Math.random() * 6 - 3;
  57.   let life = 0;
  58.   let maxLife = Math.floor(50 + Math.random() * 30);
  59.   Object.assign(el.style, {
  60.     position: 'absolute',
  61.     left: 0,
  62.     top: 0,
  63.     transform: `translate3d(${x}px, ${y}px)`,
  64.     borderRadius: '500px',
  65.     background: 'red',
  66.     width: `${size}px`,
  67.     fontFamily: 'sans-serif',
  68.     textAlign: 'center',
  69.     color: 'white'
  70.   });
  71.  
  72.   id++;
  73.  
  74.   let props = {
  75.     el,
  76.     id,
  77.     right() {
  78.       vx += vel;
  79.     },
  80.     left() {
  81.       vx -= vel;
  82.     },
  83.     down() {
  84.       vy += vel;
  85.     },
  86.     up() {
  87.       vy -= vel;
  88.     },
  89.     run() {
  90.       life++;
  91.       if (life === maxLife) {
  92.         document.body.removeChild(dots[props.id].el);
  93.         delete dots[props.id];
  94.       }
  95.       x += vx;
  96.       y += vy;
  97.       vx *= 0.999;
  98.       vy *= 0.999;
  99.       el.style.transform = `translate(${x}px, ${y}px) scale(${scale}) `;
  100.     }
  101.   };
  102.   dots[id] = props;
  103.   document.body.appendChild(el);
  104. }
  105.  
  106. function loop() {
  107.   keyDown.allLetters().forEach(letter => {
  108.     dot(letter);
  109.   });
  110.  
  111.   for (let i in dots) {
  112.     dots[i].run();
  113.   }
  114.  
  115.   if (keyDown[Key.LEFT]) {
  116.     for (let i in dots) {
  117.       dots[i].left();
  118.     }
  119.   }
  120.  
  121.   if (keyDown[Key.DOWN]) {
  122.     for (let i in dots) {
  123.       dots[i].down();
  124.     }
  125.   }
  126.  
  127.   if (keyDown[Key.RIGHT]) {
  128.     for (let i in dots) {
  129.       dots[i].right();
  130.     }
  131.   }
  132.  
  133.   if (keyDown[Key.UP]) {
  134.     for (let i in dots) {
  135.       dots[i].up();
  136.     }
  137.   }
  138.  
  139.   requestAnimationFrame(loop);
  140. }
  141. loop();
  142.  
  143. const info = document.createElement('div')
  144. info.innerHTML = 'click here, then type letters and use arrow keys'
  145. document.body.appendChild(info)

A demo showing how to use the keyboard snippet from yesterday. Also added a function to obtain an array of all currently pressed letter keys

// animation // javascript // keys // math // random // tricks // ui
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}