cri.dev
about posts rss

How I edit this site on an iPad

Published on
Tagged with github16 codespaces3 visualstudio1

TLDR

This blog post was written on an iPad using GitHub Codespaces and Visual Studio Code.

Also the pictures were taken with the iPad and uploaded to GitHub Codespaces.

  • Open github.com
  • Use GitHub Codespaces
  • Spin up dev-server, edit, commit and push with Visual Studio Code
  • (Profit)

Is it the perfect iPad development experience?

Absolutely not, But it’s definitely a good start!

—

Setting up Codespaces

Codespaces can be configured using “Development Containers”, which resemble a full-featured development environment through Docker containers (see containers.dev for more info)

Pretty neat.

To get started, I created the following .devcontainer.json in my blog repository:

{   
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye"
}

Accessing the dev container

I go to my blog repo on GitHub and open the previously created Codespace.

I will have the latest changes that I left unstaged, with the previously opened file tabs too.

If you linked your Visual Studio Code with your GitHub account, you’ll also get Settings sync and the extensions are already installed and available as on your PC.

Spinning up the dev server

I just open a terminal, run npm start and once the server is up and running, a popup with the following shows up.

port fowarding codespace

I can just click on the link and it will open in a new tab.

Caveats

  • Don’t ever use CMD+W to close a VSCode tab, else it will close your browser tab! You’ll need to reload the Codespace too…
  • Scrolling doesn’t work suuper well in VSCode online I find, e.g. scrolling up and down in the code or the file tree is not working with my trackpad every time, it’s very finicky.
  • The ergonomics and overall experience of a PC are unbeatable, but it’s more than fine for small changes and quick fixes on the go
  • It’s useful to remap the WORLD key to Escape, e.g. when casually usually vim etc

Depending on your internet quality, the experience can be a bit laggy, but it’s still pretty usable.

Although one day the connection was quite unstable and I had to reload the codespace multiple times:

error reload codespace

So? Is it worth it?

Is it the perfect iPad development experience?

Absolutely not, But it’s definitely a good start!

I’m looking forward to see what GitHub/Microsoft will come up with in the future to suit my needs even better.

There is also CodeSandbox that looks very promising, I haven’t played around with it a whole lot.

PS: you can also set a spending limit to avoid unexpected bills

quota

Here, have a slice of pizza 🍕