I've written some sophisticated code in my time, believe me. I thought the more I abstracted away things, hiding the complexity, the better the result was.
I was over-engineering and I usually ended up paying the cost later or abandoning the code altogether.
I came across some of my old code last week.
Boy, was it beautiful, elegant, smart and refined! It was a custom dropdown with type-ahead autocomplete that you'd usually find on flashy websites.
All that flashiness and complexity was hiding unintended barriers underneath.
- It was completely unusable with a keyboard
- It performed poorly even with a mouse when scrolling a bit faster than normal
- It was pretty bad at positioning the dropdown properly on smaller screen sizes
I was looking through the code and realised I had spent weeks building this thing only to now realise it was less accessible, overall less usable and definitely harder to maintain than the a regular HTML select element.
And that's where the hidden costs of over-engineering are visible. You pay them with an increased development time and a higher risk of bugs. Your users pay the lump sum of the cost though when they can't even use it.
I now find myself more and more looking at native HTML elements that I progressively enhance as needed.
This approach not only saves me time, but gives me a leg up on making sure what I make is accessible.
Sometimes, the most elegant solution is the one that's already built into the web.