Posts in HTML

How to Add a Glow Effect to Images in HTML & CSS ✨ | Image Glow HTML

HTML
An idea added of image glow html effect

Ever wanted to make your images pop? Maybe give them a neon glow effect that makes your website look straight out of a sci-fi movie? 🚀 Well, today, I’ll show you how to achieve that glow effect in HTML and CSS. It’s super simple and requires just a few lines of code.

1️⃣ Basic Glow Effect with CSS

In HTML, images are added using the <img> tag, but the magic happens in CSS. To create a glow effect, we use the box-shadow property.

📌 Example Code: Basic Image Glow Effect

htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Glow Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
        }

        img {
            width: 300px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); /* Cyan glow effect */
            transition: 0.3s;
        }

        img:hover {
            box-shadow: 0 0 40px rgba(0, 255, 255, 1); /* Stronger glow on hover */
        }
    </style>
</head>
<body>
    <img src="your-image.jpg" alt="Glowing Image">
</body>
</html>

🛠️ What’s Happening Here?

  • box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); → Adds a soft cyan glow.
  • transition: 0.3s; → Smooth animation when hovering.
  • img:hover → Increases glow intensity on hover.

Try replacing rgba(0, 255, 255, 0.8) with other colors like rgba(255, 0, 0, 0.8) for a red glow or rgba(0, 255, 0, 0.8) for a green glow. 🎨

2️⃣ Advanced Glow Effect with CSS Filters

Want an even cooler effect? Use the filter property!

📌 Example Code: Advanced Glow Effect

cssCopyEditimg {
    filter: drop-shadow(0 0 20px cyan);
}

💡 Why Use drop-shadow Instead of box-shadow?

  • drop-shadow keeps the glow around the actual shape of the image (great for transparent PNGs).
  • box-shadow applies a glow around the entire rectangular box.

3️⃣ Animated Glowing Effect (Breathing Glow) 🌟

What if the glow effect pulses like it’s alive? Add CSS animations!

📌 Example Code: Pulsing Glow Effect

cssCopyEdit@keyframes glow {
    0% { box-shadow: 0 0 10px cyan; }
    50% { box-shadow: 0 0 30px cyan; }
    100% { box-shadow: 0 0 10px cyan; }
}

img {
    animation: glow 2s infinite alternate;
}

This will make the image pulse with a glowing aura—perfect for gaming websites, neon themes, or just making your site look cool. 🎮

4️⃣ SEO Benefits of Using Glow Effects on Images

Alright, let’s talk SEO. 🔍 While CSS effects don’t directly impact rankings, engagement and user experience do. A glowing image can:

✅ Grab Attention – Visitors stay longer, reducing bounce rate.
✅ Improve Click-Through Rate (CTR) – Eye-catching visuals increase interactions.
✅ Enhance Readability & UI/UX – A well-designed site means better retention.
✅ Boost Social Shares – Cool effects encourage people to share your content.

📌 Pro Tip: Always use alt tags (alt="Glowing Image") for accessibility and SEO! Google loves it when you describe your images properly.

Final Thoughts

And that’s it! Now you know how to create a glowing image effect in HTML using box-shadow, drop-shadow, and even animations. 🌟 Whether it’s for a portfolio, blog, or e-commerce website, adding these subtle effects can enhance your design without affecting performance.

Here You can read my Previous Blog: How to Webscrape Images from HTML: A Developer’s Guide (Without Getting Blocked 🚫)

🔥 Now, go and make your images glow like a neon sign in the dark! Let me know if you try this effect. 🚀

How to Webscrape Images from HTML: A Developer’s Guide (Without Getting Blocked 🚫)

HTML 1 Comment
An Image of Laptop with icon of Web scraper for showing example for (How to Webscrape Images from HTML)

Hey folks! 👋 Sharih Hassan back at it again—your code-cracking buddy from SharihHassan.com. Last time, we tackled how to prevent Angular from returning HTML when you wanted JSON. Today? We’re going rogue: how to webscrape images from HTML without ending up on a website’s naughty list. Buckle up, and let’s do this ethically (and hilariously).

Why Webscrape Images? (And Why It’s Like Walking a Tightrope 🎪)

Webscraping images is like sneaking cookies from the cookie jar 🍪—everyone does it, but you gotta be smooth. Maybe you’re building a meme archive, training an AI, or just really into cat pictures 🐈. But scrape carelessly, and you’ll get blocked faster than a pop-up ad in 2005.

Step 1: Inspect the HTML—Be a Detective 🕵️♀️

Right-click any webpage, hit “Inspect,” and you’ll see HTML tags laughing at you. Images usually live inside <img> tags with src attributes. Your mission? Extract those src URLs like a pro.

html

<!-- Example: A very serious cat image -->  
<img src="https://website.com/cat-in-a-suit.jpg" alt="Business Cat">

Run HTML

