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 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.
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:
console.log()messages (which log our code to the console), they will show in the pane where code executes.
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
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.
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.
Lesson 11 of 12
Last updated July 30, 2021