DEV Community: Madhu Saini

Understanding the Basics of Runtime Environment

Madhu Saini — Fri, 19 Apr 2024 05:55:54 +0000

Have you ever wondered how a program goes from written code to something you can actually use? Well, there's a hidden world behind the scenes called a runtime environment, and it's the unsung hero that makes it all happen!

Welcome to our exploration of the fundamentals of runtime environments! In this blog post, we'll break down what runtime environments are, why they're essential in the world of programming, and delve into the significance of Node.js in modern development.

What is Runtime Environment?

Simply put, a runtime environment (RTE) serves as the stage upon which programs and applications perform. It acts as a virtual operating system, providing all the necessary tools and resources for a program to run smoothly. Imagine it as the backstage crew making sure the show goes on without a hitch.

Breaking it more, imagine a program as a recipe. The code itself is the list of ingredients and instructions, but to bake the cake (or run the program), you need an oven (the runtime environment). This environment provides all the necessary tools and ingredients (software components and libraries) to bring the program to life.

Why Do We Need Runtime Environments?

Consider this: every device or system has its own unique hardware and software configuration. Without runtime environments, developers would face the daunting task of creating multiple versions of their programs to suit each platform. Thankfully, RTEs eliminate this headache by abstracting away the intricacies of different environments, allowing developers to focus on writing code that works universally.

Think of building a Lego set. The instructions (code) tell you how to put the bricks together, but you also need a flat surface and maybe a box to keep the pieces organized. The runtime environment acts like that flat surface and box, ensuring everything is in place for the program to run smoothly.

Here's what the runtime environment does:

Provides Resources: It allocates memory, manages files, and handles communication with other programs.
Acts as a Translator: Sometimes, the code needs a little help understanding the computer's language. The runtime environment translates the code into instructions the computer can understand.
Ensures Order: Just like a recipe with steps, the runtime environment makes sure the program's instructions are executed in the correct order.

Node.js: A Popular Runtime Example

One well-known runtime environment is Node.js. It's like a specialized kitchen specifically designed for baking JavaScript cakes (running JavaScript code). Node.js allows developers to create web applications and servers using JavaScript, a language traditionally used for website interactivity.

In simpler terms, Node.js provides the tools and resources needed to run JavaScript programs outside of a web browser, opening doors for more dynamic web development.

So, the next time you use a program, remember the silent hero – the runtime environment – working tirelessly behind the scenes to make it all work!

Conclusion

The runtime environment might seem like a technical term, but hopefully, this blog has shed light on its crucial role in the software world. It's the invisible conductor, ensuring everything runs smoothly behind the scenes. From basic program execution to specialized environments like Node.js, understanding runtime environments allows us to appreciate the intricate mechanics that bring our favorite programs to life.

So, the next time you use a program, take a moment to acknowledge the silent hero – the runtime environment. It's a testament to the power of collaboration, where various components work together seamlessly to deliver the final experience we enjoy.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

7 ways to center a div 🔥

Madhu Saini — Thu, 18 Apr 2024 09:39:29 +0000

Introduction

Centering content on a webpage is a common task in web development. Whether it's a text block, an image, or a <div> element, achieving perfect center alignment can sometimes be tricky. Luckily, CSS provides several straightforward methods to accomplish this. In this blog post, we'll explore seven simple ways to center a <div> using CSS.

Using Flexbox:

Flexbox is a powerful layout model in CSS that makes it easy to align items within a container. By setting the container's display property to flex and using justify-content: center and align-items: center, we can center the <div> both horizontally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Using Absolute Positioning:

Absolute positioning allows us to precisely position elements relative to their nearest positioned ancestor. By setting the <div> 's position to absolute and using the top, left, bottom, and right properties along with transform: translate(-50%, -50%), we can center the <div> within its parent container.

