DEV Community: Maulik Paghdal

Quick Guide to Livewire Lifecycle Hooks

Maulik Paghdal — Thu, 20 Nov 2025 15:59:19 +0000

If you're working with Laravel Livewire, understanding lifecycle hooks is essential for building reactive components that feel smooth and responsive. Lifecycle hooks are methods that Livewire automatically calls at specific points during a component's lifecycle, giving you control over what happens when your component is created, updated, or rendered.

The Essential Hooks You Need to Know

Livewire provides several hooks, but let's focus on the ones you'll use most often:

1. Mount - Initialize Your Component

mount() runs once when your component first loads. This is where you set up initial data:

class UserProfile extends Component
{
    public $user;
    public $posts;

    public function mount($userId)
    {
        $this->user = User::findOrFail($userId);
        $this->posts = $this->user->posts()->latest()->get();
    }
}

💡 Tip: Route parameters are automatically injected into mount(), just like Laravel controllers.

2. Updated - React to Property Changes

The updated{PropertyName}() hook fires after a property changes. Perfect for search functionality or form validation:

class SearchComponent extends Component
{
    public $query = '';
    public $results = [];

    public function updatedQuery($value)
    {
        if (strlen($value) < 3) {
            $this->results = [];
            return;
        }

        $this->results = Product::search($value)->take(10)->get();
    }
}

This creates a search-as-you-type experience without writing any JavaScript.

3. Hydrate and Dehydrate - Managing State

Every Livewire request serializes your component's state. hydrate() runs at the start of each request, and dehydrate() runs at the end:

class ShoppingCart extends Component
{
    protected $cartService;

    public function hydrate()
    {
        // Reconnect to services that can't be serialized
        $this->cartService = app(CartService::class);
    }

    public function dehydrate()
    {
        unset($this->cartService);
    }
}

⚠️ Warning: Objects like database connections or service instances can't be serialized. Use these hooks to reconnect and clean up.

A Practical Example

Here's how these hooks work together in a real component:

class ProductFilter extends Component
{
    public $category = 'all';
    public $priceRange = [0, 1000];

    public function mount($defaultCategory = 'all')
    {
        $this->category = $defaultCategory;
    }

    public function updatedCategory()
    {
        // Reset price when category changes
        $this->priceRange = [0, 1000];
    }

    public function render()
    {
        $products = Product::query()
            ->when($this->category !== 'all', 
                fn($q) => $q->where('category', $this->category))
            ->whereBetween('price', $this->priceRange)
            ->get();

        return view('livewire.product-filter', [
            'products' => $products
        ]);
    }
}

Common Mistakes to Avoid

Don't put dynamic logic in mount:

// ❌ This won't update when filters change
public function mount()
{
    $this->products = Product::where('status', $this->filter)->get();
}

// ✅ Put it in render() instead
public function render()
{
    return view('livewire.products', [
        'products' => Product::where('status', $this->filter)->get()
    ]);
}

Watch out for infinite loops:

// ❌ This creates an infinite loop
public function updatedSearchQuery($value)
{
    $this->searchQuery = strtolower($value); // Triggers the hook again!
}

// ✅ Use updating() instead
public function updatingSearchQuery($value)
{
    return strtolower($value);
}

Quick Reference

Hook	When to Use
`mount()`	Initialize data once on component load
`updated{PropertyName}()`	React after a property changes
`updating{PropertyName}()`	Transform/validate before a property changes
`hydrate()`	Reconnect to services on each request
`rendered()`	Trigger JavaScript after component renders

Want to Learn More?

This is just scratching the surface of Livewire lifecycle hooks. There are more hooks like rendering(), rendered(), and property-specific hooks for nested data that can help you build even more sophisticated components.

Read the full article for:

Detailed explanations of all lifecycle hooks
More real-world examples and use cases
Performance optimization tips
Advanced patterns for complex components
Complete decision tree for choosing the right hook

Understanding these hooks will help you write cleaner, more maintainable Livewire components. Start with mount() and updated{PropertyName}() for most cases, and explore the others as your needs grow.

What lifecycle hooks do you use most often? Share your experience in the comments!

[Boost]

Maulik Paghdal — Sun, 16 Nov 2025 06:42:24 +0000

Quick Guide: Event Delegation and Bubbling in JavaScript

Maulik Paghdal for Script Binary ・ Nov 16

#javascript #webdev #programming #react

Quick Guide: Event Delegation and Bubbling in JavaScript

