Recently Visual Studio Code also launched an online version of their editor. It is a lightweight version of the desktop application.
This is nothing new as GitHub has it built-in for their repos as well.
Let's have a look at these two options.
GitHub VS Code editor in the browser
You can open any repository on GitHub and change the .com part of the domain to .dev.
Alternatively, you can simply press the . on any GitHub repo to open the online editor mode.
For instance, let's open the daily.dev repo in an online browser.
https://github.com/dailydotdev/apps
⬇️
https://github.dev/dailydotdev/apps
And we are welcomed by the full repo as we would get in VS Code.
Pretty cool, right?
So what can we do with this?
- Review pull requests online with ease. You can simply press the
.in a PR to open it in the editor for a more detailed overview. - Super easy to search throughout the codebase. Yes, click-through works!
- It's super fast.
- Make changes and PRs directly online
- Extensions are available
All and all, it's a super powerful way to edit code.
The main downside is, of course, not being able to run it.
But for PR reviews, this is a good win!
GitHub Codespaces
GitHub recently also launched GitHub Codespaces, which is a blazing fast cloud environment.
The look and feel are the same, but you are running on a VM.
The cool part about Codespaces is that you can run your code there.
This feature is only available to teams and organizations.
For more information, visit the GitHub Codespace website.
Visual Studio Code in the Browser
More recently, we got a new addition to the online editor family, being VS code themselves.
To open a new editor, you can type vscode.dev in your browser, and a new editor will spool up.
The cool part is that this has wider use, as it can even load local files!
It can also open GitHub links and even azure links!
You can simply take any link to those repos and prefix them with vscode.dev.
Some examples:
https://github.com/dailydotdev/apps
⬇️
https://vscode.dev/github.com/dailydotdev/apps
Or for azure dev:
https://dev.azure.com/daily-dev-tips/test
⬇️
https://vscode.dev/dev.azure.com/daily-dev-tips/test
Powerful if you ask me!
Some pro's of using the vs code one would be:
- Local file opening
- New projects from scratch, quickly share some project structure
- Azure dev-ops environment
- Again, many amazing extensions are available
The downsides are, for now, no way to run and debug.
What about the future?
We started this article by asking if these editors are the future?
And to be honest with you, I do think it's very viable.
Our hardware becomes less and less critical (meaning whatever we have on it locally).
We can sign in to some online tools and take off from where we left.
This makes total sense in the current day and age.
There are some kinks to iron out for it to be entirely a solution on its own.
For me, those are:
Option to run docker images on the cloud (Codespaces/Vercel/etc)
Peer programming online 👀
Debug systems integrated
I'm sure these are even possible with some extensions and very keen to see what this will bring over time!
How do you feel about these online editors?
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (22)
Hope not. I prefer a lot of Desktop apps and prefer them not to be electron based which lately is not possible I assume (unless you build your own). Everyone started rewriting stuff to be electron based - except some IDEs (IDEA based, Visual Studio the no Code one, and some others) which have a potential to change. Even Adobe uses it for some parts (for now I think it's just the Cloud tool for installing stuff) - but it did always run browser engines in the apps like Presto or todat Blink if I'm not mistaking but thats different from a full blown electron based for these cases.
A couple of years back I stumbled upon Apache Che which looks too similar to VS Code so it was in the web for a long time if we're being honest. This is good for companies not wanting the code ever hitting the dev machine avoiding resource problems but then you have network and other things that get you irritated sometimes. Also it's good for not using GIT on multiple machine and not having to do push-pull when you're switching, just when you actually want others to get your changes.
However, I'm still irritated by some of the stuff and browser-based is not for me. Controls, like shortcuts and indipendence of network is much more fluid for me in a non-browser app. Opening large files feels more smooth, like 1GB JSON or XML - it doesn't matter if you shouldn't do it, it still works OK in non electron apps while it studders sometimes in a VS Code and I still need to debug sometimes things like that. Given that I use 16GB on my slowest machine imagine running VS Code on Windows with 8GB and it's a laptop. Your laptop becomes a jet engine. OK, people are using Macs and Linux and have more than 8GB ram today on Windows, and I admit even intellij will make your laptop jet engine sometimes but besides the noise it's aay smoother experience with all the basic plugins I use compared to stuff I need to use with VS Code. Code's great for JS and such things but, formatting, refactoring and code suggestions are way above in full blown IDEs and it works faster
I would argue the online editors make handling large files easier, as they do all the processing for you.
So your hardware device doesn't have to do the heavy lifting.
As for now i'm also more a fan of doing the work locally, mainly because I like to test out what I right directly on testing tools.
I may have explained wrongfully. Your "browser" struggles to load too much text and JS is actually doing the "processing" for syntax highlighting and formatting - depending on the implementation but currently they do so on your machine still which leads to browse being non responsive and stuttering. This may be different now as they do better implementations like partial processing but how would server do the search and formatting for you?
And the point being these "browser" made are also running under your machine when running VS Code and I clearly see the difference in performance and stability when using large files. It's rare to do so but in the end, no they don't do processing for you, it's JS that gets trigger in these situations and browsers still don't like too big files + it's also letting JS get a go with it.
There might be a way to solve it by constantly sending instructions to server and getting back pieces to replace. Now I wonder how would it work when you hit formatting on a huge file? It sends back basically the whole file.
Got you!
Yep totally makes sense.
Let's see where it brings us.
I think it has it's use-cases, but so do having the files locally.
Sure thing. Honestly I would love smooth online editing so I can work from private PC without code or tools ever touching my hardware but I'd rather wait couple of more years
I hope not either. Not sure if it's an age thing(I'm 44) but I much prefer desktop apps.
To be fair I think habits or being familiar with something (so yes, age) has a lot of impact on many things. But I refuse to believe that's the main reason and sudden boom of JS on desk apps (an general web that replaces desk apps) was more of an alternative to failing local machines and loosing data rather than intended full on replacements. We were at the mainframe stage and now we're getting back there so logical flow would be getting back to local (desk or whatever it's called then). I'm just 31 but I remember big desktop apps doing bunch of serious stuff and they were quite fast, well some of the best ones - there were quite buggy apps as well. But old MS word actually was faster in startup than today's one before 2007 version. I guess we should go back yo C/C++ or continue with Rust. Looking at the whole picture it's apparent that smartphone/tablet apps are the thing while dekstop is getting deprecated for web. I guess once arm or riscv hits desktop well get back to apps
I'm using AWS Cloud9 and GitHub Codespaces for quite some time, and they're pretty slick.
They only suck when I'm in a train, haha.
Would be nice to have something that could be synchronized at another level, so I could keep doing more work when the connection drops.
Makes sense, I think for very heavy work it makes a lot of sense.
But it would be cool to quickly switch between offline/online mode.
Two days ago, i've modified 89 of my repos on github, editing my readme.md and replacing my banner.png image by banner.svg (and thus remove the png and upload / edit the banner.svg file).
That was fast and easy. Really easy...
No need to clone repos on my machine, go in the folder, open it inside vscode and so on. Everything was done in the browser, really nice to achieve that purpose.
Web editor are nice for small changes...
Yep agreed!
Small changes
Code demo's
POC's
And PR's while you still doing something else
I hope not,Unfortunately for now,I live in a country where the internet is not stable at all,It is either slow or sometimes it goes off completely for an hour or even days.So the option for offline code editors and IDEs must remain.
I think offline coding will always be a thing.
Or at-least hoping with you, for the same reason
Was not aware about the tip to add "vscode.dev/" as new domain name. Crazy simple. Thanks!
Another tip: press the "dot" key when viewing a repo; see youtube.com/watch?v=ywUZOOzLX3c for a demo
Yep indeed a powerful way to do it
It is mentioned in the article as well
TBH, i'm more looking forward to it being used for coding classes. Than coding cause there's a huge issue in setting up coding enviroments & making it easy to learn coding without the internet while making it easy for students.
If we can figure ways by adding more visual debugging capabilities, we might have a winner.It's much better than, hey let's have developers code on the browser. I think further push by webassembly might be a good approach like what Figma has done.
Got you Max!
And indeed, makes a lot of sense
I even saw someone made a code tour extension for the online vscode.
I find it quite funny that design can move to half-online, but devs seem to be a bit holding back on it.
There's one drawback: lack of mobile/touch support. Also, there's only Monaco (VS Code), CodeMirror and that's basically it.
Yep! Very true.
Mobile is still very limited.
I know Flavio Copes uses a iPad pro, but then agian that's almost a MacBook Air if you think about it.
I kind of fail to see the benefit, but then again, I'm most comfortable using vim so remote editing is just trivial to me.
I think there is a big win to quickly show some code to someone external.
Or show a PR, while someone is still working on their own stuff.
And as mentioned above, a big win could be coding tutorials.
If that's how you feel about these things I would argue you are in the wrong sector.