DEV Community: Shiva Aryal

🔔 Choosing the Right Toast Library for React (No Fluff, Just Facts)

Shiva Aryal — Thu, 19 Feb 2026 16:48:18 +0000

Toasts are small UI components — but they directly affect user experience.

Bad timing, poor animations, stacking glitches, or heavy bundles can quietly make your app feel unpolished.

If you're building with React, here’s a practical breakdown of the most popular toast libraries, what they’re good at, and when to use them.

1️⃣ react-hot-toast

Best for: Modern React applications that prioritize developer experience and performance.

Why developers like it:

Clean and minimal API
Headless customization support
Small bundle size
Smooth animations
Great async handling

If you're working with React Query, forms, or async-heavy workflows, this library integrates naturally and keeps things simple.

2️⃣ react-toastify

Best for: Feature-rich applications that require deep customization.

Why it's popular:

Highly configurable
Promise support
Multiple containers
Mature and stable ecosystem
Large community adoption

Downside: Slightly heavier compared to newer minimal libraries.

3️⃣ react-notifications

Best for: Projects needing broader notification systems beyond simple toasts.

Key features:

Multiple notification types
Position control
Custom styling

It works, but feels older compared to more modern alternatives.

4️⃣ react-toastr

Best for: Applications wanting animated, stacked toasts.

Offers:

Multiple visible toasts
Animation control
Classic toast-style UX

Its design philosophy feels dated for newer React projects.

5️⃣ react-toast-alert

Best for: Alert-style notification systems with moderate customization needs.

Simple and functional, but not as widely adopted today.

6️⃣ react-notify-toast

Best for: Very lightweight use cases.

Limited customization compared to modern libraries, but easy to integrate.

7️⃣ react-snackbar-alert

Best for: Material-style snackbar notifications.

A good fit for apps that follow Material Design patterns.

8️⃣ react-redux-toastr

Best for: Redux-heavy applications that need global toast state management.

Useful when:

Your app relies heavily on Redux
You want predictable global toast handling
You prefer dispatch-driven notifications

It’s unnecessary if you’re not deeply invested in Redux.

💡 Quick Recommendation Guide

Situation	Recommendation
Modern React app (Vite, Next.js, React Query)	react-hot-toast
Enterprise app needing mature ecosystem	react-toastify
Redux-based architecture	react-redux-toastr
Material-style UI	react-snackbar-alert
Small side project	react-hot-toast

🚀 Final Thoughts

Toasts should:

Be easy to implement
Stay lightweight
Not control your architecture
Not break layouts
Not feel outdated

You don’t need an over-engineered notification system.

✅ My Suggestion

If you're starting a new React project today, my recommendation is:

react-hot-toast – clean, modern, lightweight, and developer-friendly.

Pick smart. Ship fast. Focus on building real features.

I recently switched from Express.js to Elysia.js — here’s what felt better immediately

Shiva Aryal — Mon, 15 Dec 2025 14:13:43 +0000

I’ve used Express.js for years. It’s simple, flexible, and gets the job done. But as projects grow, the cracks start to show. I recently tried Elysiajs, and the difference was clear.

Things I genuinely liked about Elysia.js:

• Less boilerplate
No req, res, next everywhere. You return the response directly. Code feels cleaner and easier to read.

• Built-in validation
Request validation is part of the framework. No extra setup, no repeated schemas, no guessing if types match.

• Strong type safety
Types actually mean something. Context, params, body — everything is inferred correctly. Fewer runtime bugs.

• Better performance by default
It’s fast without trying too hard, especially with Bun. Express works, but you need effort to optimize it.

• Cleaner middleware lifecycle
Instead of one long middleware chain, Elysia gives clear hooks for each stage. Easier to reason about.

• Plugins without side effects
In Express, middleware leaks everywhere if you’re not careful. Elysia scopes things properly. Debugging becomes simpler.

• File upload and cookies built in
No need for extra libraries like multer or cookie-parser. Less dependency mess.

• OpenAPI from one source of truth
Schemas handle validation, types, and API docs together. No duplicate work.

• Testing feels natural
It uses Web Standard APIs, so testing is straightforward and clean.

Express is still solid and widely used — no hate there.
But if you care about clean code, type safety, and long-term maintainability, Elysia.js is worth a serious look.

I’ve also integrated it with Next.js, and the experience has been smooth so far.

Curious to see how far this ecosystem goes.

JavaScript #NodeJS #ElysiaJS #ExpressJS #WebDevelopment #Backend #TypeSafety #NextJS

React Google Analytics 4 Tutorial: Type-Safe GA4 Implementation with Ecommerce Tracking

Shiva Aryal — Sun, 31 Aug 2025 15:31:06 +0000

Google Analytics 4 (GA4) is powerful — but let's be honest, the default gtag snippets get messy fast. I tried multiple react ga4 libraries to implement on my ecommerce website and all provides the wrapper only. That's why I built a library @connectaryal/google-analytics — a type-safe, developer-friendly GA4 wrapper for React and Next.js.

