DEV Community: Santosh Premi Adhikari

what is tRPC ? how to use it in react project?

Santosh Premi Adhikari — Fri, 04 Apr 2025 13:09:24 +0000

tRPC is a modern RPC framework that allows developers to create fully type-safe APIs with TypeScript in full-stack applications. It combines concepts from REST and GraphQL, providing a type-safe way to define and call API procedures. Here's how you can use tRPC in your React project:

1. Installation

First, you need to install the necessary dependencies. You'll need @trpc/server, @trpc/client, @trpc/react-query, and @tanstack/react-query for data fetching and state management.

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query

2. Server-Side Setup

Define your tRPC router and procedures on the server. Here's an example of a simple router:

// server.ts
import { router, publicProcedure } from '@trpc/server';

const appRouter = router({
  greet: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      return {
        greeting: `Hello, ${input.name}!`,
      };
    }),
});

export type AppRouter = typeof appRouter;

3. Client-Side Setup

Create a tRPC client in your React project to communicate with the server.

// utils/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server';

export const trpc = createTRPCReact<AppRouter>();

4. Provide tRPC Client

Wrap your React application with the tRPC provider to make the client available throughout your app.

// App.tsx
import { trpc } from './utils/trpc';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <trpc.Provider queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

5. Use tRPC in React Components

You can now use tRPC hooks in your React components to call procedures defined on the server.

// components/Greeting.tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';

function Greeting() {
  const { data, isLoading, isError } = useQuery(
    trpc.greet.useQuery({ name: 'World' })
  );

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return <div>{data.greeting}</div>;
}

6. Run the Application

Start your server and React application. The React component will fetch data from the tRPC endpoint and display the greeting.

Advantages of Using tRPC

Type Safety: tRPC ensures that the client and server share the same type definitions, reducing the risk of runtime errors.
Simplified API Calls: tRPC simplifies API calls by allowing direct function calls from the client to the server.
Improved Development Efficiency: The type safety and simplified API calls lead to faster development and fewer bugs.
Flexible Integration: tRPC can be integrated with various frameworks and libraries, such as React Query for data fetching and state management.

By following these steps, you can set up tRPC in your React project and start building a fully type-safe API. This setup will help you create a more robust and maintainable full-stack application. For more detailed information and advanced usage, you can refer to the tRPC documentation.

Ways to Optimize PostgreSQL Queries

Santosh Premi Adhikari — Mon, 31 Mar 2025 16:07:54 +0000

PostgreSQL is a powerful open-source relational database system. However, as data volumes grow and queries become more complex, performance issues can arise. Here are some of the best ways to optimize PostgreSQL queries:

1. Index Optimization

Indexes are critical for improving query performance, as they allow the database to quickly locate the required data without scanning the entire table.

Create Appropriate Indexes: Index columns frequently used in WHERE clauses, JOIN conditions, and ORDER BY clauses. For example, if you often query users by their email, create an index: CREATE INDEX idx_users_email ON users(email);.
Avoid Over-Indexing: Each index adds overhead to INSERT, UPDATE, and DELETE operations. Only index columns that are truly necessary.
Choose the Right Index Type: Select the appropriate index type based on your query needs. B-tree indexes are suitable for range queries, Hash indexes for equality checks, and GIN/GiST indexes for full-text search and geometric data.

2. Query Structure Optimization

Avoid Using SELECT: Only select the columns you need to reduce data transfer and processing overhead. For example, use SELECT name, salary FROM employees WHERE salary > 50000; instead of SELECT * FROM employees WHERE salary > 50000;.
Optimize JOINs: Ensure that columns used in JOIN conditions are indexed, and prefer INNER JOIN over OUTER JOIN whenever possible, as the former is generally faster.
Limit the Number of Returned Rows: If you only need a subset of data, use the LIMIT clause to restrict the number of returned rows. For example, SELECT * FROM orders ORDER BY created_at DESC LIMIT 10;.

3. Use EXPLAIN and ANALYZE

EXPLAIN: Use the EXPLAIN command to view the query execution plan and identify potential bottlenecks. For example, EXPLAIN SELECT * FROM orders WHERE customer_id = 123;.
ANALYZE: Use EXPLAIN ANALYZE to get actual execution times and row counts for a more detailed analysis of query performance.

4. Regular Maintenance

VACUUM and ANALYZE: Regularly run VACUUM ANALYZE to update statistics and reclaim storage space. This helps the PostgreSQL query planner make better decisions.
REINDEX: If indexes become bloated or corrupted, use the REINDEX command to rebuild them.

5. Table Partitioning

For large datasets, table partitioning can significantly improve query performance by reducing the amount of data that needs to be scanned.

6. Connection Pooling

Connection pooling reduces the overhead of frequently opening and closing database connections. Tools like pgBouncer can help manage database connections efficiently.

7. Optimize Subqueries and CTEs

CTE Materialization: Starting from PostgreSQL 12, use NOT MATERIALIZED to control whether a CTE is materialized, avoiding unnecessary overhead.
Inline Subqueries: Simplify subqueries by inlining them to avoid the overhead of creating temporary tables.

