Docs

1 - Setting Up Your Development Environment

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

OS-Specific Setup

1. If you’re on Windows, please install the Windows Subsystem for Linux (“WSL”) as indicated on our corresponding docs page.
   • Our intention is to have a development environment that is as similar as possible across all OSes. It seems like WSL can help us achieve this.
2. After you’ve done that, you should be able to proceed with the rest of the instructions here.

Browsers

1. Install Firefox if you don’t have it already (ensure you have at least 2 browsers installed).
2. 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

Editors

1. Install VSCode:
   • Windows folks (should have already done this when they competed the prerequisite WSL install steps… 😉) do it this way (because we want you to be in this WSL context).
     • 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
2. Install these vscode extensions:
   1. HTML Validate Extension
   2. Live Server
   3. Live Share ExtensionPack(weirdly can’t seem to reach that link any more even though it’s still listed on the Live Share Extension page 🤷‍♂️)
   4. Remote Development extension pack
   5. Python
      • probably go into the settings for this extension and enable the autocompletion to help with imports
   6. Pylance
   7. Flake8
   8. Black Formatter
   9. isort
   10. Django
   11. Code Spell Checker
   12. JSON Pretty Printer
   13. Todo Tree
3. 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)

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

GUI for Accessing Files Remotely

1. Install Filezilla

GUI for Git

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

Prof’s SSH Key

In case you’re trying to troubleshoot something tricky, you may wish to add my public key to your digital ocean droplet. This will permit me to act as whatever user you added it to, but it doesn’t give me your password (and so I can’t sudo or anything like that).

1. Download my public key from github
2. Add it to your droplet’s ~/.ssh/authorized_keys file
   • if you have ssh-copy-id on your computer, you can use that as follows:
     • ssh-copy-id -i ~/Downloads/prof-stewart.pub user@droplet-ip
   • if you don’t have ssh-copy-id, you can do it manually:
     • ssh to your droplet and then
       • mkdir ~/.ssh
       • chmod 700 ~/.ssh
       • nano ~/.ssh/authorized_keys
         • paste the contents of the prof-stewart.pub file into this file
3. let me know your droplet’s IP address or hostname (once we’ve registered domain names and setup DNS)
   • or at least let me know when you need me to connect to it.

2 - Setting Up Your Development Environment - Start with WSL

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

Overview

To try to establish a common development environment, we’d like students running Windows on their computer to install the Windows Subsystem for Linux (WSL). Almost certainly these days you’ll actually be using WSL2. Per Microsoft,

WSL 2 uses virtualization technology to run a Linux kernel inside of a lightweight utility virtual machine (VM). Linux distributions run as isolated containers inside of the WSL 2 managed VM.

tl;dr

Install

1. Follow the steps at https://learn.microsoft.com/en-us/windows/wsl/setup/environment
   • In doing these steps, you will have to create a user for your WSL instance. This user is separate from your windows user. You will need to remember the username and password you create here.

Files

1. The files you work with in WSL will be in a filesystem that the rest of Windows will find at \\wsl$\Ubuntu\home\<the username you created during the WSL install process>.
2. Consider making a directory in that location called dev and doing all of your work for this course in subdirectories of that directory. This will make it easier to find your work later.
   • so the dev directory’s full path will be \\wsl$\Ubuntu\home\<your_user>\dev

Terminal

For your command line interface (CLI), it is probably best that you use Windows Terminal (click here to install it if you don’t have it already).

Windows Terminal can launch many different “shells”. Typically for our class work, you’ll want to use the Ubuntu shell. You can launch it from the drop down menu in the Windows Terminal tab bar.

Windows Terminal Window Behavior

• in many Terminal apps (Windows Terminal included), you can paste text into the terminal by right-clicking. Unlike the usual behavior in Windows, including in its own predecessors to the Windows Terminal, right-clicking does not open the context menu. It just pastes immediately.
• unlike many linux shells, highlighting text in Windows Terminal does not automatically copy it. You must use Ctrl+c to copy text.
  • so then ctrl+c is overloaded in the Ubuntu shell running in Windows Terminal:
    • if you have text selected, it copies the text
    • if you have no text selected, it behaves like many other (e.g. Linux) shells and sends the ctrl+c signal to the shell, which is the signal to cancel the current process.