No more guesswork, no more typos. Just clean analytics tracking.

What You Get

Easy initialization with a singleton instance
Type-safe events (no more "pageveiw" mistakes)
Ready-to-use methods for interaction, auth, and e-commerce
Debug mode for development
Works in both React & Next.js

Step 1: Create Your Google Analytics 4 Property

Before writing any code, set up your GA4 property:

Visit Google Analytics.
Click Admin (bottom left) > Create Property.
Name your property, timezone/currency, and click Next.
Add a new Web data stream for your site.
Copy your Measurement ID (looks like G-XXXXXXXXXX).

Step 2: Install the npm Package

Skip the manual gtag script and use a robust, type-safe library:

npm install @connectaryal/google-analytics
# or
yarn add @connectaryal/google-analytics
# or
pnpm add @connectaryal/google-analytics

See the package on npm: @connectaryal/google-analytics

Step 3: Initialize Analytics

The library uses a context provider for global React integration. Wrap your app at the highest level:

import { GAProvider } from "@connectaryal/google-analytics";

function App() {
  return (
    <GAProvider config={{ measurementId: "G-XXXXXXXXXX" }}>
      <YourApp />
    </GAProvider>
  );
}

Pro Tip: For Next.js, wrap your custom App or RootLayout component.

Step 4: Track Events: Page Interaction, Engagement, E-commerce

Track a Page View

import { useGoogleAnalytics } from '@connectaryal/google-analytics';

function HomePage() {
  const { trackPage } = useGoogleAnalytics();

  useEffect(() => {
    trackPage(); // auto detects current page
  }, [trackPage]);
}

Custom Engagement & Conversion

import { 
  EventCategory,
  useGoogleAnalytics,
} from '@connectaryal/google-analytics';

function VideoPlayer() {
  const { trackCustomEvent } = useGoogleAnalytics();

  const handleVideoPlay = () => {
    trackCustomEvent({
      name: "video_play",
      category: EventCategory.ENGAGEMENT,
      params: { 
        video_title: "Intro Demo", 
        video_duration: 120 
      },
    });
  };

  return (
    <video onPlay={handleVideoPlay}>
      {/* video content */}
    </video>
  );
}

E-commerce Tracking

import { useGAEcommerce } from "@connectaryal/google-analytics";

function ProductPage() {
  const { trackCart, trackPurchase } = useGAEcommerce();

  const handleAddToCart = () => {
    trackCart({
      action: "add_to_cart",
      items: [{
        item_id: "SKU123", 
        item_name: "Wireless Headphones", 
        price: 99.99, 
        quantity: 1
      }],
      value: 99.99
    });
  };

  const handlePurchase = () => {
    trackPurchase({
      transactionId: "ORDER123",
      value: 199.98,
      items: [{
        item_id: "SKU123", 
        item_name: "Wireless Headphones", 
        price: 99.99, 
        quantity: 2
      }]
    });
  };

  return (
    <div>
      <button onClick={handleAddToCart}>Add to Cart</button>
      <button onClick={handlePurchase}>Buy Now</button>
    </div>
  );
}

Step 5: Advanced Tracking: Validated, Typed & Error-Proof

With the GATracker class (used internally, or for advanced users):

Every method checks for empty arrays, missing values, or invalid input.
All events are type-checked with TypeScript.
Debug mode logs warnings and errors clearly.

Example: Handling Validation

const tracker = new GATracker({ 
  measurementId: "G-XXXXXXXXXX", 
  currency: "USD", 
  debug: true 
});

try {
  await tracker.trackCart({
    action: "add_to_cart",
    items: [], // Empty array!
    value: 99.99
  });
} catch (e) {
  // Will throw: "GA4: Cannot track add_to_cart with empty items"
  console.error(e);
}

Step 6: Debug Mode

Turn on debugging to see event logs:

<GAProvider config={{
  measurementId: "G-XXXXXXXXXX",
  debug: process.env.NODE_ENV === "development"
}}>
  <App />
</GAProvider>

Now you'll see every event in the console during development.

Real-World Examples

Complete E-commerce Flow

function ShoppingCart() {
  const { 
    trackCart, 
    trackBeginCheckout, 
    trackShippingInfo, 
    trackPaymentInfo,
    trackPurchase 
  } = useGAEcommerce();

  const [cartItems, setCartItems] = useState([]);
  const [total, setTotal] = useState(0);

  const handleAddToCart = (product) => {
    const newItem = {
      item_id: product.sku,
      item_name: product.name,
      price: product.price,
      quantity: 1
    };

    setCartItems([...cartItems, newItem]);
    setTotal(total + product.price);

    trackCart({
      action: "add_to_cart",
      items: [newItem],
      value: product.price
    });
  };

  const handleCheckout = () => {
    trackBeginCheckout({
      value: total,
      items: cartItems
    });
  };

  const handleShipping = (shippingTier) => {
    trackShippingInfo({
      items: cartItems,
      value: total,
      shipping_tier: shippingTier
    });
  };

  const handlePayment = (paymentMethod) => {
    trackPaymentInfo(
      cartItems,
      total,
      paymentMethod
    );
  };

  const completePurchase = (orderId) => {
    trackPurchase({
      transactionId: orderId,
      value: total,
      items: cartItems
    });
  };

  return (
    <div>
      {/* Cart UI implementation */}
      <button onClick={handleCheckout}>Proceed to Checkout</button>
    </div>
  );
}

