Nerd sniping, web components, and CSS relative colors - Frontend Engineering Explained #coding

It started simple. Make a video about using Array.filter. It ended with a small little web app written using HTML, JavaScript, and CSS tied together using web components, allowing you to filter through 148 CSS named colors. Found your new favorite? Click to copy it to your clipboard.

And of course, ensure it is usable with a mouse, keyboard, and a screen reader, and check that it works in Chrome, Firefox, and Safari. Phew, that got out of hand 😁

https://rainbow-css-color-cafe.netlify.app/

I hope you learn something new and interesting that you can use. Questions? Please reach out. I am always happy to chat and help.

- Repository: https://github.com/schalkneethling/rainbow-css-color-cafe
- Named colors: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#browser_compatibility
- Array.filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
- Custom elements: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
- The Accessibility Compat Data Project - https://lolaslab.co/blog/2025/accessibility-compat-data/

Photo by Daniele Levis Pelusi on Unsplash:
https://unsplash.com/photos/multicolored-rainbow-artwork-UUjxTEET0c0

#css #javascript #webcomponents

Видео Nerd sniping, web components, and CSS relative colors - Frontend Engineering Explained #coding канала Schalk Neethling