By implementing these strategies, you can significantly enhance PostgreSQL query performance, ensuring your database remains efficient even under high load and with large datasets.

JavaScript array methods: Solving the Scenario based Questions

Santosh Premi Adhikari — Fri, 21 Mar 2025 11:04:09 +0000

Let's go through each question and provide solutions using JavaScript array methods.

//Dataset 1: E-Commerce Product Sales

const products = [
  {
    id: 1,
    name: "Wireless Headphones",
    category: "Electronics",
    brand: "TechGadget",
    price: 149.99,
    rating: 4.7,
    soldUnits: 1200,
    reviews: [
      { userId: 101, comment: "Great sound quality!", rating: 5 },
      { userId: 102, comment: "Battery life is short", rating: 3 }
    ],
    relatedProducts: [2, 3]
  },
  {
    id: 2,
    name: "Smartwatch",
    category: "Electronics",
    brand: "FitWear",
    price: 199.99,
    rating: 4.2,
    soldUnits: 850,
    reviews: [
      { userId: 103, comment: "Love the fitness tracking", rating: 4 }
    ],
    relatedProducts: [1, 4]
  },
  // ... more products
];
//Dataset 2: User Activity Logs
const userActivity = [
  {
    userId: 101,
    username: "johndoe",
    actions: [
      { timestamp: "2023-10-05T09:15:00", action: "login", ip: "192.168.1.1" },
      { timestamp: "2023-10-05T09:20:30", action: "add_to_cart", product: "Wireless Headphones" },
      { timestamp: "2023-10-05T09:25:45", action: "checkout", amount: 149.99 }
    ],
    lastLogin: "2023-10-05T09:15:00",
    isActive: true
  },
  {
    userId: 102,
    username: "janedoe",
    actions: [
      { timestamp: "2023-10-05T10:30:00", action: "login", ip: "192.168.1.2" },
      { timestamp: "2023-10-05T10:35:00", action: "view_product", product: "Smartwatch" }
    ],
    lastLogin: "2023-10-05T10:30:00",
    isActive: false
  },
  // ... more users
];

E-Commerce Product Sales Dataset

Question 1: Total Sales by Category

Calculate the total revenue generated per product category.

const totalSalesByCategory = products.reduce((acc, product) => {
  const category = product.category;
  const revenue = product.price * product.soldUnits;

  if (acc[category]) {
    acc[category] += revenue;
  } else {
    acc[category] = revenue;
  }

  return acc;
}, {});

console.log(totalSalesByCategory);

Step-by-Step Explanation:

We use the reduce() method on the products array.
The accumulator (acc) starts as an empty object.
For each product, we calculate the revenue by multiplying price and soldUnits.
We check if the product's category already exists in the accumulator.
If it does, we add the revenue to the existing value.
If it doesn't, we create a new property with the category name and set its value to the revenue.
The result is an object where each key is a category and each value is the total revenue for that category.

Expected Output:

{
  Electronics: 149.99*1200 + 199.99*850 + 89.99*950 + ... (sum of all Electronics products),
  Accessories: 49.99*900 + 19.99*2500 + ... (sum of all Accessories products)
}

Question 2: High-Selling Low-Rated Products

Find products with soldUnits > 1000 but rating < 4.0.

const highSellingLowRated = products.filter(product => 
  product.soldUnits > 1000 && product.rating < 4.0
);

console.log(highSellingLowRated);

Step-by-Step Explanation:

We use the filter() method on the products array.
The callback function checks if a product has soldUnits > 1000 and rating < 4.0.
Only products that meet both conditions are included in the resulting array.

Expected Output:
An array of products that have sold more than 1000 units but have a rating below 4.0.

Question 3: Discounted Prices

Add a discountedPrice field to each product (15% off if rating >= 4.5, 10% otherwise).

const productsWithDiscount = products.map(product => {
  const discount = product.rating >= 4.5 ? 0.15 : 0.10;
  return {
    ...product,
    discountedPrice: product.price * (1 - discount)
  };
});

console.log(productsWithDiscount);

Step-by-Step Explanation:

We use the map() method to create a new array with modified products.
For each product, we determine the discount percentage based on its rating.
We create a new object that includes all original properties plus the discountedPrice.
The discountedPrice is calculated by applying the appropriate discount to the original price.

Expected Output:
An array of products where each product has an additional discountedPrice property.

Question 4: Top Reviewers

Extract unique user IDs of users who left reviews with a rating of 5.

const topReviewers = [...new Set(products.flatMap(product => 
  product.reviews
    .filter(review => review.rating === 5)
    .map(review => review.userId)
))];

console.log(topReviewers);

Step-by-Step Explanation:

We use flatMap() to create a single array of all reviews across all products.
We filter this array to keep only reviews with a rating of 5.
We extract the userId from each of these reviews.
We use Set to remove duplicate user IDs and convert it back to an array.

Expected Output:
An array of unique user IDs who left 5-star reviews.

Question 5: Related Product Chains

For each product, list its related products and their categories.

