DEV Community: Syed Ahmed Mohi Uddin Hasan

A green pipeline means nothing if your test suite is written to validate its own hallucinations. Stop letting AI write post-hoc tests for code it just generated. Here is why Spec-First TDD is non-negotiable for AI engineering: 👇 #ai #webdev #programming

Syed Ahmed Mohi Uddin Hasan — Sat, 15 Aug 2026 08:05:54 +0000

Syed Ahmed Mohi Uddin Hasan

Aug 15

The AI Test Illusion

#ai #programming #webdev #productivity

2 min read

The AI Test Illusion

Syed Ahmed Mohi Uddin Hasan — Sat, 15 Aug 2026 08:03:27 +0000

As AI coding assistants like Claude Code, Cursor, and GitHub Copilot become daily drivers in modern software engineering, a dangerous pattern has emerged in many team pipelines: letting LLMs generate unit tests for code they just wrote.

It feels efficient on the surface. The AI writes a feature, writes the test suite, the tests run, and the pipeline turns green.

However, relying on post-hoc test generation creates a massive structural blind spot one that software engineering researchers and core maintainers have now quantified.

1. The Flaw of Post-Hoc AI Tests: Confirmation Bias

When an LLM generates a feature, its context window contains the exact logic, assumptions, and potential edge-case omissions that produced that code.

If you prompt the model right after with "now write unit tests for this code," the model uses its generated code as its ground truth. Instead of asking "What should this code do according to business requirements?", the LLM asks "What does this code currently do?"

If the feature code contains a subtle logic bug, the LLM will generate test assertions that validate that exact bug as expected behaviour. The pipeline passes, but all you have done is automate confirmation bias.

2. What the Empirical Data Says: Low Mutation Scores

This isn't just a theoretical concern, software testing metrics prove it:

High Coverage, Low Mutation Detection: Studies evaluating LLM-generated unit tests using Mutation Testing (deliberately injecting artificial bugs into code to see if tests catch them) reveal a stark reality. While post-hoc LLM tests achieve high line coverage, they often have low mutation scores, sometimes under 15%.
Green Suite Illusion: Because post-hoc tests mirror implementation rather than boundary rules, they pass even when underlying business logic is intentionally corrupted.

3. The Context Engineering Misconception

A common counterargument is that adding spec requirements into context files like CLAUDE.md bloats the context window and degrades model performance.

This conflates two completely different things:

Repository Rules (CLAUDE.md / System Guidelines): This should strictly remain lightweight, defining architectural patterns, tech stacks, and formatting constraints.
Feature Specifications (Issues, API Contracts, Specs): Feature requirements belong in dedicated issue files, OpenAPI contracts, or spec files passed during feature generation.

The Solution: Spec-First (TDD) Grounding

Whether you use a single agent loop or a sub-agent setup, the core rule of reliable AI engineering remains Test-Driven Development (TDD):

[ External Spec / Ticket ] ---> [ Generate Assertions / Tests ] ---> [ Generate Feature Code ] ---> [ Verify ]

When test assertions are anchored to an external requirement before or alongside code generation, the LLM is forced to evaluate its implementation against an unyielding standard, eliminating false positives.

Conclusion

AI is an incredible force multiplier, but green pipelines mean nothing if your test suite is written to validate its own hallucinations.

By decoupling test requirements from post-hoc code generation and enforcing spec-first engineering, teams can leverage AI safely without shipping silent production bugs.

References & Further Reading:

1. Mutation-Guided Unit Test Generation with LLMs (IEEE/ACM International Conference on Automated Software Engineering)

2. Beyond Functional Correctness: Exploring Hallucinations in LLM-Generated Code

3. Evaluating Test-Driven Development in LLM-Based Code Generation (ACM Transactions on Software Engineering)

The Frontend World Just Changed: 5 Shifts for 2026

Syed Ahmed Mohi Uddin Hasan — Tue, 21 Apr 2026 10:48:38 +0000

