<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title><![CDATA[DesignDev.io - Design & Development Blog]]></title>
    <link>https://designdev.io</link>
    <description><![CDATA[Modern design and development tutorials, tips, and best practices for building better software.]]></description>
    <language>en-US</language>
    <atom:link href="https://designdev.io/feed.xml" rel="self" type="application/rss+xml"/>
    <lastBuildDate>Thu, 30 Apr 2026 11:34:44 GMT</lastBuildDate>
    <item>
      <title><![CDATA[Publishing Your First React Component to npm — the Complete Setup]]></title>
      <link>https://designdev.io/posts/publishing-your-first-react-component-to-npm-the-complete-setup</link>
      <guid isPermaLink="true">https://designdev.io/posts/publishing-your-first-react-component-to-npm-the-complete-setup</guid>
      <description><![CDATA[Most tutorials stop at "it works on my machine." This one doesn't. Publishing to npm is where your library becomes real — installable, versioned, and usable by anyone. Here's the complete setup, including the fields most developers get wrong in package.json and how to inspect what you're actually shipping before it goes live.]]></description>
      <pubDate>Wed, 01 Apr 2026 14:56:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[npm]]></category><category><![CDATA[publishing]]></category><category><![CDATA[react]]></category><category><![CDATA[typescript]]></category><category><![CDATA[ui library]]></category>
    </item>
    <item>
      <title><![CDATA[How to structure a UI library that scales — folders, exports, and naming conventions]]></title>
      <link>https://designdev.io/posts/how-to-structure-a-ui-library-that-scales-folders-exports-and-naming-conventions</link>
      <guid isPermaLink="true">https://designdev.io/posts/how-to-structure-a-ui-library-that-scales-folders-exports-and-naming-conventions</guid>
      <description><![CDATA[The folder structure you pick on day one is the one you'll live with across 40 components. Get it wrong and you'll be fighting your own codebase by article 10. Get it right and adding a new component takes five minutes and follows a pattern every contributor can learn in one sitting.]]></description>
      <pubDate>Wed, 01 Apr 2026 14:54:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[architecture]]></category><category><![CDATA[react]]></category><category><![CDATA[typescript]]></category><category><![CDATA[ui library]]></category>
    </item>
    <item>
      <title><![CDATA[Setting Up a React Component Library with Vite, TypeScript, and Tailwind v4]]></title>
      <link>https://designdev.io/posts/setting-up-a-react-component-library-with-vite-typescript-and-tailwind-v4</link>
      <guid isPermaLink="true">https://designdev.io/posts/setting-up-a-react-component-library-with-vite-typescript-and-tailwind-v4</guid>
      <description><![CDATA[Before you write a single component, the project needs to be set up correctly — or you'll be fighting the build config the entire series. This article covers everything: Vite in library mode, TypeScript strict config, Tailwind v4, CVA, and a working entry point you can build and inspect.]]></description>
      <pubDate>Wed, 01 Apr 2026 14:23:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[tailwind]]></category><category><![CDATA[typescript]]></category><category><![CDATA[ui library]]></category><category><![CDATA[vite]]></category>
    </item>
    <item>
      <title><![CDATA[Why I'm Building My Own React UI Library — and Why You Should Too]]></title>
      <link>https://designdev.io/posts/why-i-m-building-my-own-react-ui-library-and-why-you-should-too</link>
      <guid isPermaLink="true">https://designdev.io/posts/why-i-m-building-my-own-react-ui-library-and-why-you-should-too</guid>
      <description><![CDATA[Most developers have installed shadcn/ui or MUI, grabbed the components they needed, and moved on. That works — until it doesn't. This series is about building a React UI library from scratch, shipping it to npm, and actually understanding what you've built.]]></description>
      <pubDate>Wed, 01 Apr 2026 13:52:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[tailwind]]></category><category><![CDATA[typescript]]></category><category><![CDATA[ui library]]></category>
    </item>
    <item>
      <title><![CDATA[CSS Cascade Layers: The Feature That Finally Fixes Specificity Wars]]></title>
      <link>https://designdev.io/posts/css-cascade-layers-the-feature-that-finally-fixes-specificity-wars</link>
      <guid isPermaLink="true">https://designdev.io/posts/css-cascade-layers-the-feature-that-finally-fixes-specificity-wars</guid>
      <description><![CDATA[Specificity conflicts with third-party CSS, utility classes, and component styles are one of the most frustrating parts of scaling a CSS codebase. @layer doesn't just help — it fundamentally changes how the cascade works. Here's the mental model and the setup that makes it click.]]></description>
      <pubDate>Sat, 24 Jan 2026 11:19:00 GMT</pubDate>
      <author><![CDATA[Sena Aruoba]]></author>
      <category><![CDATA[css]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[How to Build a Component Library with Proper Versioning]]></title>
      <link>https://designdev.io/posts/how-to-build-a-component-library-with-proper-versioning</link>
      <guid isPermaLink="true">https://designdev.io/posts/how-to-build-a-component-library-with-proper-versioning</guid>
      <description><![CDATA[Building a component library is easy. Building one that other developers can depend on — with proper exports, peer dependencies, versioning, and a changelog — is not. This is the complete setup that gets it right from day one.]]></description>
      <pubDate>Fri, 23 Jan 2026 09:19:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Strict Mode in React 18: What It Breaks and Why That's Good]]></title>
      <link>https://designdev.io/posts/strict-mode-in-react-18-what-it-breaks-and-why-that-s-good</link>
      <guid isPermaLink="true">https://designdev.io/posts/strict-mode-in-react-18-what-it-breaks-and-why-that-s-good</guid>
      <description><![CDATA[React 18's strict mode double-invokes effects by design. Most developers disable it when it starts breaking things. That's the wrong response — the break is a signal, not a false alarm. Here's what strict mode actually does and why every bug it surfaces is a real bug.]]></description>
      <pubDate>Thu, 22 Jan 2026 09:05:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[How to Manage Global State Without a Library]]></title>
      <link>https://designdev.io/posts/how-to-manage-global-state-without-a-library</link>
      <guid isPermaLink="true">https://designdev.io/posts/how-to-manage-global-state-without-a-library</guid>
      <description><![CDATA[You don't always need Zustand or Redux. Before reaching for a state management library, understand what the platform gives you — useSyncExternalStore is React's built-in primitive for subscribing to any external store. Here's how to use it to build a lightweight global state system from scratch.]]></description>
      <pubDate>Wed, 21 Jan 2026 03:17:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[The Render Props Pattern Is Not Dead — Here's Where It Still Wins]]></title>
      <link>https://designdev.io/posts/the-render-props-pattern-is-not-dead-here-s-where-it-still-wins</link>
      <guid isPermaLink="true">https://designdev.io/posts/the-render-props-pattern-is-not-dead-here-s-where-it-still-wins</guid>
      <description><![CDATA[Hooks replaced most render props use cases in 2019. Most — not all. There are three scenarios where render props still outperform hooks and compound components. Here's what they are and how to implement them cleanly.]]></description>
      <pubDate>Tue, 20 Jan 2026 02:05:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Why React.memo Doesn't Always Help (And When It Does)]]></title>
      <link>https://designdev.io/posts/why-react-memo-doesn-t-always-help-and-when-it-does</link>
      <guid isPermaLink="true">https://designdev.io/posts/why-react-memo-doesn-t-always-help-and-when-it-does</guid>
      <description><![CDATA[Wrapping a component in React.memo and finding it still re-renders on every parent render is one of the most common React performance frustrations. The fix is almost always the same — and it has nothing to do with memo itself.]]></description>
      <pubDate>Mon, 19 Jan 2026 01:46:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Building a Fully Accessible Modal from Scratch in React]]></title>
      <link>https://designdev.io/posts/building-a-fully-accessible-modal-from-scratch-in-react</link>
      <guid isPermaLink="true">https://designdev.io/posts/building-a-fully-accessible-modal-from-scratch-in-react</guid>
      <description><![CDATA[Most modal implementations look right but fail accessibility checks. Focus trapping, scroll locking, ARIA attributes, and keyboard handling — each one is a trap for the unwary. Here's a complete implementation that gets all four right, including the iOS Safari scroll lock bug nobody warns you about.]]></description>
      <pubDate>Sat, 17 Jan 2026 22:09:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[React Reconciliation Explained: What the Diffing Algorithm Actually Does]]></title>
      <link>https://designdev.io/posts/react-reconciliation-explained-what-the-diffing-algorithm-actually-does</link>
      <guid isPermaLink="true">https://designdev.io/posts/react-reconciliation-explained-what-the-diffing-algorithm-actually-does</guid>
      <description><![CDATA[Most React developers have a working mental model of the virtual DOM. Most of those mental models are imprecise enough to cause real bugs. Here's what React's diffing algorithm actually does — and the two heuristics that explain why key, memo, and component type all matter.]]></description>
      <pubDate>Sat, 17 Jan 2026 15:03:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[How to Lazy-Load Components the Right Way (And Avoid the Trap)]]></title>
      <link>https://designdev.io/posts/how-to-lazy-load-components-the-right-way-and-avoid-the-trap</link>
      <guid isPermaLink="true">https://designdev.io/posts/how-to-lazy-load-components-the-right-way-and-avoid-the-trap</guid>
      <description><![CDATA[React.lazy and Suspense are the right tools for code splitting in React — but lazy-loading the wrong things creates waterfalls that hurt more than they help. Here's the granularity rule that makes code splitting actually improve performance.]]></description>
      <pubDate>Fri, 16 Jan 2026 13:58:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Compound Components: The Design Pattern That Changed How I Build UIs]]></title>
      <link>https://designdev.io/posts/compound-components-the-design-pattern-that-changed-how-i-build-uis</link>
      <guid isPermaLink="true">https://designdev.io/posts/compound-components-the-design-pattern-that-changed-how-i-build-uis</guid>
      <description><![CDATA[Most component APIs grow boolean props until they're unreadable. Compound components are the pattern that stops that from happening — by making the component's structure part of its API. Here's how it works and when to reach for it.]]></description>
      <pubDate>Thu, 15 Jan 2026 13:27:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[TypeScript Generics in React: The Patterns You'll Use Every Week]]></title>
      <link>https://designdev.io/posts/typescript-generics-in-react-the-patterns-you-ll-use-every-week</link>
      <guid isPermaLink="true">https://designdev.io/posts/typescript-generics-in-react-the-patterns-you-ll-use-every-week</guid>
      <description><![CDATA[TypeScript generics in React feel intimidating right up until the moment they don't. The syntax is the hard part — the patterns themselves are straightforward once you see them three or four times. Here are the five you'll reach for every week.]]></description>
      <pubDate>Wed, 14 Jan 2026 10:03:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[The Testing Pyramid: What Is It Really?]]></title>
      <link>https://designdev.io/posts/the-testing-pyramid-what-is-it-really</link>
      <guid isPermaLink="true">https://designdev.io/posts/the-testing-pyramid-what-is-it-really</guid>
      <description><![CDATA[If you've been reading Mira Halsted's testing series and kept seeing references to "the testing pyramid" and "test budget" without a clear picture of what they actually mean in a real project — this is that picture. With a real component suite you can use to see each layer in action.]]></description>
      <pubDate>Tue, 13 Jan 2026 05:23:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[How to Test Custom Hooks with React Testing Library]]></title>
      <link>https://designdev.io/posts/how-to-test-custom-hooks-with-react-testing-library</link>
      <guid isPermaLink="true">https://designdev.io/posts/how-to-test-custom-hooks-with-react-testing-library</guid>
      <description><![CDATA[Custom hooks encapsulate logic you care about keeping correct. Testing them directly — not through a component — is cleaner, faster, and catches regressions earlier. Here's the complete renderHook pattern with three real hook tests you can adapt today.]]></description>
      <pubDate>Mon, 12 Jan 2026 04:48:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Controlled vs Uncontrolled Components: The Decision You Keep Making Wrong]]></title>
      <link>https://designdev.io/posts/controlled-vs-uncontrolled-components-the-decision-you-keep-making-wrong</link>
      <guid isPermaLink="true">https://designdev.io/posts/controlled-vs-uncontrolled-components-the-decision-you-keep-making-wrong</guid>
      <description><![CDATA[Most React developers default to controlled inputs for everything. That's not wrong — but it's not always right either. The decision between controlled and uncontrolled components has real performance and complexity consequences. Here's the framework that makes it obvious.]]></description>
      <pubDate>Sun, 11 Jan 2026 08:37:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[Server State Management and How TanStack Query Fits In]]></title>
      <link>https://designdev.io/posts/server-state-management-and-how-tanstack-query-fits-in</link>
      <guid isPermaLink="true">https://designdev.io/posts/server-state-management-and-how-tanstack-query-fits-in</guid>
      <description><![CDATA[If you've been reading the React Foundations series and Alex Chen keeps mentioning TanStack Query as the replacement for useEffect data fetching — and you've been wondering what it actually does and why it exists as a category of its own — this is that explanation. With a real user profile card you can build today.]]></description>
      <pubDate>Sat, 10 Jan 2026 00:32:00 GMT</pubDate>
      <author><![CDATA[Muhammad Athar]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
    <item>
      <title><![CDATA[The Complete Guide to React Error Boundaries]]></title>
      <link>https://designdev.io/posts/the-complete-guide-to-react-error-boundaries</link>
      <guid isPermaLink="true">https://designdev.io/posts/the-complete-guide-to-react-error-boundaries</guid>
      <description><![CDATA[Error boundaries are one of the most underused React features in production codebases. Most apps either wrap everything in one global boundary or use none at all. Here's the granular placement strategy that actually makes them useful — and the patterns that work.]]></description>
      <pubDate>Fri, 09 Jan 2026 10:35:00 GMT</pubDate>
      <author><![CDATA[Alex Chen]]></author>
      <category><![CDATA[react]]></category><category><![CDATA[web]]></category>
    </item>
  </channel>
</rss>