A lightweight code editor, based on VSCode, that can be accessed via Browser, and it's completely free. Sounds too good to be true? Well this time it's not.
Intro
As promised in the article / video about Codespaces that I've released last week (check it out if you haven't yet), today we talk about an awesome new feature that has been released by GitHub together with Codespaces.
I'm talking about the new Web Editor experience accessible directly from your repos. Best part? It's completely free for everyone!
Video
As usual, if you are a visual learner, or simply prefer to watch and listen instead of reading, here you have the video with the whole explanation and demo, which to be fair is much more complete than this post.
Link to the video: https://youtu.be/UDbdChCXIKw
If you rather prefer reading, well... let's just continue :)
What is it?
The new Web Editor is a lightweight code editor, based on VSCode. It is similar to Codespaces, but it is not backed by any compute backing; it is in fact entirely powered by your browser.
This means it has some limitations over Codespaces, and we will see it in a moment, but on the flipside it's very fast to load and quickly navigate. It is perfect for making small changes to your code without the need of having an IDE on your laptop.
How to Access it
There are currently 2 ways to access the new Web Editor:
-
Directly via URL - just change
github.comtogithub.devin your browser when in the repo you want to work on -
By Keyboard - pressing the full stop
.keyboard button while in the repo
How it works
Alright, it's time to see this in actions. Images are 1,000 times better than words, so check it out here:
Demo starts at minute 1:50
Conclusions
Comment down below with what you think of this new Web Editor. It's still in beta, so probably some features will be added, but I think it's really cool!
I will soon have another article/video in which I will do a bit by bit comparison between Codespaces and this Web Editor, so consider following me or subscribing if you don't wanna miss it.
Also, checkout this video, where I talk about the new Codespaces features now that it's GA.
Like, share and follow me 🚀 for more content:
📽 YouTube
☕ Buy me a coffee
💖 Patreon
🌐 CoderDave.io Website
👕 Merch
👦🏻 Facebook page
🐱💻 GitHub
👲🏻 Twitter
👴🏻 LinkedIn
🔉 Podcast
Top comments (11)
TL;DR + Conclusion
Just watch the video linked 3 times in the post.
In most of my articles I have the full text, because I describe some code, or how to achieve something which could be used as a reference.
But in very practical scenarios like this, or showcase-type content, I think the video works best because you can see the product/service in action rather than reading about it...
Text was perfect for me. Read it in 10 seconds, tried it out for myself straight away and publcised to my colleagues. Thanks 🙂
Thanks for your feedback :)
Hopefully GitHub won’t sue you about the domain name. Nice idea by the way. Previously I know about github1s.com that give the same idea, but it is read-only.
Its not a third party feature.
Its by github only.
LOL sorry, I thought it was not official 😄
Haha.. as @akhand3108 it is an official GItHub service, I'm just reviewing it :)
Before github.dev that was still vscode web editer available. If you change the link is your github link by just adding github1s.com from github.com ,it will shift to the vscode. (It is just now Microsoft that is doing the same job and eliminating the small businesses)
Well, not exactly...
First of all, github1s is a read-only platform, it is not an editor. The one from github is, instead, a full editor that supports extensions as well.
Second, VSCode is a Microsoft product, so I guess they have the rights to use it... no? ;) (I know it is open source, but it's made primarily by MS)
hoe to create react app in codespaces?