Maulik Paghdal — Sun, 16 Nov 2025 06:40:18 +0000

If you've been attaching event listeners to multiple elements individually, there's a better way. Event delegation can make your JavaScript cleaner, faster, and work seamlessly with dynamically added content.

What is Event Bubbling?

When you click an element, the event doesn't just stop there. It bubbles up through the DOM tree, triggering on each parent element.

<div id="parent">
  <button id="child">Click me</button>
</div>

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
});

Click the button and you'll see both messages:

Child clicked
Parent clicked

That's bubbling in action.

Event Delegation: The Smart Way

Instead of adding listeners to each child element, add one to the parent:

// Without delegation - multiple listeners
const items = document.querySelectorAll('#list li');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});

// With delegation - single listener
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    handleClick(e);
  }
});

Real Example: Interactive Todo List

Here's a practical todo list using event delegation:

const todoList = document.getElementById('todo-list');

// One listener handles all todos, even future ones
todoList.addEventListener('click', (e) => {
  // Toggle complete
  if (e.target.classList.contains('todo-text')) {
    e.target.classList.toggle('completed');
  }

  // Delete todo
  if (e.target.classList.contains('delete-btn')) {
    e.target.parentElement.remove();
  }
});

// Add new todos dynamically
addBtn.addEventListener('click', () => {
  const li = document.createElement('li');
  li.innerHTML = `
    <span class="todo-text">${todoInput.value}</span>
    <button class="delete-btn">Delete</button>
  `;
  todoList.appendChild(li);
  // No need to attach new listeners!
});

Why Event Delegation Matters

✅ Better Performance: One listener instead of hundreds

✅ Works with Dynamic Content: New elements automatically work

✅ Less Memory: Fewer listeners means less overhead

✅ Easier Maintenance: One place to update your logic

Key Concepts to Remember

event.target vs event.currentTarget:

event.target - The element you actually clicked
event.currentTarget - The element with the listener

Use closest() for nested elements:

todoList.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (li) {
    // Works even if you click nested elements inside <li>
  }
});

Stopping propagation (use sparingly):

element.addEventListener('click', (e) => {
  e.stopPropagation(); // Stops bubbling
});

Common Pitfall

Don't forget to verify the clicked element is what you expect:

// Better approach
container.addEventListener('click', (e) => {
  const button = e.target.closest('button');
  if (button && container.contains(button)) {
    // Safe to handle
  }
});

When Not to Use It

Event delegation isn't always the answer:

Events that don't bubble (focus, blur)
Performance-sensitive interactions (rapid mouse movements)
Single, static elements (just use a direct listener)

Want to Learn More?

This is just scratching the surface. Event delegation becomes even more powerful when you understand all three phases of event propagation, learn advanced patterns with data attributes, and know how to handle edge cases.

Read the full guide here for deeper examples, best practices, common mistakes, and how frameworks like React handle event delegation behind the scenes.

What's your experience with event delegation? Share in the comments below!

Quick Guide: Reducing Tailwind CSS Build Size

Maulik Paghdal — Tue, 11 Nov 2025 17:28:29 +0000

If you've ever shipped a Tailwind project and noticed your CSS file is surprisingly large, you're not alone. By default, Tailwind can generate a hefty stylesheet, but with proper configuration, you can dramatically reduce it often to under 10KB.

The Main Problem

Tailwind generates thousands of utility classes. Without proper setup, all of them end up in your production build, even the ones you never use. The solution? Content purging and smart configuration.

Essential Steps to Reduce File Size

1. Configure Content Purging Correctly

This is the most critical step. Tell Tailwind where your template files are:

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
    './public/index.html',
  ],
  theme: {
    extend: {},
  },
}

💡 Important: Avoid dynamic class names like bg-${color}-500. Tailwind can't detect these during the build process. Use complete class names instead.

2. Use Tailwind v3 (JIT Mode)

If you're still on v2, upgrade. Tailwind v3 uses Just-In-Time mode by default, which generates only the utilities you actually use. This alone can cut your CSS size in half.

3. Disable Unused Core Plugins

Not using floats or object-fit? Turn them off:

module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  },
}

4. Limit Your Color Palette

Tailwind's default color palette is massive. If you only use a few brand colors, define just those:

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      black: '#000000',
      blue: {
        500: '#3b82f6',
        600: '#2563eb',
      },
      gray: {
        500: '#6b7280',
        900: '#111827',
      },
    },
  },
}

5. Minimize Use of @apply

