Here are a few random stories from my last couple weeks of work.
We have a datepicker field that has a calendar SVG icon sitting on top of the field. There was an issue where clicking the icon wasn’t triggering the datepicker widget to pop up.
To fix this, I first started transforming the icon into a button and starting writing some onClick handlers to focus into the field. But then I thought “Wait a minute! There’s pointer-events: none in CSS that allows clicks to pass through the element into the field sitting beneath it. So rather than having to write a bunch more JS, one line of CSS did the job.
Another component in our backlog is called “Badged Ordered List”, which is essentially a stylized ordered list.
Now, our component library has a Badge component, and I guess because of the name of the component in our backlog I started down the path of importing the Badge component, writing a for loop, cloning the child elements to be able to automatically pass in the incremented number into the badge. But then I thought “Wait a minute! I can just use CSS’s counter-increment to make stylized numbers for my list. Because the component is really a simple stylized list and not a true Badge (which is a flag for indicating things like alerts, error, success, etc), I was able to accomplish it with like 4 lines of CSS.
Next on the docket is an overflow carousel component. Now, everyone knows I love carousels. But of course we have to build a horizontal swipey carousel thing. Historically this has involved authoring a ton of JS. Now obviously there’s still JS involved, but we now have CSS scroll-snap that gets me a lot of the way there without having to write any JS. In 30 minutes I had the basic functionality down.
It’s funny how we find ways to overcomplicate things. It’s also funny how seemingly simple things can end up being crazy complicated. If there’s a moral to this story it’s: can you find a simpler way to accomplish whatever you’re doing?