const productRelatedCategories = products.map(product => {
  return {
    productId: product.id,
    relatedProducts: product.relatedProducts.map(relatedId => {
      const relatedProduct = products.find(p => p.id === relatedId);
      return {
        id: relatedId,
        name: relatedProduct.name,
        category: relatedProduct.category
      };
    })
  };
});

console.log(productRelatedCategories);

Step-by-Step Explanation:

We use map() to create a new array with transformed product information.
For each product, we find its related products using their IDs.
For each related product, we extract its ID, name, and category.
The result is an array where each element contains the original product ID and information about its related products.

Expected Output:
An array where each element contains a product ID and an array of its related products with their details.

User Activity Logs Dataset

Question 6: Active Users with Recent Activity

Filter users who are isActive and logged in within the last 24 hours.

// Assuming today is 2023-10-06
const oneDayAgo = new Date("2023-10-05T00:00:00").toISOString();

const activeRecentUsers = userActivity.filter(user => 
  user.isActive && new Date(user.lastLogin) >= new Date(oneDayAgo)
);

console.log(activeRecentUsers);

Step-by-Step Explanation:

We calculate the timestamp for 24 hours ago.
We use filter() to find users who are active (isActive: true).
We check if the user's lastLogin is within the last 24 hours.
The result is an array of users who meet both conditions.

Expected Output:
An array of users who are active and logged in within the last 24 hours.

Question 7: Checkout Frequency

Count how many users completed a checkout action.

const checkoutCount = userActivity.reduce((count, user) => {
  const hasCheckout = user.actions.some(action => action.action === "checkout");
  return count + (hasCheckout ? 1 : 0);
}, 0);

console.log(checkoutCount);

Step-by-Step Explanation:

We use reduce() to count the number of users who completed a checkout.
For each user, we check if any of their actions is a checkout.
We increment the count for each user who has at least one checkout action.
The result is the total number of users who completed a checkout.

Expected Output:
A number representing how many users completed a checkout.

Question 8: Session Duration

Calculate the average time (in minutes) users spent between login and their last action.

const averageSessionDuration = userActivity
  .filter(user => user.actions.length > 0)
  .map(user => {
    const loginTime = new Date(user.actions[0].timestamp);
    const lastActionTime = new Date(user.actions[user.actions.length - 1].timestamp);
    return (lastActionTime - loginTime) / 60000; // Convert ms to minutes
  })
  .reduce((sum, duration) => sum + duration, 0) / userActivity.length;

console.log(averageSessionDuration);

Step-by-Step Explanation:

We filter out users with no actions.
For each remaining user, we calculate the time between their first (login) and last action.
We convert the time difference from milliseconds to minutes.
We use reduce() to sum all session durations.
We divide by the number of users to get the average.
The result is the average session duration in minutes.

Expected Output:
A number representing the average session duration in minutes.

Question 9: IP Address Analysis

Group users by their IP addresses and count how many actions each IP has.

const ipActionCount = userActivity.flatMap(user => 
  user.actions.map(action => ({
    ip: action.ip,
    userId: user.userId
  }))
).reduce((acc, action) => {
  if (acc[action.ip]) {
    acc[action.ip].count++;
    acc[action.ip].users.add(action.userId);
  } else {
    acc[action.ip] = { count: 1, users: new Set([action.userId]) };
  }
  return acc;
}, {});

console.log(ipActionCount);

Step-by-Step Explanation:

We use flatMap() to create an array of all actions with their corresponding IP addresses.
We use reduce() to group actions by IP address.
For each IP address, we count the number of actions and track unique users.
The result is an object where each key is an IP address and the value contains the action count and unique users.

Expected Output:
An object where each key is an IP address and the value is an object containing the action count and unique users for that IP.

Question 10: Product Popularity

Find the product viewed or purchased most frequently.

const productPopularity = userActivity
  .flatMap(user => user.actions
    .filter(action => action.action === "view_product" || action.action === "checkout")
    .map(action => action.product)
  )
  .reduce((acc, product) => {
    acc[product] = (acc[product] || 0) + 1;
    return acc;
  }, {});

const mostPopularProduct = Object.entries(productPopularity)
  .reduce((max, entry) => entry[1] > max[1] ? entry : max, ["", 0]);

console.log(mostPopularProduct);

Step-by-Step Explanation:

We use flatMap() to create an array of all view_product and checkout actions.
We extract the product names from these actions.
We use reduce() to count how many times each product appears.
We find the product with the highest count using another reduce().
The result is the most popular product and its count.

Expected Output:
An array where the first element is the most popular product name and the second element is its count.

Combined Challenges

Question 11: User Purchase History

For each user, create an array of products they purchased (filter checkout actions).

const userPurchaseHistory = userActivity.map(user => {
  return {
    userId: user.userId,
    purchases: user.actions
      .filter(action => action.action === "checkout")
      .map(action => {
        const product = products.find(p => p.name === action.product);
        return {
          name: action.product,
          price: product.price,
          quantity: 1 // Assuming each checkout is for one unit
        };
      })
  };
});

console.log(userPurchaseHistory);

Step-by-Step Explanation:

We use map() to create a new array with purchase history for each user.
For each user, we filter their actions to find checkout actions.
For each checkout action, we find the corresponding product in the products array.
We create an object with purchase details (name, price, quantity).
The result is an array where each element contains a user ID and their purchase history.

Expected Output:
An array where each element contains a user ID and an array of their purchases.

Question 12: Cross-Sell Opportunities

For users who bought "Wireless Headphones", suggest related products from the sales dataset.

const wirelessHeadphones = products.find(p => p.name === "Wireless Headphones");
const relatedProductIds = wirelessHeadphones.relatedProducts;

const crossSellSuggestions = products
  .filter(p => relatedProductIds.includes(p.id) && p.name !== "Wireless Headphones")
  .map(p => ({
    id: p.id,
    name: p.name,
    category: p.category
  }));

console.log(crossSellSuggestions);

Step-by-Step Explanation:

We find the "Wireless Headphones" product in the products array.
We extract the IDs of its related products.
We filter the products array to find products with matching IDs (excluding the headphones themselves).
We map these products to a simplified format.
The result is an array of suggested cross-sell products.

Expected Output:
An array of products related to "Wireless Headphones" that could be suggested for cross-selling.

Question 13: Fraud Detection

Identify users who logged in from multiple unique IPs in a single day.

const usersWithMultipleIPs = userActivity.filter(user => {
  const loginActions = user.actions.filter(action => action.action === "login");
  const ips = new Set(loginActions.map(action => action.ip));
  return ips.size > 1;
});

console.log(usersWithMultipleIPs);

Step-by-Step Explanation:

We filter users to find those with multiple login IPs.
For each user, we filter their actions to find login actions.
We extract the IPs from these login actions and store them in a Set (which automatically removes duplicates).
We check if the size of the Set is greater than 1.
The result is an array of users who logged in from multiple unique IPs.

Expected Output:
An array of users who logged in from multiple unique IPs.

Question 14: Revenue per User

Calculate the total spend per user (sum amount from checkout actions).

const revenuePerUser = userActivity.map(user => {
  const totalSpent = user.actions
    .filter(action => action.action === "checkout")
    .reduce((sum, action) => sum + action.amount, 0);
  return {
    userId: user.userId,
    username: user.username,
    totalSpent: totalSpent
  };
});

console.log(revenuePerUser);

Step-by-Step Explanation:

We use map() to create an array with spending information for each user.
For each user, we filter their actions to find checkout actions.
We use reduce() to sum the amounts from these checkout actions.
We create an object with the user's ID, username, and total spent.
The result is an array where each element contains a user's spending information.

Expected Output:
An array where each element contains a user's ID, username, and total amount spent.

Question 15: Best-Selling Brands

Rank brands by total revenue generated from sold units.

const brandRevenue = products.reduce((acc, product) => {
  const revenue = product.price * product.soldUnits;
  if (acc[product.brand]) {
    acc[product.brand] += revenue;
  } else {
    acc[product.brand] = revenue;
  }
  return acc;
}, {});

const rankedBrands = Object.entries(brandRevenue)
  .sort((a, b) => b[1] - a[1]);

console.log(rankedBrands);

Step-by-Step Explanation:

We use reduce() to calculate total revenue per brand.
For each product, we calculate revenue and accumulate it by brand.
We convert the resulting object to an array of entries.
We sort this array in descending order based on revenue.
The result is an array of brands ranked by their total revenue.

Expected Output:
An array where each element is a brand and its total revenue, sorted from highest to lowest.

Advanced Aggregations

Question 16: Monthly Sales Trend

Group product sales by month (extract from lastLogin or action timestamps).

const monthlySales = userActivity
  .flatMap(user => user.actions
    .filter(action => action.action === "checkout")
    .map(action => ({
      month: new Date(action.timestamp).getMonth() + 1, // Months are 0-based
      amount: action.amount
    }))
  )
  .reduce((acc, sale) => {
    if (acc[sale.month]) {
      acc[sale.month].total += sale.amount;
      acc[sale.month].transactions++;
    } else {
      acc[sale.month] = { total: sale.amount, transactions: 1 };
    }
    return acc;
  }, {});

console.log(monthlySales);

Step-by-Step Explanation:

We use flatMap() to create an array of all checkout actions with their month and amount.
We extract the month from each action's timestamp.
We use reduce() to accumulate total sales and transaction counts per month.
The result is an object where each key is a month number and the value contains total sales and transaction count.

Expected Output:
An object where each key is a month number (1-12) and the value is an object containing total sales and transaction count for that month.

Question 17: User Engagement Score

Assign a score to each user based on actions (e.g., login=1, add_to_cart=3, checkout=5).

const engagementScores = userActivity.map(user => {
  const score = user.actions.reduce((total, action) => {
    switch(action.action) {
      case "login": return total + 1;
      case "view_product": return total + 2;
      case "add_to_cart": return total + 3;
      case "checkout": return total + 5;
      case "remove_from_cart": return total - 2;
      default: return total;
    }
  }, 0);
  return {
    userId: user.userId,
    username: user.username,
    score: score,
    engagementLevel: score > 10 ? "high" : score > 5 ? "medium" : "low"
  };
});