While @apply is convenient, it can bloat your CSS. Prefer using Tailwind classes directly in your markup or create framework components:

// Better approach
function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      {children}
    </button>
  );
}

Don't Forget Production Optimization

Enable CSS minification in your build tool and make sure gzip/Brotli compression is active on your server. Most modern hosting platforms handle this automatically.

Check your build output:

npm run build

You should see something like:

dist/assets/index.css  8.42 KB │ gzip: 2.15 KB

Quick Wins Summary

✅ Set up content paths correctly in tailwind.config.js

✅ Upgrade to Tailwind v3 for JIT mode

✅ Disable unused core plugins

✅ Reduce your color palette

✅ Avoid @apply where possible

✅ Enable minification and compression

Want More Details?

This is just a quick overview. For a comprehensive guide with code examples, common mistakes, advanced techniques, and a complete optimization checklist, check out the full article on reducing Tailwind CSS build size.

With these optimizations in place, you'll ship leaner stylesheets and improve your site's performance significantly.

What's your biggest challenge with Tailwind CSS optimization? Drop a comment below!

Managing Multiple Node.js Versions with nvm

Maulik Paghdal — Sun, 09 Nov 2025 16:26:58 +0000

Ever cloned a project only to realize it needs a different Node version than what you have installed? That's exactly why nvm exists.

What is nvm?

nvm (Node Version Manager) lets you install and switch between multiple Node.js versions on the same machine. No more uninstalling and reinstalling Node every time you switch projects.

Quick Setup

macOS/Linux:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc  # or ~/.zshrc

Windows: Download nvm-windows from the official GitHub releases.

Essential Commands

# Install specific version
nvm install 18.17.0

# Install latest LTS
nvm install --lts

# Switch versions
nvm use 18.17.0

# List installed versions
nvm ls

# Set default
nvm alias default 18.17.0

The Real Power: .nvmrc Files

Create a .nvmrc file in your project root:

18.17.0

Now just run nvm use in that directory, and it automatically switches to the right version. No more guessing which Node version the project needs.

Common Gotcha

Global npm packages are tied to each Node version. Install TypeScript on Node 18, switch to Node 20, and you'll need to reinstall it. This prevents version conflicts but can be surprising at first.

Tip: Use npx instead of global installs when possible:

npx create-react-app my-app

When You Shouldn't Use nvm

nvm is perfect for development but not ideal for production servers. For production, use Docker with pinned Node versions or system package managers.

Worth Checking Out

If you want something faster, look at fnm (written in Rust) or volta (made by LinkedIn). Both solve the same problem with better performance.

nvm is one of those tools that seems optional until you actually need it. Once you're juggling multiple projects with different Node requirements, it becomes essential.

Want a deeper dive? Check out my complete guide with troubleshooting tips, automation tricks, and advanced usage patterns: Full nvm Guide: Everything You Need to Know

What's your preferred way to manage Node versions? Let me know in the comments!

Building a Custom UI Kit with Tailwind CSS

Maulik Paghdal — Fri, 07 Nov 2025 16:44:15 +0000

Why Build Your Own Kit?

Consistency: Define styles once, use everywhere
Speed: No more hunting for the perfect shade or spacing
Maintainability: Update one place, change site-wide
Team alignment: Everyone uses the same components

Setting Up Your Foundation

First, extend Tailwind's default theme with your design tokens:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
    },
  },
}

Creating Base Component Styles

Use the @layer directive to create reusable classes:

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 
           font-medium rounded-lg transition-all duration-200 
           focus:outline-none focus:ring-2;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700;
  }

  .input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg 
           focus:ring-2 focus:ring-primary-500;
  }
}

Building React Components

For better flexibility, wrap your styles in components:

const Button = ({ 
  variant = 'primary', 
  size = 'md', 
  loading = false,
  children,
  ...props 
}) => {
  const variants = {
    primary: 'btn-primary',
    secondary: 'btn-secondary',
    outline: 'btn-outline',
  };

  const sizes = {
    sm: 'text-sm px-3 py-1.5',
    md: 'px-4 py-2',
    lg: 'text-lg px-6 py-3',
  };

  return (
    <button 
      className={`btn ${variants[variant]} ${sizes[size]}`}
      disabled={loading}
      {...props}
    >
      {loading ? 'Loading...' : children}
    </button>
  );
};

Usage:

<Button variant="primary" size="lg">Save Changes</Button>
<Button variant="outline" loading>Processing...</Button>

