Pixel-in-Gene

TypeScript offers a powerful type-checking facility for JavaScript and a must-have tool for Front-end projects. If you are starting out, it may feel like introducing unnecessary overhead, but its usefulness is felt once you have built up a decent codebase. The additional work you…

Transitioning a blog from an older toolchain to something new is always a bit challenging and also exciting. Of course, the excitement is a big driver for trying the new platform. It also gives an opportunity to re-think the blog with a fresh approach. My blog was already dormant…

The React framework has been used by a wide variety of teams and several folks have written about their own experiences using React. This post compiles a list of the various design patterns that have been observed while building React Components. React itself allows you to…

The previous two parts ( Part 1 , Part 2 ) focused on the fundamental building blocks of MobX. With those blocks in hand we can now start solving some real-world scenarios through the lens of MobX. This post is going to be a series of examples that applies the concepts we have…

In the previous part we looked at how you can setup a MobX state tree and make it observable. With that in place, the next step is to start reacting to changes. Frankly this is where the fun begins! Part 1 - Shaping the observables Part 2 - Reacting to changes Part 3 - A…

MobX provides a simple and powerful approach to managing client side state. It uses a technique called T ransparent F unctional R eactive P rogramming (TFRP) wherein it automatically computes a derived value if any of the dependent values change. This is done by setting up…

Unit Testing is one of those aspects of a UI project that is often ignored. Not because nobody wants to do it, just that the cost of setup and maintenance can be taxing for a small team. Even on a large team, it can be ignored during those looming deadlines. Testing takes far…

Higher Order Components ( HOC ) are a direct translation of Higher Order Functions from functional languages. A HOC extends the state / behavior of the inner component in a composable way, so you can add many more extensions without the knowledge of the inner component…

If you are only using Browserify or only Webpack in your project, you don’t have to worry about consuming external bundles. Either of them will take care of it for you. However if you are in a situation like mine where you have legacy code in the application, bundled by…

Over the past few months I’ve spent a lot of time building video courses. It’s actually quite a long process given my client commitments but the end results are rewarding. There is a lot of research required to understand and explain concepts in the best possible way. This means…