.container {
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Using Grid: CSS Grid Layout is another powerful tool for creating layouts in CSS. By setting the container's display property to grid and using place-items: center, we can easily center the <div> both horizontally and vertically.

.container {
  display: grid;
  place-items: center;
}

Using Table Display:

Although not commonly used for layout purposes, the table display properties in CSS can be handy for centering content. By setting the container's display property to table and the <div>'s display property to table-cell, along with text-align: center and vertical-align: middle, we achieve horizontal and vertical centering.

.container {
  display: table;
}

.centered {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Using CSS Grid with Auto Margins:

CSS Grid combined with auto margins is a simple method for centering a <div>. By setting the container's display property to grid and applying margin: auto to the <div>, it will automatically center itself both horizontally and vertically within its parent container.

.container {
  display: grid;
}

.centered {
  margin: auto;
}

Using Text-Align and Line-Height:

Although primarily used for text alignment, the text-align property can also be used to horizontally center block-level elements. By setting text-align: center on the container and using display: inline-block, vertical-align: middle, and matching line-height values, we can achieve vertical centering.

.container {
  text-align: center;
  height: 100px; /* Specify height */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  line-height: 100px; /* Should match container height */
}

Using Flexbox with Auto Margins:

Flexbox's auto margin feature makes it incredibly easy to horizontally center a <div>. By setting the container's display property to flex and applying margin: auto to the <div>, it will automatically center itself horizontally within its parent container.

.container {
  display: flex;
}

.centered {
  margin: auto;
}

Conclusion

In web development, centering content is a fundamental aspect of creating visually appealing layouts. With CSS, there are multiple ways to achieve center alignment for <div> elements, each with its own advantages depending on the specific requirements of the layout and browser compatibility considerations. By understanding these methods, web developers can confidently create centered layouts that look great across various devices and screen sizes.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

All About Custom Hooks: Supercharge Your React Components

Madhu Saini — Wed, 17 Apr 2024 03:22:50 +0000

Introduction

Welcome to the world of React custom hooks! In this comprehensive guide, we'll delve deep into the realm of custom hooks, exploring how they empower developers to write cleaner, more reusable code in React applications. Whether you're a seasoned developer or just starting your journey with React, understanding custom hooks is key to unlocking the full potential of the framework. So, let's embark on this journey together and unravel the mysteries of custom hooks!

What are Custom Hooks?

Custom hooks represent a groundbreaking feature introduced in React 16.8. They provide developers with a powerful mechanism to extract reusable logic from components into standalone functions. These functions adhere to a simple naming convention – they must start with the prefix "use" – and can leverage both built-in React hooks like useState, useEffect, and useContext, as well as other custom hooks.

By encapsulating complex logic within custom hooks, developers can foster code reuse, improve maintainability, and enhance the overall architecture of their React applications.

In short,

use Prefix: Custom hook names typically begin with the use prefix, signifying their connection to state management.
Return Values: A custom hook can return one or more values, usually a combination of state variables and functions that operate on that state.

Why Do We Need Custom Hooks?

The need for custom hooks arises from the inherent complexity of building modern web applications. As React applications grow in size and complexity, managing stateful logic within components becomes increasingly challenging. Custom hooks offer a solution to this problem by providing the following benefits:

Code Reusability: Custom hooks enable developers to encapsulate logic and share it across multiple components, thereby reducing code duplication and promoting modularity.
Simplified Component Logic: By extracting complex logic into custom hooks, developers can keep their components focused on presentation, leading to cleaner and more maintainable code.
Enhanced Testability: Custom hooks facilitate better testing practices by allowing logic to be tested independently of components, resulting in more robust and reliable tests.

Basic Syntax of Custom Hooks

Creating custom hooks follows a simple syntax that mirrors the structure of built-in React hooks. Let's break it down:

import { useState, useEffect } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // Effect logic here
  }, [value]);

  return [value, setValue];
}

In this example:

We define a custom hook named useCustomHook.
Inside the hook, we use useState to manage state and useEffect to perform side effects.
The hook returns stateful values and functions to update them, mimicking the behavior of built-in React hooks.

Create Your Own Custom Hook

Let's dive into creating a custom hook together. We'll start with a basic one that helps us interact with local storage in our React app.

