DEV Community: Dzung Nguyen

🎨 Tailwind CSS: Styling Inner Components on Parent Hover Using "group"

Dzung Nguyen — Sat, 22 Feb 2025 02:33:45 +0000

🔥 Have you ever wanted to style an inner component when hovering over its parent container in Tailwind CSS?🤔 By default, Tailwind’s utility classes apply directly to the element being interacted with.

👉 That’s where the group class comes in! 🚀

🎨 How It Works

✅ Add group class to the parent element.
✅ Use group-hover class on the child element.

Example

<div class="group p-6 bg-white rounded-lg">
  <h2 class="text-xl font-semibold">Product Title</h2>
  <p class="text-gray-600">Some product description here.</p>
  <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded group-hover:bg-green-500">
    Buy Now
  </button>
</div>

✨ Benefits

💎 Enables complex interactions without custom CSS.
💎 Improves readability by keeping styles inline.

Happy coding! 🚀

Follow me to stay updated with my future posts:

🌟 Nullish Coalescing Operator (??) vs OR (||) in JavaScript : When to Use Each?

Dzung Nguyen — Fri, 21 Feb 2025 02:14:02 +0000

🔥 In JavaScript, the Nullish Coalescing Operator (??) provides a way to handle null and undefined values more effectively.

Comparisons

👉 The nullish coalescing operator (??) returns the right-hand value only if the left-hand value is null or undefined. It does not treat other falsy values (0, false, NaN, "") as nullish.

👉 The logical OR (||) operator returns the right-hand side value if the left-hand side is falsy (0, false, "", null, undefined)

Examples

// ✅ Example 1: Basic usage
const value1 = null ?? 'Default Value';
console.log(value1); // Output: 'Default Value'

const value2 = undefined ?? 'Fallback';
console.log(value2); // Output: 'Fallback'


// ✅ Example 2: Difference between ?? and ||
const zero = 0 ?? 100;
console.log(zero); // Output: 0 (because 0 is not null or undefined)

const zeroOr = 0 || 100;
console.log(zeroOr); // Output: 100 (because 0 is falsy)


// ✅ Example 3: Chaining with multiple values
const result = null ?? undefined ?? '' ?? 'First non-null value';
console.log(result); // Output: ''


// ✅ Example 4: With function parameters
function greet(name) {
    const displayName = name ?? 'Guest';
    console.log(`Hello, ${displayName}!`);
}
greet();        // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!


// ✅ Example 5: Nested objects with optional chaining
const user = {
    profile: {
        age: null
    }
};
const age = user?.profile?.age ?? 'Unknown';
console.log(age); // Output: 'Unknown'

Documentation

💎 Nullish Coalescing Operator: https://lnkd.in/gvrzu53T
💎 Logical OR: https://lnkd.in/gy3xqtX6

Happy coding! 🚀

Follow me to stay updated with my future posts:

🚀 Enhance Your JavaScript Code with the Spread Operator (...)!

Dzung Nguyen — Wed, 19 Feb 2025 10:44:59 +0000

👉 Have you ever needed to merge arrays, clone objects, or pass multiple arguments to a function efficiently?

👉 Instead of writing lengthy, repetitive code, JavaScript's spread operator (...) provides a simple and powerful way to do that.

🔥 What is the Spread Operator?

The spread operator (...) allows you to expand elements of an iterable (like arrays or objects) into individual elements.

🛠 Common Use Cases

1️⃣ Merging Arrays

// ✅ Merging Arrays  
const frontend = ["React", "Vue", "Angular"];  
const backend = ["Node.js", "Django", "Spring"];  
const fullStack = [...frontend, ...backend];  
console.log(fullStack);  
// Output: ["React", "Vue", "Angular", "Node.js", "Django", "Spring"]  

// ✅ Merging Arrays & Objects
const extraInfo = { country: "USA", language: "English" };  
const mergedUser = { ...user, ...extraInfo };  
console.log(mergedUser);  
// Output: { name: "Alice", age: 25, country: "USA", language: "English" }

