Sign in

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

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 had the 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 mainly covered the topics that every FrontEnd Developer must know. Moreover, it will surely help you in your interview preparation for all experience levels…

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

Closures: Scope Chain, Uses, 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.

function x() {
var a = 5;
function y(){
x(); //5

Here, y() is bundled together with its lexical environment of x(). First, y() will check its local scope; if it does not find “a”, it will go to the lexical parent. So inside…

Web developer Interview Cheat Sheet

What is System Design?

System Design is the process of designing the elements of a system such as the architecture, modules and components, the different interfaces of those components and the data that goes through that system.

The purpose of the System Design process is to provide sufficient detailed data and information about the system and its system elements to enable the implementation consistent with architectural entities as defined in models and views of the system architecture.

Elements of a System

  • Architecture — This is the conceptual model that defines the structure, behaviour, and more views of a system. …

Mounting, Update, Unmounting, and Error Handling stage methods

What are React lifecycle methods?

You can think of React lifecycle methods as the series of events that happen from the birth of a React component to its death.

Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.

  • Mounting — Birth of your component. This is the stage where the Component is inserted into the DOM.
  • Update — Growth of your component. This is the stage in which the Component’s state and props can change, leading to the process of re-rendering the Component with the updated state/props
  • Unmount…

Fighting Wasteful DOM Manipulation, Reconciliation and The Diffing Algorithm

Real DOM

First things first, DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application. Every time there is a change in the state of your application UI, the DOM gets updated to represent that change. Now the catch is frequently manipulating the DOM affects performance, making it slow.

What makes DOM manipulation slow?

The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the change, the updated element and its children have to be re-rendered to update the application UI. The re-rendering or re-painting of the…

The call, apply and bind methods—An explanation with practical applications and polyfill for the bind method.

We’ll talk about the call, apply, and bind methods of the function prototype chain. They are some of the most important and often-used concepts in JavaScript and are very closely related to the this keyword.

Call method

The call() method calls a function with a given this value and arguments provided individually.[thisArg[, arg1, arg2, ...argN]])

thisArg — This is optional. It’s the value to use as this when calling func.
arg1, arg2, ...argN
— Optional arguments for the function.

Return value: The result of calling the function with the specified this value and arguments.


  • Using a call method we can do…

Website Threats - Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and SQL Injection

Web security is a topic that is often overlooked by Frontend developers. When we assess the quality of the website, we often look at metrics like Performance, SEO-friendliness, and Accessibility, while the website’s capacity to withstand malicious attacks often falls under the radar.

And even though the sensitive user data is stored server-side and significant measures must be taken by backend developers to protect the servers, in the end, the responsibility for securing that data is shared between both Backend and Frontend. While sensitive data may be safely locked in a backend warehouse, the frontend holds the keys to its…

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