Debugging slow tsc - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    ul: "ul",
    li: "li",
    h2: "h2",
    blockquote: "blockquote",
    img: "img",
    a: "a"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "I’ve been experimenting with ChatGPT, just like everyone else. But why has it become so popular? It truly is a revolutionary piece of technology. Is it The Next Big Thing? Will it really replace all of us?"
    }), "\n", _jsx(_components.p, {
      children: "My day to day is architecture and programming, and I’ve heard all sorts of things on Twitter:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "That ChatGPT can build entire iOS applications"
      }), "\n", _jsx(_components.li, {
        children: "ChatGPT can write whole files of code"
      }), "\n", _jsx(_components.li, {
        children: "ChatGPT can find bugs in code when writing tests"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "When I started by own company Clarity Hub, we had a focus on machine learning to help augment human intelligence. My thought at the time was that we could leverage machine learning to augment and supplement human intelligence. The focus wouldn't be to replace any person's job, but to make it streamlined and easier to accomplish that job. Our journey started with us serving customer success agents with suggested replies and contextual information, but we eventually pivoted to a Dovetail-like application to help product teams gather, annotate, and contextualize customer interviews."
    }), "\n", _jsx(_components.p, {
      children: "We found that augmenting activity with machine learning was not only easier to do from a technology point of view, but empowered users, rather than make them feel like their job was being replaced."
    }), "\n", _jsx(_components.p, {
      children: "Even with the advent of ChatGPT, I still see this being the short term future of it's use."
    }), "\n", _jsx(_components.h2, {
      children: "False Starts"
    }), "\n", _jsx(_components.p, {
      children: "I was curious how much ChatGPT could really do given all of its hype"
    }), "\n", _jsx(_components.p, {
      children: "I asked it to build an Asteroids game using PhaserJS. Don’t worry, this isn’t another article on “Look, I got ChatGPT to build a game!”"
    }), "\n", _jsx(_components.p, {
      children: "I originally just asked ChatGPT to build an Asteroids game using PhaserJS. A very vague prompt, yes, but a great starting point to figure out the limitations of ChatGPT."
    }), "\n", _jsx(_components.p, {
      children: "The response was basically, “No I can’t”:"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "As an AI language model, I'm not able to write and execute code in real-time. However, I can provide you with a detailed framework to get started with creating an Asteroids game in PhaserJS."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "This was followed by instructions on how I could do it myself."
    }), "\n", _jsx(_components.p, {
      children: "The next steps of course are to be more specific, asking ChatGPT to build the application to build specific functionality:"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Add the code to let the player shoot asteroids. If the player gets hit by 3 asteroids, its game over"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Most interactions with ChatGPT seem to go like this:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_1.jpg",
        alt: "Flowchart workflow"
      })
    }), "\n", _jsx(_components.p, {
      children: "This flow eventually leads to either:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Not getting what you want."
      }), "\n", _jsx(_components.li, {
        children: "Getting what you want across many different responses, and then you must manually coalesce all of the different responses together to form the result you want."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Once I like the set of responses that ChatGPT has given me, I’ll ask ChatGPT to summarize for me so that I can improve the prompt further:"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Take everything we just talked about and give me a prompt to ask you in the future that encapsulates all of the requirements."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "A More Natural Flow"
    }), "\n", _jsxs(_components.p, {
      children: ["I’ve talked with ChatGPT on a variety of topics, but the majority of questions relate to coding. I actively use Github Copilot, which utilizes the ChatGPT engine in the backend. I’ve built ", _jsx(_components.a, {
        href: "https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat",
        children: "Sora by Capsule Cat"
      }), " to have ChatGPT generate entire coding files for me as well with project context. Even then, I still use the ChatGPT UI as well."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_2.jpg",
        alt: "Flowchart line"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["I find that the above flow leaves me less fatigued, and more productive - at least in the context of side-projects that I’ve used ChatGPT. Research shows that when we read code and attempt logic puzzles, we use a completely different part of our brain than when we use language [", _jsx(_components.a, {
        href: "https://hub.jhu.edu/2020/12/17/brain-activity-while-reading-code/",
        children: "link"
      }), "]. In the above chart, you can imagine that when we write prompts, we utilize some logical reasoning, but we lean heavily on language as we talk with ChatGPT. Then when we get a response, a completely different part of the brain kicks in to read and write code."]
    }), "\n", _jsx(_components.h2, {
      children: "The Hard Part About Coding"
    }), "\n", _jsx(_components.p, {
      children: "Eventually this leads to “the hard part about coding” which anecdotally everyone will tell you that surprise, it isn’t the coding part. What is nice about ChatGPT though is that even though the hard part isn’t writing code, it does take time, thought, and energy."
    }), "\n", _jsx(_components.p, {
      children: "If the hard part of coding isn’t coding, then what is it? The non-exhaustive list is that it’s teamwork, communication, debugging, and requirements gathering. Oversimplifying, it’s the writing prompts part of the chart."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>I’ve been experimenting with ChatGPT, just like everyone else. But why has it become so popular? It truly is a revolutionary piece of technology. Is it The Next Big Thing? Will it really replace all of us?</p>
<p>My day to day is architecture and programming, and I’ve heard all sorts of things on Twitter:</p>
<ul>
<li>That ChatGPT can build entire iOS applications</li>
<li>ChatGPT can write whole files of code</li>
<li>ChatGPT can find bugs in code when writing tests</li>
</ul>
<p>When I started by own company Clarity Hub, we had a focus on machine learning to help augment human intelligence. My thought at the time was that we could leverage machine learning to augment and supplement human intelligence. The focus wouldn&#x27;t be to replace any person&#x27;s job, but to make it streamlined and easier to accomplish that job. Our journey started with us serving customer success agents with suggested replies and contextual information, but we eventually pivoted to a Dovetail-like application to help product teams gather, annotate, and contextualize customer interviews.</p>
<p>We found that augmenting activity with machine learning was not only easier to do from a technology point of view, but empowered users, rather than make them feel like their job was being replaced.</p>
<p>Even with the advent of ChatGPT, I still see this being the short term future of it&#x27;s use.</p>
<h2>False Starts</h2>
<p>I was curious how much ChatGPT could really do given all of its hype</p>
<p>I asked it to build an Asteroids game using PhaserJS. Don’t worry, this isn’t another article on “Look, I got ChatGPT to build a game!”</p>
<p>I originally just asked ChatGPT to build an Asteroids game using PhaserJS. A very vague prompt, yes, but a great starting point to figure out the limitations of ChatGPT.</p>
<p>The response was basically, “No I can’t”:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>As an AI language model, I&#x27;m not able to write and execute code in real-time. However, I can provide you with a detailed framework to get started with creating an Asteroids game in PhaserJS.</p>
</blockquote>
<p>This was followed by instructions on how I could do it myself.</p>
<p>The next steps of course are to be more specific, asking ChatGPT to build the application to build specific functionality:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>Add the code to let the player shoot asteroids. If the player gets hit by 3 asteroids, its game over</p>
</blockquote>
<p>Most interactions with ChatGPT seem to go like this:</p>
<p><img alt="Flowchart workflow" src="/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_1.jpg" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>This flow eventually leads to either:</p>
<ul>
<li>Not getting what you want.</li>
<li>Getting what you want across many different responses, and then you must manually coalesce all of the different responses together to form the result you want.</li>
</ul>
<p>Once I like the set of responses that ChatGPT has given me, I’ll ask ChatGPT to summarize for me so that I can improve the prompt further:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>Take everything we just talked about and give me a prompt to ask you in the future that encapsulates all of the requirements.</p>
</blockquote>
<h2>A More Natural Flow</h2>
<p>I’ve talked with ChatGPT on a variety of topics, but the majority of questions relate to coding. I actively use Github Copilot, which utilizes the ChatGPT engine in the backend. I’ve built <a href="https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat">Sora by Capsule Cat</a> to have ChatGPT generate entire coding files for me as well with project context. Even then, I still use the ChatGPT UI as well.</p>
<p><img alt="Flowchart line" src="/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_2.jpg" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>I find that the above flow leaves me less fatigued, and more productive - at least in the context of side-projects that I’ve used ChatGPT. Research shows that when we read code and attempt logic puzzles, we use a completely different part of our brain than when we use language [<a href="https://hub.jhu.edu/2020/12/17/brain-activity-while-reading-code/">link</a>]. In the above chart, you can imagine that when we write prompts, we utilize some logical reasoning, but we lean heavily on language as we talk with ChatGPT. Then when we get a response, a completely different part of the brain kicks in to read and write code.</p>
<h2>The Hard Part About Coding</h2>
<p>Eventually this leads to “the hard part about coding” which anecdotally everyone will tell you that surprise, it isn’t the coding part. What is nice about ChatGPT though is that even though the hard part isn’t writing code, it does take time, thought, and energy.</p>
<p>If the hard part of coding isn’t coding, then what is it? The non-exhaustive list is that it’s teamwork, communication, debugging, and requirements gathering. Oversimplifying, it’s the writing prompts part of the chart.</p>


I’ve been experimenting with ChatGPT, just like everyone else. But why has it become so popular? It truly is a revolutionary piece of technology. Is it The Next Big Thing? Will it really replace all of us?

My day to day is architecture and programming, and I’ve heard all sorts of things on Twitter:

- That ChatGPT can build entire iOS applications
- ChatGPT can write whole files of code
- ChatGPT can find bugs in code when writing tests

When I started by own company Clarity Hub, we had a focus on machine learning to help augment human intelligence. My thought at the time was that we could leverage machine learning to augment and supplement human intelligence. The focus wouldn't be to replace any person's job, but to make it streamlined and easier to accomplish that job. Our journey started with us serving customer success agents with suggested replies and contextual information, but we eventually pivoted to a Dovetail-like application to help product teams gather, annotate, and contextualize customer interviews.

We found that augmenting activity with machine learning was not only easier to do from a technology point of view, but empowered users, rather than make them feel like their job was being replaced.

Even with the advent of ChatGPT, I still see this being the short term future of it's use.

## False Starts

I was curious how much ChatGPT could really do given all of its hype  

I asked it to build an Asteroids game using PhaserJS. Don’t worry, this isn’t another article on “Look, I got ChatGPT to build a game!”

I originally just asked ChatGPT to build an Asteroids game using PhaserJS. A very vague prompt, yes, but a great starting point to figure out the limitations of ChatGPT.

The response was basically, “No I can’t”:

> As an AI language model, I'm not able to write and execute code in real-time. However, I can provide you with a detailed framework to get started with creating an Asteroids game in PhaserJS.

This was followed by instructions on how I could do it myself.

The next steps of course are to be more specific, asking ChatGPT to build the application to build specific functionality:

> Add the code to let the player shoot asteroids. If the player gets hit by 3 asteroids, its game over

Most interactions with ChatGPT seem to go like this:

![Flowchart workflow](/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_1.jpg)

This flow eventually leads to either:

- Not getting what you want.
- Getting what you want across many different responses, and then you must manually coalesce all of the different responses together to form the result you want.

Once I like the set of responses that ChatGPT has given me, I’ll ask ChatGPT to summarize for me so that I can improve the prompt further:

> Take everything we just talked about and give me a prompt to ask you in the future that encapsulates all of the requirements.

## A More Natural Flow

I’ve talked with ChatGPT on a variety of topics, but the majority of questions relate to coding. I actively use Github Copilot, which utilizes the ChatGPT engine in the backend. I’ve built [Sora by Capsule Cat](https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat) to have ChatGPT generate entire coding files for me as well with project context. Even then, I still use the ChatGPT UI as well.

![Flowchart line](/media/2023-07-23-chatgpt-coding-loop/Flowchart_Template_2.jpg)

I find that the above flow leaves me less fatigued, and more productive - at least in the context of side-projects that I’ve used ChatGPT. Research shows that when we read code and attempt logic puzzles, we use a completely different part of our brain than when we use language [[link](https://hub.jhu.edu/2020/12/17/brain-activity-while-reading-code/)]. In the above chart, you can imagine that when we write prompts, we utilize some logical reasoning, but we lean heavily on language as we talk with ChatGPT. Then when we get a response, a completely different part of the brain kicks in to read and write code.

## The Hard Part About Coding

Eventually this leads to “the hard part about coding” which anecdotally everyone will tell you that surprise, it isn’t the coding part. What is nice about ChatGPT though is that even though the hard part isn’t writing code, it does take time, thought, and energy.

If the hard part of coding isn’t coding, then what is it? The non-exhaustive list is that it’s teamwork, communication, debugging, and requirements gathering. Oversimplifying, it’s the writing prompts part of the chart.


ChatGPT, Coding, and Language

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["I was working on a project and I noticed the ", _jsx(_components.code, {
        children: "tsc"
      }), " check that we ran on pre-commit hooks had become dramatically slower. I was seeing near instant times to type check the entire project go to agonizingly slow minutes to check the project. I was able to narrow the range of commits to some change we made within a month window. I’m sure I could have narrowed it down by continuing to git bisect and re-running ", _jsx(_components.code, {
        children: "time npx tsc"
      }), ", but it was much easier to just check out main and try out the following:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-bash",
        children: "# remove any pre-built definitions to get a good baseline\nrm -r .tsBuildInfo\n\n# Get some baseline stats\ntime npx tsc\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "I was seeing values around (times have been modified for blogging purposes):"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-bash",
        children: "real 1m30.000s\nuser 2m0.000s\nsys 0m3.000s\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["After running the baseline trace, I could analyze the ", _jsx(_components.code, {
        children: "tsc"
      }), " trace and use a nifty tool called ", _jsx(_components.code, {
        children: "analyze-trace"
      }), " that will report hotspots:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-bash",
        children: "npm i -g @typescript/analyze-trace\n\nnpx tsc --generateTrace ./.trace\nnpx analyze-trace ./.trace\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "This command will spit out which files are hotspots in your codebase. To my surprise, I was seeing build outputs from webpack as a hotspot."
    }), "\n", _jsxs(_components.p, {
      children: ["Turns out the ", _jsx(_components.code, {
        children: "tsconfig.json"
      }), " had been slightly modified and accidentally included the build folder. Adding the build folder to the excludes entry sped up the tsc command by quite a bit:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-bash",
        children: "real 0m30.000s\nuser 0m47.000s\nsys 0m2.000s\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Not only did the trace help me identify the major hotspot in the code, but also\nindicated some additional areas that I could improve upon going forward."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>I was working on a project and I noticed the <code>tsc</code> check that we ran on pre-commit hooks had become dramatically slower. I was seeing near instant times to type check the entire project go to agonizingly slow minutes to check the project. I was able to narrow the range of commits to some change we made within a month window. I’m sure I could have narrowed it down by continuing to git bisect and re-running <code>time npx tsc</code>, but it was much easier to just check out main and try out the following:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-bash"># remove any pre-built definitions to get a good baseline
rm -r .tsBuildInfo

# Get some baseline stats
time npx tsc
</code></pre></div>
<p>I was seeing values around (times have been modified for blogging purposes):</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-bash">real 1m30.000s
user 2m0.000s
sys 0m3.000s
</code></pre></div>
<p>After running the baseline trace, I could analyze the <code>tsc</code> trace and use a nifty tool called <code>analyze-trace</code> that will report hotspots:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-bash">npm i -g @typescript/analyze-trace

npx tsc --generateTrace ./.trace
npx analyze-trace ./.trace
</code></pre></div>
<p>This command will spit out which files are hotspots in your codebase. To my surprise, I was seeing build outputs from webpack as a hotspot.</p>
<p>Turns out the <code>tsconfig.json</code> had been slightly modified and accidentally included the build folder. Adding the build folder to the excludes entry sped up the tsc command by quite a bit:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-bash">real 0m30.000s
user 0m47.000s
sys 0m2.000s
</code></pre></div>
<p>Not only did the trace help me identify the major hotspot in the code, but also
indicated some additional areas that I could improve upon going forward.</p>


I was working on a project and I noticed the `tsc` check that we ran on pre-commit hooks had become dramatically slower. I was seeing near instant times to type check the entire project go to agonizingly slow minutes to check the project. I was able to narrow the range of commits to some change we made within a month window. I’m sure I could have narrowed it down by continuing to git bisect and re-running `time npx tsc`, but it was much easier to just check out main and try out the following:

```bash
# remove any pre-built definitions to get a good baseline
rm -r .tsBuildInfo

# Get some baseline stats
time npx tsc
```

I was seeing values around (times have been modified for blogging purposes):

```bash
real 1m30.000s
user 2m0.000s
sys 0m3.000s
```

After running the baseline trace, I could analyze the `tsc` trace and use a nifty tool called `analyze-trace` that will report hotspots:

```bash
npm i -g @typescript/analyze-trace

npx tsc --generateTrace ./.trace
npx analyze-trace ./.trace
```

This command will spit out which files are hotspots in your codebase. To my surprise, I was seeing build outputs from webpack as a hotspot.

Turns out the `tsconfig.json` had been slightly modified and accidentally included the build folder. Adding the build folder to the excludes entry sped up the tsc command by quite a bit:

```bash
real 0m30.000s
user 0m47.000s
sys 0m2.000s
```

Not only did the trace help me identify the major hotspot in the code, but also
indicated some additional areas that I could improve upon going forward.


Debugging slow tsc

<p>The following is a checklist I like to use to ensure I&#x27;m covering all the bases when building a component library. It&#x27;s a work in progress, but I hope it can be useful to others.</p>
<h2>Visual Language</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Color
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Palettes, by category</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Dark mode</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Typography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Headings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Paragraph</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Lead paragraphs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Readable text</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Iconography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Icons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Meaning</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Space
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Units / measurements</li>
</ul>
</li>
</ul>
<h2>Text</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Block quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Unordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Internal link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  External link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code</li>
</ul>
<h2>Buttons</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Buttons
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Primary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Secondary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Button groups</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Menu buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Split buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Floating action button</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Brand buttons (Google, FB, Discord)</li>
</ul>
</li>
</ul>
<h2>Forms</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form controls
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text input</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Email/number/other variant inputs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Multi-line text area</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Radio and radio group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Checkbox and checkbox group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Select</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  File upload</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Required label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Switch</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Slider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Calendar picker</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Rich text editor</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form structure</li>
</ul>
<h2>Layout</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Divider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Box</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Marketing grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  App grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Page transitions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Resopnsive breakpoints</li>
</ul>
<h2>Content</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Image</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Avatar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code block</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footnotes</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Thumbnails</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Video</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Map widget</li>
</ul>
<h2>UI Components</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Alerts</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Accordion</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Back to top</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Badges/tags/chips/pills</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Breadcrumbs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Caption</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cards
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Panel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Callout</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Chat</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Comments</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tables
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Data table</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Property table</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Drawer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Filters</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Header</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Error (standard error handler)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Loading / spinner / shimmer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Toast</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Notification / badge (dot)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Modal</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pagination</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Popover</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Progress bar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Search</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sidebar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sort by</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tabs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tooltips</li>
</ul>
<h2>Navigation</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Action bar / toolbar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Main menu / Megamenu</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Inline menu</li>
</ul>
<h2>Marketing</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Contact us</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cookie notification</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero billboard</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero carousel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Legend</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pull quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ratings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Reviews</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Social networking</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Status (alpha, beta)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tips / tutorial</li>
</ul>
<h2>UI Patterns</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Authentication</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Create account</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Permissions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Purchase/checkout</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Settings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Site / app structure</li>
</ul>


The following is a checklist I like to use to ensure I'm covering all the bases when building a component library. It's a work in progress, but I hope it can be useful to others.

## Visual Language

- [ ]  Color
  - [ ]  Palettes, by category
  - [ ]  Dark mode
- [ ]  Typography
  - [ ]  Headings
  - [ ]  Text
  - [ ]  Paragraph
  - [ ]  Lead paragraphs
  - [ ]  Readable text
- [ ]  Iconography
  - [ ]  Icons
  - [ ]  Meaning
- [ ]  Space
  - [ ]  Units / measurements

## Text

- [ ]  Block quote
- [ ]  Unordered list
- [ ]  Ordered list
- [ ]  Internal link
- [ ]  External link
- [ ]  Code

## Buttons

- [ ]  Buttons
  - [ ]  Primary
  - [ ]  Secondary
  - [ ]  Button groups
  - [ ]  Menu buttons
  - [ ]  Split buttons
  - [ ]  Floating action button
  - [ ]  Brand buttons (Google, FB, Discord)

## Forms

- [ ]  Form controls
  - [ ]  Text input
  - [ ]  Email/number/other variant inputs
  - [ ]  Multi-line text area
  - [ ]  Radio and radio group
  - [ ]  Checkbox and checkbox group
  - [ ]  Select
  - [ ]  File upload
  - [ ]  Label
  - [ ]  Required label
  - [ ]  Switch
  - [ ]  Slider
  - [ ]  Calendar picker
  - [ ]  Rich text editor
- [ ]  Form structure

## Layout

- [ ]  Divider
- [ ]  Box
- [ ]  Marketing grid
- [ ]  App grid
- [ ]  Page transitions
- [ ]  Resopnsive breakpoints

## Content

- [ ]  Image
- [ ]  Avatar
- [ ]  Code block
- [ ]  Footnotes
- [ ]  Thumbnails
- [ ]  Video
- [ ]  Map widget

## UI Components

- [ ]  Alerts
- [ ]  Accordion
- [ ]  Back to top
- [ ]  Badges/tags/chips/pills
- [ ]  Breadcrumbs
- [ ]  Caption
- [ ]  Cards
  - [ ]  Panel
  - [ ]  Callout
- [ ]  Chat
- [ ]  Comments
- [ ]  Tables
  - [ ]  Data table
  - [ ]  Property table
- [ ]  Drawer
- [ ]  Filters
- [ ]  Footer
- [ ]  Header
- [ ]  Error (standard error handler)
- [ ]  Loading / spinner / shimmer
- [ ]  Toast
- [ ]  Notification / badge (dot)
- [ ]  Modal
- [ ]  Pagination
- [ ]  Popover
- [ ]  Progress bar
- [ ]  Search
- [ ]  Sidebar
- [ ]  Sort by
- [ ]  Tabs
- [ ]  Tooltips

## Navigation

- [ ]  Action bar / toolbar
- [ ]  Main menu / Megamenu
- [ ]  Inline menu

## Marketing

- [ ]  Contact us
- [ ]  Cookie notification
- [ ]  Hero billboard
- [ ]  Hero carousel
- [ ]  Legend
- [ ]  Pull quote
- [ ]  Ratings
- [ ]  Reviews
- [ ]  Social networking
- [ ]  Status (alpha, beta)
- [ ]  Tips / tutorial

## UI Patterns

- [ ]  Authentication
- [ ]  Create account
- [ ]  Permissions
- [ ]  Purchase/checkout
- [ ]  Settings
- [ ]  Site / app structure
