4 articles tagged “developer-tools” — software, engineering, and related writing by idmontie.

Developer Tools blog posts - idmontie's Portfolio

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    code: "code",
    img: "img",
    p: "p",
    pre: "pre",
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["I recently published a utility ", _jsx(_components.a, {
        href: "https://github.com/idmontie/human-agent-review-tool",
        children: "Human Agent Review Tool"
      }), " that helps keep track of the code I've actually reviewed while working with coding agents."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2026-09-16-review-tool/repo.png",
        alt: "Review Tool Repo"
      })
    }), "\n", _jsx(_components.p, {
      children: "AI coding agents have made it possible to iterate on ideas and features extremely quickly. This is extremely helpful when building proofs of concept, experimenting with ideas, and creating internal scripts and utilities."
    }), "\n", _jsx(_components.p, {
      children: "But that workflow of working with a coding agent to produce code introduces a simple problem: which files have I actually reviewed?"
    }), "\n", _jsx(_components.p, {
      children: "When using Cursor, each agent workflow typically let's you review files. But this interface is typically all or nothings – once you commit and move onto the next workflow, that diff is gone."
    }), "\n", _jsx(_components.p, {
      children: "In a traditional workflow, a pull request provides a nice interface and check-in point for code review. When working locally with an agent, I don't necessarily create a PR for every single feature, nor do I want to for work that might be throwaway code."
    }), "\n", _jsx(_components.p, {
      children: "After several rounds of prompting, testing, and iterating, it can become suprisingly difficult to remember what code changes I have personally looked at."
    }), "\n", _jsx(_components.p, {
      children: "The Human Agent Review Tool gives a lightweight way to track that."
    }), "\n", _jsx(_components.p, {
      children: "After globally installing via"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-bash",
        children: "pnpm i -g review-tool\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["you can run ", _jsx(_components.code, {
        children: "review-tool"
      }), " from a Git repository and it will open a local dashboard containing all the files in the project. Each file can be marked as Reviewed, Unreviewed, or Needs Changes."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2026-09-16-review-tool/review-tool-dashboard.png",
        alt: "Review Tool Dashboard"
      })
    }), "\n", _jsx(_components.p, {
      children: "I can also attach notes to the files that need additional work, giving me a simple queue for the next iteration with the coding agent."
    }), "\n", _jsx(_components.p, {
      children: "The tool tracks the review state separately from the source code, and if a previously reviewed file changes, that review state becomes stale so that it can be reviewed again. It also supports ignoring generated files or other files that aren't useful to inspect manually."
    }), "\n", _jsx(_components.p, {
      children: "The goal isn't to replace pull requests, or any traditional code review. Rather it is meant to help with the local development workflow that happens before a traditional code review: allowing a human and agent to rapidly build together on a local codebase."
    }), "\n", _jsx(_components.p, {
      children: "As coding agents become capable of producing larger features and code changes, I think tools that help developers maintain oversight will become increasingly important."
    }), "\n", _jsxs(_components.p, {
      children: ["The project is available on Github: ", _jsx(_components.a, {
        href: "https://github.com/idmontie/human-agent-review-tool",
        children: "https://github.com/idmontie/human-agent-review-tool"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>I recently published a utility <a href="https://github.com/idmontie/human-agent-review-tool">Human Agent Review Tool</a> that helps keep track of the code I&#x27;ve actually reviewed while working with coding agents.</p>
<p><img alt="Review Tool Repo" loading="lazy" width="1" height="1" decoding="async" data-nimg="1" class="mx-auto block !h-auto !w-auto max-h-[500px] max-w-full" style="color:transparent;width:auto;height:auto;max-width:100%;max-height:500px;margin:auto" src="/media/2026-09-16-review-tool/repo.png"/></p>
<p>AI coding agents have made it possible to iterate on ideas and features extremely quickly. This is extremely helpful when building proofs of concept, experimenting with ideas, and creating internal scripts and utilities.</p>
<p>But that workflow of working with a coding agent to produce code introduces a simple problem: which files have I actually reviewed?</p>
<p>When using Cursor, each agent workflow typically let&#x27;s you review files. But this interface is typically all or nothings – once you commit and move onto the next workflow, that diff is gone.</p>
<p>In a traditional workflow, a pull request provides a nice interface and check-in point for code review. When working locally with an agent, I don&#x27;t necessarily create a PR for every single feature, nor do I want to for work that might be throwaway code.</p>
<p>After several rounds of prompting, testing, and iterating, it can become suprisingly difficult to remember what code changes I have personally looked at.</p>
<p>The Human Agent Review Tool gives a lightweight way to track that.</p>
<p>After globally installing via</p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code class="language-bash">pnpm i -g review-tool
</code></pre></div>
<p>you can run <code>review-tool</code> from a Git repository and it will open a local dashboard containing all the files in the project. Each file can be marked as Reviewed, Unreviewed, or Needs Changes.</p>
<p><img alt="Review Tool Dashboard" loading="lazy" width="1" height="1" decoding="async" data-nimg="1" class="mx-auto block !h-auto !w-auto max-h-[500px] max-w-full" style="color:transparent;width:auto;height:auto;max-width:100%;max-height:500px;margin:auto" src="/media/2026-09-16-review-tool/review-tool-dashboard.png"/></p>
<p>I can also attach notes to the files that need additional work, giving me a simple queue for the next iteration with the coding agent.</p>
<p>The tool tracks the review state separately from the source code, and if a previously reviewed file changes, that review state becomes stale so that it can be reviewed again. It also supports ignoring generated files or other files that aren&#x27;t useful to inspect manually.</p>
<p>The goal isn&#x27;t to replace pull requests, or any traditional code review. Rather it is meant to help with the local development workflow that happens before a traditional code review: allowing a human and agent to rapidly build together on a local codebase.</p>
<p>As coding agents become capable of producing larger features and code changes, I think tools that help developers maintain oversight will become increasingly important.</p>
<p>The project is available on Github: <a href="https://github.com/idmontie/human-agent-review-tool">https://github.com/idmontie/human-agent-review-tool</a>.</p>


I recently published a utility [Human Agent Review Tool](https://github.com/idmontie/human-agent-review-tool) that helps keep track of the code I've actually reviewed while working with coding agents.

![Review Tool Repo](/media/2026-09-16-review-tool/repo.png)

AI coding agents have made it possible to iterate on ideas and features extremely quickly. This is extremely helpful when building proofs of concept, experimenting with ideas, and creating internal scripts and utilities.

But that workflow of working with a coding agent to produce code introduces a simple problem: which files have I actually reviewed?

When using Cursor, each agent workflow typically let's you review files. But this interface is typically all or nothings – once you commit and move onto the next workflow, that diff is gone.

In a traditional workflow, a pull request provides a nice interface and check-in point for code review. When working locally with an agent, I don't necessarily create a PR for every single feature, nor do I want to for work that might be throwaway code.

After several rounds of prompting, testing, and iterating, it can become suprisingly difficult to remember what code changes I have personally looked at.

The Human Agent Review Tool gives a lightweight way to track that.

After globally installing via

```bash
pnpm i -g review-tool
```

you can run `review-tool` from a Git repository and it will open a local dashboard containing all the files in the project. Each file can be marked as Reviewed, Unreviewed, or Needs Changes.

![Review Tool Dashboard](/media/2026-09-16-review-tool/review-tool-dashboard.png)

I can also attach notes to the files that need additional work, giving me a simple queue for the next iteration with the coding agent.

The tool tracks the review state separately from the source code, and if a previously reviewed file changes, that review state becomes stale so that it can be reviewed again. It also supports ignoring generated files or other files that aren't useful to inspect manually.

The goal isn't to replace pull requests, or any traditional code review. Rather it is meant to help with the local development workflow that happens before a traditional code review: allowing a human and agent to rapidly build together on a local codebase.

As coding agents become capable of producing larger features and code changes, I think tools that help developers maintain oversight will become increasingly important.

The project is available on Github: https://github.com/idmontie/human-agent-review-tool.


Keeping Humans in the Loop for Agent-Written Code

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    code: "code",
    p: "p",
    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, {
    ...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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    code: "code",
    h2: "h2",
    img: "img",
    p: "p",
    pre: "pre",
    strong: "strong",
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides."
    }), "\n", _jsxs(_components.p, {
      children: ["With that goal in mind, Sora provides two ways to activate OpenAI: by typing ", _jsx(_components.code, {
        children: "@OpenAI"
      }), " (formally ", _jsx(_components.code, {
        children: "@ChatGPT"
      }), ") or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-tsx",
        children: "/**\n * Write tests for [my-file](./my-file.ts] using\n * [other-test](../something/other-file.test.ts) as an example\n */\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-06-06-sora/sora-preview.gif",
        alt: "Sora Preview"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["This extension leverages the OpenAI API to send any referenced files and a starting prompt to the ", _jsx(_components.code, {
        children: "gpt-3.5-turbo"
      }), " chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files."]
    }), "\n", _jsx(_components.p, {
      children: "Once the response comes back, the extension parses it and appends it to the original file."
    }), "\n", _jsx(_components.h2, {
      children: _jsx(_components.strong, {
        children: "Installation and Usage"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You can install the extension by going to ", _jsx(_components.a, {
        href: "https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat",
        children: "the VSCode Marketplace"
      }), ", or searching for “Sora” in Visual Studio Code extensions."]
    }), "\n", _jsxs(_components.p, {
      children: ["Once installed, you will need to enter your own OpenAI API key. You can get your key by following ", _jsx(_components.a, {
        href: "https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key",
        children: "these instructions"
      }), ". Then just enter ", _jsx(_components.code, {
        children: "Sora: Set API Key"
      }), " into the Visual Studio Code command prompt."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-06-06-sora/sora-set-api-key.png",
        alt: "Sora Set API Key"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You can review the code ", _jsx(_components.a, {
        href: "https://github.com/CapsuleCat/sora-by-capsule-cat",
        children: "on Github"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: _jsx(_components.strong, {
        children: "Conclusion"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["It was fun building my first extension. Please feel free to reach out on our ", _jsx(_components.a, {
        href: "https://github.com/CapsuleCat/sora-by-capsule-cat",
        children: "Github"
      }), " for feedback or questions."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides.</p>
<p>With that goal in mind, Sora provides two ways to activate OpenAI: by typing <code>@OpenAI</code> (formally <code>@ChatGPT</code>) or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:</p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code class="language-tsx">/**
 * Write tests for [my-file](./my-file.ts] using
 * [other-test](../something/other-file.test.ts) as an example
 */
</code></pre></div>
<p>Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you.</p>
<p><img alt="Sora Preview" loading="lazy" width="1" height="1" decoding="async" data-nimg="1" class="mx-auto block !h-auto !w-auto max-h-[500px] max-w-full" style="color:transparent;width:auto;height:auto;max-width:100%;max-height:500px;margin:auto" src="/media/2023-06-06-sora/sora-preview.gif"/></p>
<p>This extension leverages the OpenAI API to send any referenced files and a starting prompt to the <code>gpt-3.5-turbo</code> chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files.</p>
<p>Once the response comes back, the extension parses it and appends it to the original file.</p>
<h2><strong>Installation and Usage</strong></h2>
<p>You can install the extension by going to <a href="https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat">the VSCode Marketplace</a>, or searching for “Sora” in Visual Studio Code extensions.</p>
<p>Once installed, you will need to enter your own OpenAI API key. You can get your key by following <a href="https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key">these instructions</a>. Then just enter <code>Sora: Set API Key</code> into the Visual Studio Code command prompt.</p>
<p><img alt="Sora Set API Key" loading="lazy" width="1" height="1" decoding="async" data-nimg="1" class="mx-auto block !h-auto !w-auto max-h-[500px] max-w-full" style="color:transparent;width:auto;height:auto;max-width:100%;max-height:500px;margin:auto" src="/media/2023-06-06-sora/sora-set-api-key.png"/></p>
<p>You can review the code <a href="https://github.com/CapsuleCat/sora-by-capsule-cat">on Github</a>.</p>
<h2><strong>Conclusion</strong></h2>
<p>It was fun building my first extension. Please feel free to reach out on our <a href="https://github.com/CapsuleCat/sora-by-capsule-cat">Github</a> for feedback or questions.</p>

Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides.

With that goal in mind, Sora provides two ways to activate OpenAI: by typing `@OpenAI` (formally `@ChatGPT`) or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:

```tsx
/**
 * Write tests for [my-file](./my-file.ts] using
 * [other-test](../something/other-file.test.ts) as an example
 */
```

Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you.

![Sora Preview](/media/2023-06-06-sora/sora-preview.gif)

This extension leverages the OpenAI API to send any referenced files and a starting prompt to the `gpt-3.5-turbo` chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files.

Once the response comes back, the extension parses it and appends it to the original file.

## **Installation and Usage**

You can install the extension by going to [the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat), or searching for “Sora” in Visual Studio Code extensions.

Once installed, you will need to enter your own OpenAI API key. You can get your key by following [these instructions](https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key). Then just enter `Sora: Set API Key` into the Visual Studio Code command prompt.

![Sora Set API Key](/media/2023-06-06-sora/sora-set-api-key.png)

You can review the code [on Github](https://github.com/CapsuleCat/sora-by-capsule-cat).

## **Conclusion**

It was fun building my first extension. Please feel free to reach out on our [Github](https://github.com/CapsuleCat/sora-by-capsule-cat) for feedback or questions.


Sora - OpenAI Visual Studio Code Extension

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    h2: "h2",
    h3: "h3",
    li: "li",
    p: "p",
    ul: "ul",
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cross Browser Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://vanamco.com/ghostlab/",
          children: "Ghostlab"
        }), " - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://creative.adobe.com/products/inspect",
          children: "Edge Inspect CC"
        }), " - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://livereload.com/",
          children: "Live Reload"
        }), " - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://www.parallels.com/",
          children: "Parallels"
        }), " - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Google Chrome Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://cssdig.com/",
          children: "CSSDig"
        }), " - Look at your CSS in a way that easily allows you to refactor it."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "User Interface Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.uxcheck.co",
          children: "UX Check"
        }), " - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.googleui.org",
          children: "Good UI"
        }), " - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://littlebigdetails.com/",
          children: "Little Big Details"
        }), " contains design inspiration from the point of view of the users."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://color.adobe.com/",
          children: "Adobe Color CC"
        }), " - Formerly known as Kuler, this tools lets you pick color schemes."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.materialpalette.com/",
          children: "Material Palette"
        }), " - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Usage Trends"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://w3techs.com/",
          children: "W3Techs"
        }), " has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://stackshare.io/",
          children: "Stack Share"
        }), " - see what technology stacks other platforms are using."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Images and Stock Photos"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://subtlepatterns.com/",
          children: "Subtle Patterns"
        }), " - Sublte pattern backgrounds for websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://unsplash.com/",
          children: "Unsplash"
        }), " - Large, high-resolution, splash photos for free."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.resplashed.com/",
          children: "Resplashed"
        }), " - HD images."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b",
          children: "Stock photos list ad Medium"
        }), " - List of great stock photo resources."]
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://superfamous.com/",
          children: "SuperFamous"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.imcreator.com/free",
          children: "IMCreator"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://thepatternlibrary.com/",
          children: "The Pattern Library"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://picjumbo.com/",
          children: "Pic Jumbo"
        })
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Templates"
    }), "\n", _jsx(_components.h3, {
      children: "HTML5 Templates"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://html5up.net/",
          children: "HTML5 Up"
        }), " - fully responsive, free, HTML5 templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://themes.3rdwavemedia.com/",
          children: "HTML5 Templates"
        }), " - UX centred HTML5 Bootstrap themes and templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://templated.co/",
          children: "Templated"
        }), " - A collection of free CSS and HTML5 site templates."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Emails"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://zurb.com/ink/",
          children: "Ink"
        }), " - Tool for helping create emails."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://beefree.io/",
          children: "BeeFree"
        }), " - Tool for helping create emails."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "SEO"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://adwords.google.com/KeywordPlanner",
          children: "Google Keyword Planner"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.google.com/analytics/",
          children: "Google Analytics"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://support.google.com/analytics/answer/1745147",
          children: "Website Optimizer"
        })
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Note: Checkout the ", _jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=9yKjrdcC8wA",
        children: "Google Trifecta Video"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.</p>