console.log(engagementScores);

Step-by-Step Explanation:

We use map() to create an array with engagement scores for each user.
For each user, we calculate their score based on their actions.
Different actions contribute different amounts to the score.
We categorize the engagement level based on the total score.
The result is an array where each element contains a user's engagement score and level.

Expected Output:
An array where each element contains a user's ID, username, engagement score, and engagement level.

Question 18: Product Review Sentiment

Average the ratings for each product and flag those with an average below 3.5.

const productRatings = products.map(product => {
  const totalRatings = product.reviews.reduce((sum, review) => sum + review.rating, 0);
  const averageRating = totalRatings / product.reviews.length;
  return {
    id: product.id,
    name: product.name,
    averageRating: averageRating,
    needsImprovement: averageRating < 3.5
  };
});

console.log(productRatings);

Step-by-Step Explanation:

We use map() to create an array with rating information for each product.
For each product, we calculate the total of all review ratings.
We divide by the number of reviews to get the average rating.
We flag products with an average rating below 3.5.
The result is an array where each element contains a product's rating information.

Expected Output:
An array where each element contains a product's ID, name, average rating, and a flag indicating if improvement is needed.

Question 19: Cart Abandonment

Find users who added items to their cart but never checked out.

const cartAbandoners = userActivity.filter(user => {
  const addedToCart = user.actions.some(action => action.action === "add_to_cart");
  const checkedOut = user.actions.some(action => action.action === "checkout");
  return addedToCart && !checkedOut;
});

console.log(cartAbandoners);

Step-by-Step Explanation:

We filter users to find those who added items to their cart but never checked out.
For each user, we check if they have any "add_to_cart" actions.
We check if they have any "checkout" actions.
We include users who have added to cart but haven't checked out.
The result is an array of users who abandoned their cart.

Expected Output:
An array of users who added items to their cart but never completed a checkout.

Question 20: Brand Loyalty

For each brand, calculate the percentage of users who purchased multiple products from it.

// First, create a map of users to the brands they purchased
const userBrandPurchases = userActivity.map(user => {
  const purchasedBrands = new Set();
  user.actions
    .filter(action => action.action === "checkout")
    .forEach(action => {
      const product = products.find(p => p.name === action.product);
      if (product) purchasedBrands.add(product.brand);
    });
  return {
    userId: user.userId,
    purchasedBrands: purchasedBrands
  };
});

// Then, calculate brand loyalty
const brandLoyalty = products
  .reduce((acc, product) => {
    acc[product.brand] = { 
      loyalUsers: 0, 
      totalUsers: 0 
    };
    return acc;
  }, {})

userBrandPurchases.forEach(user => {
  if (user.purchasedBrands.size === 1) {
    const brand = user.purchasedBrands.values().next().value;
    brandLoyalty[brand].loyalUsers++;
  }
  user.purchasedBrands.forEach(brand => {
    brandLoyalty[brand].totalUsers++;
  });
});

// Calculate percentages
const brandLoyaltyPercentages = Object.entries(brandLoyalty).map(([brand, data]) => {
  return {
    brand: brand,
    loyaltyPercentage: (data.loyalUsers / data.totalUsers * 100).toFixed(2)
  };
});

console.log(brandLoyaltyPercentages);

Step-by-Step Explanation:

First, we create a map of users to the brands they purchased.
For each user, we find all brands they purchased through their checkout actions.
We then initialize a loyalty tracker for each brand.
For each user, if they only purchased from one brand, we count them as loyal to that brand.
We count the total number of users who purchased from each brand.
Finally, we calculate the loyalty percentage for each brand.
The result is an array where each element contains a brand and its loyalty percentage.

Expected Output:
An array where each element contains a brand name and the percentage of users who purchased only that brand.

These solutions demonstrate how to use JavaScript array methods to manipulate and analyze complex datasets, similar to what you might encounter in real-world software development scenarios.

Essential JavaScript Methods Every Developer Should Know

Santosh Premi Adhikari — Sat, 15 Mar 2025 08:45:14 +0000

In today's blog post, we'll explore some of the most powerful JavaScript ES6 (ECMAScript 2015) features and methods that have transformed modern JavaScript development. These additions have simplified common tasks, improved code readability, and made JavaScript more expressive and functional.

Let's examine these essential methods with practical examples:

Array Methods

1. map()

Creates a new array by applying a transformation function to each element of the original array.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

2. filter()

Creates a new array containing only elements that pass a specified condition.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

3. reduce()

Applies a function against an accumulator and each element to reduce the array to a single value.

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, current) => acc + current, 0);
console.log(total); // Output: 15

4. find()

Returns the first element in the array that satisfies a testing function.

const users = [
  { id: 1, name: 'Snehal' },
  { id: 2, name: 'Rajeev' },
  { id: 3, name: 'Moon' }
];
const user = users.find(user => user.id === 2);
console.log(user); // Output: { id: 2, name: 'Rajeev' }

5. includes()

Checks if an array contains a specific value.

const numbers = [1, 2, 3, 4, 5];
const hasFive = numbers.includes(5);
console.log(hasFive); // Output: true