2️⃣ Cloning Arrays & Objects

// ✅ Cloning Arrays  
const originalArray = [1, 2, 3];  
const clonedArray = [...originalArray];  
console.log(clonedArray);  
// Output: [1, 2, 3]  

// ✅ Cloning Objects  
const user = { name: "Alice", age: 25 };  
const clonedUser = { ...user };  
console.log(clonedUser);  
// Output: { name: "Alice", age: 25 }

3️⃣ Passing Multiple Arguments to a Function

// ✅ Passing Multiple Arguments to a Function  
const numbers = [3, 5, 7];  
function sum(a, b, c) { return a + b + c; }  
console.log(sum(...numbers));  
// Output: 15

🚀 Why Use the Spread Operator?

✅ Concise & Readable – Reduces clutter in your code.

✅ Flexible – Works with arrays, objects, and function arguments.

✅ Safe & Efficient – Prevents modifying original data.

If you’re writing JavaScript, embrace the spread operator to make your code cleaner, shorter, and more powerful! 🚀

Follow me to stay updated with my future posts:

🚀 Detecting Online/ Offline Status in React 🌐

Dzung Nguyen — Tue, 18 Feb 2025 02:16:10 +0000

🚀 Detecting Online/ Offline Status in React 🌐

🤔 Have you ever wondered how to detect if a user goes offline or back online in your React app?

👉 The navigator.onLine property makes it super easy to do that!

💎 Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine

🔥 Here’s a custom React hook (useOnlineStatus) that you can freely use for your React project 🥰

import { useState, useEffect } from "react";

const useOnlineStatus = () => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const updateStatus = () => setIsOnline(navigator.onLine);

    window.addEventListener("online", updateStatus);
    window.addEventListener("offline", updateStatus);

    return () => {
      window.removeEventListener("online", updateStatus);
      window.removeEventListener("offline", updateStatus);
    };
  }, []);

  return isOnline;
};

And this is how you can use it:

const OnlineStatus = () => {
  const isOnline = useOnlineStatus();

  return (
    <div>
      <h2>Status: {isOnline ? "🟢 Online" : "🔴 Offline"}</h2>
    </div>
  );
};

Follow me to stay updated with my future posts:

🚀 Efficient API Calls with Axios: Cancelling Unwanted Requests 🚀

Dzung Nguyen — Sat, 15 Feb 2025 14:37:48 +0000

⚠️ When working with frontend applications, API requests can pile up, especially with features like live search or auto-suggestions.
⚠️ If you don’t cancel outdated requests, you waste bandwidth and slow down your app.
⚠️ Outdated requests can sometimes cause flickering UI

❤️ If you are using Axios to make API requests, here are the two ways you can do:
✅ Use AbortController (For versions > 0.22)
👉 AbortController provides a signal that Axios listens to.
👉 When abort() is called, it immediately stops the request, preventing unnecessary responses from being processed.

import axios from "axios";

const controller = new AbortController();
const signal = controller.signal;

axios.get("https://api.example.com/data", { signal })
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.name === "AbortError") {
      console.log("Request was canceled");
    } else {
      console.error("Request failed", error);
    }
  });

// Cancel the request
controller.abort();

✅ Use CancelToken (For versions < 0.22)
👉 CancelToken creates a cancelable request by passing a token.
👉 The token acts as a reference to the request, allowing Axios to identify and cancel it when needed.
👉 When cancel() is called on the token, Axios recognizes the signal and aborts the associated request, preventing unnecessary processing.

import axios from "axios";

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get("https://api.example.com/data", { cancelToken: source.token })
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log("Request was canceled:", error.message);
    } else {
      console.error("Request failed", error);
    }
  });

// Cancel the request
source.cancel("Operation canceled by the user.");

Follow me to stay updated with my future posts:

🎨 Open Graph (OG) Images: What They Are & How to Test Them 🚀

