Sign in

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

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

Photo by on

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…


Web Storage APIs are used by developers to store data into the browser to improve the user experience and performance of the web apps. The data here refers to the key-value pair of strings. Now storing this data can be done by two mechanisms: either by using the sessionStorage API and the localStorage API.

Session storage

  • The data is stored in the browser’s memory for that specific session. The session here means until we close the browser window or tab.
  • The storage limit of session storage is very high when compared to cookies. The cookies which can generally store around 4000 bytes…


Call Stack, Web APIs, Event Queue, Micro-tasks, 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. …


Make your content discoverable in Google search

JavaScript SEO is part of technical SEO (Search Engine Optimisation) that seeks to make JavaScript-heavy websites easy to crawl and index, as well as search-friendly. If you’re building a website or web app using JavaScript, you should take a few basic steps to make sure your content is discoverable by search engines.

Let’s look at a few SEO techniques to help users find your content.

1) Describe your page with unique titles and snippets

Unique, descriptive titles and helpful meta descriptions in the head section help users to quickly identify the best result for their goal.


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


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.

func.call([thisArg[, arg1, arg2, ...argN]])

Parameters:
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.

Description

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


Interview Q/A with explanations — Strings, Numbers, Boolean, Objects, Arrays, setTimeout, “this” keyword.

Question 1:

var num = 8;
var num = 10;
console.log(num);

Answer — 10
Explanation — With the var keyword, you can declare multiple variables with the same name. The variable will then hold the latest value. You cannot do this with let or const since they're block-scoped.

Question 2:

function sayHi() {
console.log(name);
console.log(age);
var name = 'Ayush';
let age = 28;
}

sayHi();

Answer — undefined and ReferenceError Explanation — Within the function, we first declare the name variable with the var keyword. This means that the variable gets hoisted (memory space is set up during the creation phase) with the default…


Techniques to speed up your React App

How is the UI rendered in React?

In React, your UI is rendered by updating something called DOM (Document Object Model). In basic layman terms, DOM resembles a tree-like structure of objects and nodes.

In React, however, HTML is not the root node of a DOM. In fact, it is only one single node from Javascript’s prototype chain so that it gets the functions to calculate styles, properties or manipulate the individual nodes.

In simpler terms, DOM in React is a standard that defines how you get, update or manipulate HTML elements.

The React DOM knows how to render a page but it is not so intelligent…


Simple and Preflight Requests, Handling CORS Error

Cross-Origin Resource Sharing (CORS) is a protocol that enables scripts running on a browser client to interact with resources from a different origin. This is useful because thanks to the followed by XMLHttpRequest and fetch, JavaScript can only make calls to URLs that live on the same origin as the location where the script is running.

For example, if a JavaScript app wishes to make an AJAX call to an API running on a different port, it would be blocked from doing so thanks to the same-origin policy. CORS error in the console will look like this:

CORS — Why Is It Needed?

Most…

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