User Authentication Tracking

function AuthForm() {
  const { trackLogin, trackSignUp, trackException } = useGoogleAnalytics();

  const handleGoogleLogin = async () => {
    try {
      const user = await signInWithGoogle();

      trackLogin({
        method: "google",
        customParams: {
          user_type: user.isFirstTime ? "new" : "returning"
        }
      });
    } catch (error) {
      trackException({
        description: "Google login failed",
        fatal: false
      });
    }
  };

  const handleEmailSignup = async (email, password) => {
    try {
      await createUserWithEmail(email, password);

      trackSignUp({
        method: "email",
        customParams: {
          signup_source: "landing_page"
        }
      });
    } catch (error) {
      trackException({
        description: "Email signup failed",
        fatal: false
      });
    }
  };

  return (
    <div>
      <button onClick={handleGoogleLogin}>Login with Google</button>
      <form onSubmit={(e) => {
        e.preventDefault();
        handleEmailSignup(email, password);
      }}>
        {/* form fields */}
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
}

Search & Content Engagement

function SearchPage() {
  const { trackSearch, trackShare, trackEngagement } = useGoogleAnalytics();
  const [searchTerm, setSearchTerm] = useState("");
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const searchResults = await searchProducts(searchTerm);
    setResults(searchResults);

    trackSearch({
      searchTerm,
      options: {
        search_results: searchResults.length,
        search_category: "products"
      }
    });
  };

  const handleShare = (article) => {
    trackShare({
      contentType: "article",
      contentId: article.id,
      method: "twitter",
      customParams: {
        article_category: article.category
      }
    });
  };

  const handleScroll = (scrollDepth) => {
    if (scrollDepth > 75) {
      trackEngagement({
        type: "scroll",
        options: {
          scroll_depth: scrollDepth,
          page_type: "search_results"
        }
      });
    }
  };

  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
      />

      {results.map(result => (
        <div key={result.id}>
          <h3>{result.title}</h3>
          <button onClick={() => handleShare(result)}>Share</button>
        </div>
      ))}
    </div>
  );
}

Why Type Safety Matters

No typos: "pageveiw" won't even compile
Strict params: keeps you aligned with GA schema
Reusable methods: no more raw gtag("event", …) everywhere
Validation: automatic parameter validation prevents silent failures
IntelliSense: full autocomplete for all GA4 events and parameters

Full API Reference

Here's everything included in the package:

Core Analytics Methods

Method	Description
`trackPage`	Page views with automatic path detection
`trackCustomEvent`	Custom events with validation
`trackSearch`	Site search tracking
`trackEngagement`	User engagement (scroll, click, etc.)
`trackShare`	Content sharing events
`trackVideoPlay`	Video interaction tracking
`trackFormSubmission`	Form submission events
`trackTiming`	Performance timing events
`trackLogin`	User authentication
`trackSignUp`	User registration
`trackException`	Error and exception tracking

E-commerce Methods

Method	Description
`trackItem`	Item selection/view/list events
`trackCart`	Cart actions (add/remove/view/update)
`trackWishlist`	Wishlist operations
`trackBeginCheckout`	Checkout initiation
`trackShippingInfo`	Shipping information during checkout
`trackPaymentInfo`	Payment method selection
`trackPurchase`	Purchase completion
`trackRefund`	Purchase refunds
`trackPromotion`	Promotion view/select events

Advanced Features

Automatic Validation: All methods validate parameters before sending
Error Handling: Graceful error handling with detailed error messages
Debug Mode: Development-friendly logging and warnings
Performance Optimized: Event batching and memory leak prevention
TypeScript First: Full type safety with intelligent autocomplete
Framework Agnostic: Works with React, Next.js, and other React frameworks

Next.js Integration

App Router (Next.js 13+)

// app/layout.tsx
import { GAProvider } from "@connectaryal/google-analytics";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <GAProvider
          config={{
            measurementId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID!,
            debug: process.env.NODE_ENV === "development"
          }}
        >
          {children}
        </GAProvider>
      </body>
    </html>
  );
}

// app/components/PageTracker.tsx
"use client";

import { usePathname } from "next/navigation";
import { useGoogleAnalytics } from "@connectaryal/google-analytics";
import { useEffect } from "react";

export function PageTracker() {
  const pathname = usePathname();
  const { trackPage } = useGoogleAnalytics();

  useEffect(() => {
    trackPage({ path: pathname });
  }, [pathname, trackPage]);

  return null;
}