Adding Dark Mode

Tailwind's dark mode support makes this easy:

@layer components {
  .btn-primary {
    @apply btn bg-primary-600 hover:bg-primary-700
           dark:bg-primary-500 dark:hover:bg-primary-600;
  }

  .card {
    @apply bg-white dark:bg-gray-800 
           border-gray-200 dark:border-gray-700;
  }
}

Enable it in your config:

module.exports = {
  darkMode: 'class',
  // ... rest of config
}

Key Components to Start With

Focus on these first:

Button: Variants (primary, secondary, outline), sizes, loading state
Input: Label, error state, helper text
Card: Header, body, footer sections
Alert: Success, error, warning types
Modal: Backdrop, close button, scroll lock

Best Practices I've Learned

Start minimal. Don't build 50 components upfront. Create what you need, when you need it.

Composition over configuration. Build smaller pieces that work together:

<Card>
  <CardHeader>User Profile</CardHeader>
  <CardBody>
    <p>Content here</p>
  </CardBody>
</Card>

Keep accessibility in mind. Use semantic HTML, add proper ARIA labels, and test with keyboard navigation.

Document as you go. A simple README with props and examples saves time later.

Common Pitfalls

Over-abstracting early: Don't create a component until you've used the pattern 3+ times
Hardcoding colors: Always use theme colors from your config
Ignoring edge cases: Test long text, disabled states, and mobile views
Forgetting responsive design: Use Tailwind's responsive prefixes (md:, lg:)

Example: Complete Form Component

Here's a form input that handles everything:

