DEV Community: Saad Ahmad

My 4KB React package was installing 116 dependencies. Here's what I found when I audited it.

Saad Ahmad — Mon, 24 Aug 2026 12:34:59 +0000

I published a small React component to npm. Four kilobytes. One job: stack cards as you scroll.

Then I sat down and actually audited it — the way you'd audit someone else's package before adding it to production.

It was installing 116 packages onto every machine that ran npm install.

Here's everything that was wrong, why each one mattered, and how to check your own packages tonight. 🔍

🚨 Bug 1: I was shipping a bundler to my users

This was in my package.json:

"dependencies": {
  "rollup": "^4.40.1",
  "rollup-plugin-postcss": "^4.0.2",
  "@types/react": "^19.1.2"
}

Those are build tools. They belong in devDependencies. Sitting in dependencies, npm faithfully installed all three — plus their transitive deps — into every consuming project.

I measured it. Installing that dependency set pulls 116 packages. My actual library is one file.

The fix is a two-second edit. The lesson is that nobody ever looks:

npm view your-package dependencies

Run that on your own packages right now. If a build tool comes back, that's a bundler on someone else's laptop. 😬

💥 Bug 2: React's JSX runtime was baked into my bundle

My rollup.config.js had this:

external: ["react", "react-dom"]

Looks right. It isn't.

My tsconfig.json used "jsx": "react-jsx", so every component compiled to an import from react/jsx-runtime — a different specifier than react. It wasn't in external, so Rollup happily inlined it.

Worse: it inlined the development build, which contains this:

process.env.NODE_ENV

process doesn't exist in a browser. Anyone importing my package through plain ESM or certain Vite configs got a hard crash: process is not defined.

I had rollup-plugin-peer-deps-external installed to prevent exactly this. But I'd never declared any peerDependencies — so it read an empty list and did nothing. A safety net bolted to the ceiling. 🪤

// what it should have been
external: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"]

⚛️ Bug 3: No `"use client"`, so Next.js rejected it

My components use hooks. Under the Next.js App Router, that makes them client components — and they must say so.

Mine didn't. Anyone on modern Next.js hit an error immediately.

The fix is one line at the top of the built bundle. But here's the part that nearly bit me twice: esbuild strips module-level directives when it bundles, and tsup's banner option doesn't survive minification.

I only caught it because I checked the built file instead of trusting the config:

head -c 20 dist/index.js

Now a post-build script adds the directive, and a test asserts it's there. Which brings me to the thing I'd most want you to take away. 👇

🧪 The real lesson: test the artifact, not the source

Every bug above lived in dist/, not src/. My source code was fine. Unit tests passing means nothing if the thing you ship is broken.

So I wrote tests that read the built output:

it('never references process.env', () => {
  expect(esm).not.toContain('process.env');
});