Step 2: Use JavaScript (But Don’t Be a Script Kiddie)

For static sites, Cheerio (a lightweight jQuery-like library) is your BFF. For dynamic sites, Puppeteer (a headless browser) will pretend to be a human. Here’s a sneak attack:

JavaScript

// Puppeteer example: Scrape images like a ninja  
const puppeteer = require('puppeteer');  

(async () => {  
  const browser = await puppeteer.launch();  
  const page = await browser.newPage();  
  await page.goto('https://example.com');  

  const images = await page.$$eval('img', imgs =>  
    imgs.map(img => img.src)  
  );  

  console.log("🕶️ Here’s your loot:", images);  
  await browser.close();  
})();

Pro Tip: Always check a site’s robots.txt first. Ignoring it is like ignoring a “Beware of Dog” sign 🐕.

Step 3: Filter & Download Responsibly 🌱

Not all images are created equal. Filter out logos, icons, or anything with alt="annoying-ad". Use Node.js’s fs module or Python’s requests to download them.

JavaScript

// Filter only high-res cat pics (priorities, people)  
const catImages = images.filter(src =>  
  src.includes('cat') && !src.includes('thumbnail')  
);

Step 4: Avoid Getting Blocked (AKA Don’t Be a Greedy Goblin)

Websites hate scrapers that hit them 100 times/second. Add delays, rotate user agents, and use proxies. Or just… don’t be a bot 🤖.

JavaScript

// Puppeteer with a polite delay  
await page.waitForTimeout(3000); // 3 seconds = good karma

Step 5: Ethical Stuff (Because We’re Not Villains)

  • Respect copyrights: Don’t scrape Unsplash and sell the pics as NFTs.
  • Credit creators: If you use ’em, link back.
  • Rate limits: Treat websites like a buffet—take one plate at a time.

Final Thoughts: Scrape Smart, Not Hard 💡

Webscraping images is powerful, but with great power comes great “why is my IP banned?” energy. Use tools wisely, respect website rules, and maybe leave a virtual thank-you note 💌.

And hey, if you’re still wrestling with HTML in Angular, revisit my guide on preventing HTML responses in Angular. Because nobody wants JSON dressed as HTML!

Got scraping horror stories? Share ’em on the blog! Catch you in the next post.
– Sharih Hassan ✌️

How to Prevent Returning HTML in Angular: A Developer’s Guide (Without Losing Your Sanity 😱)

HTML 1 Comment
Angular, Web Development, API Errors, Frontend Development, JSON vs HTML, Debugging Tips, Angular Tips, HTTP Headers, Error Handling, Developer Humor, HTTP Errors, Angular Best Practices

Hey there, fellow coders! 👋 Sharih Hassan here—your friendly neighborhood developer and blogger at SharihHassan.com. Today, we’re tackling a quirky little problem that’s haunted many Angular devs: how to stop your app from returning HTML when you specifically asked for JSON. Let’s turn that frustration into action—and maybe share a laugh along the way.

Wait, Why Am I Getting HTML Instead of Data? 🤔

Picture this: You’re happily coding an Angular app, sipping coffee ☕, and suddenly your API call returns… an entire HTML page instead of that sweet, sweet JSON. It’s like ordering a latte and getting a cactus 🌵. Not cool.

This usually happens when:

  • Your API endpoint is misconfigured (oops).
  • The server throws an error (like a 404 or 500) and dumps HTML instead of JSON.
  • You’ve accidentally called the wrong URL (been there, done that 💁♂️).

But fear not! Let’s fix this faster than you can say, “Why is my app rendering a 404 page?!”

Step 1: Check Your Endpoints (No, Seriously)

First, channel your inner detective 🕵️♂️. Did you typo the API URL? Check your environment.ts file or wherever you store endpoints. A misplaced / can turn your data fetch into a wild goose chase.

Typescript

// environment.ts  
export const environment = {  
  production: false,  
  apiUrl: 'https://your-api.com/data' // Not 'https://your-api.com/data/' 🙅♂️  
};

Pro tip: Use Angular’s HttpClient with error handling to catch these gremlins early:

Typescript

getData() {  
  return this.http.get(environment.apiUrl).pipe(  
    catchError((error) => {  
      console.log("Hey, why is there HTML here?! 🔍", error);  
      throw error;  
    })  
  );  
}

Step 2: Forcefully Reject HTML Responses

Sometimes, servers get too helpful and return HTML even on errors. To avoid this, explicitly ask for JSON in your HTTP headers:

Typescript

getData() {  
  const headers = new HttpHeaders({  
    'Accept': 'application/json' // "I said JSON, please!" 📢  
  });  
  return this.http.get(environment.apiUrl, { headers });  
}

If the server still sends HTML, it’s time to yell at your backend team. Politely, of course. 😇

Step 3: Validate Responses Like a Bouncer 🚧