const Input = ({ 
  label, 
  error, 
  hint,
  required,
  ...props 
}) => {
  return (
    <div className="space-y-1">
      {label && (
        <label className="block text-sm font-medium text-gray-700">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <input 
        className={error ? 'input-error' : 'input'} 
        {...props} 
      />
      {hint && !error && (
        <p className="text-sm text-gray-500">{hint}</p>
      )}
      {error && (
        <p className="text-sm text-red-600">{error}</p>
      )}
    </div>
  );
};

The Result

After setting this up, my development speed increased significantly. No more decision fatigue about spacing or colors. Everything is consistent, and changes are easy.

Want to Learn More?

This is just scratching the surface. I wrote a comprehensive guide that covers:

Advanced component patterns
Form systems with validation
Managing component complexity
Storybook integration
Real-world examples and code

👉 Read the full article: Building a Custom UI Kit with Tailwind CSS

The complete guide includes production-ready code examples, architectural decisions, and lessons learned from building multiple UI kits.

Have you built your own UI kit? What challenges did you face? Let me know in the comments!

Using Tailwind CSS to Build Complex Layouts Quickly

Maulik Paghdal — Sun, 02 Mar 2025 10:32:03 +0000

🚀 Using Tailwind CSS to Build Complex Layouts Quickly

Tailwind CSS is a utility-first CSS framework that enables rapid UI development. Unlike traditional CSS frameworks, Tailwind provides low-level utility classes, allowing you to design complex layouts with ease and flexibility.

In this guide, we’ll explore how to build complex layouts quickly using Tailwind CSS.

✨ Why Tailwind CSS for Layouts?

✅ Utility-First Approach – No need to write custom CSS.

✅ Responsive by Default – Mobile-first classes (sm:, md:, lg:, etc.).

✅ Flexbox & Grid Utilities – Build layouts efficiently.

✅ Dark Mode & Theming – Easy customization with Tailwind’s configuration.

🔹 1. Setting Up Tailwind CSS

If you don’t have Tailwind installed, start by setting up a new project:

📌 Install Tailwind via npm

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📌 Configure `tailwind.config.js`

Enable JIT mode for faster builds:

module.exports = {
  mode: 'jit',
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

📌 Include Tailwind in `index.css`

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, you're ready to start building layouts!

🔹 2. Building a Responsive Navbar

A responsive navigation bar using Tailwind’s flex utilities:

<nav class="bg-gray-900 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">MyApp</a>
    <ul class="hidden md:flex space-x-6">
      <li><a href="#" class="hover:text-gray-400">Home</a></li>
      <li><a href="#" class="hover:text-gray-400">About</a></li>
      <li><a href="#" class="hover:text-gray-400">Contact</a></li>
    </ul>
    <button class="md:hidden text-2xl">&#9776;</button>
  </div>
</nav>

✅ flex justify-between items-center aligns items.

✅ hidden md:flex ensures mobile responsiveness.

🔹 3. Creating a Hero Section with Flexbox

A hero section with centered content:

<section class="h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  <div class="text-center">
    <h1 class="text-5xl font-bold">Build Faster with Tailwind CSS</h1>
    <p class="mt-4 text-lg">Create modern UIs effortlessly.</p>
    <button class="mt-6 px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-200">
      Get Started
    </button>
  </div>
</section>

✅ h-screen ensures full viewport height.

✅ flex items-center justify-center centers content.

🔹 4. Designing a Responsive Grid Layout

Tailwind’s grid system simplifies complex layouts:

<section class="p-10 grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="p-6 bg-white shadow-lg rounded-lg">Card 1</div>
  <div class="p-6 bg-white shadow-lg rounded-lg">Card 2</div>
  <div class="p-6 bg-white shadow-lg rounded-lg">Card 3</div>
</section>

✅ grid grid-cols-1 md:grid-cols-3 makes it responsive.

✅ gap-6 adds spacing between items.

🔹 5. Building a Dashboard Layout

A complex dashboard layout using flexbox and grid:

<div class="flex h-screen">
  <!-- Sidebar -->
  <aside class="w-64 bg-gray-900 text-white p-5">
    <h2 class="text-xl font-bold">Dashboard</h2>
    <ul class="mt-4 space-y-3">
      <li><a href="#" class="block hover:bg-gray-700 p-2 rounded">Home</a></li>
      <li><a href="#" class="block hover:bg-gray-700 p-2 rounded">Settings</a></li>
      <li><a href="#" class="block hover:bg-gray-700 p-2 rounded">Profile</a></li>
    </ul>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-6 bg-gray-100">
    <h1 class="text-2xl font-semibold">Welcome Back!</h1>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="p-6 bg-white shadow-lg rounded-lg">Widget 1</div>
      <div class="p-6 bg-white shadow-lg rounded-lg">Widget 2</div>
      <div class="p-6 bg-white shadow-lg rounded-lg">Widget 3</div>
    </div>
  </main>
</div>

✅ Sidebar with navigation

✅ Main content using grid layout

🔹 6. Adding Dark Mode Support

Tailwind makes dark mode easy! Enable it in tailwind.config.js:

module.exports = {
  darkMode: 'class', // or 'media'
  theme: {
    extend: {},
  },
  plugins: [],
};

Toggle dark mode in HTML:

<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <button onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>
</body>
</html>

✅ dark:bg-gray-900 applies dark theme styles.

🎯 Conclusion

Tailwind CSS is a game-changer for building complex layouts fast. Whether you’re creating dashboards, landing pages, or e-commerce sites, Tailwind’s utility-first approach makes layout building effortless.

✅ Responsive by default

✅ Minimal custom CSS

✅ Flexible grid & flex utilities

📌 Explore more Tailwind CSS tips on Script Binary! 🚀

💬 Let’s Connect!

🔥 What’s your favorite Tailwind CSS feature? Comment below!

🔔 Follow me for more Tailwind & Frontend Development tips!

React Chart.js: Building Interactive Charts with Ease

Maulik Paghdal — Sat, 01 Feb 2025 18:48:14 +0000

Visualizing data is essential for modern web applications. Chart.js, combined with React, provides a powerful way to create interactive and visually appealing charts. In this guide, we’ll walk through how to integrate Chart.js in a React project and build interactive charts effortlessly.

1. What is Chart.js?

Chart.js is a popular JavaScript library for creating responsive and animated charts. It supports various chart types such as line, bar, pie, and more.

Why Use Chart.js in React?

Lightweight and easy to use.
Supports multiple chart types.
Provides built-in animations and tooltips.
Highly customizable with plugins and options.

2. Setting Up React with Chart.js

First, ensure you have a React project. If you don’t, create one using:

npx create-react-app react-chartjs-app
cd react-chartjs-app

Now, install Chart.js and the React wrapper:

npm install chart.js react-chartjs-2

3. Creating a Simple Line Chart

Let’s start by creating a Line Chart component.

Step 1: Import Dependencies

Create a new file LineChart.js inside the components folder:

import React from "react";
import { Line } from "react-chartjs-2";
import { Chart, registerables } from "chart.js";

// Register necessary chart elements
Chart.register(...registerables);

const LineChart = () => {
  const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
      {
        label: "Sales ($)",
        data: [1200, 1900, 3000, 5000, 2800, 4000],
        fill: false,
        backgroundColor: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
    },
  };

  return <Line data={data} options={options} />;
};

export default LineChart;

4. Using the Line Chart in App.js

Now, import and use the LineChart component in App.js:

import React from "react";
import LineChart from "./components/LineChart";

function App() {
  return (
    <div className="App">
      <h2>Sales Data</h2>
      <LineChart />
    </div>
  );
}

export default App;

5. Adding a Bar Chart

For a Bar Chart, create BarChart.js:

import React from "react";
import { Bar } from "react-chartjs-2";

const BarChart = () => {
  const data = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          "rgba(255, 99, 132, 0.6)",
          "rgba(54, 162, 235, 0.6)",
          "rgba(255, 206, 86, 0.6)",
          "rgba(75, 192, 192, 0.6)",
          "rgba(153, 102, 255, 0.6)",
          "rgba(255, 159, 64, 0.6)",
        ],
        borderWidth: 1,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
    },
  };

  return <Bar data={data} options={options} />;
};

