DEV Community: Syed Ahmed Mohi Uddin Hasan

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.