I'm experimenting with web components for building accessible custom elements. I like the closer-to-the-metal experience than frameworks like React or Angular. Now let the record show, I am a big fan of React. This project is exploring ways to build components that have interop with multiple frameworks and systems.
I am using the open-wc generator to scaffold my components quickly and accurately. Eventually I will add Typescript to the mix. Once I learn how to write it. :)
I have also recently learned about the Modern Web site. I recommend that one too.
I think this repository will grow into a full-blown design system. I know, it doesn't seem like it just now, but that's the want. I am a React dev, but I spend a lot of time looking at Next, Svelte, Solid, and vanilla JS. The idea of having components I can use across libraries is appealing. If I can write it once and use it everywhere, that's less time doing boring things and more time doing interesting ones. As such, this section will house blog posts, links, and inspirations for moving toward that goal.
- How to Create an Accessible Design System in 60 Days
- Design tokens explained (and how to build a design token system)
- How to manage your Design Tokens with Style Dictionary
- Design Tokens using Style-Dictionary & Figma
I'm a big believer in testing. I prefer to write them often, and include a11y tests at every level (unit, integration, e2e).