Install all the things!

Let’s change a few settings on your computer to make development life easier.

1. Go to Finder > Preferences.
2. Go to “Advanced”.
3. Make sure “Show all filename extensions” is checked.

By default some of the keyboard features are turned off on MacOS—let’s fix that.

1. Go to  > System Preferences….
2. Go to “Keyboard”.
3. Go to the “Shortcuts” tab.
4. Enabled full keyboard access to “Use keyboard navigation to move focus between controls”.

This is a simple zip utility that’s much better than the one built into Mac OS X. It’s one of those apps I install on every Mac I touch.

1. Download Keka from the website.
2. Double click to open the .dmg file if it doesn’t open automatically.

Drag the application to your “Applications” folder.

We need to install a bunch of browsers because, as web designers, we don’t know what browser someone will be using—so we need to test our websites in all of them.

1. Go to Mozilla’s website and download Firefox.
2. Mount the disk image by double clicking.
3. Drag the application to your “Applications” folder.
4. Eject the mounted disk from your computer.
5. Delete the downloaded file.

Go to Google’s website and download Chrome. (Ditto steps above.)

1. Go to Opera’s website and download Opera.
2. Unzip the download
3. Double click the installer and let it do its thing.
4. Delete the downloaded installer file.

1. Go to Microsofts’s website and download Edge.
2. Double click the installer package and let it do its thing.
3. Delete the downloaded installer file.

Safari’s web developer tools are turned off by default—so let’s turn them on.

1. Go to Safari > Preferences
2. Go to the “Advanced” tab.
3. Make sure “Show Develop menu in menu bar” is enabled.

This will make it so double clicking HTML files opens your browser instead of a code editor.

1. Download this HTML file. (If clicking this link doesn’t download the file, Right Click > Download Linked File.)
2. In Finder, go to where it was downloaded (likely your “Downloads” folder) and right click—press “Get Info”.
3. Under the “Open with” section, set it to “Firefox”.
4. Press “Change All…”.
5. Close the info window and trash the HTML file.

We need to install the GitHub Desktop application so that we can manage and upload our code to GitHub.

1. Download the app from the GitHub Desktop website.
2. Unzip the downloaded file
3. Drag the GitHub Desktop application icon to your “Applications” folder.

Make sure to sign in with your GitHub username, email address, and password.

We need to install some extra development tools on our computer so Markbot can work well.

Open the application on your computer called “Terminal”, it can be found in Applications > Utilities (or search for it with Spotlight).

Type exactly this:

xcode-select --install

Hit Return

It will guide you through the download and installation process.

We need to install the OpenJDK because the automated marking program, Markbot, needs access to Java for performing some of it’s tasks.

Go to the OpenJDK download page on Adopt OpenJDK website.

Choose the “Open JDK 11 (LTS)” version of OpenJDK at the bottom of the list.

1. Download the JDK for your computer.
2. Double click the installer and let it do its thing.
3. Delete the downloaded file.

All of the coding exercises we do in this class will be using Markbot to automatically grade your work. So, we need to set that up.

1. Download Markbot. (or Markbot for Windows)
2. Mount the disk image by double clicking.
3. Drag the application to your “Applications” folder.
4. Eject the mounted disk from your computer.
5. Delete the downloaded file.

Open up Markbot and sign in with your GitHub username.

Add your Progressinator API key

Go back to your browser tab with your Progressinator profile & copy & paste the API key into Markbot:

Then “Sign-in” to Markbot.