export const useLocalStorage = () => {
  const setLocalStorage = (name, value) => {
    window.localStorage.setItem(name, JSON.stringify(value))
    return true
  }

  const getLocalStorage = (name) => {
    return JSON.parse(window.localStorage.getItem(name) || '{}')
  }

  const clearLocalStorage = (name) => {
    return window.localStorage.removeItem(name)
  }

  return { setLocalStorage, getLocalStorage, clearLocalStorage }
}

Example: Using the useLocalStorage Hook in a Component:
Now that we have our custom hook, let's see how we can use it in a React component:

import React from 'react';
import { useLocalStorage } from './useLocalStorage';

function MyComponent() {
  const { getLocalStorage, setLocalStorage, clearLocalStorage } = useLocalStorage();

  const handleSave = () => {
    setLocalStorage('name', 'John Doe');
  };

  const handleClear = () => {
    clearLocalStorage('name');
  };

  const storedName = getLocalStorage('name');

  return (
    <div>
      <button onClick={handleSave}>Save Name</button>
      <button onClick={handleClear}>Clear Name</button>
      <p>Hello, {storedName || 'Stranger'}!</p>
    </div>
  );
}

export default MyComponent;

In this example:

We import our useLocalStorage hook.
We use it to interact with local storage in our component.
We provide functions to set, get, and clear data stored in local storage.

Conclusion

Custom hooks are your trusty sidekicks for building cleaner, more maintainable React apps. With just a little bit of magic, you can encapsulate common tasks, reuse code, and simplify your components. So go ahead, give custom hooks a try, and watch your React skills grow! Happy coding!

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

Difference between innerText and textContent in HTML

Madhu Saini — Sun, 14 Apr 2024 14:46:36 +0000

innerText

innerText retrieves or sets the text content of an element and all its descendants, and it is aware of the current styling applied to the elements. This means that if there are any styles applied to an element that hide it (like display: none), innerText will not return the text content of that element.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>innerText Example</title>
</head>
<body>
  <div id="exampleDiv">
    This is some <span style="display: none;">hidden</span> text.
  </div>

  <script>
    const div = document.getElementById('exampleDiv');
    console.log(div.innerText); // Output: This is some text.
  </script>
</body>
</html>

html

In this example, innerText returns only the visible text inside the #exampleDiv element, ignoring the hidden span.

textContent

textContent returns the text content of all elements, including hidden elements or those with visibility set to hidden. It doesn't consider CSS styling and simply returns all text contained within the specified element.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>textContent Example</title>
</head>
<body>
  <div id="exampleDiv">
    This is some <span style="display: none;">hidden</span> text.
  </div>

  <script>
    const div = document.getElementById('exampleDiv');
    console.log(div.textContent); // Output: This is some hidden text.
  </script>
</body>
</html>

In this example, textContent returns all the text within #exampleDiv, including the text inside the hidden span.

Conclusion

Use innerText when you want to retrieve only the visible text content of an element, considering CSS styles.
Use textContent when you want to retrieve all text content within an element, regardless of CSS styling or visibility.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

Understanding Cookies, Local Storage, and Session Storage: A Beginner's Guide

Madhu Saini — Fri, 12 Apr 2024 14:53:47 +0000

Introduction

Have you ever wondered how websites remember your preferences, keep you logged in, or store your shopping cart items even after you close the browser? It's all thanks to the magic of cookies, local storage, and session storage. These technologies play a crucial role in modern web development, but understanding them might seem daunting at first. Fear not! In this blog, we'll break down each concept in simple terms with examples to help you grasp their functionalities.

What is Browser Storage?

Browser storage refers to various methods web browsers provide to store data on a user's device. This data can persist across sessions (meaning it's available even after closing the browser) or be temporary, lasting only for the duration of the current browsing session. Browser storage allows web applications to save user preferences, maintain application state, and enhance the overall user experience.

Why Should We Store Data in the Browser?

There are several advantages to storing data in the browser:

Improved Performance: By storing data locally, web applications can reduce the number of requests they need to make to the server. This can lead to faster loading times and a more responsive user experience.
Enhanced User Experience: Browser storage allows applications to remember user preferences, such as language settings or themes. This can personalize the experience and make it more convenient for users.
Offline Functionality: Certain types of browser storage can enable limited functionality even when the user is offline. For example, a note-taking app might allow users to access and edit their notes without an internet connection.
State Management: Browser storage helps applications maintain state information across page loads or reloads. This can be crucial for features like shopping carts or multi-step forms.

By leveraging browser storage effectively, we as a web developers can create more performant, user-friendly, and robust web applications.

Now, let's delve into the three main mechanisms for browser storage in JavaScript: Cookies, Local Storage, and Session Storage.

1. Cookies: The Bakers of Web Data

Cookies are small pieces of data stored in your browser by websites you visit. They serve various purposes, such as remembering login credentials, site preferences, or tracking user activity. Think of them as digital breadcrumbs left behind by websites to remember you.

Hence, they are the oldest and most widely supported storage option. They're small pieces of data sent by a server and stored on the user's browser. Cookies are automatically included with every HTTP request to the server that created them, making them useful for maintaining state information between requests.

Pros:

Universally supported by all browsers.
Simple to use with built-in browser functions.
Can be set to expire after a specific time.

Cons:

Limited storage capacity (usually around 4KB).
Sent with every request to the server, which can impact performance.
Security concerns: cookies can be accessed by other websites if not properly secured.

Example: Imagine you visit an online store and add items to your shopping cart. The website uses cookies to remember your cart contents, so even if you close the browser and return later, your items are still there, waiting for you to proceed to checkout.



// Adding an item to the cart (assuming item has properties like id and name)

function addToCart(item) {

  let currentCart = getCookie('cart') || '[]'; // Get existing cart or create an empty array

  const parsedCart = JSON.parse(currentCart);

  parsedCart.push(item);

  const newCart = JSON.stringify(parsedCart);

  setCookie('cart', newCart, 1); // Store cart for 1 day

}

// Retrieving cart items from cookie

function getCartItems() {

  const cartCookie = getCookie('cart');

  if (!cartCookie) return []; // No cart items

  return JSON.parse(cartCookie);

}

// Example usage

addToCart({ id: 1, name: 'Product A' });

const cartItems = getCartItems();

console.log(cartItems); // Output: [{ id: 1, name: 'Product A' }]

Local Storage: Your Personal Web Locker

Local storage, introduced with HTML5, provides a more robust storage option compared to cookies. Unlike cookies, which are sent with every HTTP request, local storage is more secure and can hold larger amounts of data. It's like having your own personal locker inside your browser. It allows you to store larger amounts of data (up to 10MB) on the user's browser with no expiry by default. This makes it ideal for storing user preferences, application data, or anything that needs to persist across sessions.

Pros:

Larger storage capacity than cookies.
Data persists until manually cleared by the user or programmatically.
Not sent with every request, improving performance.

Cons:

Not accessible from the server-side.

Example: Let's say you're using a note-taking app. As you jot down ideas or tasks, the app saves them to your browser's local storage. Even if you refresh the page or close the browser, your notes will still be there, safe and sound, until you decide to delete them.



// Saving a note

function saveNote(note) {

  const currentNotes = localStorage.getItem('notes') || '[]'; // Get existing notes or create an empty array

  const parsedNotes = JSON.parse(currentNotes);

  parsedNotes.push(note);

  localStorage.setItem('notes', JSON.stringify(parsedNotes));

}

// Loading notes

function loadNotes() {

  const notesString = localStorage.getItem('notes');

  if (!notesString) return [];

  return JSON.parse(notesString);

}

// Example usage

saveNote({ content: "This is my important note!" });

const notes = loadNotes();

console.log(notes); // Output: [{ content: "This is my important note!" }]

Session Storage: Short-term Memory for Websites

Session storage is similar to local storage but with one key difference: the stored data is only available for the duration of the browser session. Once you close the browser tab or window, the data is cleared. It's like having a temporary scratchpad for websites to use during your visit.

Pros:

Same storage capacity as local storage.
Data automatically cleared when the session ends, improving security.