Don’t trust strangers—even your API. Use Angular’s interceptors to validate responses before they wreak havoc:

Typescript

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  
  return next.handle(req).pipe(  
    filter(event => event instanceof HttpResponse),  
    map((event: HttpResponse<any>) => {  
      if (event.headers.get('Content-Type')?.includes('text/html')) {  
        throw new Error('HTML detected! Abort! Abort! 🚨');  
      }  
      return event;  
    })  
  );  
}

Now your app will block HTML at the door like an overzealous nightclub bouncer.

Step 4: Handle Errors Gracefully (Because Stuff Happens)

Even with precautions, errors happen. Maybe the server is down, or a cat walked on the keyboard 🐱💻. Use Angular’s error handling to show friendly messages instead of raw HTML:

Typescript

this.dataService.getData().subscribe({  
  next: (data) => this.showData(data),  
  error: (err) => {  
    this.displayError("Oops! Our hamsters took a break. 🐹 Try again later!");  
  }  
});

Step 5: Server-Side Fixes (Because Teamwork Makes the Dream Work)

If you control the backend, ensure it never returns HTML for API routes. For example, in Node.js/Express:

Javascript

app.use('/api', (req, res, next) => {  
  res.status(404).json({ error: 'Not Found' }); // Not res.sendFile('404.html')!  
});

Final Thoughts: Keep Calm and Code On 💪

Returning HTML instead of JSON is like getting socks for Christmas—unexpected and mildly infuriating. But with proper error handling, headers, and teamwork, you’ll squash this bug faster than you can say, “Where’s my data?!”

By the way, if you’re into quirky JavaScript hacks, check out my previous article on How to Simulate Keyboard Typing in the JavaScript Console. It’s a fun little trick that’ll make you feel like a coding wizard 🧙‍♂️.

Catch you in the next post!
– Sharih Hassan ✌️

HTML Form Creation Made Easy: How to View Results Using JavaScript 👨🏻‍💻

HTML JavaScript
Close Up of Web Designer Working in the Office

Forms are the backbone of user interaction on the web. Whether it’s signing up for a newsletter, logging in, or collecting feedback, forms do the heavy lifting. But let’s face it—creating an HTML form and figuring out how to display the results might feel intimidating at first. Fear not! 😊 By the end of this guide, you’ll know how to create a basic HTML form and view its results using JavaScript. Let’s get started!

Step 1: Creating the HTML Form 🏛️

First, let’s create a simple form. This form will ask for a user’s name and email and include a submit button. Here’s what the HTML code looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Example</title>
</head>
<body>
    <h1>Sign Up Form</h1>
    <form id="signupForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>

        <button type="submit">Submit</button>
    </form>

    <div id="result" style="margin-top: 20px;"></div>
</body>
</html>

Key Points:

  • <form>: The container for all input fields.
  • <input>: Used to collect data (e.g., text, email).
  • required: Ensures users don’t leave fields blank.
  • id: Helps JavaScript identify and manipulate specific elements.

Step 2: Using JavaScript to View Form Results 🎨

Now that we have our form, let’s use JavaScript to display the results when the user submits the form.

Add the following JavaScript code inside a <script> tag at the end of the HTML file:

<script>
    // Select the form element
    const form = document.getElementById('signupForm');

    // Add an event listener for form submission
    form.addEventListener('submit', function(event) {
        // Prevent the default form submission behavior
        event.preventDefault();

        // Get the values from the input fields
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;

        // Display the results
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = `<p><strong>Name:</strong> ${name}</p><p><strong>Email:</strong> ${email}</p>`;
    });
</script>

What’s Happening Here?

  1. Prevent Default Behavior: The event.preventDefault() method stops the form from reloading the page upon submission.
  2. Retrieve Input Values: The .value property gets the user’s input from the fields.
  3. Display Results: We update the innerHTML of the <div> element to show the name and email.

Step 3: Test It Out! 🎮

Save your HTML file and open it in a browser. Fill out the form, hit “Submit,” and watch as the results appear instantly below the form. No page reloads. No confusion. Just magic! 🎩

Why Use JavaScript for This? 🚀

JavaScript makes forms interactive and dynamic. Here are some benefits:

  • Instant Feedback: Users see results immediately without reloading the page.
  • Validation: You can validate inputs (e.g., checking if an email is valid).
  • Flexibility: JavaScript lets you enhance the form’s functionality over time.

Bonus: Adding Some Style 🎨

Want your form to look as good as it works? Add this simple CSS to style it:

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    form {
        max-width: 300px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button {
        background-color: #007BFF;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>

Now your form not only works like a charm but also looks modern and sleek.

Final Thoughts 🌟

Creating HTML forms and displaying their results using JavaScript is a vital skill for any web developer. It’s the first step toward building interactive, user-friendly web applications.

If you found this helpful, check out more practical guides on SharihHassan.com and start building your web development skills today!

Happy coding! 🌐