Steve Carroll
2025-01-18 15:44:46 UTC
While you can use virtually anything to write your code in, I'm going to
recommend Virtual Studio Code (there's a free plugin called 'Quokka'
that let's you run your code without leaving VSC). I won't be going way
in depth here, it'll be just enough to get started.
A Basic Setup
This can be as simple as using Notepad or TextEdit to write your code in
and using a browser's dev tools to run/test it. This is best done by
going to the address, 'about:blank', and then right clicking on the
blank screen, choosing 'Inspect' (or similar), and selecting the
'Console' tab (or similar). This method is useful because there's
virtually no 'setup' (unless you don't have a browser installed). One
thing you'll find handy is holding down the shift key in conjunction
with the return key when making code entries in the 'Console' panel. On
annoying thing will be the use of the keyword 'const' (as opposed to
using 'let'), the former can produce errors so, for any code you enter
there, you may want to change all lines using 'const' to 'let'. If
you're ready for more...
An Integrated Development Environment (IDE)
A big step up is using VSC. When you first open it you'll probably be
presented with a 'Window', close it. Then go to the 'File' menu and
select 'Open Folder', then select 'New Folder' (bottom left), name it
and place it where you want. I recommend your desktop for now.
Back in the 'File' menu select 'New File' and you'll be presented with a
blank file that resides in your Window (note: it's possible for a Window
to be empty, to have no file visible within it). On the bottom of the
screen you'll see an info bar, one of the pieces of info is the file
type, click on it. In the popup choose the filetype you want, for now,
choose 'JavaScript'. You can save/name this file from the 'File' Menu,
name it 'demo.js' and save to your new folder.
An optional step is to 'Add Folder to Workspace', as seen in the 'File'
menu. After selecting 'Add Folder to Workspace', navigate to the folder
you want to use (i.e. the folder you created on your desktop) and click
'Add'. If you'd like, you can 'Save Workspace As' (also optional) for
more permananent use. To save, go to the 'File' menu and choose 'Save
Workspace As', name it (i.e. 'demo.code-workspace') and save to your
preferred location (i.e. desktop for now).
Installing Quokka
On the left side of the screen in VSC you'll see a vertical bar of
icons, as you hover over them you'll notice one reads, 'Extensions',
click it. You'll be shown a list of all your loaded extensions. At the
top of the list is a 'fuzzy search input field', type in 'Quokka'. When
the list containing 'Quokka related' items appears, select the one by
Wallaby.js that just reads 'Quokka.js' and hit the 'Install' button. If
successful you can now activate it via VSC's 'Command Palette':
'Ctrl + Shift + P' on Windows or 'Cmd + Shift + P' on Mac
The 'Command Palette' also uses fuzzy searching so typing in 'Quokka'
will narrow the list down to only 'Quokka related' items. Make sure
you're looking at your empty 'demo.js' file. Now add this to it:
console.log(10 + 20)
Save your demo file (optional but recommended)
In the 'Command Pallete' select 'Start on Current File'. If things are
working you'll see the output of the evaluated expression to the right
in your 'demo.js' file:
console.log(10 + 20) 30
There's also a window with a 'QUOKKA' tab (and other tabs) now available
at the bottom or your screen (it mimics the looks of a Jupyter notebook)
that shows the output.
In the left bar of icons, the topmost icon is the 'Explorer', there are
a lot of things that can be done from there so 'explore'.
recommend Virtual Studio Code (there's a free plugin called 'Quokka'
that let's you run your code without leaving VSC). I won't be going way
in depth here, it'll be just enough to get started.
A Basic Setup
This can be as simple as using Notepad or TextEdit to write your code in
and using a browser's dev tools to run/test it. This is best done by
going to the address, 'about:blank', and then right clicking on the
blank screen, choosing 'Inspect' (or similar), and selecting the
'Console' tab (or similar). This method is useful because there's
virtually no 'setup' (unless you don't have a browser installed). One
thing you'll find handy is holding down the shift key in conjunction
with the return key when making code entries in the 'Console' panel. On
annoying thing will be the use of the keyword 'const' (as opposed to
using 'let'), the former can produce errors so, for any code you enter
there, you may want to change all lines using 'const' to 'let'. If
you're ready for more...
An Integrated Development Environment (IDE)
A big step up is using VSC. When you first open it you'll probably be
presented with a 'Window', close it. Then go to the 'File' menu and
select 'Open Folder', then select 'New Folder' (bottom left), name it
and place it where you want. I recommend your desktop for now.
Back in the 'File' menu select 'New File' and you'll be presented with a
blank file that resides in your Window (note: it's possible for a Window
to be empty, to have no file visible within it). On the bottom of the
screen you'll see an info bar, one of the pieces of info is the file
type, click on it. In the popup choose the filetype you want, for now,
choose 'JavaScript'. You can save/name this file from the 'File' Menu,
name it 'demo.js' and save to your new folder.
An optional step is to 'Add Folder to Workspace', as seen in the 'File'
menu. After selecting 'Add Folder to Workspace', navigate to the folder
you want to use (i.e. the folder you created on your desktop) and click
'Add'. If you'd like, you can 'Save Workspace As' (also optional) for
more permananent use. To save, go to the 'File' menu and choose 'Save
Workspace As', name it (i.e. 'demo.code-workspace') and save to your
preferred location (i.e. desktop for now).
Installing Quokka
On the left side of the screen in VSC you'll see a vertical bar of
icons, as you hover over them you'll notice one reads, 'Extensions',
click it. You'll be shown a list of all your loaded extensions. At the
top of the list is a 'fuzzy search input field', type in 'Quokka'. When
the list containing 'Quokka related' items appears, select the one by
Wallaby.js that just reads 'Quokka.js' and hit the 'Install' button. If
successful you can now activate it via VSC's 'Command Palette':
'Ctrl + Shift + P' on Windows or 'Cmd + Shift + P' on Mac
The 'Command Palette' also uses fuzzy searching so typing in 'Quokka'
will narrow the list down to only 'Quokka related' items. Make sure
you're looking at your empty 'demo.js' file. Now add this to it:
console.log(10 + 20)
Save your demo file (optional but recommended)
In the 'Command Pallete' select 'Start on Current File'. If things are
working you'll see the output of the evaluated expression to the right
in your 'demo.js' file:
console.log(10 + 20) 30
There's also a window with a 'QUOKKA' tab (and other tabs) now available
at the bottom or your screen (it mimics the looks of a Jupyter notebook)
that shows the output.
In the left bar of icons, the topmost icon is the 'Explorer', there are
a lot of things that can be done from there so 'explore'.