export default BarChart;

Then, import it in App.js:

import BarChart from "./components/BarChart";
...
<h2>Voting Results</h2>
<BarChart />

6. Making Charts Interactive

You can add tooltips, hover effects, and animations to make charts interactive.

Modify the options object to include hover and animation effects:

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: "top",
    },
    tooltip: {
      enabled: true,
    },
  },
  hover: {
    mode: "nearest",
    intersect: true,
  },
  animation: {
    duration: 1000,
    easing: "easeInOutBounce",
  },
};

7. Customizing the Charts

Chart.js provides various customization options. You can:

Change chart colors dynamically.
Modify tooltip appearance.
Update labels and legends.
Use different chart types like Pie, Radar, Doughnut.

Example of a Pie Chart:

import { Pie } from "react-chartjs-2";

const PieChart = () => {
  const data = {
    labels: ["Apple", "Samsung", "Google", "OnePlus"],
    datasets: [
      {
        data: [300, 500, 100, 150],
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"],
      },
    ],
  };

  return <Pie data={data} />;
};

export default PieChart;

8. Deploying the React Chart.js App

Once your app is ready, deploy it using Vercel, Netlify, or GitHub Pages.

Deploy with Vercel

Install Vercel CLI:
```
npm install -g vercel
```
Run:
```
vercel
```

Your app will be live instantly!

9. Final Thoughts

Chart.js is a powerful and lightweight tool for data visualization in React. With the flexibility of customization and interactivity, you can create stunning dashboards and real-time charts for your web applications.

🔗 Learn More

For a detailed tutorial and advanced customizations, check out the full article on Script Binary.

Undo Mistakes in Git: Revert, Reset, and Checkout Simplified

Maulik Paghdal — Thu, 09 Jan 2025 18:56:19 +0000

1. Git Revert

When to Use:

Use git revert to undo a specific commit while preserving your commit history. It’s ideal for public repositories where rewriting history can cause issues.

How It Works:

git revert creates a new commit that undoes the changes introduced by the targeted commit.

Example:

git revert <commit-hash>

Git will prompt you to edit a commit message. Save it, and a new commit reversing the changes will be added.

2. Git Reset

When to Use:

Use git reset to undo changes by moving the HEAD pointer. This command is more destructive than revert as it alters commit history.

Modes of `git reset`:

--soft: Keeps changes in the staging area.
--mixed (default): Keeps changes in your working directory.
--hard: Discards changes completely.

Example:


# Reset to a specific commit and keep changes in working directory git reset --mixed <commit-hash> # Reset and discard changes git reset --hard <commit-hash>

⚠️ Be cautious with --hard as it permanently deletes changes.

3. Git Checkout

When to Use:

Use git checkout to switch branches or restore files to a specific state.

Switching Branches:

git checkout <branch-name>

Restoring Files:

Restore a specific file to the state of the last commit:

git checkout HEAD -- <file-name>

When to Use What?

Revert: Undo a specific commit in a shared repository.
Reset: Rewrite commit history in local branches.
Checkout: Switch branches or restore files without modifying commits.

Best Practices

Understand the Impact:
- Use revert for safe, non-destructive changes.
- Use reset only when working locally or with private branches.
Always Backup:
- Before using reset --hard, stash your changes or back up the branch.
Collaborate:
- For shared repositories, communicate with your team before altering history.

Conclusion

Knowing when and how to use revert, reset, and checkout can save you from hours of debugging and frustration. Git’s flexibility makes it an indispensable tool for developers.

