DEV Community: Seif Ahmed

How to Hunt a Bug Again (But at 10 AM ☀️)

Seif Ahmed — Sun, 19 Jul 2026 08:58:56 +0000

Background track playing: "Execution Clap" by Kasane Teto

The Story:

Picture this:

It is 10:00 AM.
I just finished building a full comment editing system for Vlox.
Right-click on any comment → update it instantly. Simple, right?

But then... the nightmare returned, but this time, in the morning. 🔥

The Nightmare Scenario 📉

I logged out to test something. When I logged back in, the "Edit" option for my own comments was gone—until I refreshed the page.

Even worse: if I logged out, the "Edit" option still appeared on comments that were not mine. It did not actually do anything (server-side validation blocked it), but it looked broken and confusing.

Bad UX. Broken state. My code was haunted. 👻

The Root Cause 🔍

The issue was simple—but hidden.

I was attaching the contextmenu event conditionally:

if (comment.by.username === window.currentUserQuickInfo.username) {
    // Attach edit event
}

This worked at render time. But when you log out or switch users, window.currentUserQuickInfo becomes stale. The event was either missing or sticking around when it should not. The state changed—but the UI did not know about it.

Failed Mission Log 🛰️

Attempt 1: Refresh the page after login 🔄

Result: It worked.
Problem: Users should not have to refresh to see basic state changes.
Verdict: Not acceptable for a real app.

Attempt 2: Remove the feature entirely ❌

Result: It worked perfectly.
Problem: It removed a useful feature.
Verdict: Throwing hours of work.

Attempt 3: Create a custom edit icon for everyone 🖊️

Result: Clicking it would do nothing for comments that were not yours.
Verdict: Server-side validation would block it, but the UX was still confusing.

The "Aha!" Moment 💡

What if I attach the event to every comment—but check ownership inside the event? Instead of deciding at render time, I decide at click time.

Before: Conditional attachment

if (comment.by.username === window.currentUserQuickInfo.username) {
  comment.on("contextmenu", ...);
}

After: Always attach, check inside

comment.on("contextmenu", function (e) {
  if (comment.by.username !== window.currentUserQuickInfo.username) return;
  // Show edit modal
});

Now the event is always there—and it only acts if the current user is the owner.

The Full Fix 🚀

I also made sure the state refreshed on logout:

signOutBtn.on("click", async function () {
  // ... logout logic
  getQuickInfo(); // This was the missing piece
});

Now the UI always reflects the current user state:

No more stale events.
No more confusing UI.
No page refresh needed.

Want to see the full code? Check out Vlox on GitHub.

The Debugging Method That Never Fails

Seif Ahmed — Wed, 15 Jul 2026 05:25:40 +0000

We all break things break things a lot. But we should also learn how to fix them.

Here is the exact method I use every time my code breaks—and it works 100% of the time.

🧠 Step 1: Ask the Right Question

Before you change anything, stop and ask yourself:

"What was the last fix or feature I tried to add?"

This is the key. Most bugs come from the most recent change.

🔍 Step 2: Remove the Last Thing You Added

Take out the code you just wrote. Revert to the last working state.

Then ask:

"Does it work now?"

If yes—you found the source.

🧩 Step 3: Add It Back—But Slowly

Re-add the feature, but not all at once.

Add it piece by piece, testing after each small change.

When the break happens again, you will know exactly which part caused it.

🛠️ Step 4: Fix the Snippet

Now that you have found the broken piece, focus only on that.

Rewrite it. Simplify it. Test it.

Fix it the way you know best—then move on.

✅ Step 5: Celebrate

You just hunted down a bug and killed it. 🐛

That is not small. That is engineering.

💡 Why This Works

It isolates the problem. 🔥
It removes guesswork. 👨🏻‍💻
It teaches you what broke and why. 🛠️

That's my method. Use it. Trust it. And keep building your own system. 🚀

[Boost]

Seif Ahmed — Mon, 13 Jul 2026 19:31:58 +0000

Seif Ahmed

Jul 13

I'm Available for Freelance Work 🚀

#webdev #javascript #node #freelance

1 min read

I'm Available for Freelance Work 🚀

Seif Ahmed — Mon, 13 Jul 2026 13:25:08 +0000

I'm Seif, a full-stack developer who builds real working apps.

I built Vlox – a complete social platform with authentication, posts, comments, reactions, search, and a custom frontend library called NanoScript.

What I can help you with:

