jsPsych development: Choosing a proper IDE
Introduction
As programmers we like to optimize our workflow in order to be as efficient as possible. One way in which we can gain efficiency is by using the proper framework whenever possible. For example, it is perfectly possible to create an online experiment using purely HTML, CSS and JavaScript. However, this will take a lot of time. In addition, when sharing your code other people will have more challenges reading it, since your code reflects your own particular style of solving problems. Therefore, for online experiments we prefer to use a framework such as jsPsych. It has already solved all the common issues you need to deal with when writing an online experiment. In addition, it provides a common structure and way of working that all people using the framework will then be familiar with.
Another way to optimize our workflow (before we even start coding), is to make sure that we use the right tools for the job. Since we are programming, we should look into a good development environment that preferably does some of the following:
- Syntax highlighting (makes the code easier to read)
- Automatic indentation (makes it easier to read your HTML code)
- Code completion
- A live server
Introducing Visual Studio Code
After doing some comparisons, I think that the best tool available is Visual Studio CodeIt is a code editor developed by Microsoft, and it is even completely free! According to a StackOverflow poll, it has also been the prefered editor among developers for the past few years. Not that you should always do something because everyone else is doing it, but it does say something about the product.
Syntax highlighting & automatic indentation
So what are the benefits that this editor offers? Two obvious ones (which each self respecting code editor should have), are syntax highlighting and automatic indentation. Syntax highlighting makes it easier to see structure in your code. If you do not like the default colors, you can easily change the theme in the preferences menu. By default, it comes with a dark styled theme (interestingly, research suggest that for people with normal vision light mode is actually better).
|
 |
Dark and light themes in Visual Studio Code
Code completion
Visual Studio Code implements most of the features of the Emmet toolkit for web developers. This toolkit allows you to write small snippets of code. You then hit the tab key and Emmet will expand this into actual code. Because developing a web page requires you to write similar code again and again (think about writing the opening and closing tags each time you add a new element), this can offer a huge increase in the speed with which you write code.
For example, to create a <div></div> tag, you start by writing div. At this point, Visual Studio Code will already suggest that this is an Emmet abbreviation:
If you now press the TAB key, you will get the proper opening and closing tags:
This procedure works for all HTML tags. Depending on the element you are working with, it will also fill in some default attribute values. For example, when you write img, the generated HTML will already contain the src and the alt attribute. In the table below I have listed a few of the more common abbreviations you can use. But it is worthwhile to study the Emmet Cheat Sheet and see what other abbreviations might be useful to you.
| Symbol | Explanation | Example | Result |
| > |
Creates a child element |
p>img |
<p><img src=""></p> |
| * |
Multiplies the element |
li*2 |
<li></li> |
| . |
Adds a class name |
p.text-center |
<p class="text-center"></p> |
| # |
Specifies the id for an element |
p#main_text |
<p id="main_text"></p> |
Live server
Visual Studio Code can easily be extended with various plugins. The installation process is also very straightforward. First, open the extensions tab by clicking the Extensions icon in the left toolbar. Then, search for 'Live Server', which was developed by Ritwick Dey.
This will install an actual web server that you can access to run your experiment. To do that, open the folder in which your experiment exists and load the index.html file. After installing the Live Server plugin, you should be able to right click on the file and select the option to open the document with the live server. At this point, everytime you make a chance to your code and save it, the live update will automatically refresh and show you the most recent version of your experiment.
Having a live server is usually not necessary when you develop an experiment. However, if you ever run into the issue of not being able to load a local resource because of something called the 'same origin policy', then it might be a good idea to test your code using a server.