The Inspect Element tool is a simple yet powerful built-in feature that comes with Chrome Developer Tools. It’s handy because we can modify a web page’s look or do CSS editing live on the browser.

But, do you know there are way more features in Elements Tab that support debugging? In this article, I’ll walk through some of these features that will make a difference in boosting your productivity.

Quick Look at Inspect Element

I’m sure most of you are familiar with these steps in inspecting elements. However, I’ve listed these steps and highlighted the important areas, which we will explore further.

  • Open the site…

NPM is the world’s largest package manager, and using it in practice is relatively straightforward. However, when adding custom configurations or using its advanced features, many things could go wrong.

So, in this article, I will discuss seven common mistakes you should avoid when using NPM.

1. Manually adding dependencies to package.json

You should avoid updating the package.json manually since it could break the synchronization between package.json and package-lock.json.

Instead, you can use CLI commands like npm i --save and npm i --save-dev to update package.json and package-lock.json automatically. This will also alert you if there are any version mismatches in those 2 files.

However, using…

Developer Experience (DX) is the feeling we get as programmers while developing applications. It could be both positive or negative.

However, over the years, new tools, techniques, and processes helped uplifting DX in many ways.

So, in this article, I will be focusing on frontend DX to understand how it evolved. And in the end, you will have a better understanding of the tools and techniques we should use in modern web apps.

Everyone Moved to SPA

Over the years, SPA’s have become the widely used pattern for web application development. …

JavaScript is a single-threaded programming language which means only a single process can happen at a time.

Normally in a single-threaded language, there is nothing to worry about concurrency issues since it simplifies coding. But at the same time, without blocking the main thread, you can’t perform long operations like network access.

Let me explain this through a real-world scenario.

Assume requesting an API for some data. The server can take some time to process the request while blocking the main thread, which causes the web page to become unresponsive. That’s where asynchronous JavaScript comes into the picture.

You can…

React Hooks are a function type that allows you to hook into React state and lifecycle features. This was introduced with React 16.8 update and has become a must-needed part of any React application since then.

So, in this article, I will discuss different React Hooks types and the best practices you need to follow when you work with React hooks.

What are React Hooks?

With the new addition of hooks( along with React 16.8), functional components could maintain states and lifecycle features without using classes. Simply hooks are features that allow you to “hook into” React state and lifecycle features from function components.

Understanding user behavior is crucial for a better user experience. In the mobile world, there are many analytic tools to do that.

So in this article, I will cover some of the best analytics tools out there for React Native to help you pick the right one for your mobile app.

App Center Analytics — For Mobile apps diagnostics and tracking

Even if you are the only developer on a project, maintaining a consistent code style becomes more difficult as time goes on. That is why we need a style guide.

Style guides are written so that new developers may quickly become comfortable with a code base and then generate code that other developers can understand.

What is the Airbnb Style Guide, exactly?

The Airbnb style guide is a set of best practices and guidelines for generating quality code. It is one of the most popular style guides available on Github.

I’m sure you’ve heard about the Airbnb React/JSX Style Guide, but do you use your own configuration…

Today, using CI/CD tools is a must for web application development. As a part of the critical development path, speeding up our build system is vital to improve developer productivity.

So, In this article will take you through four different strategies to optimize the front-end build time with CI/CD.

1. Using Parallel Web Packs

Parallel-Webpack allows you to run your application builds in parallel, helping to reduce build times significantly.

You can get started using Parallel-Webpack easily with NPM using the following command:

npm install parallel-webpack — save-dev

To get a better understanding of Parallel-Webpack configuration, let’s go through this simple example.

var path =…

Web Workers are a method of instructing the browser to run large, time-consuming tasks in the background. Its ability to spawn new threads allows you to prioritize work and address the blocking behavior in single-threaded languages like JavaScript.

But do we really need multi-threaded JavaScript? To answer that, let’s understand where single-threaded JavaScript hit its limits.

Limitation with Single-Threaded JavaScript

Modern web applications demand more from the browsers. Some of these tasks are long-running that can cause the user interface to freeze for few seconds. By all means, it’s bad for the end-user experience.

To give you a better understanding, I have created a…

Photo by Leisy Vidal on Unsplash

Traditional methods for data storage consist of proprietary software and hardware. But on the other hand, SDS utilizes standard servers to manage storage requests.

Software-defined storage has evolved over the past decade from a specialized technology used by large internet enterprises to a commonly accepted storage approach for an increasing number of applications. Let’s find out what does software-defined storage means?

What Is Software-Defined Storage?

SDS is a software controller that controls your physical storage by virtualizing it. It is a methodology of abstract storage management from the physical devices, which helps the professionals to have better control over the storage features.

Core Features

centrally pooled…

Bhagya Vithana

Software Engineer| Technical Writer| University of Moratuwa| Faculty of Information Technology

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