Node.js · Express · MongoDB
REST APIs & Authentication
Bug fixing & debugging
Full-stack web applications

Portfolio

👉 seifportfolio.seifahmed.workers.dev

I write clean, secure, and maintainable code. If you need something built, fixed, or improved – let's talk.

📩 Reach out: requestse@gmail.com

Let's build something great together!

[Boost]

Seif Ahmed — Sat, 11 Jul 2026 14:57:52 +0000

Seif Ahmed

Jul 3

NanoScript can finally create real projects!

2 min read

How to Hunt a Bug at 10 PM 🌙

Seif Ahmed — Sat, 11 Jul 2026 09:24:01 +0000

The Story:

Picture this:

It is 10 PM.
I was eating my dinner while adding one final touch to my social media app, Vlox.
It should just say "Processing..." while generating a card.

Simple, right?
See the nightmare. 🔥

The Nightmare Scenario 📉

Suddenly, my "Download Card" button broke.
htmlToImage started spitting out completely empty 0b images.
The hunt was on.

Failed Mission Log 🛰️

Attempt 1: Swap to html2canvas 🔄
- Result: Error stating the element was not found in the cloned iframe.
- Verdict: The parent container was completely lost.
Attempt 2: Use CoolAlertJS Toast 🍞
- Result: It looked ugly and means loading two different alert libraries for the same job? Not my game.
- Verdict: Total waste of bundle size.
Attempt 3: Append card preview to body + display: none 🙈
- Result: The canvas process failed entirely.
- Verdict: Canvas snapshot engines completely ignore hidden elements.

The "Aha!" Moment 💡

Why did the element vanish?
Because the card generator lives entirely inside a Swal popup.
When you click the download/confirm button, Swal instantly destroys that entire popup DOM tree.
You cannot snapshot an element that no longer exists. 👻

The Ultimate Fix 🚀

Inside the new "Processing" popup, I appended the #card-generator-image-preview directly into the new alert container.
The element stays alive in the active DOM.
The snapshot succeeds perfectly.
Clean code. Happy developer. Delicious dinner.

Want to see the exact JavaScript code block that fixed it? Drop a comment below or check Vlox on Github.

How I built a social media app using my own library

Seif Ahmed — Fri, 10 Jul 2026 16:57:12 +0000

Demo

Link to Code

Vlox: Source Code on Github
NanoScript: Source Code on Github

How I Built It: Breaking the Vanilla JS Wall

I am an experienced web developer, and my journey into full-stack development started when I wanted to build a private social media platform called PixUp. I built it using pure Vanilla JavaScript. Soon, the codebase became heavily bloated, messy, and completely unmaintainable.

In early 2026, I tried again with a project called BlockSocial. I added complex features like JSONL exports, backup uploads, and post forks. It grew into a giant, complex system that normal users wouldn't understand, and as a solo developer, I couldn't maintain it alone.

I had to stop and ask myself: Why do my social media apps keep failing?
The answer was always the same: Verbose Vanilla JS.

The Dilemma & The Solution

When planning my next platform, Vlox, I evaluated my frontend options:

jQuery? Too legacy.
Modern Frameworks (React/Vue)? Too heavy for edge environments.
Vanilla JS? Too verbose.

I decided to take the best parts of each and engineer my own solution. I built NanoScript—a modern, ultra-lightweight JavaScript library designed for fluent DOM manipulation via a fast, method-chaining API. To make it even more powerful, I engineered custom plugins for it, including a live counter and Ghost State (which automatically saves what you type so you never lose a draft).

Bringing Vlox to Life

With NanoScript handling the frontend, I built Vlox as a clean, high-performance Minimum Viable Product (MVP). It features a robust Node.js/Express backend, MongoDB database storage, secure bcrypt hashing, XSS sanitization, and an optimized Sharp image processing pipeline.

Thanks to NanoScript, the frontend architecture is finally in a state that I can easily scale without hitting a wall of messy code.

What I Focused on This Weekend

Repository Overhaul: Standardized the architecture for both Vlox and NanoScript to make them clean for the public.
Examples: Wrote several example codes using NanoScript.
Performance Audit: Verified that the NanoScript plugin architecture and Vlox's Express rate-limiting work flawlessly under pressure.

If you liked the project, please drop a star on GitHub!

Thanks for reading!

[Boost]

Seif Ahmed — Fri, 10 Jul 2026 11:31:09 +0000

Seif Ahmed

Jun 30

Are you tired of verbose JavaScript code? Check NanoScript