Dzung Nguyen — Tue, 11 Feb 2025 05:03:13 +0000

Ever shared a link and wondered how social media platforms generate those preview images? 🤔 That’s the power of Open Graph (OG) images!

🌍 What Are Open Graph Images?

OG images are part of the Open Graph Protocol (OGP), which helps control how your website appears when shared on platforms like Facebook, X, LinkedIn, WhatsApp, Discord, etc. They make links more engaging, clickable, and visually appealing! 🔥

🎯 Why Are OG Images Important?

✅ Boost Click-Through Rates (CTR) 📈
✅ Improve Social Media Engagement 💬
✅ Make Links Look Professional 🎨
✅ Enhance Brand Recognition 🚀

🛠️ How to Add OG Images to Your Website?

Simply add the following meta tags inside the <head> of your page:

<meta property="og:title" content="My Awesome Blog 🚀" />
<meta property="og:description" content="Learn how to create and test OG images!" />
<meta property="og:image" content="https://yourwebsite.com/og-image.jpg" />
<meta property="og:url" content="https://yourwebsite.com" />
<meta property="og:type" content="website" />

💡 Pro Tip: The recommended OG image size is 1200x630 pixels! 📏

🔍 Tools to Test OG Images

Once you’ve set up OG images, you need to test them to ensure they appear correctly. Here are some great tools:

🔹 Meta (Facebook) Sharing Debugger

→ Helps you preview OG images and troubleshoot issues on Facebook.

🔹 LinkedIn Post Inspector

→ Ensures LinkedIn displays your OG image correctly.

🔹 opengraph.xyz

→ A multi-platform testing tool to preview OG images before sharing.

Follow me to stay updated with my future posts:

🚀 Transform Your Images with Cloudinary Image Transformations! 🎨

Dzung Nguyen — Sun, 09 Feb 2025 03:21:01 +0000

🤔 For those who use Cloudinary for managing images for your application, have you ever wanted to resize, crop, add effects or even convert to another format?

🥰 Good news! Cloudinary's dynamic URL transformations enable you to programmatically generate multiple variations of your high quality original images on the fly, without the need for graphic designers and fancy editing tools. 🎉

💎 Documentation: Image Transformations
💎 Transformation Builder UI: https://tx.cloudinary.com

✨ How it helps:

🚀 AI-Powered Enhancements – Use AI for background removal, upscaling, recoloring, and restoration.

📏 Flexible Resizing – Fit, crop, scale, and adjust images for any device or layout.

🎨 Creative Effects – Apply blur, vignette, sepia, pixelation, and more for a unique look.

🚀 Performance Optimization – Auto-format, adjust quality, and deliver the best version.

And much more... 🎉 🎉

No need for manual edits — Cloudinary Image Transformations does it all for you! 🚀

Follow me to stay updated with my future posts:

🚀 Supercharge Your React Development with usehooks-ts

Dzung Nguyen — Sat, 08 Feb 2025 16:33:56 +0000

If you're working with React + TypeScript, you know how much boilerplate and repetitive logic can slow you down. usehooks-ts is a powerful library that provides a collection of well-typed, reusable React hooks to make your development process smoother and more efficient.

🔹 Why use usehooks-ts?

✅ TypeScript Support – No need to write type definitions yourself!
✅ Clean & Readable Code – Reduce boilerplate and focus on features.
✅ Optimized & Performant – Built with best practices in mind.
✅ Well-Maintained – Regular updates with new hooks and improvements.

🔗 Check it out here: usehooks-ts.com

If you're tired of reinventing the wheel with common hooks, this library is a must-have in your React + TypeScript stack! 🚀🔥

Follow me to stay updated with my future posts:

Handling Panic in Go with recover() ⚡

Dzung Nguyen — Fri, 07 Feb 2025 06:22:03 +0000

👉 In Go, a panic can occur due to unexpected runtime errors. When this happens, the program immediately stops execution.