Pages Router (Next.js 12 and below)

// pages/_app.tsx
import type { AppProps } from "next/app";
import { GAProvider, useGoogleAnalytics } from "@connectaryal/google-analytics";
import { useRouter } from "next/router";
import { useEffect } from "react";

function PageTracker() {
  const router = useRouter();
  const { trackPage } = useGoogleAnalytics();

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      trackPage({ path: url });
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events, trackPage]);

  return null;
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GAProvider
      config={{
        measurementId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID!,
        debug: process.env.NODE_ENV === "development"
      }}
    >
      <PageTracker />
      <Component {...pageProps} />
    </GAProvider>
  );
}

Advanced Configuration

Environment Variables

# .env.local (Next.js)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# .env (Create React App)  
REACT_APP_GA_MEASUREMENT_ID=G-XXXXXXXXXX

GDPR/Privacy Compliance

<GAProvider
  config={{
    measurementId: "G-XXXXXXXXXX",
    debug: process.env.NODE_ENV === "development",
    currency: "USD",
    customConfig: {
      // GDPR compliance settings
      analytics_storage: "granted",
      ad_storage: "denied",
      ad_user_data: "denied", 
      ad_personalization: "denied"
    }
  }}
>
  <App />
</GAProvider>

Complete E-commerce Implementation

Product Catalog

function ProductGrid({ products }) {
  const { trackItem } = useGAEcommerce();

  const handleProductView = (product) => {
    trackItem({
      action: "view_item",
      items: [{
        item_id: product.sku,
        item_name: product.name,
        item_category: product.category,
        item_brand: product.brand,
        price: product.price,
        quantity: 1
      }],
      value: product.price,
      customParams: {
        product_position: product.position,
        list_name: "product_catalog"
      }
    });
  };

  return (
    <div className="product-grid">
      {products.map((product, index) => (
        <ProductCard 
          key={product.id}
          product={product}
          onView={() => handleProductView(product)}
        />
      ))}
    </div>
  );
}

Shopping Cart Component

function ShoppingCartPage() {
  const { 
    trackCart, 
    trackBeginCheckout 
  } = useGAEcommerce();

  const { trackCustomEvent } = useGoogleAnalytics();

  const [cart, setCart] = useState([]);

  const updateQuantity = (itemId, newQuantity) => {
    const updatedCart = cart.map(item => 
      item.item_id === itemId 
        ? { ...item, quantity: newQuantity }
        : item
    );
    setCart(updatedCart);

    const updatedItem = updatedCart.find(item => item.item_id === itemId);

    trackCart({
      action: "update_cart",
      items: [updatedItem],
      value: updatedItem.price * updatedItem.quantity
    });
  };

  const removeFromCart = (itemId) => {
    const itemToRemove = cart.find(item => item.item_id === itemId);
    setCart(cart.filter(item => item.item_id !== itemId));

    trackCart({
      action: "remove_from_cart", 
      items: [itemToRemove],
      value: itemToRemove.price * itemToRemove.quantity
    });
  };

  const proceedToCheckout = () => {
    const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

    trackBeginCheckout({
      value: total,
      items: cart,
      customParams: {
        checkout_step: 1,
        cart_size: cart.length
      }
    });
  };

  return (
    <div>
      {cart.map(item => (
        <div key={item.item_id}>
          <span>{item.item_name}</span>
          <input 
            type="number"
            value={item.quantity}
            onChange={(e) => updateQuantity(item.item_id, parseInt(e.target.value))}
          />
          <button onClick={() => removeFromCart(item.item_id)}>Remove</button>
        </div>
      ))}
      <button onClick={proceedToCheckout}>Checkout</button>
    </div>
  );
}

Complete Checkout Flow

function CheckoutProcess() {
  const { 
    trackShippingInfo, 
    trackPaymentInfo, 
    trackPurchase 
  } = useGAEcommerce();

  const [checkoutData, setCheckoutData] = useState({
    items: [],
    total: 0,
    shipping: null,
    payment: null
  });

  const handleShippingSelection = (shippingOption) => {
    setCheckoutData(prev => ({ ...prev, shipping: shippingOption }));

    trackShippingInfo({
      items: checkoutData.items,
      value: checkoutData.total,
      shipping_tier: shippingOption.type,
      customParams: {
        shipping_cost: shippingOption.cost
      }
    });
  };

  const handlePaymentSelection = (paymentMethod) => {
    setCheckoutData(prev => ({ ...prev, payment: paymentMethod }));

    trackPaymentInfo(
      checkoutData.items,
      checkoutData.total + (checkoutData.shipping?.cost || 0),
      paymentMethod.type,
      {
        payment_provider: paymentMethod.provider
      }
    );
  };

  const completePurchase = async () => {
    try {
      const order = await processPayment(checkoutData);

      trackPurchase({
        transactionId: order.id,
        value: order.total,
        items: order.items,
        customParams: {
          affiliation: "Online Store",
          shipping: checkoutData.shipping.cost,
          payment_type: checkoutData.payment.type
        }
      });

      // Redirect to success page
    } catch (error) {
      trackException({
        description: "Purchase failed",
        fatal: false,
        customParams: {
          error_code: error.code
        }
      });
    }
  };

  return (
    <div>
      <ShippingOptions onSelect={handleShippingSelection} />
      <PaymentMethods onSelect={handlePaymentSelection} />
      <button onClick={completePurchase}>Complete Order</button>
    </div>
  );
}

