The image is taken from

The light mode and dark mode are gaining popularity and more apps are offering these theme switching. This theme switching looks cool but is difficult to implement and hard to get right. There are many libraries(emotion.js) that let you do this with ease by giving a ThemeProvider which is nothing but a React component that provides theme context. These libraries use CSS-in-JS which is a beautiful way of writing CSS with javascript.

I have been using CSS-in-JS for most of my projects and I’m in love with it but over time CSS has improved, the browsers have matured and support…

Do you see the beast? context + hooks === 🦁 Using context and hooks together gives birth to Context Module Pattern, the magnificent beast🦁.

Let’s start by creating the context:

Create Context [context.js]

Here I prefer to split my context into state and dispatch, this enables me to consume only what my component needs. To allow our components to consume these contexts we must attach their provider in the ancestral component tree. I prefer to create a wrapper component that provides these context as:

Create Context Provider [context.js]

Now let's create custom hooks to consume these context values:

Context hooks…

In the previous post, we discussed Proxy in detail. In this post, we will build upon that knowledge and learn some more.

Proxy and Reflect in Javascript

Reflect helps in the creation of Proxy and somewhat allow us to play with internal methods [[Get]] and [[Set]]. Below are some reflect methods:

Have you put a proxy for your friend in that one boring lecture and professor couldn’t tell 😂…I have. JavaScript has a similar way of applying a proxy on objects.


A Proxy object wraps another object and intercepts operations on it. While intercepting operations like reading, writing properties on the object, the proxy may choose to handle these operations and modify results.


Syntax: let proxy = new Proxy(target, handler);

target : the object that has to be proxied.
handler : the proxy configuration object, it may register traps. A trap is a handler for a particular kind of operation. …

Let’s start with a piece of code:

The name is a primitive but we are able to access a method on it as if it were some sort of object. But we know that primitive isn’t an object.
What is the story here?🧐

Primitive are simple values stored in memory, those are lightweight and extremely fast. Whereas an object is a collection of the key, value pairs, it is heavy but it allows to access some utility properties associated with the object that is very useful. …

In this article, we are going to look at a few common array operations in their mutable and non-mutable version. Add, Delete, Replace are most common operations and we will take a look at those operations. In this article, we will exploit methods like `` to produce non-mutating versions. This is not an exhaustive listing, we will keep ourselves limited to basic manipulations.

I will assign array to const to show non-mutating aspect and let as mutating. Though you can always mutate array assign to const but I like to it that way keep for developer indication.

Add: Mutating

The easiest way…

Many times we want to make validations on an input box for characters that user can type. And other characters will not be entertained in the input box.

Question: Make a input box that accepts digits and spaces only. Also, care for copy-paste (Ctrl +V ) of invalid characters.

The first step is to register an event on the input tag. But what event type? 🤔 We are typing characters into it so keypress the event looks fine.

<input type="text" id="input"/>const input = document.getElementById('input');
var currentInputValue = '';
input.addEventListener('keypress', function inputKeypressHandler(e) {
// keypress event on input box…

Objects in the real world have some behaviour attached to them. For example, a user on messenger can chat, view profile etc. These behaviour are the function linked to the user object.

“this” happened
const userObject = {
name: 'Aniket',
age: 22,
userObject.myName = function (){ // (1) way
alert('myName method');
function myAge(){
alert('myAge method');
userObject.myAge = myAge;
userObject.myName(); // alert: myName method

Here we have created a Function expression and assigned it to `userObject.myName` property, this function as a property is called a method.

Method shorthand

Method shorthand exists which are declared directly on object literal itself like so:


There are a total of eight data types in Javascript. Seven of them are ‘primitive’ and other is ‘object’. Primitive is something that contains a single thing (string or number or others). Objects are collection of key value pair.

Creating an object

// Contructor syntaxconst objConstructor = new Object();// Literal syntaxconst objLiteral = {};

There are two ways of creating an object in javascript. One is object constructor syntax and other is object literal syntax. The common way of creating an object is through literal syntax.


Adding properties

// Immedaitely adding propertiesconst userObject = { // creating an objectname: 'Aniket'…

In these series of articles, we will cover some basics of the webpack world and its ecosystem.

What is webpack?

Webpack is a module bundler. It bundles your scripts, assets, images, and styles.

Need for webpack

Server Side Templating

Server-side templating depends on the backend server. Here we create a fully assembled HTML doc and send it to the client. In the server-side templating world, we send a new page every time the request is being made for any page.

Single Page Application

SPA is when we send a bare bone of HTML then a huge javascript code is loaded. The javascript code runs on the client browser which…

Aniket Jha

Software Engineer QuillBot

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