JavaScript has a class mechanism, primarily a blueprint for defining objects, including their properties and methods. Data must always be serialized to either store it, transmit it through a network or be used as part of the response to an API call. In this article, we will demonstrate how this can be done using JavaScript by providing examples and outputs as necessary. Approaches Convert JavaScript Class to JSON Using JSON.stringify() Method Adding a Custom toJSON() Method Using Object.assign() Method Using Custom Serializer ... Read More

Base64 encoding is widely used as an ASCII string to represent binary data. However, converting Base64 strings to JSON is a common data exchange specification. This is because JSON is a human-readable format and is easily converted into JavaScript. In this article, we will explore methods to convert Base64 string to JSON string by giving examples and output for each. What is Base64? Base64 is a type of encoding scheme that represents binary data in an ASCII string. It generally gets used to encode an image, file, or other non-textual data to transfer safely across a text-based protocol like ... Read More

When using an field, browsers automatically show up and down arrows to adjust the number. While these arrows can be helpful, they might not fit your design. Tailwind CSS doesn't have a built-in way to remove them, so you'll need to manually hide the arrows while still using Tailwind for the rest of your styling. Our goal is to remove the arrows without affecting the other Tailwind styles. Approaches We will cover two methods to remove the arrows from fields: Adding custom CSS for Webkit browsers Cross-browser solution (including ... Read More

When working with Next.js, the Image component offers features like optimization, responsive sizing, and lazy loading for better performance. However, styling these images with Tailwind CSS while keeping the code clean and ensuring image optimization works can be challenging. Our goal is to show the best ways to use Tailwind CSS with the Next.js Image component for better performance and design. We'll go through a few examples to show how to style and optimize images using Tailwind and Next.js. Setting Up Tailwind CSS with Next.js To get started, you first need to install Tailwind CSS in your Next.js ... Read More

When using Tailwind CSS, the styles can apply to your whole website or app, which can cause issues if they affect areas you don't want. This happens because Tailwind's utility classes are global. So, how can you control where these styles are used? In this article, we'll show you different ways to make sure Tailwind CSS only affects certain parts of your site, making it easier to manage and preventing unwanted changes. Approaches to Scope Tailwind CSS There are several methods you can use to limit Tailwind CSS styles to specific parts of your website or app, making ... Read More

Sometimes we are given an object and we want to extract only the key-value pairs that meet certain criteria. In this article, we are going to discuss how we can filter objects by values in Lodash. Prerequisite Lodash: Lodash is a popular JavaScript library used to deal with a variety of functions such as arrays, objects, strings, and more. Install Lodash We can install the Lodash library in the project by adding it via CDN or npm using the following command: npm install lodash Approaches to Filter Object by Values ... Read More

Sometimes while working with objects in JavaScript we want to filter objects based on keys. We can easily do this by using Lodash, a popular JavaScript library that provides several inbuilt functions to achieve this easily. In this article, we are going to discuss how we can Filter Objects by Keys using Lodash. Prerequisite Lodash: Lodash is a popular JavaScript library used to deal with a variety of functions such as arrays, objects, strings, and more. Install Lodash We can install the Lodash library in the project by adding it via CDN or ... Read More

Combining Tailwind CSS with Sass using Webpack can be challenging. The main difficulty is configuring Webpack to handle both, making sure custom styles work well with Tailwind's utilities, and removing unused CSS in production to reduce the file size and improve performance. Our goal is to combine Tailwind and Sass in a simple way, using Tailwind's utilities for layout, applying custom styles with Sass, and removing unused CSS to optimize the final output Approaches to Combine Tailwind CSS with Sass using Webpack We'll cover some simple ways to combine Tailwind CSS with Sass using Webpack. Each method will help you ... Read More

Sometimes, we need to find the beginning and end of the day using MomentJS. This functionality has different real-life applications, such as filtering data within a day’s range, generating daily reports, and scheduling tasks at specific times. In this article, we will discuss how to find the beginning and end of the day using MomentJS. Prerequisite Moment.js: Moment.js is a popular JavaScript library used to deal with dates. This library is used to modify, parse, validate, manipulate, and display dates and times in JavaScript. Install Moment.js We can install the Moment.js library in ... Read More

Sometimes, when doing a project for a specific organization in a particular country, we need to convert it into the users' local timezone. In this article, we are going to learn how to convert a date to a user's local timezone using moment.js. Prerequisite Moment.js: Moment.js is a popular JavaScript library used for dealing with dates. This library is used to modify, parse, validate, manipulate, and display dates and times in JavaScript. MomentJS works with UTC (Coordinated Universal Time) by default or any other specific time zone. Install Moment.js: npm install moment ... Read More