The React Compiler Killed Manual Optimisation. Handwriting. useMemo or useCallback is now like manual memory management. Since the v1.0 release, the compiler handles performance at build time. Write simpler code; let the toolchain optimise it.
The Rendering Debate is Dead Stop choosing one strategy per app. Hybrid rendering is now per-component. Static parts load instantly while dynamic elements stream. If you aren't mixing SSR/SSG/CSR, you’re leaving performance on the table.
Accessibility is Legally Enforced. The EAA (June 2025) made accessibility mandatory. Semantic HTML and ARIA roles are now legal requirements, not "nice-to-haves." Retrofitting costs 10x more—bake it in from day one.
TypeScript is the baseline. Plain JS is legacy. With the rise of end-to-end safety (tRPC, Zod, Drizzle), an "Architecture-First" approach is the only way to avoid quite technical debt.
AI IDEs are the Standard Success in 2026 is about the split: AI handles the boilerplate and scaffolding; you own the architecture and critical trade-offs.

The Pattern? Tools have matured. Our job is shifting from assembling frameworks to shaping product strategy. Adapt now, or fall behind the competition.

Why Git Mastery is Non-Negotiable

Syed Ahmed Mohi Uddin Hasan — Mon, 13 Apr 2026 13:45:18 +0000

The Complete Git & GitHub Workflow Reference for Modern Developers

Every developer knows the basic commands: add, commit, and push. But when a merge conflict breaks the build, or you need to recover lost work from three days ago, the difference between a junior and a senior developer is how deeply they understand their version control system.

I’ve compiled the "Ultimate Git & GitHub Workflow Cheat Sheet" to bridge that gap. This isn't just a list of commands; it’s a comprehensive guide to the professional developer’s daily workflow.

What this guide covers:

Foundational Architecture: Understanding the three-stage workflow between your working directory, staging area, and local repository.

The "Parallel Universe" Strategy: How to use branching to experiment fearlessly without ever touching your production-ready code.

History Management: The critical differences between merging and rebasing, and the "Golden Rule" of when to use each.

Emergency Recovery: Step-by-step instructions for undoing uncommitted changes, amending mistakes, and using "selective surgery" through cherry-picking.

Team Collaboration: Mastering the Pull Request (PR) workflow, forking open-source projects, and managing remote-tracking branches.

Automation & Efficiency: A deep dive into the GitHub CLI to speed up your terminal work and the basics of CI/CD with GitHub Actions.

Why every developer should have this:

Git is essentially a time machine for your code. Using it correctly ensures that your project history remains linear, clean, and most importantly, reversible.

Whether you are prepping for your first job or looking to lead a team, these are the fundamental insights required to work at scale.

A few core habits to start today:

Commit early and often to make changes easier to understand and revert.

Always pull before you push to stay in sync with your team and avoid unnecessary conflicts.

Never work directly on your main branch—branches are your safest friend.

Check out the link below for the full PDF for the complete breakdown and copy-paste command sequences.

https://www.linkedin.com/posts/syedahmedhasanx3_git-github-workflow-reference-for-modern-ugcPost-7449415719093477376-jyGM?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFy4nBMBEXY_M_LnIgAHcQzG1OYyMdMvpYE

Created by Syed Ahmed Mohi Uddin Hasan
Full-Stack Web Developer

Is your "Clean Code" actually Production-Grade?

Syed Ahmed Mohi Uddin Hasan — Wed, 08 Apr 2026 12:35:17 +0000

We are often taught that clean code is readable code. But in high-performance enterprise systems, readability is only half the battle.
If it isn't performant, it isn't professional.

True Senior Engineering lives in the micro-details that most developers overlook:

1️⃣Dependency Hygiene: Stop passing objects into React hooks. Reference equality issues lead to "silent" re-render loops that kill mobile performance.

2️⃣ The Layout Thrashing Trap: "Clean CSS" can still be slow. If your JavaScript is fighting the browser's rendering engine by constantly reading and writing geometry, your UI will feel "janky."

3️⃣ Defensive Schema Design: Production-grade apps move the heavy lifting to the database layer. Use SQL Views and Row-Level Security (RLS) to keep the frontend "thin," fast, and secure.

These are the invisible details that separate a standard codebase from a scalable, high-speed architecture.