Learn More

For a deeper dive and detailed examples, visit the original guide on Script Binary.

Let’s Discuss!

Have questions about Git commands? Share your thoughts in the comments below, and follow me for more Git and version control tips!

10 JavaScript Snippets That Will Save You Hours of Coding

Maulik Paghdal — Thu, 09 Jan 2025 18:44:51 +0000

JavaScript is a powerful language, but writing repetitive code can consume your time. These 10 handy JavaScript snippets will simplify common tasks and boost your productivity. Let’s dive in!

1. Check if an Element is in Viewport

Easily determine if an element is visible within the viewport:

const isInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

2. Copy to Clipboard

Quickly copy text to the clipboard without using external libraries:

const copyToClipboard = (text) => {  navigator.clipboard.writeText(text); };

3. Shuffle an Array

Randomize the order of elements in an array with this one-liner:

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);

4. Flatten a Multi-Dimensional Array

Convert a nested array into a single-level array:

const flattenArray = (arr) => arr.flat(Infinity);

5. Get Unique Values in an Array

Remove duplicates from an array:

const uniqueValues = (array) => [...new Set(array)];

6. Generate a Random Hex Color

Create a random hex color with ease:

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;

7. Debounce a Function

Prevent a function from firing too often, ideal for search input:

const debounce = (func, delay) => {  let timeoutId;  return (...args) => {    clearTimeout(timeoutId);    timeoutId = setTimeout(() => func(...args), delay);  }; };

8. Detect Dark Mode

Check if a user’s system is in dark mode:

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

9. Capitalize the First Letter of a String

A simple snippet to capitalize the first letter:

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

10. Generate a Random Integer

Generate a random number within a range:

const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

Conclusion

These snippets are a great way to save time and effort in your JavaScript projects. Bookmark them or integrate them into your personal utility library!

Learn More

For more JavaScript tips and tricks, check out the original article on Script Binary.

Mastering Queues and Jobs in Laravel: A Comprehensive Guide

Maulik Paghdal — Mon, 23 Dec 2024 19:28:22 +0000

Laravel provides a robust queue system that allows you to defer time-intensive tasks, such as sending emails or processing files, to improve application performance.

This guide dives into the essentials of setting up and using queues and jobs in Laravel.

What Are Queues in Laravel?

Queues in Laravel handle the execution of tasks (jobs) in the background, keeping your application responsive. Common use cases include:

Sending emails
Processing file uploads
Running API calls

Setting Up Queues in Laravel

To start using queues, follow these steps:

Step 1: Configure the Queue Driver

Laravel supports multiple queue drivers, such as Database, Redis, and Amazon SQS. Update the .env file to set the desired driver:

QUEUE_CONNECTION=database

Step 2: Run the Queue Table Migration

For the database driver, create the necessary table:

php artisan queue:table php artisan migrate

Creating and Dispatching Jobs

Jobs are the tasks you want to execute in the background.

Step 1: Create a Job

Use the make:job Artisan command:

php artisan make:job ProcessEmail

This generates a job class in the App\Jobs directory.

Step 2: Define the Job Logic

Inside the handle method of the job class, add the logic to execute:

namespace App\Jobs; 

class ProcessEmail 
{    
    public function handle()
    {        
        // Job logic here        
        Mail::to('user@example.com')->send(new WelcomeEmail());    
    } 
}

Step 3: Dispatch the Job

You can dispatch a job using the dispatch method:

use App\Jobs\ProcessEmail; ProcessEmail::dispatch($emailData);

Running the Queue Worker

To process the queued jobs, run the queue worker:

php artisan queue:work

This command listens for jobs and processes them in real time.

Retrying Failed Jobs

If a job fails, Laravel allows you to retry it:

php artisan queue:retry [job-id]

Use the failed_jobs table to monitor failures and troubleshoot.

Key Takeaways

Laravel queues improve performance by deferring non-critical tasks.
Choose the right driver for your project based on scalability and requirements.
Monitor and retry failed jobs to ensure reliability.

Learn More

Explore the full guide on Script Binary for detailed insights, code examples, and advanced tips.

Let's Connect!

Have questions about Laravel queues? Drop them in the comments or follow me for more Laravel tips and tutorials!

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal — Thu, 19 Dec 2024 19:05:12 +0000

Optimizing React Apps with `useMemo` and `useCallback`

Performance is key in React applications, especially as your app scales. In this guide, we'll explore how useMemo and useCallback can help you optimize your React components and avoid unnecessary re-renders.