Performance & Best Practices

Event Batching

The library automatically batches events to improve performance:

// These events will be batched together
const { trackCustomEvent } = useGoogleAnalytics();

trackCustomEvent({ name: "button_click", params: { button: "header_cta" } });
trackCustomEvent({ name: "section_view", params: { section: "hero" } });
trackCustomEvent({ name: "scroll_depth", params: { depth: 50 } });

Error Handling

function RobustTracking() {
  const { trackCustomEvent, trackException } = useGoogleAnalytics();

  const trackWithErrorHandling = async (eventName, params) => {
    try {
      await trackCustomEvent({ name: eventName, params });
    } catch (error) {
      // Log to your error monitoring service
      console.error("Analytics tracking failed:", error);

      // Optionally track the tracking failure
      trackException({
        description: `Analytics tracking failed: ${eventName}`,
        fatal: false
      });
    }
  };

  return (
    <button onClick={() => trackWithErrorHandling("cta_click", { location: "hero" })}>
      Track Safely
    </button>
  );
}

Testing Your Implementation

Debug Mode Output

When debug mode is enabled, you'll see console output like:

GA4: Initializing with measurement ID: G-XXXXXXXXXX
GA4: Tracking event "page_view" with params: { page_title: "Home", page_location: "/" }
GA4: Event sent successfully ✅
GA4: Tracking event "add_to_cart" with params: { value: 99.99, items: [...] }
GA4: Event sent successfully ✅

Verifying Events in GA4

Go to your GA4 property
Navigate to Reports > Realtime
Trigger events on your site
See events appear in real-time (may take 1-2 minutes)

For detailed event debugging, use Configure > DebugView in GA4.

Comparison with Other Libraries

Feature	@connectaryal/google-analytics	react-ga4	gtag directly
TypeScript Support	✅ Full	⚠️ Basic	❌ None
E-commerce Events	✅ Complete	⚠️ Limited	⚠️ Manual
Error Handling	✅ Built-in	❌ Manual	❌ Manual
Event Validation	✅ Automatic	❌ None	❌ None
React Hooks	✅ Modern	✅ Basic	❌ None
Debug Mode	✅ Comprehensive	⚠️ Basic	❌ None
Documentation	✅ Complete	⚠️ Basic	❌ Google docs

Why Use Type-Safe Analytics?

No more silent failures: Type errors and validation mean you catch mistakes early
Enterprise-grade: Handles all GA4 e-commerce, engagement, and conversion flows
Debugging is simple: Errors and warnings are clear, actionable, and logged only in dev mode
Future-proof: Built with modern React patterns and best practices
Maintainable: Clean, readable code that your team can easily understand and extend

Final Thoughts

Modern analytics isn't just about tracking everything—it's about tracking the right things, with clean, validated code you can trust. By starting with a GA4 property and using a type-safe, React-optimized library, your data is actionable and your integration is future-proof.

Ready to track smarter?

Links:

NPM Package: @connectaryal/google-analytics
GitHub Repository: connectaryal/google-analytics
Documentation: GitHub Wiki
Issues & Support: GitHub Issues

Found an issue or want to contribute? Open an issue on GitHub.

Discover a New Income Source for Developers.

Shiva Aryal — Tue, 15 Oct 2024 11:44:47 +0000

I recently came across an exciting platform called Algora. It's changing the way developers contribute and get rewarded. Whether you're a project owner or a contributor, Algora lets you create bounties for issues in your GitHub repos and reward developers when their pull requests get merged. 💰

What You Can Do with Algora:
🚀 Create Bounties for Your GitHub Repos
Got bugs or feature requests piling up? Set a bounty, and watch as talented developers swoop in to help.

💸 Reward Contributors
Merging a pull request has never been more satisfying for you and the contributor!

🤝 Crowdfund Development
Need extra funding to develop features? Open it up to your community with crowdfunded bounties.

🌱 Let Your Community Create Bounties
Your biggest fans and contributors can also set bounties on issues they care about!

🎯 Solve Open Source Bounties
Hungry for a challenge? Browse, discover, and solve open-source bounties. Get paid for what you love doing!

💡 Create Bounty Grants
Want to support the open-source community? Set up grants and help maintainers keep their projects going.

💼 Sustainably Ship Products
Help open-source maintainers thrive by ensuring their projects are sustainably funded and supported.

