March 7, 2023 — I was browsing through my Twitter feed and I saw something pretty subtle yet mind-blowing. One of the guys from the Astro team was showing off some of the new things they have done for their brand redesign.
February 13, 2023 — In one of my applications called Notepad, I am using something called
theme-color meta tag that can be used to change the color of the browser’s address bar (or tab bar in Safari).
false) or boolean expression to check for the condition.
November 8, 2022 — Slugs are the part of a URL that identifies a particular page on a website. For example, in the URL
search. It is also known as the URL segment or the permalink.
October 11, 2022 — Here’s a little tip that I learned recently. It’s about destructuring an object and aliasing the destructured variables. I’ll show you how it works with an example.
...) can be used to spread the properties of an object.
September 18, 2022 — Recently, I stumbled upon a problem where I had to toggle the state of the checkbox based on the viewport width. So, let’s say, if the viewport width is changed and is less than
879px and the checkbox is checked, then it should be unchecked.
...) to do so.
May 21, 2022 — I was working with a group of checkboxes under a redux-form for one of my applications. So, when I select certain checkboxes here’s the format in which I was getting the value of the checkboxes.
May 17, 2022 — The other day when working with one of the applications, I needed to convert/reduce an array of objects to an object.
Console Logging the Right Way
March 22, 2022 — Haters gonna hate and call you uncultured but when it comes to debugging, doing
console.log() is one of best the best ways of all time. Period. Well! sort of!
March 21, 2022 — The other day, I was stumbled upon a scenario where I need to check whether there exists at least one key of a certain value in an array of objects.
January 12, 2022 — Working with currencies is the use-case that you might find yourself stumbled upon more often than not. And one of the aspects of it is to display the currency on the frontend.
December 22, 2021 — One of the most important features of ES6 is destructing of arrays and objects.
Run multiple awaits in parallel using Promise.all()
Prevent object extension — Object.freeze() vs Object.seal() vs Object.preventExtensions()
September 17, 2021 — The Fetch API, as you might know, is a modern replacement of the good old XHRHttpRequest (popularly known as Ajax) that gives nicer developer experience (DX) by giving a promise based implementation.
August 24, 2021 — Regular expressions (RegEx) are great little strings that help in solving some of the complex problems that are rather hard if we don’t use the RegExes.
console.trace — A better alternative to console.log
Filter certain values from the output of JSON.parse() method
July 19, 2021 — Extending the use of the Intl object from the previous article, today we’re going to talk about the Intl.RelativeTimeFormat object that has an important and relatively frequent usecase in modern web applications.
July 11, 2021 — Oftentimes, you might end up in situations where you have an array and you just want to deflate the entire array content in a human-readable form. Or more specifically in a list-like format.
May 3, 2021 — Sometimes, there might be a use case where you want to change the URL’s query parameters as you type in an input field.
April 27, 2021 — Recently, I added a set of few keyboard shortcuts on this blog which helps in navigating through different parts of the blog conveniently. You can check all the shortcuts on this dedicated page.
Difference between React.Component and React.PureComponent
January 16, 2021 — Currently, there are two ways if you want to create ES6 class components in React.
Deep copying objects using JSON.stringify and JSON.parse
January 13, 2021 — There are a lot of reasons where you would want to “deep copy” objects in your application. For instance, when working with React.js, you might have used the
shouldComponentUpdate life-cycle method. In this method, you would determine if the component has the same props and state as it had previously by shallow or deep copying objects.
August 4, 2020 — The Fetch API as we all know is the modern replacement to the good old XHRHttpRequest AKA Ajax as it’s much simpler and uses promises. It’s great to make API calls without adding any third-party library overhead.
July 28, 2020 — The usual way of adding event-listener on certain elements is using the
addEventListener method on the element. For instance, if you want to register a click event on an element with id
checkoutBtn, you can do it like so.
July 27, 2020 — I was working on implementing the Konami code easter egg on this blog and there was this need where I need to stop the scrolling only when the previous two presses by the user are
How I implemented a Konami easter egg on my blog
July 24, 2020 — So, the other day, I was going through my Twitter feed and I saw this tweet. This user had explored an easter egg on the newly designed Stripe.com’s website.
June 23, 2020 — While working on Your First Commit Ever, there arised a requirement in which I had to update/change the URL’s query paramter based on the user input.
June 2, 2020 — There comes a scenario when you might want to check which operating system the device is running. For instance, when you want to set device-specific download links. For windows,
.exe file, for macOS,
.dmg file and so on.
May 19, 2020 — There might be cases where you would like to check if the device on which the website is loading is connected to the internet or not. For instance, this can be used to show the user the message if their device is offline or to disable some functionality of the application if the device is offline.
May 18, 2020 — You’ve probably seen or have used this feature where you can upload files by dropping the selected files into the specific area. For example, how Gmail handles this while drafting emails.
May 11, 2020 — Implementing a Dark mode in applications is all the rage these days. And you can provide a toggle to switch between Dark/Light mode to users like the one I’ve implemented on my Notepad app.
April 8, 2020 — I was working on polishing my Notepad app this fine quarantine afternoon. One feature that I was planning to add was an ability to download the content of the notes/text as a text file when user click the specified download button.
for...of. All these constructs loops over synchronous iterables such as arrays, objects, strings etc.
Type checking props using PropTypes in React
Automatically bind ES6 class functions in callbacks in React
December 22, 2019 — When using React component using ES6 classes, you must have encountered this phenomenon where you have to explicitly bind the class function and then pass it to the even such as
onClick. For instance, take the following example.
TIL - How to fix embedded scripts in Progressive Web Apps
September 3, 2018 — Progressive Web Apps are great when you need to achieve things like offline capabilities, push notifications, background-sync and to give your website an overall app-like experience. While, the PWAs are great at implementing all of the above things and are the obvious choice, there are certain things which can be broken when you use ServiceWorker(which are the building blocks of any PWA) to make your webaite a PWA.
TIL - Using "Box Model" of Chrome Dev Tools
March 21, 2017 — We all know how good is Chrome Dev Tools when it comes to the web debugging capabilities. There are number of features in the Dev Tools which are very useful but we are unaware of.
Building a simple offline-capable Notepad app using ServiceWorker
November 15, 2016 — Today, We are going to build a progressive Notepad app which can very well be used in offline mode, be responsive on all available devices, and saves the content locally on the device itself. So, the core functionality of this Notepad here is to make it work offline. To fulfill this requirement, we’ll use ServiceWorkers which I’m going to cover next.
Getting started with Electron