👉 Go provides a built-in function, recover(), that allows you to gracefully handle panics and ensure cleanup tasks are properly executed. 🛠️

Sample Code

package main

import "fmt"

func main() {
    defer func() {
        if r := recover(); r != nil {
            fmt.Println("Recovered from panic:", r)
        }
    }()

    fmt.Println("Program started")
    panic("Something went wrong!")
    fmt.Println("This will not be executed")
}

Output

Program started  
Recovered from panic: Something went wrong!

🚨 Important Notes

✅ recover() only works inside a deferred function

✅ If recover() is not called, the program will crash

✅ Use recover() for exceptional, unexpected situations or critical cleanup and at the highest level possible (like worker process/ main function)

✅ Abuse recover() can hide real bugs and make debugging harder! ⚠️⚠️

Follow me to stay updated with my future posts:

Graceful Shutdown in Node.js Express 🚀

Dzung Nguyen — Tue, 04 Feb 2025 10:22:02 +0000

💎 When running an Express server, shutting it down gracefully ensures that ongoing requests complete and resources like database connections are properly cleaned up before the app exits.
💎 A graceful shutdown ensures that ongoing requests finish before the app exits.

Code Example

const express = require("express");

const app = express();
const PORT = 3000;

const server = app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

const shutdown = () => {
  console.log("\nShutting down...");
  server.close(() => {
    console.log("Server closed. Cleanup complete.");
    process.exit(0);
  });
};

process.on("SIGINT", shutdown);
process.on("SIGTERM", shutdown);

🌟 Key Takeaways

✅ Listen for SIGINT/ SIGTERM signal 🚨 to trigger shutdown
✅ Ensures active requests complete 👍 before exiting
✅ Calls server.close() to stop the server and release the port

This ensures a smooth exit without dropping connections abruptly! 🚀✨

Follow me to stay updated with my future posts:

🚀 Create Responsive Emails with MJML! 📩

Dzung Nguyen — Sun, 02 Feb 2025 14:33:40 +0000

Struggling with responsive email design? 🤔 MJML is the solution to save your day! 🚀

Instead of getting tangled up in messy tables and hours of troubleshooting across email clients, MJML lets you use simple, intuitive markup to create responsive emails in no time! ✨

🌐 Website: https://mjml.io

Benefits of MJML

Using MJML over regular HTML and CSS for emails offers several advantages:

✅ Responsive Design Made Easy 📱💻: MJML takes care of making your emails look great on any device, while with raw HTML/CSS, you’d have to manually handle media queries and client compatibility.

✅ Compatibility Across Email Clients 🧩: Email clients like Outlook, Gmail, and Apple Mail render HTML/CSS differently. MJML automatically generates the necessary HTML that works across all of them.

✅ Simplicity & Speed ⚡️: MJML abstracts complex, tedious code (like nested tables) into simple, readable tags. It lets you write less and produce the same result faster.

✅ Fewer Headaches 😖: Writing custom email code involves a lot of testing and tweaking for compatibility, but MJML handles the heavy lifting, leaving you with a more streamlined process.

Ready to simplify your email design process? Try MJML today and create beautiful, responsive emails in minutes! 🚀📩

Follow me to stay updated with my future posts:

🚀 Effortless Smooth Scrolling with CSS Scroll Snap! 🎯

Dzung Nguyen — Sat, 01 Feb 2025 12:40:30 +0000

Ever scrolled through a carousel or sectioned layout and went beyond your target? 🤯 Stop struggling with clunky scrolling — CSS Scroll Snap makes it smooth & precise!

📖 Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
🎉 Demo: https://ibb.co/m53GVXnD

📌 Why Use It?

✅ No JavaScript needed!
✅ Perfect for sliders, sections & galleries!
✅ Enhances user experience with controlled, intuitive scrolling!

🚀 Try it & let your layouts snap into place effortlessly! 🔥

Follow me to stay updated with my future posts: