I Developed and Published My First Desktop Chrome Extension in Less Than a Day

TLDR: I published my first Chrome Extension in Chrome Web Store! It’s a free download!

I have been watching web tutorials and Youtube videos on 1.5x-2x speed to save tons of time. It’s frustrating that the same speed controls aren’t available on Facebook videos.

So I created one that suits my needs.

It’s a small app that allows you to slow down or speed up videos on Facebook. For a tiny app, I sure learned a lot!

Continue reading

Improve Your React Code with Strategy Design Pattern

The Strategy Design Pattern has been used by most seasoned object-oriented programmers for decades. It is one of the 23 “Gang of Four” design patterns.

But for most of us who are mere mortals, we have been using if-else and switch statements in our code, where the strategy pattern should be more appropriate.

I won’t even try to detail what the advantages of the Strategy Design Pattern are. There are many discussions out there that are just a Google search away. But allow me a simple demonstration.

The Obvious Way: If-Else and Switch

Say you wanted to build a React component which renders another component according to the state (either local or application state, but we’ll deal with local state in this sample).

If you were to implement it via if-else statements, the component may look something like this:

You may improve your renderComponent method with a switch statement like so:

Both techniques are well and good. But imagine a usage case when you may want to use ShowComponent to render one of a hundred possible components at any given time. You will end up with a hundred ifs or a hundred cases in your component. Well, you may argue that you can pull out the method into its own module and import it into your ShowComponent.

But let me propose another solution: let’s harness the power of the Strategy Design Pattern.

Continue reading