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

Little Grid

  1. const NUM = 9
  2. const col = 3
  3. const size = 30
  4. const pad = 10
  5. const box = (x, y) => Object.assign(
  6.   document.body.appendChild(
  7.     document.createElement('div')
  8.   ).style, {
  9.     position: 'absolute',
  10.     width: size + 'px', 
  11.     height: size + 'px',
  12.     top: y + 'px', 
  13.     left: x + 'px',
  14.     background: 'red'
  15. })
  16.  
  17. const off = (size + pad)
  18. for (let i = 0; i < NUM; i++) {
  19.   const x = (i % col) * off
  20.   const y = parseInt(i / col, 10) * off
  21.   box(x, y)
  22. }

Mangler

  1. const lookupReplacements = {
  2.   // entities (like &sum; or &Theta; - are safer
  3.   // than just putting things inline like ∑ or ®
  4.   'a': ['A', '&Auml;', '∆', '&aacute;'],
  5.   'e': ['&eacute;', '∃'],
  6.   't': ['⊤', '&Tau;'] ,
  7.   'b': ['&beta;'],
  8.   'o': ['&empty;', '_o_']
  9. }
  10.  
  11. function mangle(s) {
  12.   return s.split``.map(letter => {
  13.     const chars = lookupReplacements[letter]
  14.     return chars ? chars[
  15.       Math.floor(
  16.         chars.length * Math.random()
  17.       )
  18.     ] : letter
  19.   }).join``
  20. }
  21.  
  22. document.body.innerHTML = mangle('Been taking a break from making snippets... might start up again...<hr>')
  23.  
  24. document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')
  25.  
  26. document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

Substitute some characters in a string with some random choices…

Pass a Class

  1. function callMethods(evt) {
  2.   const e = new evt
  3.   e.one()
  4.   e.two()
  5. }
  6.  
  7. callMethods(class {
  8.   one() {
  9.     console.log('one')
  10.   }
  11.  
  12.   two() {
  13.     console.log('two')
  14.   }
  15. })

This is so tempting for something I want to do… but too strange to use probably… maybe…

Mutation Observer

  1. // Select the node that will be observed for mutations
  2. const targetNode = document.getElementById('some-id');
  3.  
  4. // Options for the observer (which mutations to observe)
  5. const config = { attributes: true, childList: true, subtree: true };
  6.  
  7. // Callback function to execute when mutations are observed
  8. const callback = function(mutationsList, observer) {
  9.     // Use traditional 'for loops' for IE 11 (goodbye IE11!!!!)
  10.     for(const mutation of mutationsList) {
  11.         if (mutation.type === 'childList') {
  12.             console.log('A child node has been added or removed.');
  13.         }
  14.         else if (mutation.type === 'attributes') {
  15.             console.log('The ' + mutation.attributeName + ' attribute was modified.');
  16.         }
  17.     }
  18. };
  19.  
  20. // Create an observer instance linked to the callback function
  21. const observer = new MutationObserver(callback);
  22.  
  23. // Start observing the target node for configured mutations
  24. observer.observe(targetNode, config);
  25.  
  26. // Later, you can stop observing
  27. observer.disconnect();

This is pure gold if you haven’t used it… (from MDN)

// dom // events // graphics // html // javascript // ui

HTML Sanitizer

  1. const unsanitized_string = "abc <script>alert(1)</script> def";  // Unsanitized string of HTML
  2. const sanitizer = new Sanitizer();  // Default sanitizer;
  3.  
  4. // Sanitize the string
  5. let sanitizedDiv = sanitizer.sanitizeFor("div", unsanitized_string);
  6.  
  7. //We can verify the returned element type, and view sanitized HTML in string form:
  8. console.log( (sanitizedDiv instanceof HTMLDivElement) );
  9. // true
  10. console.log(sanitizedDiv.innerHTML)
  11. // "abc  def"
  12.  
  13. // At some point later ...
  14.  
  15. // Get the element to update. This must be a div to match our sanitizeFor() context.
  16. // Set its content to be the children of our sanitized element.
  17. document.querySelector("div#target").replaceChildren(sanitizedDiv.children);

Interesting… From MDN

snippet.zone ~ 2021-22 /// {s/z}