A week back, I just saw a casual tweet from GitHub

🤫 New shortcut: Press . on any GitHub repo. pic.twitter.com/AHTSDot4qc

— GitHub (@github)

August 11, 2021

Basically, when you press ’.’ (dot) in your keyboard from any GitHub repo, the web interface seamlessly transition into a web editor. More on the details here in the GitHub product docs

This doesn’t take me as a surprise. The web-based editor is based on Visual Studio Code. For quite some time, I already have GitHub Codespaces beta invite. GitHub Codespaces is simply a Visual Studio Code, remote in the cloud, that automatically be provisioned from the GitHub repo you want to checkout.

I’ve tried GitHub Codespaces and it’s really awesome. The ability to quickly checkout a repo, immediately, with a working Visual Studio Code IDE in your own web browser, really simplifies things if you are working on multiple open source projects. You can just hop in between different repo or branches, without having to think about how and where you want to store the repo in your local disk (or if you have any space left at all). You also have access to the compute instance associated with your codespace. Basically each codespace instance have it’s own compute and terminal. This greatly simplify things if you are full stack or microservice developers. You can have two codespace instance each having it’s own docker daemon to build your service. You can even expose your service immediately over the internet with autogenerated FQDN. You can share easily a staging instance or feature branch you already built, for demo or integration purposes.

The GitHub Codespaces, however, is still expensive IMO. It’s unreachable for students or people who just started coding. The barrier of entry is especially important if you come from unprivileged background. In the past, in my college years, I don’t have any laptop/computers so I have to join college lab to use them. I compile a project source code in their machine, probably leave it overnight if it is as big as a Linux Kernel. This allows me to learn how to code before I even got any laptop (good laptop is expensive).

Nowadays, I’m privileged enough to have my own PC and laptop and try more heavy stuff, like building docker containers from monolithic source code, or compiling project with big source code like QGIS. However, people that is new to code can’t easily have 8 multi-core machine with 16GB of RAM and SSD. It’s such an expensive decision to purchase a new 1k USD grade laptop for these kind of things. I was kind of hoping that GitHub Codespaces can lower the barrier of entry for these kind of development.

Let’s check the pricing page.

It was written that for a compute with 2 cores, the price is 0.18 USD/hour. Let’s say you work normally, 8 hours a day, 21 days, with a total of 176 hour. That means 31.68 USD a month. In Indonesia, with 4 or 5 USD you can buy a fancy Starbucks coffee. Surely if you can afford buying coffee, you can probably spend this much (31.68 USD) in a month. In my college days, it is not possible to jump start your software development carreer this cheap (unless you can compile in your head, lol). You can just buy a cheap chromebook and then start building your microservices.

For 2 cores, it is more than enough to just build one microservice or doing some frontend web development (which is very lightweight). If you are a system engineer, or platform engineer, or fullstack engineer, you probably need more compute. Fortunately, the pricing page is pretty simple. If you want 4 times the cores, you multiply the monthly cost by 4. So, it can be as expensive as 500 USD (32 cores). In my country, the cost of having 2 cores codespace is almost the same with the cost of having a fancy reliable internet connection for a month. Realistically, for students you can only afford the internet and 2 cores of codespace. This is why I still think GitHub codespaces is reasonably priced for full time developers, but not for students in developing countries. With that kind of pricing you could save up 12 months to help you buy a laptop.

We still have to calculate the storage cost. But I don’t think it’s significant enough. I don’t know how they calculate it, but let’s say your usage is 32GB month. Then your cost would be like 3 USD flat per month. Still cheap.

GitHub also explained that they use the very same Codespaces for their own github code repo here. The story was quite inspirational.

It’s also worth noting that implementing this for a Team is totally makes sense. You can enable your team with direct access to fast computer, regardless of their current machine. It’s easy to calculate the cost if you have client-based project. You can also have streamlined workflow where all of your team uses the same setup, regardless of what computers they are using, chromebook, macos, windows, etc. The devcontainer setup allows this. It’s also possible to set the Visual Studio Code interface to use the same recommended extensions, so that your team doesn’t have to ask which extension they need to enable to improve their workflow.

