The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. …


PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe.

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

Progressive Web Apps are a useful design pattern, though they aren’t a formalized standard. PWA can be thought of as similar to AJAX or other similar patterns that encompass a set of application attributes, including the use of specific web technologies and techniques.

In order to call a Web App a PWA, technically speaking it should…


Proxy describes someone or something acting on behalf of someone else. In the computer realm, we are talking about one server acting on the behalf of another computer.

Proxy

If we have clients (>= 1), an intermediate web server(in this case, we call it proxy), and a server. The main thing that happens in this is that the server doesn’t know which client is requesting.

In this, let client1 & client2 send requests request1 & request2 to the server through the Proxy server. …


A function is a subprogram designed to perform a particular task. Functions are executed when they are called. This is known as invoking a function. Functions always return a value. In JavaScript, if no return value is specified, the function will return undefined. Functions are objects. A function can have multiple or no parameters at all.

Different type of functions in JavaScript

1. Function declaration | Basic Syntax

The function declaration function isEven(num) {...} create a variable isEventhat is hoisted to the top of the current scope. isEven variable holds the function object and isEven.num contains the function name: 'isEven'.

// function declaration
function isEven(num) {
return num % 2 === 0…

Object.freeze()

Object.freeze takes an object as an argument. Note that it modifies the object you pass as an argument. It does not copy the object and create a new one.

So what does it mean for the object?

  • You can’t add new properties to the object
  • You can’t modify the properties if they are not objects or arrays themselves. (More on this later)
  • You can’t delete properties from the object
let objectToFreeze = {
age: 28,
name: "Damien",
pets: ["Symba", "Hades", "Kiwi"],
sibling: {
age: 25,
name: "Corentin",
},
};

Object.freeze(objectToFreeze);

delete objectToFreeze.age;
objectToFreeze.name…

Higher-order function is a general concept that applies to many programming languages, including JavaScript.

Higher-order components (HOC) are a very similar concept. Instead of working with functions as input parameters and return values, HOCs are working with components.

Higher-order functions are regular functions that do one or both of the following:

1. Takes one or many functions as arguments

An example of a function that takes another function as an argument is this:

function twice(f, v) {
return f(f(v));
}

It takes a function called f and calls it twice. This is an example of usage:

function add3(v) {
return v + 3;
}
const result = twice(add3…

Currying is an advanced technique of working with functions. It’s used not only in JavaScript but in other languages as well.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms it.

Curried functions are higher-order functions that allow us to create specialized versions of original functions. Currying works thanks to closures, which retain the enclosing function scopes after they have returned.

Summary

Currying is a transform that makes f(a,b,c) callable as f(a)(b)(c). JavaScript implementations usually both keep the function callable normally and return the partial if the arguments count is not enough. Currying allows us to easily get partials.


A Callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

The above example is the synchronous callback, as it is executed immediately.

Note, however, that callbacks are often used to continue code execution after an asynchronous operation has completed — these are called asynchronous callbacks. A good example is the callback functions executed inside a .then() block chained onto the end of a promise after that promise fulfills or rejects. This structure is used in many modern web APIs, such as fetch().


A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing. The core feature discussed in this tutorial is the ability to intercept and handle network requests, including programmatically managing a cache of responses.

The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete…


Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has existed for some time. The concept has also found purchase in webpack.

The term “tree shaking” comes from the mental model of your application and its dependencies as a tree-like structure. Each node in the tree represents a dependency that provides distinct functionality for your app. In modern apps, these dependencies are brought in via static import statements like so:

// Import all the array utilities!
import arrayUtils from "array-utils";

When your app is young (a sapling…

Abhay Jain

Developer with 2+ yrs of industrial experience in developing scalable web applications.

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