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.

Files

1. Create a directory (i.e. a “folder”) somewhere on your computer for this course, perhaps you’d call it cs343.
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. If you didn’t already as part of the aforementioned WSL setup (then we hope you’re not on Windows or you missed a step! 😆), 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

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

API Exploration

1. Install Postman
   • PostMan has been adding various paid tiers, please don’t pay money for it at this time, just use the free tier.

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
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.

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

3 - Firefox DevTools

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.

Rulers

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

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.

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.).

4 - Usual Start for Coding Activities

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.

5 - 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
   4. Specificity Calculator
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

Design and Style

1. Color Palettes
   • paletton.com
   • Adobe Color

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