As a software developer, you learn the importance of refactoring code early on. You often hear that refactoring helps reduce your code’s complexity and increase usability.
While it’s obvious that refactoring is crucial, the end goal can be ambiguous. That’s why you need to have a clear strategy when refactoring your code.
First, let’s cover the wrong reasons to refactor.
Starting out as a software developer, I thought that refactoring mainly came down to keeping my functions and classes small.
I believed that’s all it took to make them more reusable. But that’s not the case. That’s called decomposition for…
In this post, let’s go over a simple technique for communicating between your components with React and RxJS.
Redux is the go-to library for handling state management for a lot of people. And while it’s a powerful tool, Redux should not be used as a swiss knife that solves all state management issues.
Oftentimes a leaner approach is preferred. For example, you could share the state using a simple observer pattern with RxJS. Communicating between your components this way has several notable advantages over Redux and Context API. I will list all of them at the end of the post.
Using TypeScript and conditional props, you can build an API for your React components that is clear and explicit about its prop requirements. Doing so will help your team and will set you apart as a rock-star developer.
We will start with a simple use case, and we will finish up with a more advanced one that involves generics.
This tutorial assumes you have a basic knowledge of TypeScript and types.
Imagine you have a component where you have two conflicting properties. You want the client to provide either one property or the other, but not both.
For our example…
So let’s cover the alternatives to the most popular React libraries that are in a lot of ways a better choice.
In this post, let’s take a look at a popular React pattern — Compound Component. This pattern allows writing complex components in a clean and declarative way. It proved to be so useful that almost all of the popular React UI libraries, such as Material UI, Semantic UI, Chakra UI, and many others, ended up adopting it.
This post will include the older way of building compound components and the newer version that uses hooks and Context API.
I’ll be writing components using the Emotion styling library and TypeScript.
As mentioned before, the Compound components pattern allows writing a declarative…
Have you ever been reported a regression bug that you suspect was introduced many commits ago?
If you think it’s going to be a long and painful exercise finding the culprit, don’t roll your eyes just yet. You can use the
git bisect command to find the offending commit much faster.
In this tutorial, we will go over the basics of
git bisect with a hands-on exercise.
In a nutshell,
git bisect is a command-line tool for analyzing the commit history and finding bad commits. Git bisect uses the binary search algorithm under the hood. …
In this post, let’s go over some simple tips that will help you write cleaner React components and scale your project better.
First, let’s start with an antipattern that you should avoid. Unless there’s a specific and justified reason to do it, you should avoid passing props down the component tree using a spread operator, like so:
Passing props this way indeed makes writing components faster. However, it also makes it very hard to pin down the bugs in your code. …
When building an MVP, you should be aware of the end goal behind it. According to Eric Ries, the author of the book “The Lean Startup”: “The goal of the MVP is to begin the learning process.” An MVP should be no more than the first step in validating your idea. Its foremost use is to start the Build-Measure-Learn feedback loop.
So in this post, I’ll go over the time-killers people often face when building an MVP and how you can avoid them and start your learning process much faster. …
In this post, you will learn how to create a customized VSCode extension using React.
Creating a VSCode extension is a fun exercise. The entry barrier for submitting it to the marketplace is surprisingly low, and the process of submission is smooth. Plus it’s a great way to give back to the developer community.
As a side note: recently I created a VSCode extension using React called Sheepy. It’s an interactive guide for learning Functional Programming using Ramda.JS. If you’re like me, struggling to use functional programming consistently in your code, you’ll find it useful.
However, working as a front-end developer on multiple projects in recent years, I’m yet to encounter one where iterators or generators are used actively. The counterpoint to that statement might be redux-saga, where generators are the main building block. …