DEV Community

Vesa Piittinen
Vesa Piittinen

Posted on • Updated on

My Button is better than your Button

There is a weird bunch of people in the web development industry. These people want to make everything themselves. This means you find people crafting their own component libraries and/or Design Systems, and in worst case each project has their own. These are almost always made from scratch, and very rarely any of these is CSS-based.

In addition they're almost guaranteed to be imperfect re-implementations of native web elements with lacking usability or accessibility. But when you add those requirements in you suddenly have many kilobytes worth of code doing stuff the browser already does! The user pays the price waiting the code to load, and when you notice there is a performance hit you can always split more code. Woohoo. I'm excited. Even more complex tech to learn!

Of course there are reasonings for going this way. Especially the Select element is one that is often used as a perfect example of a native element that can't be "styled enough", thus using as the prime example of a component that must be written yourself.

But I think there is another thing at play here as well. One of the things is that we like to do things creatively, and remaking the same components over and over again with all the interesting technical challenges is a joy. You can sure make that Button flatter looking and more robust than the 25 year old battle tested browser native Button.

The core problem here is privilege. These components get recreated by people who are fully ablebodied and are generally blind to people who use things differently than they themselves do. Often you do get the minimal done: you click and select, boom, it works! Or you touch in phone and select, boom! Now it is perfect! Nothing to it. Maybe someone in the team is wise enough to suggest Enter key to work as well, and then that is that.

They're completely ignorant to the fact that you can write ABCD in a Select element and it magically selects the Abc option from the Select element with B, C, and D being the other options. Or that you can use arrow keys to browse through the list of element without ever opening the list of options.

The social ignorance here is annoying at a minimum, and segregating at worst.

Are you doing components like these from scratch? I have news for you. It is simply arrogant to keep thinking you're doing a great job with the recreations.

You're not doing a great job. You're writing code that will be thrown out a year or two after leaving the project, because the next guy noticed your implementation didn't do thing X so they rewrite it so that it does the thing X well, but fails to consider the thing Y, and so the infinite loop of re-implementing the Button continues.

So many wasted hours on nothing.

Discussion (0)