chore: add a how-to guide on using devcontainers and codespaces

docs/docs/how_to/using-devcontainers.mdx

@@ -0,0 +1,108 @@
+---
+title: Devcontainers and Codespaces
+description: "Learn how to set up a devcontainer in your GitHub repository for a seamless coding experience with Codespaces. Follow our easy 8-step guide to create your own Noir environment without installing Nargo locally."
+keywords: ["Devcontainer", "Codespaces", "GitHub", "Noir Environment", "Docker Image", "Development Environment", "Remote Coding", "GitHub Codespaces", "Noir Programming", "Nargo", "VSCode Extensions", "Noirup"]
+sidebar_position: 1
+---
+
+Noir has extensive tooling. Thanks to Noirup, adding a devcontainer to your own repository is quite easy and pretty powerful.
+
+## What's a devcontainer after all?
+
+A devcontainer is a Docker image that comes preloaded with tools, extensions, and other tools you need to quickly get started or continue a project, without having to install Nargo locally. Think of it as a development environment in a box.
+
+There are many advantages to this:
+
+- It's platform and architecture agnostic
+- You don't need to have an IDE installed, or Nargo, or use a terminal at all
+- It's safer for using on a public machine or public network
+
+One of the best ways of using devcontainers is... not using your machine at all, for maximum control, performance, and ease of use.
+Enter Codespaces.
+
+## Codespaces
+
+If a devcontainer is just a Docker image, then what stops you from provisioning a `p3dn.24xlarge` AWS EC2 instance with 92 vCPUs and 768 GiB RAM and using it to prove your 10-gate SNARK proof? 
+
+Nothing! Except perhaps the 30-40$ per hour it will cost you. 
+
+The problem is that provisioning takes time, and I bet you don't want to see the AWS console every time you want to code something real quick.
+
+Fortunately, there's an easy and free way to get a decent remote machine ready and loaded in less than 2 minutes: Codespaces. Codespaces is a Github feature that allows you to code in a remote machine by using devcontainers, and it's pretty cool:
+
+- You can start coding Noir in less than a minute
+- It uses the resources of a remote machine, so you can code on your grandma's phone if needed be
+- It makes it easy to share work with your frens
+- It's fully reusable, you can stop and restart whenever you need to
+
+:::info
+
+Don't take out your wallet just yet. Free GitHub accounts get about [15-60 hours of coding](https://github.com/features/codespaces) for free per month, depending on the size of your provisioned machine.
+
+:::
+
+## Tell me it's _actually_ easy
+
+It is!
+
+Github comes with a default codespace and you can use it to code your own devcontainer. That's exactly what we will be doing in this guide.
+
+8 simple steps:
+
+#### 1. <a href="https://github.com/new" target="_blank">Create a new repository</a> on GitHub.
+
+#### 2. Click "Start coding with Codespaces". This will use the default image.
+
+#### 3. Create a folder called `.devcontainer` in the root of your repository.
+
+#### 4. Create a Dockerfile in that folder, and paste the following code:
+
+```dockerfile
+
+FROM --platform=linux/amd64 node:lts-bookworm-slim
+SHELL ["/bin/bash", "-c"]
+RUN apt update && apt install -y curl bash git tar gzip libc++-dev
+RUN curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
+ENV PATH="/root/.nargo/bin:$PATH"
+RUN noirup
+ENTRYPOINT ["nargo"]
+
+```
+#### 5. Create a file called `devcontainer.json` in the same folder, and paste the following code:
+
+```json
+{
+ "name": "Noir on Codespaces",
+ "build": {
+    "context": ".",
+    "dockerfile": "Dockerfile"
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["noir-lang.vscode-noir"]
+    }
+  }
+}
+```
+#### 6. Commit and push your changes
+
+#### 7. Open the command palette and run "Rebuild Codespace". 
+This will pull the new image and build it, so it could take a minute or so
+
+#### 8. Done! 
+Just wait for the build to finish, and there's your easy Noir environment
+
+<video width="100%" height="auto" controls>
+  <source src={require('@site/static/video/how-tos/devcontainer.mp4').default} type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+## How do I use it?
+
+Using the codespace is obviously much easier than setting it up. 
+Just navigate to your repository and click "Code" -> "Open with Codespaces". It should take a few seconds to load, and you're ready to go.
+
+:::info
+
+If you really like the experience, you can add a badge to your readme, links to existing codespaces, and more. 
+Check out the [official docs](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/facilitating-quick-creation-and-resumption-of-codespaces) for more info.