How this drawing changed me as a developer

#javascript #chrome #angular #react

Today I want to share with you how this small drawing became a functional chrome extension and how it changed me as a developer. One day while browsing the internet I noticed that I completely lost track of time. I thought it would be a great idea if I could track how much time I wasted surfing the web. To solve this problem I decided to make what eventually became the Internet Junkie chrome extension.

Follow me on Instagram to see what I’m up to now.👀

How it started

I started with jQuery. I wish I could use React or other popular frameworks but I had to work with what I knew at that time to make it happen. I was motivated to learn other libraries and frameworks but had no project to apply them to. I’m the type of learner who always tries to get the value out of what I do. Whenever I set out to learn something, I like to apply it to a real-world problem I’m encountering. I don’t like to learn things simply because “everyone” thinks it’s great to know — I want to learn by figuring out the best approach that can help me to solve the problem.

At a certain point, the jQuery became messy, and I started thinking about switching to AngualrJS. The conversion was challenging, but more importantly, it introduced me to a scaling problem. Now I had way too much more code to work with. I had unnecessary logic in angular controllers, my code was repetitive, and it felt unorganized.

So I decided to clean it up a bit.

Small steps

I separated Internet Junkie in different features and put everything related to that feature in the same folder.

For app logic, I have everything in background.js (in background folder) that I converted into a module that I’m planning to split in smaller modules in the future. Browserfy helped me to bundle everything and I added Jest for testing.

Learning to test — my “Aha!” moment

Before tackling this project, I was always afraid of testing and I couldn’t see the value in it. “Why would I write the code twice”, I thought. Now I know why it didn’t make sense to me. I couldn’t see the values because many of my early projects were small and short-lived.

While working on Internet Junkie day after day I noticed I was becoming afraid of making changes to parts of the project simply because they were already working. That fear I had, because I didn’t trust my code anymore! This is when it became clear why testing is a “must”! After writing and covering 70% of my code with tests, the fear of code refactoring disappeared. I became more confident and could focus on new features.

How this project changed me

I’m no more the same developer I was before. Now, when starting a project I try to keep these important learnings in mind:

Early decisions can have both positive and negative effects down the road. Think carefully about what languages and frameworks you decide to use. What is the problem you are trying to solve and are you using the right tools?
Write reusable code. If possible, break up your code into smaller features and reuse the common pieces to keep code DRY(Don’t repeat yourself) and readable.
Test! Writing tests will not only help you better understand your code, but will also give you the confidence to make changes without worrying about accidentally introducing bugs.
Don’t be afraid to make mistakes! I use this quote as my guide to coding “Move fast and break things.”. The idea is that if you never break anything, you’re probably not moving fast enough.
Find someone to give you feedback. Even if you have 5–10 users that can motivate you to make the best app just for them!

What Internet Junkie taught me

The biggest takeaway for me was the importance of planning. When building something new with a code you often get stuck. Sometimes so much that it’s easy to get discouraged. I realized that I was getting stuck because my tasks were too big to get started on them. I learned to spend more time on planning and breaking things up into smaller parts. This approach helped me many times while working on Internet Junkie, and without it, I never would have finished it.

Finally, I learned how important it is to find the reason behind why I’m doing the project. For me, without a goal, I lose motivation, and without motivation, it’s no more fun. Who likes to work on something they don’t like? Sometimes you have to but better when you have a choice. I am motivated by making something that helps or saves time for people.

When I figured this out everything cleared up in my head and I knew what I have to do next.

How it looks today

I released a stable working version but there is much more to come.

I think everyone has their own way of learning and this is mine. I hope this inspires someone who is stuck or about to start a project.

Thanks for reading! If you enjoyed it, please share, comment and follow me for more. 👏

Internet Junkie, your best internet time tracker. Track how much time you spend on the browser and analyze how productive you are online. Internet Junkie shows statistics on your top 10 visited websites for a full week!