Ready to dive in? Check out Algora and start earning for solving issues or incentivizing others to build with you!

Note: Content is improved by AI

Here's How I implement cursor-based pagination in jQuery Datatable.

Shiva Aryal — Mon, 23 Sep 2024 16:25:03 +0000

When working with large datasets in web applications, pagination is crucial for performance and user experience. Standard offset-based pagination, commonly used with data tables, can be inefficient for large datasets.

Cursor-based pagination offers a more performant alternative, especially when handling real-time updates or large data loads. In this article, I’ll walk you through how I implement cursor-based pagination in a jQuery DataTable.

Steps to Implement Cursor-Based Pagination in jQuery DataTable

1.Setting Up the Environment
Before diving into the pagination logic, make sure you have the following:

i. jQuery
ii. DataTables plugin
iii. Backend API (or database) that supports cursor-based pagination

2.Configuring the Backend API
Cursor-based pagination relies heavily on the backend to return the necessary data. Let’s assume we’re working with a REST API that returns a JSON response, including:

Data: An array of records
Cursor: A unique identifier, such as id or timestamp, indicating the current position in the dataset.

Here’s an example of a paginated response from the server:

{
  "data": [
    {"id": 101, "name": "John Doe", "email": "john@example.com"},
    {"id": 102, "name": "Jane Smith", "email": "jane@example.com"}
  ],
  "pagination": {
     "next_cursor": "eyJpZCI6MTgsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0",
        "prev_cursor": "eyJpZCI6MTAsIl9wb2ludHNUb05leHRJdGVtcyI6ZmFsc2V9"
   }
}

3.jQuery DataTable Initialization
The DataTable is initialized using jQuery and linked with the backend API. Here’s a basic structure:

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl + "?action=search_ids",
    data: function (d) {
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
});

4.Customize Pagination controls

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl + "?action=search_ids",
    data: function (d) {
      d.cursor = jQuery("#product_list_tbl").data('current-cursor') || '';
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
  drawCallback: function (json) {

    const pagination = json.json.pagination;

    if (pagination.next_cursor) {
      jQuery(document).find('.paginate_button.next').removeClass('disabled');
      jQuery(document).find('.paginate_button.next').attr('data-cursor', json.json.pagination.next_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.next').addClass('disabled');
    }

    if (pagination.prev_cursor) {
      jQuery(document).find('.paginate_button.previous').removeClass('disabled');
      jQuery(document).find('.paginate_button.previous').attr('data-cursor', json.json.pagination.prev_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.previous').addClass('disabled');
    }

  },
});

 // Custom click handlers for pagination buttons
  jQuery(document).on('click', '#product_list_tbl_paginate .paginate_button', function(e) {
    e.preventDefault();
    e.stopPropagation(); // Prevent event from bubbling up

    // Only proceed if this is actually a 'next' or 'previous' button
    if (!jQuery(this).hasClass('next') && !jQuery(this).hasClass('previous')) {
      return;
    }

    var cursor = jQuery(this).attr('data-cursor');

    // Set the cursor directly on the table element
    jQuery("#product_list_tbl").data('current-cursor', cursor);

    // Reload the table with the new cursor
    oTable.ajax.reload();
  });

  // Disable default DataTables click handlers for pagination
  jQuery(document).off('click.DT', '#product_list_tbl_paginate .paginate_button');

5.Handling API and Frontend Sync
Each time a user clicks on the Next or Previous button, the cursor is updated and sent to the backend. The backend fetches the records from the database, starting from the current cursor position, and returns the appropriate dataset to the DataTable.

Here's gist: Click Here

Conclusion
Cursor-based pagination is a practical and efficient approach when working with large datasets or real-time applications. By implementing cursor-based pagination in jQuery DataTable, you enhance performance, improve user experience, and ensure accurate data handling. This technique is particularly useful for modern applications that demand fast, scalable, and reliable data management.

I hope this guide helps you implement cursor-based pagination in your own projects. Happy coding!

How to use multiple GitHub account on same device?

Shiva Aryal — Sat, 13 May 2023 16:17:23 +0000

Many people use GitHub for both personal and professional projects. However, if you have multiple GitHub accounts, you may be wondering how to use them on the same device.

There are a few different ways to do this. One way is to use different SSH keys for each account.

Using SSH keys

To use SSH keys, you will need to generate a new key pair for each account. You can do this by following these steps:

Open a terminal window.
Run the following command to generate a new key pair:

ssh-keygen -t ed25519 -C "my-email@gmail.com"

When prompted, enter a file in which to save the key. Enter "id_personal", "id_work" or leave empty if you want to save as default file name .
When prompted, enter a passphrase for your key pair. Leave empty if you want.
The key pair will be generated in the ~/.ssh directory.
Repeat same process for second account.

Once you have generated a key pair for each account, you will need to add the public key to each account. You can do this by following these steps:

Go to the settings page for your account.
Click on the "SSH and GPG keys" tab.
Click on the "New SSH key" button.
Copy the key by running below command

Macos: pbcopy < ~/.ssh/id_personal.pub
Windows: clip < ~/.ssh/id_personal.pub

In the "Key" field, paste the public key for the account.
Click on the "Add key" button.

Once you have added the public key to each account, you need to create a config file under ~/.ssh/ directory by running the following command:

touch ~/.ssh/config

Now when the config file is created, open with vscode or any code editor and replace below code.

#work account
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_work

#Personal account
Host github.com
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_personal

Save the file and run below command

eval "$(ssh-agent -s)"

or

ssh-agent reload

Now use the SSH key to connect to each account. You can do this by following these steps:

Open a terminal window.
Change to the directory where you want to clone the repository.
Run the following command to clone the work repository:

git clone git@github.com-work/repository.git

Run the following command to clone the personal repository:

git clone git@github.com-work/repository.git

Conclusion

Using multiple GitHub accounts on the same device can be a bit tricky, but it is definitely possible. By following the steps in this article, you will be able to use multiple GitHub accounts on the same device without any problems.

How to make the Google reCAPTCHA responsive?

Shiva Aryal — Sat, 11 Mar 2023 17:05:34 +0000

Google reCAPTCHA is a popular tool used by websites to prevent spam and abuse by bots. Making it responsive means ensuring that it works seamlessly on all devices, including mobile devices with smaller screens. By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA. By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device. You can make the captcha responsive by simply adding below code to your global CSS:

<style>
@media only screen and (max-width: 500px) {
    .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
    }
}
</style>

