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

Simple Way to Validate CSS Colors

  1. function isColor(col) {
  2.   const cache = isColor[col]
  3.   if (cache != null) {
  4.     console.log('- reading cache')
  5.     return cache
  6.   }
  7.   isColor.el.style = ''
  8.   isColor.el.style.color = col
  9.   return isColor[col] = !!isColor.el.style.color
  10. }
  11. isColor.el = document.createElement('div')
  12.  
  13.  
  14. console.log('is "red" a color?', isColor('red'))
  15. console.log('from the cache: ', isColor('red'))
  16.  
  17. console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
  18.  
  19. console.log('is "#0f0" a color?', isColor('#0f0'))
  20.  
  21. console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
  22. console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
  23.  
  24. console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
  25.   isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
  26.  
  27. console.log('is "snippetZone" ?', isColor('snippetZone'))

I find this technique is usually good enough to validate colors…

// color // css // dom // graphics // hacks // hex // html // javascript // tricks

Normalize Value Between 0 and 1

  1. const d = document.body.appendChild(
  2.   document.createElement`div`)
  3. d.innerHTML = `
  4. <input 
  5.   id="input"
  6.   type="range" 
  7.   min="-2" max="5" 
  8.   value="0">
  9. `
  10.  
  11. let val = 0;
  12.  
  13. console.log('drag slider...')
  14.  
  15. const range = (input.max - input.min);
  16.  
  17. input.oninput = () => {
  18.   val = (input.value - input.min) / range
  19.   console.log(input.value + ' - normalized = ' + val)
  20. }
// html // javascript // math // ui

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

// html // javascript // security // working draft

W3Schools Output Tag

  1. <!-- from w3schools.com -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5.  
  6. <h1>The output element</h1>
  7.  
  8. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  9. <input type="range" id="a" value="50">
  10. +<input type="number" id="b" value="25">
  11. =<output name="x" for="a b"></output>
  12. </form>
  13.  
  14. <p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
  15.  
  16. </body>
  17. </html>

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

// hacks // html // humor // speedcoding
Older Posts

Recent

Archive

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