Technical Hints

Git

You can clone the assignment repositories using either HTTPS and SSH, but we recommend using SSH because you do not need to enter your credentials everytime you pull and push once you set it up for the first time.

There seems to be an access issue (code: 403) with HTTPS cloning. In that case, please try the SSH way.

How to set up Git SSH authentication

Please check whether you have a SSH key generated already: there should be id_rsa and id_rsa.pub in ~/.ssh. If yes, please go to step 3.

1. Generate a SSH key on your local machine. Run the following command in a terminal. Follow the prompts to store the key in ~/.ssh and enter a passphrase (it can be empty, or a phrase you like).

   ssh-keygen -t rsa -C "your_email@example.com"

2. Navigate to ~/.ssh. Note that this is a hidden folder by default. You should see id_rsa (private key) and id_rsa.pub (public key).

3. Open the id_rsa.pub with a text editor or using the command cat id_rsa.pub (on *nix OS), and copy the entire content, which should be a long string.

4. Open the settings in your students github account, navigate to the SSH and GPG key tab (on the left sidebar), and then upload your public key.

5. You should be able to use the SSH link to clone repositories.

Note: do not upload or send out your private key. It is supposed to be on your own machine.

Static server

When developing a visualization, the data files are usually loaded dynamically using Javascript, such as d3.csv(). In this case, you will need to start a static file server to serve all your HTML/CS/JS and data files. We recommend two simple options to start a server, then you can view the results on a browser using http://localhost:[PORT-NUMBER].

• Simple HTTP server provided by Python. For Python 2, use python -m SimpleHTTPServer [PORT-NUMBER]. For Python 3, use python -m http.server [PORT-NUMBER]
• HTTP server provided by NodeJS. First install through npm: npm install http-server -g. Then start the server: http-server [PATH] -p [PORT-NUMBER]. When specifying the path, please avoid spaces in the path name or use double quatations.

Note that you should start the server in the project directory.

Debugging JavaScript & D3

The developer tools in Chrome, Firefox, and Microsoft Edge (Chromium) have very similar capabilities:

• Debugging in Chrome
• Debugging in Firefox
• Debugging in Microsoft Edge (Chromium)

Try using the debugger built into your browser to do each of these operations:

• Setting breakpoints
• Stepping in and over
• Printing/showing values
• Changing variables
• Verifying that static files are loaded correctly
• Inspecting the results of API calls

Or you can use, for example, Jetbrains WebStorm for programming and debugging JavaScript if you prefer an IDE. It's free for students.