#javascript #opensource

1 min read

[Boost]

Seif Ahmed — Fri, 10 Jul 2026 05:37:13 +0000

Seif Ahmed

Jul 9

Building a Secure Authentication System

#tutorial #webdev #authjs #programming

2 min read

Building a Secure Authentication System

Seif Ahmed — Thu, 09 Jul 2026 14:34:43 +0000

This guide details the logic for implementing a secure, session-based user login system using Node.js, Mongoose and Bcrypt.

📝 Step-by-Step Implementation:

1. Database Lookup

When a user submits their credentials, the system queries MongoDB to locate the user profile.

Method: findOne({ username }) via Mongoose.
Security Rule: If the username does not exist, halt execution immediately. Return a 401 Unauthorized status.

2. Password Verification

If the user account exists, the system compares the plain-text input password against the hashed password stored in the database.

Method: await bcrypt.compare(password, user.password).
Security Rule: If the comparison returns false, halt execution. Return a 401 Unauthorized status.

3. Session Management

Once both checks pass, the system initializes a secure session to keep the user authenticated across subsequent requests.

State Flags:
- req.session.isLoggedIn = true
- req.session.userId = user._id
Response: Return a 200 OK status with a success message.

🔒 Security Best Practices Implemented:

Generic Error Messages: Both missing usernames and incorrect passwords return the exact same message: "Invalid username or password". This prevents attackers from brute-forcing and enumerating valid usernames.
Cryptographic Hashing: Passwords are never stored or compared in plain text. Bcrypt handles salt generation automatically to protect against rainbow table attacks.
Stateful Sessions: Using server-side sessions keeps user identity secure and reduces the risk of token theft common in purely client-side storage.

💻 Quick Code Example:

app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  try {
    // 1. Check if the user exists
    const user = await User.findOne({ username });
    if (!user) {
      return res.status(401).json({ message: "Invalid username or password" });
    }

    // 2. Verify the password
    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) {
      return res.status(401).json({ message: "Invalid username or password" });
    }

    // 3. Establish session data
    req.session.isLoggedIn = true;
    req.session.userId = user._id;

    return res.status(200).json({ message: "Congrats! You are logged in!" });

  } catch (error) {
    return res.status(500).json({ message: "Internal server error" });
  }
});

If you found this guide helpful, please consider giving it a like!
Thanks for reading!

[Boost]

Seif Ahmed — Thu, 09 Jul 2026 10:54:53 +0000

Seif Ahmed

Jun 30

Are you tired of verbose JavaScript code? Check NanoScript

#javascript #opensource

1 min read

Can my DOM library build a real working social media app?

Seif Ahmed — Thu, 09 Jul 2026 06:56:26 +0000

We’ve all been there—stuck in the endless loop of massive frontend frameworks, massive bundle sizes, and complex state management just to build a standard web app.

So, I decided to take a step back and build my own frontend DOM library named NanoScript. It’s lightweight, fast, and stays close to native vanilla JS speed. But I wanted to see if it could actually handle a heavy, real-world workload.

Could a custom DOM library build a fully functioning social media app?

To find out, I built Vlox. And it actually works.

What is Vlox?

Vlox is a fully working social media platform powered entirely by NanoScript on the frontend. I didn't want to just build a basic "to-do list" app; I wanted to push the library to its absolute limits with features that production apps actually need.

Here is what's currently running under the hood in Vlox:

Full Auth Flow: Working login, signup, and logout sessions.
Dynamic Feed: Creating, loading, and interacting with posts.
Images Hall: A responsive, media-heavy grid gallery.
Live Counters: Real-time updates for engagement and metrics without tanking performance.

Why NanoScript?

The goal behind NanoScript wasn't to reinvent the wheel, but to make DOM manipulation and frontend code clean without the bloated boilerplate of modern build tools.

Zero Bloat: It keeps your initial page loads incredibly fast.
Fast Rendering: Highly optimized for updating fast-paced feeds (like the Vlox image gallery).
Simple Syntax: Handles event listeners and reactive UI updates with minimal code.

Check out the code 🖥️

Both the library, the concepts behind it and Vlox are completely open-source. If you want to see how the DOM manipulation works under the hood or check out the architecture, you can find the repository here:

👉 NanoScript on GitHub

👉 Vlox on GitHub

Take a look, test it out, and let me know what you think! If you find it interesting, a star on the repo would be massive.

Drop a comment below if you have any questions!