Which of these bottlenecks have you encountered in your projects? Let’s talk tech below! 👇

Beyond Basic Styling: Why I’m Architecture-First with the Modern CSS Trilogy

Syed Ahmed Mohi Uddin Hasan — Sat, 28 Mar 2026 18:34:34 +0000

The*Wall of Text*era of CSS is over. If you’re still fighting specificity wars or using useEffect to toggle a parent class, you’re fighting the browser engine rather than leveraging it.

In my latest project work, I’ve moved away from "manual" styling toward a philosophy of Efficiency, Weightlessness, and Relationships.

This shift is mandatory for anyone building professional-grade component libraries today.

The Strategic Shift: Efficiency through Consolidation: Moving beyond redundant repetition to create "forgiving" selector blocks.

Weightless Defaults: Setting global resets that never "fight" your components, eliminating the need for !important forever.

Relational Intelligence: Letting the container "know" its content.

This moves UI logic from heavy scripts into the lightning-fast CSS engine.

Get the Technical Blueprint: For a deep dive into the implementation details, performance benchmarks, and code refactors mentioned above, download the full whitepaper: https://github.com/syedahmedx3/modern-css-mastery/raw/main/The-Modern-CSS-Trilogy/The%20Modern%20CSS%20Trilogy.pdf

I’m curious to hear your insights: How has moving your state logic from JS to CSS changed your Cumulative Layout Shift (CLS) or overall performance metrics? Let's talk in the comments! 👇

