With the advent of package bundlers like webpack, the general tendency is to combine all the JS code into a single bundle.js file. As the app features grow, the size of the bundle.js file grows quickly from mere KBs to MBs. This negatively affects the webpage performance as the user…

I recently came across a use case in the project I am working on where I had to debounce the input onChange event callback. A common use case is when you have an input element like below which functions as a search input in your app. <input name="search-input" onChange={this.onChange} /> …

Have you come across this error when working with React? Uncaught TypeError: Super expression must either be null or a function, not undefined If yes, then this post is for you! Lets look at the culprits (that I have come across so far) that cause this error. Forgotten export The first…

ES6 introduced a new declaration called const for declaring variables as holding constant (i.e. immutable) values. Here is the definition of const from the MDN web docs. Constants are block-scoped, much like variables defined using the let statement. …

This tutorial is aimed at creating filled circular progress bars using Canvas tag like the ones shown below: Before jumping into the code, we need to understand how to draw a circle using Canvas tag. For the purposes of the Canvas tag, the circle is represented as follows:

The Problem: Pre-buffering a HTML5 video resource on a mobile browser or a mobile webview is a herculean task. This is because the standard preload attribute on the HTML5 <video> tag is ignored or disabled by mobile browser vendors to save on the data costs to the user. Here is the definition…

Have you ever come across a variable that was undefined or not available when inspecting with the debugger in Chrome developer tools ? Or, maybe the variable contained a value that you did not expect ? Before you think there is a bug in your application logic and spend hours…

async/await is the latest addition to the language that helps in writing better asynchronous code. It is part of the 8th Edition of ECMAScript (called ES8 or ES2017). Before we jump into the details of async/await, let us go back in time to revisit the various approaches to asynchronous programming…