What is ChevronButton.com

Some years ago I was a member of a pretty cool little team developing a mobile web application. We were in a transition from the legacy jQuery mobile stack into a modern React application. This was pretty early React days, so best practices were changing by the day. And some could probably accuse us of being somewhere on the left side of the Duning-Kreuger graph, and they might not be wrong. Somewhere around this time the ChevronButton makes its appearance.

So in short, the ChevronButton is a quite normal button with a tiny arrow, or you guest it, a chevron. We did not use a design system or a component library, we just build stuff ourselves. Our UX-designer brought us the latest design, with the glorious chevron button front and center in the menu. So we developed it. A React component, some 100 lines of code with about the same of CSS. This was fine.

Start of bad decisions

Some days pass, and a new design is handed to us developers, this time there is also something resembling the ChevronButton, however this time it doesn't have an outline and it's placed in a menu. But it's still a button, it still has a chevron. So it's still a ChevronButton. So a few new attributes were added like outline and listMode. Both the JS and CSS grew quite a bit. This is the point were we should have had a little pause, reviewed our ideas and refactored. We didn't. Instead we got another sketch from our designer. Another great design, this time it included a menu item that looked exactly like the last one, except without the chevron.

Yes, you guessed it. We added a attribute to our ChevronButton, <ChevronButton withoutChevron={true}>. At this point we'd completely lost control over the ChevronButton, it had taken on a life of it's own. More or less releases were returned by QA with some kind of obscure bug in the ChevronButton. The newer team members wisely kept clear of the component and each "solved" bug increased the complexity and the mess.

Aftermaths

A lot later than needed, one of our team members locked himself into a meeting room for a couple of days and refactored the whole thing. He shaved off some 1000 lines of code, and returned the ChevronButton to somewhere around the original length and complexity. The other hidden subcomponents, like the ListButton, were split out till it's own clean and simple components. And to no-ones surprise ever, the bugs related to the ChevronButton ceased to stop our releases.

ChevronButton.com

Even though our ChevronButton weren't initially a huge success, it's kinda shaped me as a developer. I've gained a appreciation and respect for simple and clean code with a clear purpose. It often feels like the natural state of code tends towards chaos with time, and we developers must be really focused to reverse that effect.