Why Your React Scroll is Lagging (and how to fix it with Locomotive v5

Syed Ahmed Mohi Uddin Hasan — Wed, 25 Mar 2026 11:40:18 +0000

The Problem: The "Jank" Struggle
In traditional web development, scrolling is a passive browser event. When the Main Thread is busy with heavy React renders or API calls, your scroll stutters. This is Jank, and it kills the premium feel of high-end sites.

The Solution: Virtual Scroll Paradigm
I recently built a mastery framework to solve this. Version 5 of Locomotive Scroll (built on the Lenis engine) changes the game. Here is the theoretical core:

Virtual vs. Main Thread
Native scrolling relies on the browser's main thread. If your JS execution is heavy, the scroll lags. Locomotive v5 intercepts wheel events and calculates a custom trajectory, ensuring a consistent 60 FPS experience.
Sub-Pixel Precision
Native scrolling moves in whole pixels, creating a "staircase effect." By moving in decimals (e.g., 1.1px), we achieve "buttery" smoothness on 120Hz displays.
The "Saudi Web" Standard (RTL)
Working in the KSA market, I realised most animation libraries break with Arabic localisation. In this repo, I demonstrate how to use Logical Properties (margin-inline-start), so your parallax effects work seamlessly in both English and Arabic.

🚀 Show Me The Code
The heart of this repo is the optimised useLocomotive hook. It includes a ResizeObserver to handle dynamic React content:

// src/hooks/useLocomotive.js
export const useLocomotive = (options = {}) => {
  const scrollRef = useRef(null);
  useEffect(() => {
    scrollRef.current = new LocomotiveScroll({
      autoStart: true,
      lenisOptions: { lerp: 0.1, duration: 1.2, ...options },
    });

    const resizeObserver = new ResizeObserver(() => scrollRef.current?.update());

    resizeObserver.observe(document.body);
    return () => {
      scrollRef.current?.destroy();
      resizeObserver.disconnect();
    };
  }, [options]);

  return scrollRef;
};

Get the Full Framework
I've open-sourced the entire setup, including a 4-page Technical Masterclass PDF covering GSAP syncing and performance math.

🔥 GitHub Repo: https://github.com/AhmedHasanx3/locomotive-scroll-react-mastery
💼 Portfolio: https://ahmedhasanx3.github.io/Portfolio/

If this helps your project, please give the repo a Star ⭐! I am also currently open to new opportunities in Front-End/Full-Stack roles—feel free to reach out!

How I Boosted Page Load Speeds by 25% Using Modern Asset Delivery

Syed Ahmed Mohi Uddin Hasan — Mon, 16 Mar 2026 12:57:22 +0000

We’ve all been there: You build a "pixel-perfect" UI with smooth GSAP animations, only to watch your Lighthouse score tank because of heavy assets. In a high-stakes market like Saudi Arabia, where mobile-first indexing and varying network speeds are the norm, a 2-second delay can result in a 20% drop in conversions.

Recently, I reduced the initial load time of a production real estate platform by 25%. Here’s the "no-fluff" breakdown of the modern asset delivery strategy I used.

The "Next-Gen" Format Pivot Standard JPEGs and PNGs are the silent killers of performance. I moved the entire asset pipeline to WebP and AVIF.

The Result: We saw a 30-40% reduction in file size without visible quality loss.

Pro Tip: Don't just convert them; serve them conditionally using the tag so legacy browsers don't break.

Implementing Priority Hints Not all assets are created equal. I used fetchpriority to tell the browser exactly what to focus on.

LCP Hero Image: Added fetchpriority="high" to the main banner.

Non-Critical Scripts: Used defer and fetchpriority="low" for third-party tracking pixels.
This ensured the "Above the Fold" content was interactive while the rest of the app hydrated in the background.

The GSAP Optimisation Trick I love using GSAP for cinematic effects, but it can be heavy if not managed.

Instead of loading the entire library, I imported only the necessary plugins (ScrollTrigger, Flip).

I initialised animations only after the main thread was free, ensuring the initial "First Contentful Paint" was lightning-fast.

Edge Delivery (CDN) & KSA Specifics Since the target audience was in Al Khobar and Riyadh, using a CDN with local "Edge" nodes was non-negotiable.

By caching static assets closer to the user, we reduced the Time to First Byte (TTFB) significantly.

We also implemented aggressive Cache-Control headers for assets that rarely change (fonts, brand logos).

The Results by the time we were done:

Lighthouse Performance Score: Jumped from 78 to 100.
Page Load Speed: 25% faster on average on 4G connections.
User Retention: Noticeable improvement in session duration.

Key Takeaway: Performance isn't a one-time task; it's a series of small, intentional architectural choices. If you aren't auditing your network tab daily, you're leaving speed on the table.

What’s your go-to "quick win" for web performance? Let’s swap tips in the comments!

RTL Mastery: Beyond Just dir="rtl"

Syed Ahmed Mohi Uddin Hasan — Mon, 09 Mar 2026 10:01:55 +0000

When building for the KSA market, many developers think adding dir="rtl" to the tag is the finish line. In reality, that is just the starting blocks. Truly high-performance, localised apps require a "mirror-first" mindset to ensure a "pixel-perfect" experience for Arabic-speaking users.

In my experience launching production sites like DarElite, I've found that deep RTL support is what separates a translated site from a truly localised one. Here is a guide on going beyond the basics.

Use CSS Logical Properties
Stop thinking in "left" and "right." Use logical properties to let the browser handle the heavy lifting based on the document direction.
Margin/Padding: Use margin-inline-start instead of margin-left.
Borders: Use border-end-start-radius for specific corners.
Tailwind Strategy: If you use Tailwind CSS, leverage the start and end utilities (e.g., ps-4 instead of pl-4).
Icons: To Mirror or Not to Mirror?
This is where most UI/UX bugs hide. Not every icon should be flipped.
Mirror these: Progress bars, directional arrows (back/forward), and icons representing movement (like a bicycle).
Don't mirror these: Checkmarks, clock faces, and media playback buttons (Play/Pause/Seek) generally stay the same.
Handling Bidirectional (BiDi) Text
In technical or business apps, you will often have "Mixed Direction" content—like an English email address or a phone number inside an Arabic sentence.
The Fix: Use the (Bi-Directional Isolation) tag for user-generated content to prevent the layout from breaking when different scripts collide.
Performance in RTL Layouts
Localised apps often struggle with layout shifts during the "direction swap."

Tip: Ensure your CSS architecture is "direction-agnostic" from the start. By refining component architecture, I’ve managed to maintain 100% Lighthouse scores while supporting complex RTL layouts.