String Methods

6. String.includes()

Checks if a string contains a specified substring.

const greeting = 'Hello Artisans!, I am Rajeev Moon.';
const hasArtisans = greeting.includes('Artisans');
console.log(hasArtisans); // Output: true

Object Methods

7. Object.keys()

Returns an array of a object's own enumerable property names.

const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personKeys = Object.keys(person);
console.log(personKeys); // Output: ['name', 'age', 'job']

8. Object.entries()

Returns an array of a object's own enumerable property [key, value] pairs.

const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personEntries = Object.entries(person);
console.log(personEntries); 
// Output: [['name', 'Rajeev Moon'], ['age', 30], ['job', 'Developer']]

Language Features

9. Arrow Functions

Provide a concise syntax for functions with lexical this binding.

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

10. Template Literals

Enable string interpolation and multiline strings using backticks.

const name = 'Rajeev Moon';
const message = `Hello, ${name}! Nice to meet you.`;
console.log(message); // Output: Hello, Rajeev Moon! Nice to meet you.

11. Destructuring Assignment

Extract values from arrays and objects into variables.

const person = { name: 'Rajeev Moon', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Rajeev Moon 30

12. Spread Syntax (...)

For Arrays

Expands elements of an iterable.

const numbers = [1, 2, 3];
const extendedNumbers = [...numbers, 4, 5];
console.log(extendedNumbers); // Output: [1, 2, 3, 4, 5]

For Objects

Copies own enumerable properties from a source object to a target.

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

13. Rest Parameters

Collects remaining function parameters into an array.

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

14. Object Literal Enhancements

Allows shorter syntax for defining object properties.

const x = 10, y = 20;
const point = { x, y }; // Equivalent to { x: 10, y: 20 }
console.log(point); // Output: { x: 10, y: 20 }

15. Default Parameters

Allows function parameters to have default values.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet('Rajeev')); // Output: Hello, Rajeev!

16. Optional Chaining (?.)

Safely accesses nested properties without worrying about undefined references.

const user = { address: { city: 'New York' } };
console.log(user.address?.city); // Output: New York
console.log(user.profile?.email); // Output: undefined

17. Nullish Coalescing (??)

Returns the right-hand side operand if the left-hand side is null or undefined.

const count = null ?? 5;
console.log(count); // Output: 5

const name = '' ?? 'Guest';
console.log(name); // Output: (empty string)

Additional Important Methods

18. Array.from()

Creates a new array from an array-like or iterable object.

const arrayLike = document.querySelectorAll('div');
const realArray = Array.from(arrayLike);

19. String.padStart() and String.padEnd()

Pads a string with another string until it reaches a specified length.

console.log('5'.padStart(3, '0')); // Output: '005'
console.log('Hello'.padEnd(10, '.')); // Output: 'Hello.....'

20. Promise.all()

Waits for all promises in an iterable to settle.

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
Promise.all([promise1, promise2])
  .then(results => console.log(results)); // Output: [1, 2]

These ES6 features and methods form the foundation of modern JavaScript development. Mastering them will make your code more concise, readable, and efficient while reducing the amount of boilerplate code you need to write.

Type of Neural Networks

Santosh Premi Adhikari — Mon, 20 Jan 2025 15:40:02 +0000

Introduction
This blog provides a concise yet comprehensive overview of some of the most important neural network types, including their fundamental workings and practical applications. Whether you're a beginner or a seasoned professional, this guide will help you grasp the essential concepts and explore resources for deeper learning.

Perceptron
The simplest form of a neural network, consisting of a single neuron with adjustable weights and bias. Used for binary classification tasks.

Pallavi Bharadwaj: https://towardsdatascience.com/perceptron-and-its-implementation-in-python-f87d6c7aa428

Feedforward Neural Network (FNN)
Information flows in one direction, from input to output, without cycles. Applied in pattern recognition and simple classification tasks.

Adarsh Menon:https://towardsdatascience.com/creating-neural-networks-from-scratch-in-python-6f02b5dd911

Multilayer Perceptron (MLP)
A type of feedforward neural network with multiple hidden layers, enabling the modeling of complex relationships. Used in classification and regression tasks.

Marcus Sena: https://python.plainenglish.io/building-the-foundations-a-step-by-step-guide-to-implementing-multi-layer-perceptrons-in-python-51ebd9d7ecbe

Convolutional Neural Network (CNN)
Specialized for processing grid-like data such as images; employs convolutional layers to detect features. Commonly used in image and video recognition.

Mayur Ingole:https://medium.com/@myringoleMLGOD/simple-convolutional-neural-network-cnn-for-dummies-in-pytorch-a-step-by-step-guide-6f4109f6df80

Recurrent Neural Network (RNN)
Designed for sequential data; has connections that form directed cycles, allowing information persistence. Applied in language modeling and time-series analysis.

Javaid Nabi:https://towardsdatascience.com/recurrent-neural-networks-rnns-3f06d7653a85
Abhinav Mishra: https://medium.com/@abhinav.mishra123/building-a-recurrent-neural-network-rnn-with-pytorch-9358a696d7dc