Best Chrome Extensions for Developers

Shiva Aryal — Mon, 16 Jan 2023 15:33:49 +0000

Extensions makes our life easier, also it makes you more productive and perform an essential task better than a dedicated tool. If you’re a developer, you will likely already have a collection of favourite Chrome extensions you use on a daily basis. Here are my favourite chrome extension that you will definitely love them.

Wappalyzer : Wappalyzer identifies technologies on websites, such as CMS, web frameworks, ecommerce platforms, JavaScript libraries, analytics tools and more.
Awesome Screenshot and Screen Recorder: Awesome Screenshot and Screen Recorder is the best screen recorder and screen capture & screenshot tool to record screen.
Fake Filler: Fake Filler is the best form filler extension to fill all input fields on a page with randomly generated fake data.
WhatFont: WhatFont helps to identify fonts used on web pages. It’s fast, effective and identifies individual fonts within a page in seconds. It also identifies the family, size, weight and colour. All within a small popup window in the browser.
JSON Viewer: JSON Viewer helps to manage JSON data into a quickly recognizable hierarchy view in a browser window. It also provides an option to view raw and formatted json data.
ColorZilla: ColorZilla includes an eyedrop colour selector, a colour history tool, a CSS gradient analyzer and a page analyzer that assesses colours on a web page.
Page Ruler: Page Ruler is a dynamic measurement extension. While Dimensions can measure the height and width of elements, it is more useful for measuring between them. Page Rule measures those elements very accurately.
Lightshot: Lightshot is also one of the best screenshot tool to capture screen with lots of edit optios.
Daily.dev: daily.dev is the perfect place to discover technical content with no effort. It will help you boost your knowledge and save time. Simply open a new tab, and you're all set.
Editthiscookie: EditThisCookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

How to send an automated email via Google Script?

Shiva Aryal — Fri, 13 Jan 2023 15:32:23 +0000

To send an automated email via Google Script, you will need to do the following:

Go to script.google.com and sign in with your Google account.
Click on the "New script" button. This will create a new blank script for you.
Replace the existing code with the following code:

function sendEmail() {
  var email = "youremail@example.com";
  var subject = "This is the subject of the email";
  var body = "This is the body of the email";
  MailApp.sendEmail(email, subject, body);
}

Replace "youremail@example.com" with the email address you want to send the email to.
Replace "This is the subject of the email" with the subject of the email you want to send.
Replace "This is the body of the email" with the body of the email you want to send.
Save the script by clicking on the "File" menu and then selecting "Save".
Test the script by clicking on the "Run" menu and then selecting "sendEmail". This will send an email to the email address you specified.
You can also use this script to send emails to multiple recipients by separating the email addresses with a comma, like this:

var email = "youremail@example.com, anotheremail@example.com";

You can also customize the email further by using the various options available in the MailApp.sendEmail() function. For example, you can add attachments to the email, specify a reply-to address, or set the name of the sender. You can find more information about these options in the Google Scripts documentation.

What is Intersection Observer API in JavaScript?

Shiva Aryal — Sat, 16 Jul 2022 11:31:16 +0000

Introduction

The intersection observer API is one of the Observer API in JavaScript which provides a way to observe changes in the the visibility and position of a DOM element relative to the containing root element or viewport asynchronously. . This will By Intersection Observer, we can control the element’s loading and animations based on the target element’s visibility and positions. This observer API is mainly used for infinite scrolling, lazing loading images, track the user interactions and scroll based animations.