Why Optimization Matters in React

React’s re-rendering behavior is powerful but can lead to performance bottlenecks when not managed properly. useMemo and useCallback are two hooks designed to tackle these issues.

What is `useMemo`?

useMemo memorizes the result of a calculation and only recomputes it when its dependencies change.

Syntax:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example:

Imagine an expensive calculation in a React component:

import React, { useMemo } from "react";

function ExpensiveComponent({ a, b }) {
  const expensiveValue = useMemo(() => {
    console.log("Calculating...");
    return a + b;
  }, [a, b]);

  return <div>Result: {expensiveValue}</div>;
}

Without useMemo, this calculation runs on every render, even when a or b hasn't changed.

What is `useCallback`?

useCallback memorizes a function instance and ensures it’s recreated only when its dependencies change. It's particularly useful when passing callbacks to child components.

Syntax:

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

Example:

Avoid unnecessary child re-renders:

import React, { useCallback } from "react";

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

When to Use Them?

**useMemo**: For optimizing computationally heavy operations.
**useCallback**: For preventing function re-creation when passed as props.

Key Takeaways

Always profile your application before optimization.
Overusing useMemo and useCallback can add unnecessary complexity.
They’re best suited for performance-critical parts of your app.

Learn More

Check out the full guide on Script Binary for in-depth explanations and practical examples.

What's Next?

Follow me for more React tips and tutorials! Let’s connect in the comments below.

DEV Community: Maulik Paghdal

Quick Guide to Livewire Lifecycle Hooks

The Essential Hooks You Need to Know

1. Mount - Initialize Your Component

2. Updated - React to Property Changes

3. Hydrate and Dehydrate - Managing State

A Practical Example

Common Mistakes to Avoid

Quick Reference

Want to Learn More?

[Boost]

Quick Guide: Event Delegation and Bubbling in JavaScript

Maulik Paghdal for Script Binary ・ Nov 16

Quick Guide: Event Delegation and Bubbling in JavaScript

What is Event Bubbling?

Event Delegation: The Smart Way

Real Example: Interactive Todo List

Why Event Delegation Matters

Key Concepts to Remember

Common Pitfall

When Not to Use It

Want to Learn More?

Quick Guide: Reducing Tailwind CSS Build Size

The Main Problem

Essential Steps to Reduce File Size

1. Configure Content Purging Correctly

2. Use Tailwind v3 (JIT Mode)

3. Disable Unused Core Plugins

4. Limit Your Color Palette

5. Minimize Use of @apply

Don't Forget Production Optimization

Quick Wins Summary

Want More Details?

Managing Multiple Node.js Versions with nvm

What is nvm?

Quick Setup

Essential Commands

The Real Power: .nvmrc Files

Common Gotcha

When You Shouldn't Use nvm

Worth Checking Out

Building a Custom UI Kit with Tailwind CSS

Why Build Your Own Kit?

Setting Up Your Foundation

Creating Base Component Styles

Building React Components

Adding Dark Mode

Key Components to Start With

Best Practices I've Learned

Common Pitfalls

Example: Complete Form Component

The Result

Want to Learn More?

Using Tailwind CSS to Build Complex Layouts Quickly

🚀 Using Tailwind CSS to Build Complex Layouts Quickly

✨ Why Tailwind CSS for Layouts?

🔹 1. Setting Up Tailwind CSS

📌 Install Tailwind via npm

📌 Configure tailwind.config.js

📌 Include Tailwind in index.css

🔹 2. Building a Responsive Navbar

🔹 3. Creating a Hero Section with Flexbox

🔹 4. Designing a Responsive Grid Layout

🔹 5. Building a Dashboard Layout

🔹 6. Adding Dark Mode Support

🎯 Conclusion

💬 Let’s Connect!

React Chart.js: Building Interactive Charts with Ease

1. What is Chart.js?

Why Use Chart.js in React?

2. Setting Up React with Chart.js

3. Creating a Simple Line Chart

Step 1: Import Dependencies

4. Using the Line Chart in App.js

5. Adding a Bar Chart

6. Making Charts Interactive

7. Customizing the Charts

8. Deploying the React Chart.js App

Deploy with Vercel

9. Final Thoughts

📌 Configure `tailwind.config.js`

📌 Include Tailwind in `index.css`

Modes of `git reset`:

Optimizing React Apps with `useMemo` and `useCallback`

What is `useMemo`?

What is `useCallback`?