Setting Up Your Development Environment

Prerequisites to many in- and out-of-class activities.

⏱️ Track your time?

Yo, help a prof out 🙏 and see if you can track 📝 about how long all this takes you. (Then we can give your colleagues current and future a better head’s up.)

Files

Create a directory (i.e. a “folder”) somewhere on your computer for this course, perhaps you’d call it cs343.
Inside your cs343 directory, create a directory called notes.
- this would be a great place to put:
  - the class’s slides if you download them
  - your own notes from the in-class mini-lectures
  - your own notes from your out-of-class time working on the preps, labs, and projects
Inside your cs343 directory, create a directory called dev
- all the code you write for this course should go in your dev directory, ideally in a subdirectory of dev named for the thing you’re working on

Browsers

Install Firefox if you don’t have it already (ensure you have at least 2 browsers installed).
No, really. We’re serious about this. You can have some other browser too, but Dr. Stewart will absolutely harp on about how in general he’s relatively agnostic about most tools, but he will hassle you incessantly about this one. 🤷‍♂️
For whatever browsers, install extensions:
1. a userscripts extension like ViolentMonkey
2. an accessibility checker extension like WebAIM’s WAVE
3. add a bookmark(let) for the validator
4. this HTML validator

⚠️ Safari

tl;dr - don't use Safari in this course

Listen, in general Safari is an excellent browser in many ways. Unfortunately, their excellent privacy-protecting defaults defeat many popular websites' code, esp. when linking to things like protected files. Very likely you will not be able to download provided code from Canvas with Safari (unless you disable their privacy-protecting features, which are themselves excellent and most of the reason to use Safari...).

Editors

🫵 VSCode is Required

tl;dr - You must us VSCode in this course

If you have strong feelings about your editor, please know you’re almost certainly right. Tell anyone you wish we said so. That being said, in-class and out-of-class until at least the end of Milestone 2, please use vscode.

Install VSCode:
- Windows folks:
  - Ensure if you’re asked by the install wizard, that you enable/select the following:
    - Explorer context menu
    - Add to PATH
- Everyone else: Visual Studio Code
  - Installing Apps on macOS
    Many apps that your download to your mac will run fine from any location on disk, even from (e.g.) /Downloads, BUT the standard locations to install applications are to /Applications (for all users, the default) or to /Applications (for the current user only). VSCode’s shell command won’t function correctly if vscode is not located in the correct place. Launch VSCode. In the finder right-click on its icon and go to Options then Show in Finder. If it’s in the Applications folder already, you’re done! If it’s somewhere else, move it to the Applications folder before proceeding!
Install these vscode extensions:
Make sure code is available from command line (“CLI”):
- Restarting Shell
  Note any time you’re trying to make new apps or commands available to your command line interface, you may need to re-launch your CLI after installing or configuring the new app/command.
1. Windows: the installer should have done it, try opening Windows Terminal or PowerShell or whatever and just type code and hit enter.
2. MacOS
3. Linux: the installer should have added it to your path already, try it in your shell

Git

If you don’t already have git installed (it’s installed by default on macOS and some linux distros), install it (and make sure it’s added to path where you can use the git command from the CLI).

Windows

The git install wizard defaults are probably fine, but if you happen to notice this, consider answering a few of the steps as follows:

Default editor:: vscode
Git Pull something:: rebase
Extra Options:: ✅ enable symlinks

(On Windows) Ensure that once you install git, you have git bash, and that in git bash you have curl. This post may help if you don’t have curl on Windows.

Not Windows

Probably you already have git installed, try it in your shell by opening a terminal and running git

Configuring Git (all OSes)

Open a terminal
- Windows: open git bash
- mac or linux open a terminal
run the 2 commands found at the following link, but:
1. don’t type the $ that’s at the beginning and
2. change the placeholder values for real ones
  - note: the username and email you set do not have to match things github already knows about
3. ok, here’s the link - Git::First-Time Setup:YourIdentity

GUI for Accessing Files Remotely

Install Filezilla

GUI for Git

Git is so powerful and perhaps you’ll love it one day. In the early days, you should have a good GUI to get your back (if you’re on linux, I think it’s not available. sorry.)
Maybe everyone, but definitely Windows folks should Install the GitHub Desktop app.