The Browser as an IDE!

Tl;dr
-The browser is capable of handling quite a bit of programming.
-It’s easy to collaborate with people and sync across different machines.
-Most online options allow you to choose any language you would like.

You just got the bug to learn programming and you are wondering where to start (Or maybe you are a seasoned veteran that just didn’t consider the browser to be an option). You find Visual Studio Code for your IDE, you read about Node.js, you find out about npm for your package manager, React.js is your go to framework (because the trends say it should be), and you are ready to go find the download pages. You start scouring web pages for the software.

Let’s back up a little bit. You don’t need all of that right off the bat. Taking these steps can actually be intimidating when you first start. It isn’t even that fun when you have been doing it for awhile AND you have someone assisting you. Instead of installing all of these when you don’t know if programming is for you, open up your browser. The browser is a very capable piece of software that can handle a fair amount of programming. An online integrated development environment (IDE) like Amazon’s AWS Cloud9 allows you to build anything you want. Front end work? Check. Need a back end? Check. Want to give python a go? Just select python from the menu and everything is there for you. AWS Cloud9 is most likely overkill for you when you are just starting though, so let’s run through Cloud9 and some other more beginner friendly options.

AWS Cloud9 (https://aws.amazon.com/cloud9/), it is the most expansive browser IDE I have found so far. It could be used instead of any local software, I think. Collaboration on it is very easy, something that is common throughout this article, and that’s a good thing. AWS Cloud9 is the most complete IDE listed here, but like I said before, it’s going to be overkill a lot of the time, especially when you are starting out. You just won’t need the all of features and options it offers. I recommend checking out one of the others in this article while remembering this one for later down the road.

Repl.it (https://repl.it/) has rapidly become my go to. You can choose from many different languages and there are templates if you want to prototype, for example, a React.js app super quickly. You can also collaborate with people really easily. Since it’s in the browser they can run your code without needing to install anything, either, which is super handy when you have a quick question. You can watch them edit the code and have them explain it to you as they work through it, which can be invaluable when attempting to learn.

Next up we have p5.js (https://editor.p5js.org/) and Open Processing (https://www.openprocessing.org/). These are grouped together because they both use the p5.js library to allow you to create animations, artwork, or whatever program you want to throw together. If I had to choose between the two of them I would lean towards Open Processing. Open Processing has a cleaner layout and gives you the ability to share your creations as well as see others. You can see the code from other programmers too, allowing you to see cool things and see how they are made. It’s an easy way to get inspired when you see what some lines of code can do. If you are interested in the p5.js library then definitely check out The Coding Train (https://www.youtube.com/watch?v=8j0UDiN7my4) on YouTube! The videos in the introduction to p5.js are a bit behind the times, but the concepts are still extremely valuable. You get to make fun things and learn JavaScript. It’s a win-win! The channel is very active, too, so as you learn you can move on to more advanced concepts with modern JavaScript.

If you are interested in data science with Python then Google Colab (https://colab.research.google.com/) is definitely the way to go. Colab has code “cells” that you can run separately and check that everything is functioning correctly in the program up to that point. Think of it as a sort of fancy “console.log” or “print” statement. Colab gives you free access to GPUs, so you can run complex (or simple) calculations quickly courtesy of Google. Just wait for it to spin up and bam! Results! It is also very easy to import python libraries such as Pandas or Tensorflow to help make light work out of data (It won’t actually make this light work because programming is hard). Check out the Computer Science YouTube (https://www.youtube.com/channel/UCbmb5IoBtHZTpYZCDBOC1CA) to get some tutorials that use Colab. I’ve gone through a few of them and they seem good so far!

Stackblitz (https://stackblitz.com/) is a complete IDE and looks a lot like Visual Studio Code (that’s not an accident). You can pull a project from GitHub and continue working on it wherever you are and with whatever machine you happen to be on. Starting a new project is super easy. When you start one, the project contains a lot of the files and code you need right away. For example a new HTML/CSS/JS project gives you an index.html, index.js, style.css, package.json, and tsconfig.json. You probably won’t need to touch those last two files for a while, but it’s nice to have them easily accessible if you need them. Stackblitz gives you a live server that looks like a web page, so when you update your code you can see the result with minimal effort. It’s really nice to be able to see those changes happen quickly after you have made them. Stackblitz is a good option because it is a full IDE, but it isn’t as intimidating AWS Cloud9.

These next two aren’t really my go-tos for editing, but they are good sites to learn from that also contain an editor. Scrimba (https://scrimba.com/) and Leetcode (https://leetcode.com/problemset/all/ ) are both great options for upping your programming game. Scrimba allows you to watch videos and edit the code as the teacher is explaining things. This can be super handy when you think “What happens if I change this line of code?” You can do it and not have the consequences of breaking everything (that’s a common thing when developing software). Scrimba videos go through the code, give you a challenge, and then give you the answer. It’s a great way to learn. They have a ton of free content as well, allowing you to really explore what programming can offer. Now onto Leetcode, which is a website full of coding challenges. The editor they give you isn’t my favorite, but you can just go to one of the browser editors listed above and solve that issue! Leetcode is great because you are solving real problems that you will encounter when trying to develop something. They have a bunch of different languages to choose from, so you can benefit from Leetcode no matter which route you go!

Codeshare (https://codeshare.io/) gets a mention because of the ease of (big surprise) sharing code. It doesn’t have text completion or fancy stuff like that. Codeshare makes up for the lack of features by allowing you to send a url to a friend that has your code ready to be edited in real time. You can easily watch and and discuss the code being edited and have your questions answered (hopefully). It most definitely is not a full IDE, but it is a way to use the browser to your advantage. It also means you can write code on a cell phone and have someone on a desktop debug it. That’s mostly useful for doing Leetcode type problems on the go, but maybe it has some use cases outside of Leetcode I haven’t come across.

All of those editors should be free. Some of them do have paid options, but you don’t need to do that unless it benefits you in some way. I haven’t subscribed to any of them yet, and I am still enjoying using all of them!

Now go! Follow those links and see where programming takes you!

AWS Cloud9 (https://aws.amazon.com/cloud9/)
Repl.it (https://repl.it/)
p5.js (https://editor.p5js.org/)
Open Processing (https://www.openprocessing.org/)
Stackblitz (https://stackblitz.com/)
Scrimba (https://scrimba.com/)
Leetcode (https://leetcode.com/problemset/all/)
Google Colab (https://colab.research.google.com/)
Codeshare (https://codeshare.io/)