Sign in

Web developer who loves to code and help others code :)

The Complete Guide to this medium channel.

Hello, My name is Ayush! 🙏🏻

I am a passionate Software Developer, natively from India 🇮🇳, with a strong interest and expertise in Front-end Technologies. I have 6+ years of hands-on experience in developing Web and Mobile Applications.

I read a lot about web development. I always thought of maintaining a channel related to this field and this pandemic has given me chance to explore my blogging skills.

In this medium channel, I have covered topics from basic to advanced levels. In addition, it will surely help you with your interview preparation for all experience levels. Medium doesn’t provide a…


Prototypal Inheritance, Constructor function, Prototype Chain, ES6 Classes, Object.create() and Inheritance between “Classes”.

Photo by Markus Spiske on Unsplash

What Is Object-Oriented Programming?

Object-Oriented Programming(OOP) is a programming paradigm based on the concept of objects. And paradigm simply means the style of the code,
how we write and organize code.

We use objects to model (describe) aspects of the real world, like a user or a to-do list item, or even more abstract features like an HTML component or some kind of data structure.

Objects may contain data (properties) and also code (methods). By using objects, we pack all the data and the corresponding behavior into one big block.

In OOP objects are self-contained pieces/blocks of code like small applications on their own…


Call Stack, Web APIs, Event Queue, Micro-tasks, and Macro-tasks

The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, gives us the illusion of multi-threading. The asynchronous behavior is not part of the JavaScript language itself, rather it is built on top of the core JavaScript language in the browser (or the programming environment) and accessed through the browser APIs.

Browser JavaScript execution flow, as well as in Node.js, is based on an event loop. The event loop concept is very simple. …


Data types in JavaScript can be divided into two main categories— primitive data types and reference data types.

Primitive data types: The value assigned to the variable of primitive data type is tightly coupled. That means, whenever you create a copy of a variable of primitive data type, the value is copied to a new memory location to which the new variable is pointing to. When you make a copy, it will be a real copy.

Reference data types: Whereas, for reference data type it stores the address of the memory location where the object is stored. …


Lexical scoping, Scope Chain, Advantages, and Disadvantages

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical scoping

Consider the following example code:

function outer() {
var a = 5;
function inner(){
console.log(a);
}
inner();
}
outer(); //5

Here, outer() creates a local variable called aand a function called inner().The inner() function is an inner function that is defined inside outer() and is available only within…


Overview, JSON data, Error handling, HTTP interception, Response Timeout, Simultaneous Requests, Download progress, Upload progress, Browser support

Overview

Fetch — The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

Fetch() is part of a JavaScript window-object method within the Fetch API. It is built-in, so users don’t have to install it. Fetch() allows us to get data from the API asynchronously without installing any additional libraries.

The fetch() method takes one mandatory argument—the path to the resource you want to fetch—and returns a Promise that resolves…


GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, and TRACE

GET

  • GET requests are the most common and widely used methods in APIs and websites. Simply put, the GET method is used to retrieve data from a server at the specified resource. For example, say you have an API with a /users endpoint. Making a GET request to that endpoint should return a list of all available users.
  • Since a GET request is only requesting data and not modifying any resources, it’s considered a safe and idempotent method.


Dumb Component, Smart Component, Pure Component, Higher-Order Component, Controlled & Uncontrolled Component

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier.

“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.”

Four components

Here we can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.

Now let's study the different types of components…


Pagination, Infinite scrolling, Load more, react-virtualized, and react-window

Pagination, Infinite scrolling, and Load more

Web applications are continuously getting bigger and content to show on a single screen keeps on growing with time. Now the problem which arises here is rendering such large amounts of data.

Lists are an integral part of most web applications because they help display data in a more presentable format. But when an app tries to handle too much data in a list, it often leads to performance problems. There are many ways to resolve list-related performance issues such as Pagination, Infinite scrolling, Load more buttons, react-virtualized, and react-window.

Pagination

Pagination is a technique where online content is divided across…


Differences, similarities, and tips for choosing

From startups to established enterprises — every business prefers to build robust and reliable web-based applications while using a fully-loaded, feature-rich framework as fast as possible.

And, if you are using Javascript to build an application, Angular and React remain the most popular frameworks of all time. From user experience & performance to cost and compatibility; there are several parameters where React and Angular emerge as smarter alternatives for your front-end development projects. These two frameworks come from a lineage of two powerful competitors — Google and Facebook.

Let’s take a closer look to learn their differences and similarities:

Brief Overview

What…

Ayush Verma

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