it('leaves the JSX runtime external', () => {
  expect(esm).toMatch(/from\s*["']react\/jsx-runtime["']/);
});

it('opens with the use client directive', () => {
  expect(esm.startsWith('"use client";')).toBe(true);
});

Every one of those exists because the previous release shipped that exact mistake. They're regression tests for bugs I'd already inflicted on people.

Two tools do most of this for you, and both take under a minute:

npx publint          # catches malformed exports, wrong entry points
npx @arethetypeswrong/cli --pack .   # catches broken TypeScript resolution

If you maintain a package and have never run these, go run them. 🎯

🔎 Bug 4: Zero keywords, zero downloads

My npm page said Keywords: none.

npm search is largely keyword-driven. No keywords means you are effectively unlisted. My weekly downloads were zero, and I'd assumed the idea was unpopular. It was just invisible.

My description also read "Reuseable Stack on scroll librabry" — two typos in the single line that shows up in search results. 🙈

🐛 Bug 5: The one my tests couldn't catch

After shipping v2, I rebuilt my demo site on it — and the build failed with a TypeScript error.

My hook returned RefObject<T | null>. React 19's types accept that. React 18's don't, because React 18 treats RefObject as covariant.

My package claimed "react": ">=18". For every TypeScript user on React 18, it didn't compile.

My CI had a React 18 job. It ran the test suite. But tests don't typecheck against React 18 — Vitest ran against whatever types were installed. The job was theater.

The fix was a compile-only fixture:

// test/types/consumer.tsx — never runs, just has to compile
export function PassesHookRefToCard() {
  const ref = useStackProgress<HTMLElement>({ onProgress: (p) => p.toFixed(2) });
  return <StackCard ref={ref}>first</StackCard>;
}

Plus CI that installs the matching @types/react for each React major and runs tsc. I verified it works by reverting the fix — the error came right back.

If you support a version range, prove it. Don't just declare it. ✅

✅ The 10-minute audit for your own packages

npm view your-package dependencies   # build tools in here? move them
npm view your-package keywords       # empty? nobody can find you
npm publish --dry-run                # see exactly what ships
npx publint                          # manifest correctness
npx @arethetypeswrong/cli --pack .   # TypeScript resolution
head -c 20 dist/index.js             # is "use client" actually there?

That's it. Six commands. They'd have caught all five of my bugs.

📦 Where the package landed

stack-on-scroll is now:

Zero dependencies. 4 packages install total, versus 116 before
Zero config — no stylesheet to import, styles are inline
Zero JavaScript on the default path — the stacking is pure position: sticky
Opt-in scale, fade, and tilt, all sharing one animation frame
Full TypeScript types, verified against React 18 and 19
58 tests, including ones that read the built artifact

npm install stack-on-scroll

<StackContainer offset={32} scaleStep={0.07} fadeStep={0.35}>
  {chapters.map((c) => (
    <StackCard key={c.id}>{c.title}</StackCard>
  ))}
</StackContainer>

No index prop — the container counts its own children.

🔗 Live demo with sliders for every prop
🐙 Source on GitHub

👋 About me

I'm Saad Ahmad, a freelance frontend developer. I build React and Next.js interfaces, and — as you can probably tell — I enjoy the unglamorous part: the packaging, the build config, the reason your bundle is 400KB when it should be 40.

If your team is shipping a component library, fighting a slow build, or has an npm package nobody can find, that's the kind of work I like. I'm currently open to freelance projects.

📮 isaadahmad.com

Found a bug in your own package after reading this? I'd genuinely love to hear about it in the comments — misery loves company. 😄

Building a Lightweight Dark/Light Mode System in React with use-theme-mode

Saad Ahmad — Tue, 14 Apr 2026 13:44:50 +0000

Dark mode has become a standard expectation in modern web applications. But implementing it correctly—with persistence, system preference detection, and clean separation of logic and styles—is often more complicated than it should be.

That’s exactly why I built use-theme-mode, a lightweight React hook that handles theme state for you—without enforcing any styling system.

✨ Why Another Theme Hook?

Most theme solutions today fall into one of two categories:

Too opinionated (UI framework–specific)
Too heavy for simple use cases

I wanted something that:

✅ Works with any CSS solution
✅ Persists user preference
✅ Respects system theme
✅ Is SSR‑safe
✅ Has zero runtime dependencies

That became use-theme-mode.

📦 Installation

npm install use-theme-mode

🚀 Basic Usage

import { useTheme } from "use-theme-mode";

function App() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

That’s it. Behind the scenes, the hook:

Detects system preference
Saves the theme to localStorage
Updates the <html data-theme="..."> attribute
Syncs changes across tabs

🎨 Styling Is 100% in Your Control

use-theme-mode does not inject styles. Instead, it gives you a single source of truth via data-theme.

CSS Implementation

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease, color 0.3s ease;
}

This approach works beautifully with:

Tailwind
CSS variables
Styled-components
MUI / Chakra
Vanilla CSS

🔄 Works Great with Tailwind Too

JavaScript Configuration:

// tailwind.config.js
module.exports = {
  darkMode: ["attribute", "data-theme"],
};

JSX Usage:

<div className="bg-white text-black dark:bg-black dark:text-white">
  Hello world
</div>

🌍 Live Demo

I’ve deployed a live demo showcasing:

Real theme switching
Persistent state
Code examples synced with UI

👉 View Live Demo

🧩 API Reference

const { theme, toggleTheme, setLight, setDark } = useTheme();

theme → "light" | "dark"
toggleTheme() → switch modes
setLight() → force light mode
setDark() → force dark mode

🛡️ SSR Safe & Production Ready

The hook:

Avoids direct window access during render.
Works in Next.js and other SSR frameworks.
Synchronizes changes across tabs automatically.

🔮 What’s Coming Next?

Plans for future versions:

✅ TypeScript-first API
✅ Optional context provider
✅ ESM build support
✅ Custom storage keys

🔗 Links

npm: use-theme-mode
GitHub: saadahmad888/use-theme-mode
Live Demo: Vercel Demo

If you find this useful, I’d love feedback or contributions!

Digging Deep into the Core of Frontend Development

Saad Ahmad — Sat, 08 Mar 2025 14:35:15 +0000

Frontend development is more than just writing HTML, CSS, and JavaScript. It’s about creating seamless user experiences, ensuring performance, and writing maintainable code. If you truly want to master frontend development, you need to dig deep into its core concepts.

1. HTML - The Backbone

HTML (HyperText Markup Language) structures the web. Understanding semantic HTML is crucial for accessibility and SEO. Don't just use <div> for everything; use <article>, <section>, <header>, and <footer> where appropriate.

2. CSS - The Art of Styling

CSS (Cascading Style Sheets) is what makes the web beautiful. Mastering:

Flexbox & Grid for layout
Variables for maintainability
Transitions & animations for better UX
Responsive design techniques

will help you create pixel-perfect designs.

3. JavaScript - The Brain

JavaScript brings life to your UI. Core concepts to master:

ES6+ features (let, const, arrow functions, destructuring)
DOM Manipulation
Event Handling
Fetch API & Async/Await
Functional Programming principles

4. Frameworks & Libraries

While JavaScript is powerful, frameworks like React, Vue, or Angular make development faster and more scalable. For React.js enthusiasts, understanding Hooks, Context API, and performance optimizations is key.

5. State Management

State management is the heart of modern web apps. Whether you use React’s Context API, Redux, Zustand, or Recoil, understanding state flow and performance optimization will set you apart.

6. Performance Optimization

A fast website means a better user experience. Optimize:

Image loading (WebP, lazy loading)
Code splitting & tree shaking
Server-side rendering (SSR) & Static Site Generation (SSG)
Caching strategies

7. Version Control (Git/GitHub)

A good frontend developer knows Git. You should be comfortable with branching, merging, rebasing, and handling pull requests. Speaking of GitHub, let’s connect! 😃

📌 Follow me on GitHub: saadahmad888

8. Testing & Debugging

Don’t just write code—test it! Get familiar with:

Console debugging
Unit testing (Jest, React Testing Library)
End-to-end testing (Cypress, Playwright)

9. Understanding APIs

Frontend isn't just UI. Learning how to consume RESTful and GraphQL APIs will help you build dynamic applications.

10. Soft Skills & Community Contribution

Being a great frontend developer is not just about coding. It’s about collaboration, problem-solving, and sharing knowledge.

🖥️ Want to see my work? Visit my portfolio: isaadahmad.com

🔥 If you're passionate about frontend and want to stay updated, let’s connect on GitHub and build something awesome together! 🚀

Drop a comment below—what's your favorite frontend concept? 😊

🚀 How AI is Revolutionizing Frontend Development 🤖

Saad Ahmad — Thu, 06 Mar 2025 10:55:19 +0000

Artificial Intelligence (AI) is transforming every industry, and frontend development is no exception. With AI-powered tools and frameworks, developers can now create faster, more efficient, and highly personalized user experiences. Let’s dive into how AI is reshaping frontend development and what it means for developers. 🛠️

1️⃣ AI-Powered Code Generation ✨

Tools like GitHub Copilot, Tabnine, and Codeium are helping developers write code faster and with fewer errors. These AI-powered assistants suggest code snippets, complete functions, and even generate entire components based on context. This not only speeds up development but also reduces cognitive load. ⚡

2️⃣ Automated UI/UX Design 🎨

AI is making UI/UX design more intuitive with tools like Figma AI and Adobe Sensei. These tools analyze user behavior and suggest design improvements, color palettes, and layouts, making it easier for developers to create visually appealing interfaces. 🖌️

3️⃣ AI for Accessibility and Responsiveness 📱

AI-driven tools can analyze websites and ensure accessibility compliance with standards like WCAG. They also help in making layouts responsive by predicting how elements should adjust for different screen sizes and devices. 🔍

4️⃣ AI-Based Testing and Debugging 🛠️

AI-powered testing frameworks like Selenium AI, TestCraft, and Applitools can automate UI testing, detect anomalies, and provide insights on how to fix them. This saves time in debugging and ensures a smooth user experience. ✅

5️⃣ Personalized User Experiences 🎯

AI enables real-time personalization based on user behavior, preferences, and interactions. Recommendation engines, dynamic content rendering, and chatbot integrations are all powered by AI to enhance user engagement. 🤝

🔮 What’s Next?

As AI continues to evolve, we can expect more intelligent automation in frontend development. From AI-generated animations to real-time code optimizations, the possibilities are endless. While AI won't replace frontend developers, it will certainly enhance their capabilities and streamline workflows. 💡

What are your thoughts on AI in frontend development? Are you using any AI-powered tools in your projects? Let’s discuss in the comments! 🚀

🚀 My Journey in Frontend Development & Building with the Community

Saad Ahmad — Thu, 13 Feb 2025 06:10:55 +0000

Hey Dev.to! 👋 I'm excited to share my journey as a frontend developer and how I keep up with the ever-evolving world of web development. From building innovative tools to engaging with the dev community, here’s my story.

🛠 Who Am I?

I'm a frontend developer passionate about crafting high-performance user interfaces with React, Next.js, and modern web technologies. I love solving problems, optimizing performance, and exploring new trends in frontend development. My journey has been fueled by curiosity, continuous learning, and a deep love for coding.

💡 Things I’m Working On:

Open-Source Projects → I maintain npm packages like stack-on-scroll, helping developers create better UI experiences.
Frontend Innovation → I’m building a Skeleton Screen Generator, making it easier for developers to create seamless loading states.
Speech-to-Text & Text-to-Speech in Urdu → I’m working on implementing this feature to enhance accessibility in apps.

🔥 Staying Updated with Frontend Trends

Frontend development is always changing! Here’s how I stay ahead:

✅ Exploring New Features → React Server Components (RSC), Next.js advancements, and modern UI patterns.

✅ Experimenting with Tech → Trying new tools and frameworks to build better web apps.

✅ Engaging in the Dev Community → Writing blogs, sharing knowledge, and connecting with like-minded developers.

🏗 How I Build & Share

One of my goals is to share my knowledge with others. Writing blogs, building open-source tools, and contributing to the dev community help me grow as a developer.

✍️ Topics I Write About:

Modern Frontend Trends → React, Next.js, and emerging frameworks.
Performance Optimization → Making apps faster and more efficient.
Developer Tools & Productivity → Tips and tricks for better frontend development.

🚀 Let’s Connect & Grow Together!

I’d love to hear from you! Whether it's discussing frontend trends, performance hacks, or open-source projects, let’s build together. Drop a comment, share your thoughts, or connect with me on isaadahmad.com.