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

Convert an Image to dataUri

  1. function toDataUri(img, scalar = 1) {
  2.   const canvas = document.createElement('canvas');
  3.   canvas.width = img.width * scalar;
  4.   canvas.height = img.height * scalar;
  5.   canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
  6.   return canvas.toDataURL('image/png');
  7. }
  8.  
  9. const img = new Image();
  10. img.crossOrigin = 'Anonymous';
  11. img.addEventListener('load', () => {
  12.   const thumb = new Image();
  13.   // use the data URI as the source
  14.   thumb.src = toDataUri(img, .3);
  15.   document.body.appendChild(thumb);
  16. });
  17. img.src = 'https://zevanrosser.com/fotoda/slide-shot-9.jpg';

Load an image and convert it to a data URI.

// graphics // javascript // tricks

Make a Debugging Dot

  1. function dot(x, y, radius, color) {
  2.   const el = document.createElement('div');
  3.   const size = `${radius * 2}px`;
  4.   Object.assign(el.style, {
  5.     position: 'absolute', 
  6.     left: `${x}px`,
  7.     top: `${y}px`,
  8.     width: size,
  9.     height: size,
  10.     transform: `translate(${-radius}px, ${-radius}px)`,
  11.     borderRadius: '50%',
  12.     background: color
  13.   });
  14.   el.classList.add('dot');
  15.   document.body.appendChild(el);
  16.   return el;
  17. }
  18.  
  19. dot(100, 100, 10, 'red');
  20. dot(200, 100, 5, 'blue');
  21.  
  22. for (let i = 0; i < 20; i++) {
  23.   dot(20 + i * 12, 200, 5, `hsl(${i * 10}deg, 60%, 50%)`)
  24. }

Draw a dot – good for visualizing things when doing animation and positioning logic.

// css // graphics // javascript // tricks

Semi-golfed Calculator

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. d = document
  4. b = d.body
  5. a = (e = 'div') => b.appendChild(d.createElement(e))
  6. t = a`input`
  7. s = ''
  8. a()
  9. O = v => t.value = v
  10. '0123456789+-*()/C='.split``.map(v => {
  11.   v == '+' && a()
  12.   _ = a`button`
  13.   _.innerHTML = v
  14.   o = { 
  15.     C(){s = O('')},
  16.     ['='](){O(eval(s))}
  17.   }
  18.   _.onclick = () => o[v] ? o[v]() : (s = s + v, O(s))
  19. })
// dom // golfed // javascript // math // tricks

Editible Div With Memory (localStorage)

  1. const el = document.createElement('div')
  2. el.innerHTML = localStorage.memory == null ? 'type here' :
  3.   localStorage.memory
  4. el.contentEditable = true;
  5.  
  6. document.body.appendChild(el);
  7. document.addEventListener('keyup', () => {
  8.   localStorage.memory = el.innerHTML;
  9. });

Create an editable div that remembers what was typed in it.

// javascript // localStorage // tricks

createElement and Object.assign

  1. const el = document.createElement('div');
  2. Object.assign(el.style, {
  3.   position: 'absolute',
  4.   left: '100px',
  5.   top: '100px',
  6.   width: '30px',
  7.   height: '30px',
  8.   background: 'linear-gradient(black, red)',
  9.   transform: 'rotate(15deg)'
  10. });
  11. document.body.appendChild(el);

Fast and easy way to set many styles on a DOM node. Click/tap the “Try it out” button to play around with the code.

// css // dom // tricks
Newer Posts

Recent

Archive

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