This lesson covers using JSFiddle and the Node REPL to work on JavaScript code with others. It will not be relevant until the second week of the program when we begin learning JavaScript. There will be a reminder about these instructions (along with a link) at the beginning of the second week. However, you might want to familiarize yourself with these tools now.

Why do we need JSFiddle or the Node REPL if we will be using VS Code to write and share code online?

VS Code is a code editor. However, we also want to run our code to see if it works. We can do this in the Chrome browser using the DevTools console (which we'll learn more about in Introduction to Programming). While the DevTools console is an excellent tool, it's not designed to be shared remotely.

There will often be times in the lessons when you'll be prompted to try code in the DevTools console. While you can do this on your own (such as when you're working through lessons by yourself), when you're working together, you'll usually want to try this code in a VS Code Live Share environment. You'll also want to be able to experiment with code when you are working on your daily projects.

That's where JSFiddle and Node REPL come in.

JSFiddle

JSFiddle is a tool for writing and sharing code online. We can use it for free without an account. To collaborate using JSFiddle, click on the "Collaboration" button:

A small window will pop up. There are a series of dots at the bottom of the popup. You can click the second dot to go to a pane to enter your name (and an avatar if you wish):

We recommend entering at least a name. If you are using the chat feature on JSFiddle, it will identify you to your pair and anyone else you are working with.

Next, you can click on the third dot to get a link:

Copy this link and share it with your pair either via email or Discord. Once they go to the link, you are ready to beging collaborating!

There's also a collaboration sidebar:

As you can see in the image above, you can click on the second box from the top to get a shareable link again. The first box at the top allows you to change your name and avatar.

There's also a chat feature as well as an audio sharing feature. Neither are necessary since you are using Discord and other sharing features, but you are welcome to try them if you like.

Sometimes, you may also want to experiment with jQuery or another JavaScript library. To do so, click on the arrow to the right of "JavaScript + No-Library (pure JS)" in the lower left pane of JSFiddle. This will open a menu:

The menu has two dropdowns. The first is for Language. This includes languages that compile down to JavaScript such as JSX, CoffeeScript, and TypeScript. You do not need to change this.

The second dropdown is Frameworks & Extensions. The default is "No-Library (pure JS)". If we want to use jQuery (or another library), we can do so by selecting the dropdown for this option and selecting jQuery 3.4.1.

Finally, you will often need to look at output to the console as well as error messages when you are using JSFiddle. There are two ways to do this:

• You can open up Chrome DevTools. (We'll cover Chrome DevTools more in Introduction to Programming.) The downside of this approach is that JSFiddle often outputs many messages to the console, which makes it hard to pick out any specific logs or errors you might be looking for.
• Alternatively, you can use a premade JSFiddle that includes code that simulates the console. You can start by removing the pre-existing code in the JavaScript pane (which just demonstrates how the tool works). Now, if you need to see the output of console.log() messages (which log our code to the console), they will show in the pane where code executes.

Node REPL

The other option is to use the Node REPL. The advantage of this approach is that you can test out JavaScript code in the shared terminal in VS Code - there's no need to go to a different window, launch JSFiddle, and start a collaboration session. The downside of the REPL is that it's really just for JavaScript code - not for jQuery - and you don't have the additional functionality to try out HTML and CSS that you get with JSFiddle. That being said, when trying (and sharing) basic JavaScript code, this approach is probably easier and faster.

First, you'll need to install Node. You should've already done this when installing software for the program.

Now, when we are using a shared terminal, we just need to run the node command. This will open the REPL in the terminal. The REPL will evaluate any JavaScript code you write, including console.log() statements.

JSFiddle or Node REPL

At the beginning of Introduction to Programming, you may be more comfortable using JSFiddle. It is more interactive and also allows you to add HTML and CSS, which the Node REPL doesn't allow. Also, if you want to write code that uses jQuery, JSFiddle is the way to go.

As you get further along, though, you'll probably find the Node REPL more convenient for just evaluating and trying out snippets of JavaScript.

Ultimately, it's up to you and your pair to decide which you'd like to use on any given day. Whenever you are asked to try out code in the console while working with your pair, use one of these two approaches to do so collaboratively.