> ## Documentation Index
> Fetch the complete documentation index at: https://miliracle.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Han Nguyen

> Writing on frontend architecture, performance, AI workflows, and engineering leadership.

<div className="mx-auto flex w-full max-w-[760px] flex-col gap-10 px-4 py-10 lg:py-16">
  <div className="flex flex-col gap-2">
    <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50">Writing</h1>
    <p className="text-sm text-gray-500 dark:text-gray-400">Thoughts on frontend architecture, performance, AI-augmented workflows, and leading engineering teams.</p>
  </div>

  <div className="flex flex-col gap-3">
    <a href="/writing/database/acid-transactions" className="group flex flex-col gap-1.5 rounded-xl border border-gray-100 dark:border-white/10 p-5 hover:border-gray-200 dark:hover:border-white/20 transition-colors outline-none">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <p className="font-semibold text-gray-900 dark:text-gray-50 group-hover:text-[#ea580c] transition-colors">What Are ACID Transactions?</p>

        <span className="flex shrink-0 gap-1.5">
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">systems</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">fundamental</span>
        </span>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">A bank transfer, a crash and two ATMs: a visual guide to atomicity, consistency, isolation and durability.</p>
    </a>

    <a href="/writing/database/relational-model" className="group flex flex-col gap-1.5 rounded-xl border border-gray-100 dark:border-white/10 p-5 hover:border-gray-200 dark:hover:border-white/20 transition-colors outline-none">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <p className="font-semibold text-gray-900 dark:text-gray-50 group-hover:text-[#ea580c] transition-colors">The Relational Model</p>

        <span className="flex shrink-0 gap-1.5">
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">systems</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">fundamental</span>
        </span>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">A visual guide to relations, keys, integrity constraints and the operations behind SQL.</p>
    </a>

    <a href="/writing/database/what-is-a-database" className="group flex flex-col gap-1.5 rounded-xl border border-gray-100 dark:border-white/10 p-5 hover:border-gray-200 dark:hover:border-white/20 transition-colors outline-none">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <p className="font-semibold text-gray-900 dark:text-gray-50 group-hover:text-[#ea580c] transition-colors">What Is a Database?</p>

        <span className="flex shrink-0 gap-1.5">
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">systems</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">fundamental</span>
        </span>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">A visual guide to tables, SQL, the DBMS, sixty years of data models and database types.</p>
    </a>

    <a href="/writing/performance/typescript-performance-tips" className="group flex flex-col gap-1.5 rounded-xl border border-gray-100 dark:border-white/10 p-5 hover:border-gray-200 dark:hover:border-white/20 transition-colors outline-none">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <p className="font-semibold text-gray-900 dark:text-gray-50 group-hover:text-[#ea580c] transition-colors">Tips tối ưu hiệu năng khi viết TypeScript</p>

        <span className="flex shrink-0 gap-1.5">
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">performance</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">fundamental</span>
        </span>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">Các lưu ý về hiệu năng khi giải bài toán Top K Frequent Elements bằng TypeScript.</p>
    </a>

    <a href="/writing/performance/critical-rendering-path" className="group flex flex-col gap-1.5 rounded-xl border border-gray-100 dark:border-white/10 p-5 hover:border-gray-200 dark:hover:border-white/20 transition-colors outline-none">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <p className="font-semibold text-gray-900 dark:text-gray-50 group-hover:text-[#ea580c] transition-colors">The Critical Rendering Path</p>

        <span className="flex shrink-0 gap-1.5">
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">front-end</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">performance</span>
          <span className="rounded-full bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/30 px-2 py-0.5 text-xs text-orange-700 dark:text-orange-400">fundamental</span>
        </span>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">How a browser turns files into pixels, then into a working app.</p>
    </a>
  </div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.