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?

Next Post

Style at Home: Plush curves and sculptural shapes a reimagined 2022 decor trend

The only thing constant about trends is that they come and go — which is why I always say to stick to what you love regardless of what is currently “in” at the moment. That being said, who doesn’t love to be ahead of the curve when it comes to […]

You May Like