This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Docs

Technical Information about CS 343

There’s a lot to install and setup. In total it may take close to an hour.

Files

  1. Create a directory (i.e. a “folder”) somewhere on your computer for this course, perhaps you’d call it cs343.
    1. Make sure that this is outside of a location that is auto-synced to the cloud (e.g. Dropbox, OneDrive, iCloud)
      • Note that, by default, a lot of systems auto-sync the Desktop and Documents folders! Avoid these!
  2. 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
  3. 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 (e.g. lab01, prep01, and etc.)

Browsers

  1. Install 🦊 Firefox if you don’t have it already (ensure you have at least 2 browsers installed, you might also consider 🦁 Brave, 🐤 DuckDuck, 🔭 Edge).
  2. For whatever browsers, install extensions:
    1. a userscripts extension like Tampermonkey
    2. this accessibility checker extension WebAIM’s WAVE
    3. this HTML validator
  3. Consider bookmarking this page?

API Exploration

  1. Add a Bookmark for Hoppscotch

Editors

  1. Install Visual Studio Code (a.k.a. “vscode”):
    • Windows folks, if you’re asked by the install wizard 🧙‍♀️, ensure that you enable/select the following: * Explorer context menu * Add to PATH
    • macOS people:
      1. Dr. Stewart has an unconfirmed hypothesis that for some apps (like VSCode), if you place them any where other than /Applications or ~/Applications, they may not function correctly. So when you download and open the zip, drag the resulting Visual Studio Code.app file to Applications * Annotated screenshot showing visual studio code in the Downloads folder in Finder and pointing to Applications in the finder sidebar
      2. After installing vscode, launch it and press the “DO ALL THE THINGS!” shortcut: command+shift+P and then (do not delete the pre-filled >) type shell and choose the Shell Command: Install 'code' command in PATH entry. (docs)
  2. Install these vscode extensions:
    1. HTML Validate Extension
    2. Live Server
    3. Live Share Extension
    4. Remote Development extension pack
  3. Make sure code is available from command line (“CLI”):
    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

Terminal

Windows: always the git bash terminal?

  1. pretty much all semester if we say “open a terminal/shell”, people running windows should understand us to actually mean “open the git bash terminal”

linux and macOS

  1. it doesn’t really matter as far as we can tell which you use. (for what it’s worth: Dr. Stewart, Dr. Weikle, and a CS student have started posting things about their general dev setup on a mac to the CS wiki)

Configuring Git (all OSes)

  1. Open a terminal
    • Windows: open git bash
    • mac or linux open a terminal
  2. 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

Confirm/Install rsync

Open a terminal (if you are running Windows, we mean specifically open git bash). Run which rsync to check if rsync is found. (On Windows, rsync is likely not installed.)

Windows

Follow these steps to get rsync working in Git Bash (without having to install and configure a bunch of other tools):

  1. Download and open the latest rsync package from MSYS2.
  2. Copy the usr folder (from rsync...tar.zst) into C:\Program Files\Git.
    • This should merge the files into the existing C:\Program Files\Git\usr folder.
  3. Download the latest libxxhash package from MSYS2.
  4. Copy the usr folder (from libxxhash...tar.zst) into C:\Program Files\Git.
    • This should merge the files into the existing C:\Program Files\Git\usr folder.
  5. You should now be able to type rsync in Git Bash and see the usage message.

Not Windows

  1. use your usual package manager to install rsync

GUI for Accessing Files Remotely

  1. Install Cyberduck

GUI for Git

One of the best GUIs for Git isn’t available on linux 🤦‍♂️. So in the interest of consistency, everyone should Install the GitHub Desktop app.

1 - Firefox DevTools

A curated selection of the Firefox DevTools documentation.

Overview

Most browsers (Firefox, and the lessers too) have some built-in tools to support web developers. Firefox’s are called “DevTools” and they’re pretty great. The most comprehensive documentation for Firefox’s DevTools is in the MDN’s What are browser developer tools?.

Configuring DevTools

The default settings are pretty good, but you may want to make a few of the changes I use.

screenshot showing where to find the devtools settings
to find the devtools settings, have the devtools open (e.g. via right clicking in the browser and choosing Inspect), and then click the ellipsis (`...`), and then choose Settings

Rulers

Sometimes it can be helpful to see the dimensions of the viewport.

screenshot of the devtools settings for rulers
I configure the devtools to have a button so that I can easily toggle these rulers on and off (annoyingly, they don't remember to stay on if the page refreshes as it might if I'm developing locally and using e.g. the Live Server extension).

HTTP Cache

Some of the code we write in developing for the clientside could be cached by the browser. Generally, that’s great, but when we’re actively working on a page and the browser stops showing us the most up-to-date view of it, it can be confounding.

screenshot of the devtools settings for disabling caching
Tell the DevTools to disable caching when they're open.

Responsive Design Mode

Firefox’s DevTools have a great Responsive Design Mode that facilitates you in testing how your page will look on different devices (e.g. with different known viewport sizes, network speeds, etc.).

2 - Usual Start for Coding Activities

For pretty much every coding activity in this course, you need to begin the same way.

Overview

People organize their files and information in different ways. Some folks haven’t adopted any organization strategies because they don’t know how, or haven’t previously had the need. Now’s the time, you got this!

Create a Directory

  1. in your dev directory create a subdirectory for the activity you’re beginning.
    • in case you end up needing to work with this directory on the command line, you may find it simpler if you exclude capital letters, spaces, and special characters from the subdirectory name.
  2. open your newly created subdirectory named for the activity you’re beginning in vscode.