If you are a frontend developer, you may be familiar with WebPack as a bundler for your project. Most developers and teams use WebPack as their primary JavaScript bundler. I used WebPack in most of my projects too. However, once I came across Parcel, I took the liberty of testing it out.

In this article, I will share my experience of using Parcel and compare it with WebPack.

Before we dive in, let me give a small spoiler about why Parcel was attractive to me.

Parcel requires zero configurations to get it up and running as opposed to other bundlers…

A Monorepo is a single repository where you store all the code that belongs to a project. For example, a Monorepo will include the website code and mobile app code in one place. However, it differs from a monolithic application as the modules are placed with clear boundaries within the repository.

And, for anyone starting with Monorepos, proper tooling is the key to avoid known pitfalls. So let’s take a look at some of these tools to find the best for your use case.

1. Bit

WebSockets are used for real-time communication between the browser and a server. These communications are bi-directional. Therefore it fits low latency applications such as chat, real-time multiplayer gaming, in-app notifications.

If you are new to WebSockets, I suggest you look at the below article I’ve written to understand better how it works.

However, in this article, I will be looking at 4 key patterns when using WebSockets in practice.

• Sending messages directly.
• Triggers only.
• Single publisher and multiple subscribers.
• Multiple publishers and subscribers.

1. Sending Messages Directly

When a WebSocket connection is open between a client and a server, it is considered a full-duplex…

There are many types of software testing. Among these, one of the unique types of testing methods is Snapshot testing.

Snapshot tests assert that the current output is same as the output before.

The main difference between snapshot testing and functional/unit tests is, snapshot tests never assert the correct behavior of the application functionality but does an output comparison instead.

There are two types of tools that support frontend snapshot testing.

Tools that take snapshots of serializable data

Jest is a tool that has built-in support for snapshot testing. Testing React components are highly supported through this. Further, Cypress supports snapshot testing via plugins (@cypress/snapshot)

Tools that take visual snapshots

Intern (via…

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes.

Using Tailwind CSS, you can style your applications without a single custom class name or a stylesheet.

Furthermore, I found that it works exceptionally well with mobile applications based on React Native.

So, in this article, I’m going to discuss why Tailwind CSS is the best solution for React Native applications.

1. Customized Packages for Better Integration

There are many Tailwind packages designed explicitly for React Native. …

Proper state management is vital for any React application. And still, Redux is dominating this space.

However, if you use Redux alone, you will feel a gap when using it for asynchronous operations.

And that’s where the Redux middleware comes into play. In this article, I will explore these middleware options in detail to understand their capabilities.

Async Operations in Redux

As you all know, state changes in the Redux store are performed by triggering the actions provided by the store.

The middleware that we use will intercept the action. It can also delay the actions if necessary, supporting asynchronous operations. And, once the…

Using <script> tags to load JavaScript files is pretty straightforward for any developer. But have you ever wondered what happens if any of these scripts are tempered before loading into the browser?

The answer is obvious. It could lead to a severe security breach exposing sensitive data.

Therefore, we need to have safety measures to verify the integrity of these scripts to prevent it from happening. And one of the most popular solutions is Sub Resource Integrity (SRI) in modern browsers.

What is Sub Resource Integrity (SRI)?

SRI is a security feature that allows browsers to check the resources they fetch. …

React has re-defined the way we build user interfaces. Since its first release in 2013 by Facebook, it has grown rapidly over the past 7 years. According to NPM trends, out of the topmost JavaScript front-end libraries and frameworks, React has managed to secure first place for many many years.

If you have been writing your front-end applications in React for a while, ask yourself this question:

Have I been writing clean React components in a readable and performant manner?

I believe that best practices to write a component may vary based on the application requirement. There are no clear-cut…