<h2>Cross Browser Tools</h2>
<ul>
<li><a href="http://vanamco.com/ghostlab/">Ghostlab</a> - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.</li>
<li><a href="https://creative.adobe.com/products/inspect">Edge Inspect CC</a> - Synchronized Browsing &amp; Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.</li>
<li><a href="http://livereload.com/">Live Reload</a> - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.</li>
<li><a href="https://www.parallels.com/">Parallels</a> - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.</li>
</ul>
<h2>Google Chrome Tools</h2>
<ul>
<li><a href="http://cssdig.com/">CSSDig</a> - Look at your CSS in a way that easily allows you to refactor it.</li>
</ul>
<h2>User Interface Tools</h2>
<ul>
<li><a href="www.uxcheck.co">UX Check</a> - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.</li>
<li><a href="www.googleui.org">Good UI</a> - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.</li>
<li><a href="http://littlebigdetails.com/">Little Big Details</a> contains design inspiration from the point of view of the users.</li>
<li><a href="https://color.adobe.com/">Adobe Color CC</a> - Formerly known as Kuler, this tools lets you pick color schemes.</li>
<li><a href="http://www.materialpalette.com/">Material Palette</a> - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.</li>
</ul>
<h2>Usage Trends</h2>
<ul>
<li><a href="http://w3techs.com/">W3Techs</a> has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.</li>
<li><a href="http://stackshare.io/">Stack Share</a> - see what technology stacks other platforms are using.</li>
</ul>
<h2>Images and Stock Photos</h2>
<ul>
<li><a href="http://subtlepatterns.com/">Subtle Patterns</a> - Sublte pattern backgrounds for websites.</li>
<li><a href="https://unsplash.com/">Unsplash</a> - Large, high-resolution, splash photos for free.</li>
<li><a href="http://www.resplashed.com/">Resplashed</a> - HD images.</li>
<li><a href="https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b">Stock photos list ad Medium</a> - List of great stock photo resources.</li>
<li><a href="http://superfamous.com/">SuperFamous</a></li>
<li><a href="http://www.imcreator.com/free">IMCreator</a></li>
<li><a href="http://thepatternlibrary.com/">The Pattern Library</a></li>
<li><a href="http://picjumbo.com/">Pic Jumbo</a></li>
</ul>
<h2>Templates</h2>
<h3>HTML5 Templates</h3>
<ul>
<li><a href="http://html5up.net/">HTML5 Up</a> - fully responsive, free, HTML5 templates.</li>
<li><a href="http://themes.3rdwavemedia.com/">HTML5 Templates</a> - UX centred HTML5 Bootstrap themes and templates.</li>
<li><a href="http://templated.co/">Templated</a> - A collection of free CSS and HTML5 site templates.</li>
</ul>
<h2>Emails</h2>
<ul>
<li><a href="http://zurb.com/ink/">Ink</a> - Tool for helping create emails.</li>
<li><a href="https://beefree.io/">BeeFree</a> - Tool for helping create emails.</li>
</ul>
<h2>SEO</h2>
<ul>
<li><a href="https://adwords.google.com/KeywordPlanner">Google Keyword Planner</a></li>
<li><a href="http://www.google.com/analytics/">Google Analytics</a></li>
<li><a href="https://support.google.com/analytics/answer/1745147">Website Optimizer</a></li>
</ul>
<p>Note: Checkout the <a href="https://www.youtube.com/watch?v=9yKjrdcC8wA">Google Trifecta Video</a>.</p>


