Technical learnings from the first quarter of work on watchlimits

You can still use side projects to grow as an engineer without sacrificing the business success of your product.

There are no guarantees that the business will succeed, but I believe that regardless of the business outcome you should try to end up smarter than when you started.

This post is a retrospective of my technical learnings from my first 3 months of working on watchlimits.com (chrome extension to limit excessive video watching). I will separately release a post on my business/marketing learnings as well.

Majority of my professional experience (last 6+ years) is with high performance, distributed storage systems written in C++, reliability and devops. I have some full-stack experience from before then, so I’m not completely new to it, but working on side projects for sure helps me to maintain and develop an engineering skillset relevant to building a wider array of customer facing products.

So here are some things that watchlimits helped me learn/improve at during the first 3 months:

• Chrome extension development
• Frontend tooling and practices
• Design and UX
• Mastering ReactJS

Chrome extension development

Before working on watchlimits I had very little knowledge about developing chrome extensions.

And instead of working on something simple I went for a full blown app. I had to learn fast! Chrome documentation was my main source of info, but the documentation is a bit scarce.

watchlimits consists of 4 basic parts:

• popup (React App)
• content script (Injected React App)
• settings page (React App)
• background script (just JS app)

I set it up building with webpack with the output files being configure in the manifest file. I set up everything from scratch, before I bought a Chrome Extension Kit. The kit contains code examples of multiple simple apps and an ebook with tips.

Overall the Chrome Extension Kit was good but I bought it too late in the process. I have already figured out most of the things beforehand. I plan to use boilerplate samples for my new projects.

Even though the kit provided a bunch of technical solutions, I still had some important problems left to solve by myself.

The most complex parts I had to develop were around:

• storing data & communication between different parts of the extension
• updating the extension that runs live scripts (if the background script gets reloaded the old injected content scripts lose connectivity to the background script which was causing issues)
• keeping the background script alive with manifest v3 (much harder than it should be)

Frontend tooling - Storybook

My biggest discovery in the frontend tooling was storybook. I heard about it before, but I wasn’t sure how much work would it be to set it up. It turned ou to be very simple and the payoff was amazing.

Storybook stories provide a great way to develop complex presentation components in isolation.

This makes UI development much easier and it can also provide a great alternative to headless integration testing.

Design / UX

I continue to find design to be quite fascinating. I think I am good with basics at this point (contrast, color, spacing, visual hierarchy, etc). But I still have a lot too learn!

Some highlights from this period were:

• design systems and design tokens
• learning more about common UX patterns like using a modal vs a sub page, where to put buttons on forms or whether or not to use tooltips

I have also found this amazing blog by Adam Silver, full of incredible value articles on UI best practices.

Some of my favorite articles:

• https://adamsilver.io/blog/the-problem-with-tooltips-and-what-to-do-instead/
• https://adamsilver.io/blog/where-to-put-buttons-on-forms/

More ReactJS

Watchlimits is composed of 3 React Apps!

One of the interesting challenges that I have encountered was mixing useState and periodic closures.

I also made my first NPM package for MUI components integrated with formik, so I can share it between my projects.

The main external libraries I’ve been using were:

• MUI (UI components)
• nivo (graphs and charts)
• formik (easier form handling)
• react router v6

And I had to learn the newer version of the react-router as it was quite different from the previous one.

Overall, I have been keeping things simple and almost all of my components have been using functional components and react hooks.

Conclusion

Every project gives us opportunities to learn. Working on indie products we need to balance learning engineering skills with creating value for the customers, but I believe we can do both without too much sacrifice.

What have you been learning with your projects? If you liked this article you can follow me on twitter!