3 simple ways to code with JavaScript online

“A minimal workspace with a laptop, a potted plant and small sculptures” by Kari Shea on Unsplash

JavaScript is an amazing language to learn today.

Not only does it provide the flexibility to create scalable web applications. But also allows you to develop the app backend and frontend using a single language.

Or in other words:

“One code to rule them all” — JS Developers

Nevertheless, in order to enjoy JavaScript, you need to set up an environment to get started testing the language.

Don’t worry, these are simple to use and you won’t have to install anything.

TLDR;

1. Use Browser Console [chrome, firefox]
2. Use an online environment [repl.it]
3. Use an online editor [JSBin, JSFiddle, Codepen, etc]

You’ve just read a JavaScript article and are pumped that you can learn a tool that will help you create that app that is going to make you a gillion dollars.

Here’s the problem.

You have no idea where to get started.

How it feels the first time you want to code in JavaScript

After watching tutorials you conclude that in order to code in JS you’ll need some code editor like VS Code or Atom. Or if you are daring, vim.

All are great choices but installing an editor just to test waters is just too much work.

But the reality is that JavaScript is great when working with browsers. So it’s no surprise that you can also test it when using it.

So, here’s the first tool you should use when testing JS code.

Browser Console

I’m currently using Chrome so all I need to do is press F12 and then click on the console tab.

That’s it! You can now practice some simple scripts on the console.

Note: If you open the console on a page like Medium or any other page, you’ll probably see a bunch of errors. These happen because other scripts are running in the webpage. But don’t worry. If you click in the clear console button or press Ctrl + L, you’ll be able to remove all the warnings and errors of the page.

This is great because the console is fast to test simple scripts and debugging messages are shown in real-time.

The problem is that the console is for only small testing scripts and you can’t (or shouldn’t) use it to develop large applications.

For that, we will use another tool.

Virtual Environments

It’s all virtual!

This second tool is a little more complicated because you can technically use it to create larger web applications.

For this, we will run a virtual environment that uses the latest stable version of Node, a JavaScript runtime environment.

The good news is that you can now save your JS files online and saves you a LOT of time setting up a Node environment.

The downside is that you will not have the same power that you will have if you run on your app on local. And that you will eventually will need to learn node to use it.

But hey, you’ll be able to test apps from GitHub just by clicking a few buttons.

Try it here: https://repl.it/languages/nodejs

Online code Editor

When you show your code

Finally, let’s just say that the console is too small for your scripts to test.

And a whole virtual environment is too complicated.

Introducing, simple online editors.

This will allow you to edit not only code with JS but also edit code with CSS and HTML.

Sometimes you can even invite a friend to code with you.

It’s just that simple.

JSFiddle

JS Bin

CodePen

With all these tools you can now get started with JavaScript and start playing.

Happy Coding!