Long Short-Term Memory (LSTM)
A type of RNN capable of learning long-term dependencies; addresses the vanishing gradient problem. Utilized in speech recognition and text generation.

Ahmad Anis: https://cnvrg.io/pytorch-lstm/
deeplearningwizard:https://www.deeplearningwizard.com/deep_learning/practical_pytorch/pytorch_lstm_neuralnetwork/#step-6-instantiate-optimizer-class

Generative Adversarial Network (GAN)
Consists of a generator and a discriminator network; the generator creates data, and the discriminator evaluates it. Used for generating realistic images and data augmentation.

Venkatesh Tata(Good explanation with example):
https://becominghuman.ai/understanding-and-building-generative-adversarial-networks-gans-8de7c1dc0e25

Autoencoder
Learns to compress input data into a latent space representation and reconstruct it back; used for dimensionality reduction and denoising.

Syed Hasan:https://medium.com/@syed_hasan/autoencoders-theory-pytorch-implementation-a2e72f6f7cb7
Arxiv Paper:https://arxiv.org/pdf/2003.05991

Transformer
Employs self-attention mechanisms to process sequential data without relying on recurrence; excels in natural language processing tasks.

Longxiang He:https://say-hello2y.github.io/2022-08-18/transformer
bavalpreetsinghh:https://medium.com/@bavalpreetsinghh/transformer-from-scratch-using-pytorch-28a5d1b2e033
Arxiv Paper:https://arxiv.org/pdf/1706.03762

Fine-Tuning a Pre-Trained Model in PyTorch: A Step-by-Step Guide for Beginners

Santosh Premi Adhikari — Sun, 01 Sep 2024 15:50:01 +0000

Fine-tuning is a powerful technique that allows you to adapt a pre-trained model to a new task, saving time and resources. This tutorial will guide you through fine-tuning a ResNet18 model for digit classification using PyTorch.

Step 1: Setting Up the Environment and Model

First, let's import the required libraries and set up the pre-trained model.

import torch
import torch.nn as nn
import torch.optim as optim
import torchvision
import torchvision.transforms as transforms
from torchvision import models

# Load a pre-trained ResNet18 model
model = models.resnet18(pretrained=True)

# Modify the last layer to match MNIST classes (10 classes)
model.fc = nn.Linear(model.fc.in_features, 10)

# Set the model to training mode and use GPU if available
device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
model = model.to(device)

Explanation: We are using ResNet18, which is pre-trained on ImageNet. The last layer is modified to fit our new task (10 classes for digits 0-9).

Step 2: Preparing the Dataset

We need to resize the MNIST images to 224x224 because ResNet18 expects this size.

# Transform images to 224x224 and normalize
transform = transforms.Compose([
    transforms.Resize(224),
    transforms.ToTensor(),
    transforms.Normalize((0.5,), (0.5,))
])

# Load the MNIST dataset
trainset = torchvision.datasets.MNIST(root='./data', train=True, download=True, transform=transform)
trainloader = torch.utils.data.DataLoader(trainset, batch_size=64, shuffle=True)

testset = torchvision.datasets.MNIST(root='./data', train=False, download=True, transform=transform)
testloader = torch.utils.data.DataLoader(testset, batch_size=64, shuffle=False)

Explanation: We resize images and normalize them to fit what the model expects. We also create data loaders for training and testing.

Step 3: Setting Up the Loss Function and Optimizer
Define the loss function and optimizer. We use Adam, a popular choice for fine-tuning.

# Define loss function and optimizer
criterion = nn.CrossEntropyLoss()
optimizer = optim.Adam(model.parameters(), lr=0.001)

# Learning rate scheduler to adjust the learning rate
scheduler = optim.lr_scheduler.StepLR(optimizer, step_size=7, gamma=0.1)

Explanation: CrossEntropyLoss is used for classification tasks, and Adam is chosen for optimization. The scheduler helps adjust the learning rate during training.

Step 4: Fine-Tuning the Model
Train the model for a few epochs to fine-tune it on the new task.

# Fine-tune the model
num_epochs = 5
#set num_epochs to a smaller number like 1 and use T4 GPU, wait for 4 minute may be, if training is taking too long in colab. 
for epoch in range(num_epochs):
    running_loss = 0.0
    for images, labels in trainloader:
        images, labels = images.to(device), labels.to(device)

        optimizer.zero_grad()
        outputs = model(images)
        loss = criterion(outputs, labels)
        loss.backward()
        optimizer.step()

        running_loss += loss.item()

    # Step the scheduler after each epoch
    scheduler.step()

    print(f"Epoch [{epoch+1}/{num_epochs}], Loss: {running_loss/len(trainloader):.4f}")

print('Fine-tuning complete!')

Explanation: We loop through the dataset, perform forward and backward passes, and update the model's weights. This step adapts the pre-trained model to our specific task.

Step 5: Saving the Fine-Tuned Model
Save the fine-tuned model for later use.

# Save the fine-tuned model
torch.save(model.state_dict(), 'finetuned_resnet18_mnist.pth')
print('Model saved!')