This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.

## Cross Browser Tools

* [Ghostlab](http://vanamco.com/ghostlab/) - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.
* [Edge Inspect CC](https://creative.adobe.com/products/inspect) - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.
* [Live Reload](http://livereload.com/) - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.
* [Parallels](https://www.parallels.com/) - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.

## Google Chrome Tools

* [CSSDig](http://cssdig.com/) - Look at your CSS in a way that easily allows you to refactor it.  

## User Interface Tools

* [UX Check](www.uxcheck.co) - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.
* [Good UI](www.googleui.org) - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.
* [Little Big Details](http://littlebigdetails.com/) contains design inspiration from the point of view of the users.
* [Adobe Color CC](https://color.adobe.com/) - Formerly known as Kuler, this tools lets you pick color schemes.
* [Material Palette](http://www.materialpalette.com/) - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.

## Usage Trends

* [W3Techs](http://w3techs.com/) has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.
* [Stack Share](http://stackshare.io/) - see what technology stacks other platforms are using.

## Images and Stock Photos

* [Subtle Patterns](http://subtlepatterns.com/) - Sublte pattern backgrounds for websites.
* [Unsplash](https://unsplash.com/) - Large, high-resolution, splash photos for free.
* [Resplashed](http://www.resplashed.com/) - HD images.
* [Stock photos list ad Medium](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) - List of great stock photo resources.
* [SuperFamous](http://superfamous.com/)
* [IMCreator](http://www.imcreator.com/free)
* [The Pattern Library](http://thepatternlibrary.com/)
* [Pic Jumbo](http://picjumbo.com/)

## Templates

### HTML5 Templates

* [HTML5 Up](http://html5up.net/) - fully responsive, free, HTML5 templates.
* [HTML5 Templates](http://themes.3rdwavemedia.com/) - UX centred HTML5 Bootstrap themes and templates.
* [Templated](http://templated.co/) - A collection of free CSS and HTML5 site templates.

## Emails

* [Ink](http://zurb.com/ink/) - Tool for helping create emails.
* [BeeFree](https://beefree.io/) - Tool for helping create emails.

## SEO

* [Google Keyword Planner](https://adwords.google.com/KeywordPlanner)
* [Google Analytics](http://www.google.com/analytics/)
* [Website Optimizer](https://support.google.com/analytics/answer/1745147)

Note: Checkout the [Google Trifecta Video](https://www.youtube.com/watch?v=9yKjrdcC8wA).