In this article, we will discuss about all the basics of Intersection Observer API so that you can implement on your website and looks cool 😎.

Constructor

const observer = new IntersectionObserver(callback, options)

Parameters

callback:

A function which is called when the percentage of the target element is visible crosses a threshold. The callback receives as input two parameters: entries and observer

Entries: Entries parameter is an argument that accepts function and it just outputs the information related to each element that changes its intersection status.
Observer: observer tells to observe intersection changes for the element. Now for an element to change its intersection status it must scroll in/out of the current viewport.

options:

Options is an optional parameter which includes the settings of the current observer. The options are

root: Root helps to identify actually where to start observing the elements. For example if we set { root: document.querySelector('#scrollArea') } then the observer API will start observing the scollArea id only.
rootMargin: Root margin is similar with CSS margin property. It will add margin around the root element to extend, or shrink the capturing frame when the dimensions of the root do not provide enough flexibility. It's defaults is "0px 0px 0px 0px" or "0px"
thresholds: Thresholds accepts a value between 0 and 1 which represents the percentage of the element that must be visible before isIntersecting value becomes true. By default it will set to 0 which means as soon as any part of the element is visible it will be considered intersecting. If we update to 1 then unless whole part of the element is visible, intersecting will false.

Methods:

disconnect() - disconnect() method stops watching all of its target elements for visibility changes.
observe() - observe() method is to observe intersection changes for the element with the id or querySelector.
takeRecords() - takeRecords() method is to
unobserve() - unobserve() method helps to stop observing elements when they are no longer needed to be observed.

Example

Conculusion:

The Intersection Observer is great observer APIs helps so many use cases from lazy loading images, to scroll based animations. It is also incredibly easy to use which is a huge bonus.

Object.freeze( ) in JavaScript

Shiva Aryal — Tue, 05 Jul 2022 14:54:36 +0000

In the JavaScript world we already know how the classes and objects are important. Among the Object constructor methods, the Object.freeze() method helps to freeze an object or arrays. Freezing an object does not allow to change any properties from the object. It returns the passed object and does not create a frozen copy.

Frozen object can be prevents from:

Adding new properties to the object.
Removing or altering existing properties from the object.
Preserves the enumerability, configurability, writability and the prototype of the object
Changing values of the existing object properties and prototype.

The syntax is:

Object.freeze(obj)

where the obj is the object which has to be freezed.

Example:

Input : const obj = { name: 'initial_name'};
        const newObj = Object.freeze(obj);
        newObj.name = 'new_name';
        console.log(newObj.name);

Output : "initial_name"

Best Headless CMS for 2024 (updated)

Shiva Aryal — Fri, 25 Mar 2022 19:08:03 +0000

Before moving towards our top headless CMS lists, let's figure out what the headless CMS means. The CMS stands for "Content Management Systems" which helps users to create, manage, and modify content on a website and database without the need for specialized technical knowledge. Headless means no front-end or UI part. The Headless CMS only includes the Back-end, database, and API for sending the data. The Headless CMS can be on a different server or a different website.

There are lots of headless CMSs in the market and it's hard to find out the best headless CMS. Here is my favourite headless CMS for 2022.

Strapi:
Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed, and exposed to any digital device. Strapi allows you to define the structure as you want, It also provides the ability to define categories such as Text, Date, Media, Password, Relation, and Number. As more, you can also edit the API code to personalize it even further.
Contentful:
Contentful is the API-first content management platform to create, manage and publish content on any digital channel. Contentful is the platform where you can update the content of your website, a mobile app, or any other platform that displays content. We save you the time and hassle of creating your backend to manage the content and provide many tools which make it easier to generate a website or app.
Sanity
Sanity is also one of the best headless CMS on the market, which is proven by using it by such companies as Nike, Figma, National Geographic, and others. Sanity is very flexible in terms of development.
Kontent:
Kontent is a headless CMS that offers easy-to-use content management tools for marketers while freeing developers to focus on building online experiences. Developers can enjoy the freedom to pick their tech stack and build online experiences rapidly.
WordPress:
WordPress is the most flexible CMS that allows you to create almost any type of website. It is open-source which means that anyone can use it as a backend CMS. Using WordPress as a headless CMS allows you to create the front end of your web application using any web technology and manage its content using one of the most popular CMSs.
Agility CMS:
Unlike most content management systems, Agility CMS take a true content-first approach to structuring and delivering digital content. That’s because focusing on content early on in the design process can save time and money, and deliver better experiences.
dotCMS:
Unlike most content management systems, dotCMS is a powerful content management system (CMS) that enables efficient creation, management, and delivery of digital content across various platforms, facilitating seamless web experiences.
craftCMS:
Craft is a flexible, user-friendly CMS for creating custom digital experiences on the web and beyond.

Here is my best headless CMS. There might be a lot of other headless CMS which are better. Please share your thoughts and your favourite headless CMSs in the comments.