Explanation: We save the model's state dictionary (parameters) to a file. This allows us to load it later without retraining.

Step 6: Evaluating the Model
Check how well the model performs on unseen data.

# Set the model to evaluation mode
model.eval()

correct = 0
total = 0

with torch.no_grad():
    for images, labels in testloader:
        images, labels = images.to(device), labels.to(device)
        outputs = model(images)
        _, predicted = torch.max(outputs.data, 1)
        total += labels.size(0)
        correct += (predicted == labels).sum().item()

print(f'Accuracy of the fine-tuned model on the test images: {100 * correct / total:.2f}%')

Explanation: We set the model to evaluation mode and calculate accuracy on the test set to see how well the model generalizes to new data.

Step 7: Making Predictions
Finally, use the fine-tuned model to make predictions on a single image.

# Load the model for inference
model = models.resnet18()
model.fc = nn.Linear(model.fc.in_features, 10)
model.load_state_dict(torch.load('finetuned_resnet18_mnist.pth'))
model.eval()
model = model.to(device)

# Make a prediction on a single image from the test set
test_image, _ = testset[0]  # Get the first image from the test set
test_image = test_image.unsqueeze(0).to(device)  # Add a batch dimension and move to device

output = model(test_image)
_, predicted = torch.max(output, 1)

print('Predicted label:', predicted.item())

Explanation: We load the saved model, set it to evaluation mode, and use it to predict the class of a new image.
Conclusion
Fine-tuning is an efficient way to adapt powerful pre-trained models to new tasks with minimal effort. In this guide, you learned how to:

1.Set up a pre-trained model and modify it for a new task.
2.Prepare and load your dataset.
3.Train and fine-tune the model with a new dataset.
4.Save and load the model for future use.
5.Make predictions using the fine-tuned model.

Hope you found this post helpful and enjoyable.
Thank you!

Building Basic model for Understanding ML

Santosh Premi Adhikari — Sat, 31 Aug 2024 13:37:18 +0000

Simple Neural Network Model
Training Model and Saving it(.pth),
Loading model and using it for prediction.

We'll use a small dataset for demonstration, like the classic MNIST dataset, which consists of handwritten digits.

Step 1: Import Libraries and Define the Model

import torch
import torch.nn as nn
import torch.optim as optim
import torchvision
import torchvision.transforms as transforms
import matplotlib.pyplot as plt

# Define a simple neural network
class SimpleNN(nn.Module):
    def __init__(self):
        super(SimpleNN, self).__init__()
        self.fc1 = nn.Linear(28*28, 128)
        self.fc2 = nn.Linear(128, 10)

    def forward(self, x):
        x = x.view(-1, 28*28)
        x = torch.relu(self.fc1(x))
        x = self.fc2(x)
        return x

# Instantiate the model, define loss function and optimizer
model = SimpleNN()
criterion = nn.CrossEntropyLoss()
optimizer = optim.Adam(model.parameters(), lr=0.001)

Step 2: Load the Dataset and Train the Model

# Load the MNIST dataset
transform = transforms.Compose([transforms.ToTensor(), transforms.Normalize((0.5,), (0.5,))])
trainset = torchvision.datasets.MNIST(root='./data', train=True, download=True, transform=transform)
trainloader = torch.utils.data.DataLoader(trainset, batch_size=64, shuffle=True)


# Train the model
for epoch in range(1):  # Train for 1 epoch for simplicity
    for images, labels in trainloader:
        optimizer.zero_grad()
        outputs = model(images)
        loss = criterion(outputs, labels)
        loss.backward()
        optimizer.step()

print('Training complete!')

Step 3: Save the Model

# Save the model state dictionary
torch.save(model.state_dict(), 'simple_nn.pth')
print('Model saved!')

Step 4: Load the Model and Make Predictions

# Load the model state dictionary
loaded_model = SimpleNN()
loaded_model.load_state_dict(torch.load('simple_nn.pth'))
loaded_model.eval()         # Set the model to evaluation mode

# Make a prediction on a single image
test_image, label = trainset[20]   # Use the 20th image from the training set as an example
test_image = test_image.unsqueeze(0)  # Add a batch dimension


# Display the image
plt.imshow(test_image.squeeze(), cmap='gray')
plt.title(f'Actual Label: {label}')
plt.axis('off')
plt.show()

output = loaded_model(test_image)
_, predicted = torch.max(output, 1)

print('Predicted label:', predicted.item())

Hope you found this post helpful and enjoyable.
Thank you!

Set up Domain name in Vercel Project

Santosh Premi Adhikari — Wed, 14 Aug 2024 13:05:34 +0000

Navigate to the project and select 'Settings.'

Click on 'Domains' in the sidebar

Enter your domain name and click 'Add'

A pop-up window with recommendations will appear. Simply click 'Add' to proceed.

Next, click on 'Nameservers' and copy both nameservers:

ns1.vercel-dns.com
ns2.vercel-dns.com

Go to your Namecheap dashboard and click on 'Manage.'

Select 'Custom DNS' and enter the Vercel nameservers you copied

You're all set! I hope you found this guide helpful.

Thank you!