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

Golfed Min/Max

  1. Math.min(a,b)  // 13 chars
  2. a<b?a:b        //  7 chars
  3.  
  4. Math.max(a,b)
  5. a>b?a:b

Another small golfing gem from codegolf stackexchange. This isn’t immediately obvious, but cool to note when golfing.

It’s also worth mentioning that if your code is long enough, aliasing Math.min and/or Math.max may be shorter in the long run:

  1. m = Math.min
  2. Math.min(a,b)  // 13 chars
  3. a<b?a:b        //  7 chars
  4. m(a,b)         //  6 chars
// codegolf // javascript // math // tricks

Complementary HSL

  1. const a = document.body.appendChild(document.createElement('div')),
  2.       b = document.body.appendChild(document.createElement('div'));
  3. let degA = degB = 0;
  4.  
  5. const size = {
  6.   width: '100px',
  7.   height: '100px'
  8. };
  9. Object.assign(a.style, size);
  10. Object.assign(b.style, size);
  11.  
  12. function loop() {
  13.   degA += 1;
  14.   degB = degA + 180;
  15.   a.style.background = `hsl(${degA}deg, 100%, 50%)`;
  16.   b.style.background = `hsl(${degB}deg, 100%, 50%)`;
  17.   requestAnimationFrame(loop);
  18. }
  19. loop();

In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.

// animation // color // css // dom // javascript // tricks // ui

Wiggly Line Canvas

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10. }
  11. addEventListener('resize', resize);
  12. resize();
  13.  
  14. const PAD = 50;
  15. const RAD = 2;
  16. const SPEED = 20;
  17. const TWO_PI = Math.PI * 2;
  18.  
  19. let mode = 'draw';
  20.  
  21. let t = Math.random() * TWO_PI, 
  22.     x = innerWidth / 2, 
  23.     y = innerHeight / 2,
  24.     vx = 0, vy = 0, ta = 0;
  25.  
  26. function loop() {
  27.   for (var i = 0; i < SPEED; i++) {
  28.     t = Math.sin(ta) * TWO_PI;
  29.     vx = RAD * Math.cos(t);
  30.     vy = RAD * Math.sin(t);
  31.     ta += Math.random() * 0.1 - 0.05;
  32.     x += vx;
  33.     y += vy;
  34.  
  35.     if (Math.random() < 0.005) {
  36.       mode = 'no draw';
  37.     } else if (Math.random() < 0.005) {
  38.       mode = 'draw';
  39.     }
  40.  
  41.     if (mode === 'draw') {
  42.       c.fillStyle = 'red';
  43.       c.fillRect(x, y, 2, 2);
  44.     }
  45.  
  46.     if (x < -PAD) {
  47.       x = innerWidth + PAD;
  48.     } else if (x > innerWidth + PAD) {
  49.       x = -PAD;
  50.     }
  51.     if (y < -PAD) {
  52.       y = innerHeight + PAD;
  53.     } else if (y > innerHeight + PAD) {
  54.       y = -PAD;
  55.     }
  56.   }
  57.  
  58.   requestAnimationFrame(loop);
  59. }
  60. loop();

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

// animation // canvas // javascript // math // random // tricks

Make a Grid

  1. const cellSize = 25;
  2. const cols = 10;
  3. const rows = 20;
  4.  
  5. function makeDot(x, y) {
  6.   const dot = document.body.appendChild(
  7.     document.createElement('div')
  8.   );
  9.  
  10.   dot.classList.add('cell');
  11.  
  12.   Object.assign(dot.style, {
  13.     position: 'absolute',
  14.     left: `${x}px`,
  15.     top: `${y}px`,
  16.     width: `${cellSize}px`,
  17.     height: `${cellSize}px`,
  18.     outline: '1px solid black',
  19.     cursor: 'pointer',
  20.     background: 'gray'
  21.   });
  22.  
  23.   return dot;
  24. }
  25.  
  26. for (let y = 0; y < rows; y++) {
  27.   for (let x = 0; x < cols; x++) {
  28.     makeDot(x * cellSize, y * cellSize);
  29.   }
  30. }
  31.  
  32. // make a cell red when it is rolled over
  33. document.addEventListener('mouseover', e => {
  34.   if (e.target.classList.contains('cell')) {
  35.     e.target.style.background = 'red';
  36.   }
  37. });

Here is a simple example for arranging divs in a grid.

// css // dom // javascript // math // tricks // ui

toString Hack Obfuscated

  1. x=''+self 
  2. j=''
  3. 'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'
  4. .split``
  5. .map(_=>j+=`x[0x${_}]+`)
  6. console.log(eval(j+'""'))

Yesterday’s snippet saying something else…

It’s simpler than it looks:

  1. x=''+self 
  2. // becomes "[object Window]"
  3.  
  4. j='' 
  5. // initialize `j` which will be javascript to pass to `eval`
  6.  
  7. 'd1d7a17123456...' 
  8. // this is a list of index values to 
  9. // look up in `x` in hexidecimal so that each 
  10. // index is a single character
  11.  
  12. .split``
  13. // split the index values into an array `[0xe, 0x2 ...`
  14.  
  15. .map(_=>j+=`x[0x${_}]+`)
  16. // map over the index values and write a string like
  17. // this `x[0xe]+x[0x2]+...` into `j`
  18.  
  19. console.log(eval(j+'""'))
  20. // evaluate `j` with an empty string at the end
  21. // `x[0xe]+x[0x2]+""` and log it out
`
// arrays // codegolf // golfed // hacks // hex // humor // javascript // obfuscation // strings // tricks
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}