refactoring code
refactoring code

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.

Wrong reasons for refactoring 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…

Let’s walk through a technique for communicating between your components with React and RxJS

People on smartphones
People on smartphones
Photo by Leon on Unsplash

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.

RxJS for State Management

conditional props
conditional props

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.

One or the other

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…

JavaScript is by far the most fast-paced ecosystem in the world of software development. Things are constantly changing, and the tools that were hot yesterday are on their way out today. That’s doubly true for React libraries. While it can get tiresome, you have to keep up with the changes to keep your skills relevant and productivity high.

So let’s cover the alternatives to the most popular React libraries that are in a lot of ways a better choice.

moment VS date-fns

Let’s start with a heavyweight of the JavaScript world. …

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.

What is the Compound Component pattern?

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 thegit 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.

What is git bisect?

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.

Avoid passing props with the spread operator

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: {...props}.

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.

VSCode allows you to build…

Iterators and generators are (somewhat) new JavaScript features introduced with ES6. When I first encountered iterators and generators, I was excited to add them to my tools arsenal. I even wrote an article about Iterators and generators, which you can check out here.

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. …

Iskander Samatov

Software developer. Forever a student. Checkout my blog:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store