Docs

1 - Setting Up Your Development Environment

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

Browsers

1. Install Firefox if you don’t have it already (ensure you have at least 2 browsers installed).
2. 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. 🤷‍♂️
3. 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:
     • 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!
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”):

   • 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

1. 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.)
2. Maybe everyone, but definitely Windows folks should Install the GitHub Desktop app.

2 - Setting Up Your Development Environment - Windows

Random Windows Tools

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.
   • NOTE: VSCode can become as complicated as you’re interested in making it. You can have like your whole hard drive open in the files sidebar of VSCode, but I wouldn’t recommend it. Even if you have other instances of vscode open for referencing past work or whatever, consider have 1 window of vscode in which you open only the top level directory of the current activity,

5 - Additional WebDev Resources

FunWebDev 3rd ed.

Some of the book’s linked resources may be found also on github: https://github.com/funwebdev-3rd-ed/projects-start

HTML

1. Dr. Kirkpatrick has some nifty short demos/exercises
   1. try the "select module" and subsequently "select exercise" buttons
2. MDN's Learn web development 🔥
3. Codecademy's HTML: Codecademy has some really good resources, many of the intro web courses are $FR.EE 🤑

CSS

1. Dr. Kirkpatrick has some nifty short demos/exercises
   1. try the "select module" and subsequently "select exercise" buttons
2. Codecademy's CSS
3. specificity
   1. CSS Tricks on Specificity
   2. MDN: Specificity
   3. ⚔️ Specificity Wars
   4. Specificity Calculator
4. Practice your CSS Selectors with CSS Diner
5. Practice Flexbox with Flexbox Froggy
6. 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 😆
7. CSS Tricks's nice visual guide to flexbox
8. CSS Tricks's nice visual guide to CSS Grid

Javascript

1. Dr. Kirkpatrick has some nifty short demos/exercises
   1. try the "select module" and subsequently "select exercise" buttons
2. Codecademy back at it again with Javascript
3. CodingBatJS
4. JS Challenger

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. What happens when... - an attempt to answer the age-old interview question What happens when you type google.com into your browser's address box and press enter?
3. 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
4. https://jsbin.com/ can be useful for sharing short samples/examples to test your understanding or to ask for help figuring out a bug
5. "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