The Compounded Interest of Good Software: An example of Carousel Components

While working on software there's a constant war between compounded interest and technical debt. Both have their places in the life-cycle of a project, but understanding when to leverage one over the other can make all the difference in the long run.

The Need for a Carousel Component

I am working on a website, and I need a carousel component that seamlessly transitions between images, accommodating both mouse and touch inputs. A seemingly simple task, but one that can quickly spiral into a mess if not handled properly.

The Trap of Technical Debt

In the past, I've fallen victim to the allure of technical debt. I'd hastily cobble together a carousel component, sacrificing long-term stability for short-term gains. Sure, it worked, but it was like building a house of cards, fragile and prone to 💩 at any moment. Ten years ago I worked on such component and I must confess that I got weeks of salary just on that functionality that barely worked.

The Power of Compounded Interest

Instead of falling to the temptation of using some over-bloated library like Bootsrap, or writing something from scratch, I decided to invest in compounded interest. I had previously written and maintained a library for touch and mouse abstraction, a foundational piece of code that I could leverage for future projects.

The library in question is one that I already talked about the Touch, and the interface is straight forward:

// Init Touch with HTMLDivElement
let touch  = new Touch(carouselOuter);

// bind logic to event
touch.onForce(({delta:{x, y}}) => {
  carouselByX(carouselOuter, x);
  carouselByY(carouselOuter, y);
});

Building the Perfect Carousel

Armed with my existing library, I set out to build the ultimate carousel component. It was a breeze with the hardest part of the work already done and tested, I was able to focus on refining the user experience and ensuring seamless functionality across all devices.

The Payoff

In just a few hours, I had a carousel component that not only met my requirements but exceeded them. It seamlessly transitioned between images, gracefully handled both mouse and touch inputs, and added a touch of polish to my website that wasn't there before.

The usage is and it just work:

// Init carousel by calling function
// pass the querySelector string
// I used <y class='carousel'>
initCarousel('.carousel') 

<div class="carousel overflow-hidden some-style">
  <div class="carousel-inner more-style">
    <div class="item-style">
       Example element
    </div>
  </div>
</div>

Conclusion

When it comes to software development, always strive to invest in compounded interest rather than accruing technical debt. Sure, it may require more upfront effort, but the dividends it pays in the long run are well worth it.

Feel free to checkout GitHub: https://github.com/slobacartoonac/js_lib/blob/main/fe/carousel/index.js