VSCode

Install VSCode as directed on the Microsoft WSL VSCode page, except:

When you open certain directories with VS Code, it may ask if you trust all authors of the code in the directory you’re opening. For the simple cases in our class, it’s probably best to say yes, so that … code in your project folder can be executed by VS Code and extensions without your explicit approval.

Random Other Windows Trivia

Software

1. Open Broadcaster Software (OBS) is great for streaming or screen recording.
2. Clipboard history
   • omfg, i can’t believe it’s finally built in now y’all. Back in my day we had to trust a third party for this, y’all don’t know how good you have it!

Hotkeys

So in the video I mentioned some hotkeys… here’s the ones I mentioned there or that I remembered later to add to this list after using them in class.

Open Explorer (a file/folder browsing jobber)

Win+E

Put caret in address bar (keeping hands on the keys, focus the address bar of the currently focused app, e.g. the aforementioned Windows Explorer, Firefox, etc.)

Ctrl+L

Show the Desktop

Win+D

Open Task Manager

Ctrl+Shift+Esc

Switch between open windows

Alt+Tab

Troubleshooting

Postgres

createdb is maybe a situation?

3 - Additional WebDev Resources

HTML

1. MDN's Learn web development 🔥
2. Codecademy's HTML: Codecademy has some really good resources, many of the intro web courses are $FR.EE 🤑

CSS

1. Codecademy's CSS
2. specificity
   1. CSS Tricks on Specificity
   2. MDN: Specificity
   3. ⚔️ Specificity Wars
3. Practice your CSS Selectors with CSS Diner
4. Practice Flexbox with Flexbox Froggy
5. Practice justify vs align in flexbox with Flexercise the Stevens
   
   1. y'allllll this thing needs work, wasn't great when I ripped off Dr. Johnson in the first place 😅, and hasn't aged gracefully. pull requests welcome 😆
6. CSS Tricks's nice visual guide to flexbox/
7. CSS Tricks's nice visual guide to CSS Grid

Javascript

1. Codecademy back at it again with Javascript
2. Coding~~Bat~~JS

Accessibility (“a11y”)

1. You'll never guess who I link first!
2. Color Contrast Checker
   1. Checking that text color has sufficient contrast from the background color
   2. Checking that (hyper)link ("anchor") color has sufficient contrast from non-link text color

More

1. Dr. Kirkpatrick has some nifty short demos/exercises
   1. try the "select module" and subsequently "select exercise" buttons
2. Dr. Chris Johnson may be annoyed with me, but the first 1/3  ("Content and Style") of this short "e-book" he put together is also helpful for our course
3. https://jsbin.com/ can be useful for sharing short samples/examples to test your understanding or to ask for help figuring out a bug
4. "MPJ" (Mattias Peter Johansson) one of very few "celebrities" I like. 🚨Head's up: he makes use of expletives on occasion
   1. FunFunFunction (his youtube channel account's ) content is all around great!
   2. Specifically, for the most precisely relevant content to topics in our class, I can recommend:
      1. var, let, const
      2. arrow functions
      3. destructuring
      4. Object creation in JS (list)
         1. bind and this shows: some of the strangeness of scope in js (By default this is bound to the scope where a function is called, not where it was defined 😱.)
         2. Examples of bind and this: shows more of the same ^
         3. the rest of the object creation list is sort of beyond scope for our course
      5. Functional Programming in JS (list)
         1. videos 1-4 might be useful reviews of things related to the built-in array functions like map and reduce.
         2. video 8 on Promises will be relevant to the topics we will cover on asynchronous execution and interacting with (3rd-party) APIs
         3. the 9th video (labeled "Functors - FunFunFunction #10") onward in this list are beyond the scope of our course