Cons:

Data is not persistent across sessions.

Example: Imagine you're logged into your email account. The website might use session storage to keep track of your session, so you don't have to log in every time you click on a new message or refresh the page. However, once you close the browser, the session storage is wiped clean, and you'll need to log in again next time.



// Setting a user object in session storage on login

function login(user) {

  sessionStorage.setItem('user', JSON.stringify(user));

}

// Checking if a user is logged in (simplified example)

function isLoggedIn() {

  return !!sessionStorage.getItem('user'); // Check if user object exists

}

// Example usage

login({ username: 'john_doe', email: 'john.doe@example.com' });

const loggedIn = isLoggedIn();

console.log(loggedIn); // Output: true (if login was successful)

// Logout by clearing session storage

sessionStorage.clear();

Choosing the Right Tool for the Job

Here's a quick guide to help you decide:

Use cookies for small amounts of data that need to persist across sessions and are relevant to the server (e.g., authentication tokens).
Use local storage for larger amounts of data that need to persist across sessions and are not needed on the server-side (e.g., user preferences, application state).
Use session storage for temporary data specific to a single session (e.g., shopping cart contents, form data).

Remember:

All three storage mechanisms store data as strings. You'll need to convert complex data structures (like objects) to JSON format before storing them.
Security is important! Be mindful of what data you store and take steps to protect it, especially when using cookies.

Conclusion

By understanding the differences between cookies, local storage, and session storage, you can effectively manage data on the client-side and enhance the user experience of your web applications.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

How to create Custom Events in JavaScript?

Madhu Saini — Tue, 09 Apr 2024 04:43:06 +0000

Introduction

Imagine you're building a complex web application. Pre-built events like "click" and "submit" are great, but what if you need something more specific? This is where custom events come in - a way for your JavaScript code to create and fire its own events, allowing for more nuanced communication between different parts of your application.

Understanding Events in JavaScript

Before diving into custom events, let's first grasp the concept of events in JavaScript. Events are actions or occurrences that happen in the browser, triggered by either user interaction (like clicks, mouse movements, or keyboard inputs) or by the browser itself (like page load, resize, etc.). JavaScript provides a robust event handling mechanism to capture and respond to these events.

Why Custom Events?

While built-in events handle common interactions, custom events offer advantages:

Specificity: They signal unique actions within your application. Imagine an "itemAdded" event for a shopping cart or a "levelCompleted" event in a game.

Decoupling: Code that creates events (like a form submission) is separate from code that listens for them (like updating a progress bar). This improves code maintainability.

Data Transfer: You can attach custom data to events using the detail property, allowing informative messages to be passed along.

Built-in vs. Custom Events

JavaScript comes with a set of built-in events that cover common interactions. However, there are scenarios where these predefined events might not suffice. This is where custom events come into play. Custom events enable developers to define their own event types, extending the capabilities of event-driven programming in JavaScript.

Creating a custom event involves a few key steps

Event Initialization: First, we need to initialize a new custom event using the CustomEvent constructor. This constructor takes two parameters: the event type and an optional object containing any additional data to be passed along with the event.



// Create a new custom event
const customEvent = new CustomEvent('customEventType', {
    detail: { key: 'value' } // Optional additional data
});

Dispatching the Event: Once the custom event is initialized, we can dispatch it on a specific DOM element using the dispatchEvent() method.



// Dispatch the custom event on a DOM element
document.dispatchEvent(customEvent);

Subscribing to Custom Events: To respond to custom events, we need to add event listeners to the target elements. Event listeners "listen" for a specific event type and execute a function when that event occurs.



// Add an event listener for the custom event
document.addEventListener('customEventType', function(event) {
    // Event handling logic here
    console.log('Custom event triggered with data:', event.detail);
});

Practical Example: Custom textSelect Event

Let's illustrate the concept of custom events with a practical example. Suppose we have a text in our web application. We can create custom events which fires whenever the user makes a selection of our text in our web app.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Selection Event</title>
</head>
<body>

<p>Select some text in this paragraph to trigger the event.</p>

