Implementing interactive floating windows using Picture-in-Picture API
November 6, 2024 — Imagine watching a tutorial on a streaming platform or a video on YouTube and needing to navigate other sections of the page without losing track of what you are watching. Among all the many ways to accomplish this, putting the video in a floating window is one of the most convenient ones.
Popover API 101
July 27, 2024 — Browsers have been getting some pretty important features at a rapid pace lately. Features that might take several JavaScript (or CSS) libraries to implement are now available in browsers out of the box.
A JavaScript snippet that sets all Lighthouse scores to 100%
July 4, 2024 — Metrics. Metrics is something that we all use to measure (flex) the success of our websites. One of the ways to benchmark the success of a website, these days, is to use Lighthouse, a tool that helps us to audit the performance of our websites.
A little DevTools snippet to check broken links on a webpage
May 26, 2024 — Broken links, also known as dead links, are hyperlinks on a webpage that no longer lead to the intended destination. When a user clicks on a broken link, they typically encounter a 404 error message, indicating that the webpage cannot be found.
All the ways to turn an array into an object in JavaScript
October 1, 2023 — In this article, I’m going to show you all the ways you can turn an array into an object in JavaScript with examples.
JavaScript Playground in Your Browser
September 1, 2023 — How many times have you wanted to do some quick prototyping in JavaScript or wanted to test out some code but didn’t want to go through the hassle of setting up a project?
A better setTimeout() in JavaScript
August 16, 2023 — A pretty long ago, I covered how to handle multiple time intervals in JavaScript in this article. And that’s a good way to handle multiple intervals in JavaScript. In line with that, I recently stumbled upon a pretty interesting way to handle setTimeout()
in JavaScript in this tweet by Haz.
Replace Accented Characters with their Plain English Counterparts in JavaScript
July 12, 2023 — I was working on this little app that lets you convert any text to a slug. And while working on it, I came across this problem where I had to replace accented characters with their plain English counterparts.
Using Bright Data's scraping browser to Scrape Web Pages
July 5, 2023 — There comes a time when you need to scrape a website for data. For instance, you might want to scrape a website to get the list of all the products they have or you might want to scrape a website to get the list of all the blog posts they have. Or you just want to automate the process of scraping a website for data to make your life easier.
Identify unused npm packages in your project
July 1, 2023 — If you’re working on a large codebase, chances are you might have installed a lot of npm packages in your project. And you might have used some of them just for the sake of trying them out. But, you might have forgotten to remove them from your package.json
file.
Import maps to natively import JavaScript modules using bare names
June 18, 2023 — Bundlers in JavaScript let you import JavaScript modules with their bare names. For instance, if you have installed Lodash using NPM, you can import it like so.
Create and download text files using JavaScript
March 12, 2023 — There are a couple of projects of mine where I needed to create and download text/JSON files using JavaScript. For instance, in LinkSnatch, I needed a way to export the bookmarks as a JSON file or in my Notepad app, I needed a way to export the notes as a text file.
Change favicon on switching browser tabs in JavaScript
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.
Change tab bar color dynamically using JavaScript
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).
Convert any value to a boolean in JavaScript
November 29, 2022 — When you’re working with JavaScript, you often stumble upon a situation where you need to check certain conditions. And often, you would need a boolean value (true
or false
) or boolean expression to check for the condition.
Generating slugs using one line of code in JavaScript
November 8, 2022 — Slugs are the part of a URL that identifies a particular page on a website. For example, in the URL https://www.google.com/search?q=javascript
, the slug is search
. It is also known as the URL segment or the permalink.
Human-readable date difference in JavaScript
November 1, 2022 — In this article, we will learn how to get the human-readable date difference in JavaScript. We will see how to get the difference between two dates in years, months, days, hours, minutes, and seconds.
Aliasing destructured variables in JavaScript
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.
How to return multiple values from a function in JavaScript
September 28, 2022 — It wouldn’t sound too obvious but sometimes your function might need to return multiple values. For instance, in one of the applications I’m working on, I have a JavaScript function where I have to calculate two different values and return them.
Rest vs Spread syntax in JavaScript
September 21, 2022 — I recently wrote an article on how to conditionally spread objects in JavaScript. In that article, I mentioned that the spread operator (...
) can be used to spread the properties of an object.
Toggling state of the checkbox based on the viewport width in JavaScript
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.
Conditionally spreading objects in JavaScript
September 13, 2022 — In JavaScript, if you want to populate an object with some properties from another object, you can use the spread operator (...
) to do so.
Array to object conversion in JavaScript
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.
Reduce array of objects to an object in JavaScript
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!
Check if an array of objects contains a certain key-value in JavaScript
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.
Array.map() vs Array.forEach() in JavaScript
February 25, 2022 — When it comes to traversing arrays in JavaScript, there are essentially two ways using which you can do this.
Unlimited function parameters using Rest in JavaScript
February 20, 2022 — Usually, when working with functions with JavaScript, the parameters that you pass into the function would be fixed in numbers.
Displaying currency made simple in JavaScript
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.
Destructure a specific index of an array in JavaScript
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()
November 18, 2021 — Let’s talk about parallel promises today. So, in JavaScript, Promises provides a way of doing asynchronous programming in the language.
Prevent object extension — Object.freeze() vs Object.seal() vs Object.preventExtensions()
September 20, 2021 — When it comes to prevention of modification/updation of an object in JavaScript, there are few things that you can do.
Abort a fetch request manually in JavaScript
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.
RegEx simplified with named capture groups in JavaScript
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
August 13, 2021 — If you ask me what is that one thing that I (over)use when working with JavaScript, the only answer you’ll get is console.log()
.
Filter certain values from the output of JSON.parse() method
August 5, 2021 — If you’ve ever worked with JSON objects in JavaScript, you most probably have reached the JSON.parse() method at some point or another which parses a JSON string and returns the JavaScript value or object described by the string.
How to represent the number of days in natural language in JavaScript
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.
How to convert arrays to human-readable lists in JavaScript
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.
Update URL query parameters as you type in the input using JavaScript
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.
Creating Keyboard shortcuts of combination of keys in JavaScript
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.
Function properties in JavaScript
April 10, 2021 — Today I learned something new about JavaScript. i.e JavaScript functions can have properties which can be accessed from within the function scope.
Remove or omit object properties without mutation in JavaScript
March 1, 2021 — Since immutability in JavaScript is important for predictability and performance of your application, we often find ourselves in situations where we need to achieve some of the operations without mutating the original object/array.
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.
Why You Should Use JavaScript for Game Design
December 15, 2020 — There are several different coding languages that can be used in the design of online video games. Per Code Digest, some of the most common among them are HTML5, C++, Java, C#, and JavaScript. Each of these languages has been used successfully to produce games, and each one can be used for this purpose even by a relative beginner (so long as he or she is willing to learn during the process).
Named function arguments in JavaScript
September 4, 2020 — A function in JavaScript is a set of statements that performs a task or calculates a value and return it based on the input which is been given to it.
The difference between for...in & for...of in JavaScript
August 19, 2020 — There are two ways of many using which you can loop over the iterables in JavaScript.
How to check if the API call is failing using Fetch in JavaScript
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.
Things to consider before using arrow functions in JavaScript
July 29, 2020 — Although the Arrow functions in JavaScript are a great way to make your code concise and more readable than the regular functions, there are some important things that you should consider before using arrow functions which can even break your application if you’re not aware of this.
Remove event listener once it's invoked in JavaScript
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.
Freeze scroll on arrow key up or down using JavaScript
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 ArrowUp
.
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.
Make function parameters required in vanilla JavaScript
July 14, 2020 — You might be aware of how to set default values for function parameters in JavaScript. For instance, if you want to set the default value for a parameter, you can do it like so.
Change URL query parameters using JavaScript
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.
Detect device's OS in JavaScript
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.
Convert long numbers to short and compact form in JavaScript
May 25, 2020 — JavaScript amazes me everyday when I find something can be done using native JavaScript instead of using heavy-weight libraries or inventing my own functions.
Detecting if device is online or offline using plain JavaScript
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.
Drag and drop files using only JavaScript
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.
Detecting device color scheme automatically in JavaScript
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.
What's the use of Blob object in JavaScript?
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.
Asynchronous for loops in JavaScript
January 4, 2020 — There are several ways to iterate over things in JavaScript. Most notable way is to use loops. Loop constructs includes for
, forEach
, do...while
, while
, for...in
and for...of
. All these constructs loops over synchronous iterables such as arrays, objects, strings etc.
Type checking props using PropTypes in React
December 23, 2019 — JavaScript is not a statically typed language. A language is a statically typed if the type of a variable is known at compile-time instead of at run-time. Common examples of statically-typed languages include Java, C, C++, Swift, Kotlin and Scala.
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.
Supercharge array operations using Set in JavaScript
August 29, 2019 — Working with Arrays in JavaScript is sometimes painful as there aren’t a lot of native functions/methods available to carry out common operations on arrays. For instance, an operation as simple as removing an element from an array takes a lot of amount of code. Check this.
A look into Getters and Setters in JavaScript
August 8, 2019 — There are always multiple ways of doing things. Programming is no different. For instance, in JavaScript, what would you do if you want to get the property of an object running some operation before returning it? Take this example.
JavaScript functions' implementation inspired by PHP and Laravel
March 29, 2019 — A sometime ago I tried my hands on implementing some of the PHP’s native functions in native JavaScript. The result is quite interesting list of JavaScript functions you’ve never asked about.
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.
Handling time intervals in JavaScript
March 15, 2017 — While working on an Electron app Pomolectron, I needed to handle different time intervals through setInterval() function of JavaScript. I basically needed to implement three timers in my app:
Getting started with Electron
June 22, 2016 — Have you ever wanted to develop desktop apps while being a true web developer without even caring about the native architecture or the language most of the applications build for different platforms likes of Windows, macOS or Linux? Or you just wanted to get started with building desktop apps? Isn’t it great if you are able to build desktop apps using the technologies you already knows i.e. HTML, JavaScript and CSS? I was in the same urge to dive into world of desktop apps. So, I have been stuck on to GitHub’s Electron lately.