In a developing country like Indonesia, there is also an extra issue about the reliable internet connection. It might be more expensive to provide the internet connectivity to use GitHub Codespaces in addition to the codespace cost itself. But we can’t control that factor. It’s just necessary. You have to think about it in different perspectives. If you are going to build containers anyway, you need the bandwidth to pull those images into your own local machine. So it is even better if you use codespaces because you pull those images in the cloud. Your bandwidth is just used to transfer the SSH interaction, and API requests, not the images itself.

I just hope that some collaboration with universities exists. For example, University labs can just create a team and then allocate funding for remote development lab like this, especially in this pandemic situation.

So what about this Web Editor?

I didn’t realize the significance of this new Web Editor shortcut until I realized that the Web Editor is free for everyone.

Originally, I thought the shortcut was to instantiate a Codespace. Codespace has pricing and it is only available for at least a Team/Organization account. So, a personal account can’t set spending limit. I don’t actually know how to do that at the moment, because I’m not sure why I can use Codespace. Maybe because of the Beta and not because I’m a member of some team.

The Web Editor, on the other hand, is free for everyone. It doesn’t use any compute, so it’s just basically a fancy text editor in your browser. But, it doesn’t mean it’s not powerful. The editor uses your own browser to run the process. It also uses your browser’s HTML local storage to save intermediate state. Finally, it uses a git repo as the database.

It’s really mindblowing for me. You can have a Git Repo for free (basically cloud service to store all your files), and the editor for free. Moreover, it’s seamlessly integrated. You don’t need extra setup. You can start editing files in a git repo, and then if you connect it to any free cloud-based service, you basically have a free environment.

The most straightforward use case is to publish a personal site powered by Headless-CMS approach.

My site here is currently built using Gatsby and Netlify. When I have commits in the default branch, it will auto deploy to the web and make my website live. Usually I checkout my repo in my local PC. Build it there and publish it. But since Codespace beta, I can create articles from within my iPad browser, and auto deploy it when I commit. Netlify also has a CMS for Gatsby, which is kind of the same thing in principle with this GitHub web editor. However, this web editor is essentially a Visual Studio Code in a browser, so you can benefit from extensions that can be run from within the browser, like the linter or syntax checker. This approach just gave birth of a new platform for editing.

One other use case I can think about is how you can leverage your GitOps with this. If you already setup GitHub Action Workflow, or any CI/CD that works with Git, you can hook your operation by commits. By just doing commits, you can trigger deployment to virtually anywhere.

If you check something like ArgoCD or Rancher Fleet, it is based on GitOps approach. Any changes of your Kubernetes manifests in a git repo will be synced in your cluster. This make it easy for a team to quickly deploy or upgrade their apps… with just a web editor.

I’m imagining this kind of conversation:

A: Bro, I need you to upgrade my apps in the cloud to v1.2.1

B: Bro, just go to your repo, hit ’.’ (dot), change the version yourself in the deployment directory, then it will go live…

Or these kind of things:

A: Bro, please change the version number and do a python package patch release ASAP

B: Man, you can just change it yourself using the GitHub web-editor. The rest was already setup to do auto packaging and deploy with that new version.

Or…

A: Hi team, to prepare for the upcoming hit to our server, we need to upscale the deployment and provision new servers.

A: Infra team, please make the necessary adjustment

B: Guys, just change the terraform code yourself using the web editor. We can then review it in a PR. If it pass the lint, then just merge it away.

Often times, the barrier to adopt GitOps is not the technology, but the people using it. Because mostly the team is not yet familiar with git. They had to checkout the code in their machine, making changes, commits, make PR, etc. Too many steps. You can do it with previous GitHub interface (directly editing a file and it turns into a commit), but what if you have multiple files? With the new Web Editor, this process is just seamless and easy to understand, even for non git-savvy friend.

Just hit dot. Use the file explorer in the web editor or search to find the files you want to edit. Then commit using the button literally glowing blue in the side panel. You can’t miss it. Then be done with it. There’s no need for a special team called DevOps to do your daily deployment if GitOps were already set up.

Well I guess, that’s it. If you happen to have a GitHub Team or Organization access, I recommend you to check out GitHub Codespaces immediately.

It is free until 10th September 2021

Sincerely, Maulana

PS: This article itself is written using GitHub Free Web-Based Editor :)