<script>
// Event Initialization: Listen for selection changes
document.addEventListener('selectionchange', function() {
    const selection = window.getSelection().toString();
    if (selection) {
        // Dispatching the Event: Dispatch custom event with selected text
        document.dispatchEvent(new CustomEvent('textSelect', { detail: { selectedText: selection } }));
    }
});

// Subscribing to Custom Events: Subscribe to the textSelect event
document.addEventListener('textSelect', function(event) {
    // Log the selected text to the console
    console.log('Selected text:', event.detail.selectedText);
});
</script>

</body>
</html>

So, copy this code and run the live server in your code editor. And in the local server open up your developer tools and that should look something like this -

So, when I've tried to select the text by double clicking on this, our custom event triggered and you can see the log in the developer tools right side.

Hurray!🥳 You've created your first custom event. Now go forth and build something amazing!

Conclusion

While JavaScript doesn't natively support a textSelect event, we can simulate it by combining existing events and JavaScript logic. By creating a custom textSelect event, we open up possibilities for enhancing interactivity and providing richer user experiences on the web. Whether it's highlighting selected text, triggering actions, or gathering insights, the textSelect event can be a valuable addition to your toolkit as a web developer. Happy coding!

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

All MongoDB commands you need to know

Madhu Saini — Fri, 05 Apr 2024 14:56:37 +0000

Introduction

Welcome to the world of MongoDB! If you're new to databases and want to learn how to manage them effectively, you're in the right place. MongoDB is a popular choice for storing and retrieving data in modern applications, and understanding its commands is essential for any developer.

In this beginner-friendly guide, we'll walk through the essential MongoDB commands you need to know. We'll cover three main areas: Databases, Collections, and Documents. By the end of this journey, you'll feel confident navigating and manipulating data in MongoDB like a pro.

Let's dive in and explore the basics of MongoDB together!

Database Commands:

Creating a Database: MongoDB facilitates database creation using the use command. If the specified database doesn't exist, MongoDB will create it automatically.



use mydatabase

Viewing Databases: To list all available databases, use the show dbs command. This command displays a list of databases along with their sizes.



show dbs

Switching Databases: MongoDB allows switching between databases using the use command. This command switches to the specified database.



use dbName

Viewing Current Database: To view the current database, you can use the db command. This command displays the current database.

db

Deleting a Database: MongoDB enables dropping databases using the db.dropDatabase() command. Use this command with caution as it permanently removes the specified database and its associated data.



db.dropDatabase()

Collection Commands

Creating a Collection: Collections serve as containers for documents in MongoDB. You can create a collection using the db.createCollection() method.



db.createCollection("users")

Viewing Collections: To list all collections within a database, use the show collections command. This command displays a list of collections in the current database.



show collections

Dropping a Collection: MongoDB enables dropping collections using the db.collection.drop() method. Exercise caution when dropping collections as it permanently deletes all documents within the collection.



db.users.drop()

Document Commands

Viewing Documents: MongoDB offers various methods to view documents within a collection. This command retrieves all documents from the "users" collection.



db.users.find()

View first document: This command just return the first document which is matching the object. ```javascript

db.comments.findOne({name: 'john'})


- **_Prettified Output:_**
MongoDB allows you to view query results in a more readable format using the pretty() method. This command displays all documents in the "users" collection in a neatly formatted manner.

```javascript


db.users.find().pretty()

Inserting Documents: You can insert documents into a collection using the insertOne() or insertMany() methods.



db.users.insertOne({ name: "John", age: 30 })

Inserting Many Documents: You can insert multiple documents into a collection simultaneously using the insertMany() method.



db.users.insertMany([
    { 'name': 'John', 'fruit': 'Cherry', 'age': 5 },
    { 'name': 'Alice', 'fruit': 'Banana', 'age': 3 },
    { 'name': 'Suzen', 'fruit': 'Mango', 'age': 4 }
])

Searching in MongoDB: MongoDB offers flexible querying capabilities. You can search for documents based on specific criteria using the find() method. This command retrieves all documents from the "users" collection where the "age" field is set to "9".



