This is the most important list of the shortcuts every developer should learn asap. I wish I knew them when I started my career as a developer so i could save my time on manual typing.

1. Alt + Up or Alt + Down: Move line

Pretty easy. Move line up and down.

For mac use Opt+Down or Opt+Up

2. Ctrl + Shift + I: Formats the entire file

You can format the whole active file or ask you to download a Formatter extension. I love to use Prettier extension to format JS code

For mac use Shift + Option + F

For Windows use Shift + Alt+ F

3. Ctrl+/ : Toggle line comment

You can easily toggle between comment and uncomment line behavior.


When I want to visualize data on a web app, my preferred environment is using D3.js in a React application. But these two technologies are quite hard to combine. The reason is that they both want to handle the DOM.

Let’s start it!

Creating SVG elements

When we want to visualize data in the browser, we will most probably want to work with SVG elements because they are very expressive and are absolutely positioned.

To begin, we shall render a simple <svg> element.

Managing state in React with Redux can be extremely difficult. We have to deal with the heavy amount of boilerplate which can be a headache for the developers. The creator of Redux Dan Abramov describes the annoyance better than I:

Photo by Caspar Camille Rubin on Unsplash

React has been around since 2013. Building web applications with React has become difficult for developers that are coming from other frameworks or programming languages. For example if you have worked with Angular you could say that you have all the necessary features at your disposal.

React only helps us to develop Component driven UI with functional Components and props. React has some pre defined solutions like React Hooks for local state management and side effects. In the end we are dealing with Components in React.

In this article I am going to discuss complementary libraries that can help you…

In this article we are going to discuss how to do performance optimization of a React app. We usually do this by using pagination or visualization in our app, but the question is if we have an app in which we want to render a lot of Components and we don’t want to compromise on the performance and UX of it?

For the purpose of demonstration I am considering an app which will render 30000 squares on the screen and I will utilize React 17.0 and functional Components with hooks. Our app has two Components: <App /> and <Square />.

Hello friends! I have created a massive list of frequently asked Javascript Interview Questions from this great repo. I would like to thank Mr. Sudheer Jonna for creating lots of incredible interview questions repo.

So let’s start !

Q1.What is a prototype chain?


The method to create new objects on basis of the existing objects is called prototype chain

Q2.What is a first class function?


A programming language is called to have First-class functions when functions in that language are used like any other variable. e.g, …

Hello friends! I have created a massive list of frequently asked Javascript Interview Questions from this great repo. I would like to thank Mr. Sudheer Jonna for creating lots of incredible interview questions repo.

So let’s start !

Q1.What are lambda or arrow functions?


An arrow function expression is a compact substitute to a traditional function expression, but is limited and can’t be used in all situations.

Differences & Limitations:

  • Does not have its own bindings to this or super, and should not be used as methods.
  • Does not have arguments, or keywords.
  • Not suitable for call, apply and bind methods, which generally rely on…

TypeScript is getting popular day by day. Hence , it is the best time to begin using it if you haven’t already. Chances are, our project has been developed for quite a long time. If that’s the case, the great approach might be to use TypeScript to the codebase gradually. We could encounter a case where we would like to use React components code in JavaScript within our TypeScript code.

In this article, we take a deep dive into how to make TypeScript declaration files that let us to do that. …

Web developers spend much of their time using browser DevTools but it’s simple to miss useful tools and techniques when many updates are added every year. The following features are essentially for JavaScript coders using Chrome-based browsers but all developers will get something useful out of this.

1. Use incognito mode

Incognito or private mode utilizes a separate user profile and does not keep data such as cookies, localStorage, or cached files between browser restarts. Every session begins in a clean state so it can be ideal for Progressive Web Apps (PWA), testing login systems and first-load performance. …

Numerous programming languages have one “non-value” called null. It tells that a variable doesn’t currently point to an object — e.g, when it hasn’t been initialized yet.

On the other hand, JavaScript has 2 such non-values: null and undefined. In this article, we are going to examine how they vary and how to best use or avoid them.

1. null vs undefined

Both values are quite similar and frequently used interchangeably. How they vary is therefore precise.

1.a The ECMAScript language specification on null vs. undefined

The ECMAScript language specification describes them as follows:

  1. undefined is “used when a variable has not been assigned a value” (source).
  2. null “represents the intentional absence of…

Imran Farooq

i am front end developer and React Geek

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