db.users.find({ age: '9' })

Limiting Output: You can limit the number of documents returned by a query using the limit() method. This command limits the output to the first two documents retrieved from the "users" collection.



db.users.find().limit(2)

Counting Documents: To count the number of documents returned by a query, you can use the count() method. This command returns the total count of documents in the "users" collection.



db.users.find().count()

Updating Documents: MongoDB provides the updateOne() method to update a single document that matches the specified criteria. This command updates the age of the first document in the "users" collection where the name is "John" to 35.



db.users.updateOne(
    { name: 'John' },
    { $set: { age: 35 } }
)

Deleting Documents: Use deleteOne() or deleteMany() methods to delete documents from a collection. This command deletes the first document in the "users" collection where the name is "John".



db.users.deleteOne({ name: "John" })

Less than Find documents where age is less than 9.



db.users.find({ age: { $lt: 9 } })

Less than or Equal to: Find documents where age is less than or equal to 9.



db.users.find({ age: { $lte: 9 } })

Greater than: Find documents where age is greater than 9.



db.users.find({ age: { $gt: 9 } })

Greater than or Equal to: Find documents where age is greater than or equal to 9.



db.users.find({ age: { $gte: 9 } })

Additional Operations: MongoDB provides additional operations such as the increment operator and rename operator for advanced document manipulation.



db.users.update({ name: 'John' }, { $inc: { roll_no: 2 } })

This command increments the "roll_no" field by 2 for the document where the name is "John".



db.users.update({ name: 'John' }, { $rename: { roll_no: '10' } })

This command renames the "roll_no" field to "member" for the document where the name is "John".

FunFact😅 My data used to be scattered like socks after laundry day. But then I found MongoDB commands, and now it's all neatly paired up!

Conclusion

Understanding MongoDB commands is really important for managing databases well and building great apps. In this guide, we've learned lots of different commands. We've talked about making databases, managing collections, working with documents, and doing some cool stuff with them. By trying out these commands in your own projects, you'll get really good at using MongoDB and making awesome things. So, keep coding and have fun!

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

Different Ways to Import Files in a Node.js Project

Madhu Saini — Thu, 04 Apr 2024 10:04:14 +0000

Introduction

In my last interview, the interviewer asked me about "Different Ways to Import Files in a Node.js Project"

There are many ways to import files, and I was familiar with all of them, but I could only recall three ways at that moment.

So, In this blog we'll know some ways to import the files in a Node.js Project.

Using require()

This is the most common way to import files in Node.js.
We use require() followed by the path to the file we want to import.
Example:

const myModule = require('./myModule');

Using import (ES6)

With newer versions of Node.js and when using ECMAScript Modules (ESM), we can use the import keyword.
Example:

import myModule from './myModule';

Using module.exports and require

When we want to export multiple things from a file in Node.js, we can use module.exports to export an object containing those things.
Then, we use require() to import that object and access its properties.
Example:

// In myModule.js
module.exports = {
  myFunction: function() {
    // Function code here
  },
  myVariable: 'Hello'
};

// In another file
const myModule = require('./myModule');
myModule.myFunction();
console.log(myModule.myVariable);

Using export and import (ES6)

Similar to module.exports and require(), we can use export to export multiple things from a file and import to import them.
Example:

// In myModule.js
export const myFunction = function() {
  // Function code here
};

export const myVariable = 'Hello';

// In another file
import { myFunction, myVariable } from './myModule';
myFunction();
console.log(myVariable);

These are the main ways to import files in a Node.js project. Each method has its use cases, so it's essential to understand them to choose the right one for your project.

Conclusion

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

How to remove background of an image with CSS

Madhu Saini — Wed, 03 Apr 2024 11:32:40 +0000

Introduction

Have you ever wanted to make the background of an image vanish on your website? Well, you're in luck! With just one line of CSS code, you can achieve this effect without the need for any fancy software or complex tools. In this beginner-friendly guide, we'll walk through the steps to remove the background of an image using CSS.

Understanding the CSS Property

The magic lies in the mix-blend-mode CSS property. This property allows you to specify how an element's content should blend with the content of its parent element or the element behind it. By setting mix-blend-mode: multiply;, we can remove the background of an image and make it transparent.

Setting Up Your HTML Document

This is my html code, as you can see my image have a write background and my html body have some other background color and I need to remove this white background and wanted to make it transparent.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
        }
    </style>
</head>
<body>
    <img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>

Now, if I want to remove the background of the image, I can simply add only one line of code and that's mix-blend-mode: multiply;.
You can also add it to your image add check if that works for you or not.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>

And that's it! With just one simple lines of CSS, you can effortlessly remove the background of an image on your webpage. Give it a try and see the magic happen! Happy coding!

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

5 Ways to Become a Better Developer

Madhu Saini — Tue, 02 Apr 2024 15:26:55 +0000

Introduction

Being a developer is more than just writing lines of code. It's about continuously improving your skills, staying updated with the latest technologies, and honing your problem-solving abilities. Whether you're just starting your journey in programming or you're a seasoned developer looking to enhance your skills, here are five simple ways to become a better developer.

1. Practice Regularly

Practice makes perfect, and this holds true for programming as well. Set aside time each day to write code, work on personal projects, or solve coding challenges. The more you code, the better you'll become at it. Additionally, don't shy away from revisiting old projects or tackling new ones. Each project presents an opportunity to learn something new and improve your skills.

Example: If you're learning web development, create a personal website where you can showcase your projects and skills. Experiment with different technologies and techniques, such as HTML, CSS, JavaScript, and frameworks like React or Angular.

2. Learn from Others

Don't hesitate to seek guidance and learn from experienced developers. Join online communities, forums, and coding meetups where you can connect with other developers, ask questions, and share knowledge. Reading code written by more experienced developers and understanding their thought processes can significantly improve your own coding style and problem-solving abilities.

Example: Participate in open-source projects on platforms like GitHub. Contribute to projects that interest you and collaborate with other developers. By reviewing and contributing to code written by experienced developers, you'll gain valuable insights and feedback.

3. Stay Updated

The field of technology is constantly evolving, with new languages, frameworks, and tools emerging regularly. Stay updated with the latest trends and advancements by reading tech blogs, following industry experts on social media, and attending conferences and workshops. Continuous learning is essential for staying relevant and competitive in the fast-paced world of software development.

Example: If you're a mobile app developer, stay informed about the latest updates and features in iOS and Android development. Follow Apple and Google developer blogs, join relevant online communities, and participate in conferences like WWDC (Apple Worldwide Developers Conference) and Google I/O.

4. Focus on Problem-Solving

Programming is essentially about solving problems. Instead of just focusing on writing code, focus on understanding the problem at hand and finding the most efficient and elegant solution. Break down complex problems into smaller, manageable tasks, and use algorithms and data structures to optimize your solutions. Practice solving algorithmic problems and puzzles to sharpen your problem-solving skills.

Example: Before diving into writing code, take some time to analyze the problem statement and identify potential edge cases or constraints. Use techniques like pseudocode and whiteboarding to sketch out your solution before writing actual code. This approach will help you develop a clear understanding of the problem and devise a more efficient solution.

5. Seek Feedback and Iterate

Don't be afraid to seek feedback on your code from peers, mentors, or online communities. Constructive feedback can help you identify areas for improvement and learn from your mistakes. Embrace a growth mindset and be open to constructive criticism. Use feedback to iterate on your code and continually refine your skills.

Example: After completing a project or solving a coding challenge, ask for feedback from your peers or post your code on platforms like Stack Overflow for review. Pay attention to suggestions for improvement and use them to refactor your code and make it more efficient and maintainable.

Conclusion

Becoming a better developer requires dedication, continuous learning, and a willingness to step out of your comfort zone. By practicing regularly, learning from others, staying updated, focusing on problem-solving, and seeking feedback, you can enhance your skills and become a more proficient developer. Remember that improvement takes time and effort, so stay patient and persistent on your journey to mastery.

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