Intro to the Dev Environment

Learning Objectives

Students will be able to:

• Be more productive by using the keyboard vs. the mouse
• Use the Hyper Command Line Interface (CLI) to navigate and manipulate the filesystem
• Use the VS Code text editor to open and edit files

Being More Productive by using the Keyboard vs. the Mouse

Launching Apps with Spotlight (On Mac)

• Developers avoid using the mouse whenever possible
• Developers are more productive when their hands are on the keyboard

• Open applications using Spotlight instead of the mouse by:

  1. Pressing cmd+space to open Spotlight
  2. Start typing the name of the app until the app is highlighted
  3. Press enter to open the app!

Switching Between Applications

• Quickly switch between running applications by pressing cmd+tab

• If a minimized applications does not display after tabbing to it with cmd+tab:

  1. Continue to hold down cmd and release tab
  2. Press option then release cmd

Switching Between Instances of an Application

• You can switch between multiple windows of the same application using cmd+` (that's a back-tick character, which is above the tab key)
• Note that it's best to minimize how many windows/applications you have open when developing to make switching between applications quicker and minimize distractions to the job at hand

Uploading Screenshots and Images to imgur.com

Why Upload Images?

• Often you will need to share images with others or use them in your applications, notes, readme files, etc
• Unfortunately, if an image exists only on your computer, you lose the ability to use it anywhere but on your computer
• The solution is to upload images to a cloud service...

Screenshots

• The following keyboard shortcuts can be used to take screenshots of your screen:

  • Whole screen: shift-cmd-3
  • Part of your screen: shift-cmd-4
  • A certain window: shift-cmd-4, then spacebar to toggle window mode

Using the Hyper
Command Line Interface

What is Hyper?

• Hyper is the developers' choice for entering commands and navigating the filesystem
• Hyper is also known as a shell. The default shell in Mac OS X is Bash. You will find the terms terminal and bash often used interchangeably
• Go ahead and open Hyper (remember - use Spotlight!)

Command Line Basics

Before we get started with this section, it might be helpful to ensure we are all using the same shell configuration.

That said, here are some screenshots to show how your instructor has set up their shell:

Now that we've reviewed shell config, here are the basic command tasks we'll try out:

• Change directories (folders)
• List a directory's contents
• Create a directory
• Create a file
• Move files and directories
• Copy files and directories
• Rename files and directories
• Delete files & directories
• Command history & clearing the window

Change Directories

• We use the cd command to change directories

• Let's change to the home directory of the logged in user:

  $ cd ~

• Here are a few common shortcut characters used when navigating the filesystem:

  • ~ The logged in user's home directory
  • / The root (top-level) directory on the harddrive
  • . The current directory
  • .. The parent directory of the current directory
• The pwd command "prints" the current (working) directory

List a Directory's Contents

• Use the ls command to display a concise list
• ls does not display hidden files by default, adding the -a option will show them
• tree is a nice utility for displaying a graphical representation of a directory and its nested directories.
  Install it by typing brew install tree

Create a Directory

• Use the mkdir command to create directories

• Let's create a drawers directory inside of the home directory:

  $ mkdir ~/drawers

• Note that you don't have to specify the full path if we are already in the home directory

Using Tab Auto-Completion

• Change to the home directory
• Now let's change to our newly created drawers directory, however, only type cd d,
  then press tab which will auto-complete directory name(s)
• You can cycle between matching directory names by continuing to press tab

Creating Files

• We use the touch command to create empty files

• Let's move to the drawers directory and create a directory named socks. Here is how we can create the directory and change to it using a single command:

  $ mkdir socks && cd socks

• Now let's create a dress.socks file:

  $ touch dress.socks

Practice Creating Directories and Files

1. Create this directory: ~/drawers/pjs
2. Create two files in the new pjs folder named warm.pjs and favorite.socks

Moving Files

• Okay, so we have a messy drawers/pjs, let's move our favorite.socks file out of the pjs folder and into the drawers/socks folder where it belongs!

• Here's how we can do the move regardless of which directory we're currently in by using absolute paths:

  $ mv ~/drawers/pjs/favorite.socks ~/drawers/socks/

  Be sure to use tab-completion!

Note that you have the option to use absolute and/or relative paths.

Moving Directories

• Moving directories is just as easy using the same mv command

• Try it out:

  1. Create a ~/shorts directory
  2. Move the newly created shorts directory into the drawers directory

Renaming Files

• Guess what - there's no dedicated bash command to rename files and directories!
• Don't panic! The mv command is very flexible!

• Here's how we can rename the warm.pjs file to summer.pjs from anywhere:

  $ mv ~/drawers/pjs/warm.pjs ~/drawers/pjs/summer.pjs

• Of course, you can actually move and rename simultaneously!

Deleting Files

• We use the rm command to delete both files and directories

• Let's first use it to delete the dress.socks file. Here's one way:

  $ cd ~/drawers/socks && rm dress.socks

• Using the * wildcard character, it's possible to delete and move multiple files. For example, typing *.socks would match all files with an extension of .socks...

Deleting Directories

• Deleting directories is almost the same as deleting files except you must use the -r option, which runs the rm command "recursively" to delete a directory and it's contents.

• To delete the pjs folder we could use this command:

  $ rm -r ~/drawers/pjs

Moving Multiple Files

• To demonstrate moving multiple files, re-create the dress.socks file we just deleted from the socks directory

• Now let's move all of the .socks files out of the socks folder into our home folder. The following command assumes we're inside the socks folder:

  $ mv *.socks ~

• Now, without changing directories, return the socks files back to where they belong

Copying Files & Directories

• Use the cp command to copy files and directories

• Here's how we can copy all .js files:

  $ cp *.js ~/dest-folder

• And entire directories by adding the -R option:

  $ cp -R ./sample-code ~/dest-folder

Command History & Clearing the Window

• Pressing the up and down arrows in Hyper will cycle through previously entered commands. This can be a huge time saver!
• If you'd like to clear the Hyper window, simply press cmd+k

Using VS Code to Open and Edit Files

What is VS Code?

• VS Code is a popular open-source text-editor maintained by Microsoft
• It's very customizable and capable
• VS Code's functionality can be extended using extensions, however, most useful features are built-in
• To try it out, let's use VS Code to open and edit a file...

Add VS Code to $PATH

• We want to be able to type in code . in Hyper and have VS Code open the current directory for editing
• First, open VS Code's Command Palette by pressing ⇧⌘P
• Next, type "shell command" and select the Shell Command: Install 'code' command in PATH command
• Restart Hyper for the new $PATH to take effect

For the above to work, VS Code must be installed in the Applications folder

Configuring a Global git ignore

Everyone should have a global git ignore file so that you don’t have to worry about making the appropriate entries in a project’s git ignore.

First, create the file: touch ~/.gitignore_global

Next, configure git to use this file: git config --global core.excludesfile ~/.gitignore_global

Finally, lets put some good stuff in there:

# This is a list of rules for ignoring files in every Git repositories on your computer.
# See https://help.github.com/articles/ignoring-files

# Compiled source #
###################
*.class
*.com
*.dll
*.exe
*.o
*.so

# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# Logs and databases #
######################
*.log

# OS generated files #
######################
._*
.DS_Store
.DS_Store?
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Testing #
###########
.rspec
capybara-*.html
coverage
pickle-email-*.html
rerun.txt
spec/reports
spec/tmp
test/tmp
test/version_tmp

# node #
########
node_modules

# Rails #
#########
**.orig
*.rbc
*.sassc
.project
.rvmrc
.sass-cache
/.bundle
/db/*.sqlite3
/log/*
/public/system/*
/tmp/*
/vendor/bundle


# Ruby #
########
*.gem
*.rbc
.bundle
.config
.yardoc
_yardoc
doc/
InstalledFiles
lib/bundler/man
pkg
rdoc
tmp

# for a library or gem, you might want to ignore these files since the code is
# intended to run in multiple environments; otherwise, check them in:
# Gemfile.lock
# .ruby-version
# .ruby-gemset

# CTags #
#########
tags

# Env #
#######
.env

# Python #
#######
*.pyc
__pycache__/

Optional Installs

Some of these options below might not work properly on your machine depending on how old or new your computer is, so use at your own risk. However, the tradeoff is that these tools offer powerful conveniences

Installing Spectacle

Install Spectacle for resizing windows.

What is Spectacle?

• Spectacle is a free utility that resizes and snaps into position app windows
• If you don't see the "spectacles" in your menubar, launch Spectacle using Spotlight
• When running, Spectacle will listen to the keyboard for certain key combinations (hotkeys) and will resize/position the active application accordingly...

Spectacle's Basic Default Hotkeys

• Here are the most popular hotkeys:

  • Make window full-size — opt + cmd + F
  • Move to the left half — opt + cmd + ←
  • Move to the right half — opt + cmd + →
  • Move to the top half — opt + cmd + ↑
  • Move to the bottom half — opt + cmd + ↓
• Pressing the same hotkey will size the window by thirds!
• You can find more info about Spectacle here.

Going Forward

• Today, we have only scratched the surface of tools such as Hyper and VS Code
• Rest assured that throughout your time in SEIR, we will help you to get to know these tools much better!

What is version control, and why should you care?

A Version Control System (VCS) records changes to files over time so that you can recall specific versions later.

It also makes working in teams easier, because it enables developers to submit changes to be merged into the codebase.

More specifically, a VCS allows you to:

• Revert files back to a previous state
• Review changes made over time
• Collaborate on a set of files with others
• Create separate "branches" of the codebase to develop new features on without impacting the "master", or production, branch.

In this program, we'll be using the world's most popular version control system - git.

Git was created by Linus Torvolds in 2005 to help with the development of his main project at the time - developing Linux.

Git vs. GitHub

GitHub is not the same as git. GitHub is a social network built around git. It has completely changed the way we, as programmers, share and work on code. GitHub is now the largest online storage space of collaborative works, and it works with git in order to keep track of versions, issues, and requests for changes.

GitHub also plays the important role of a cloud-based backup system - a safe place for all your work! Your code, and the time you spent writing it, is valuable, therefore, you don't want to risk losing it to hardware failure, etc. So we "connect" our local git repo to a "remote" repo on GitHub where we can then "push" code to, and "pull" code from - on demand.

In summary:

• Git provides us with local repositories on our computers
• GitHub provides us with remote repositories stored in the cloud
• A local repository is "linked" to a remote repository by adding a "remote" with this command $ git remote add <name of remote> <URL of repo on GitHub>

Summary of Common Git Commands

By following along today and having done the pre-work, you should now be familiar with basic git commands.

In SEIR, you'll get plenty of practice using git, especially during project week because each of your projects will be stored in its own directory and will be made a git repository in that directory tracking the changes.

For your convenience, Click Here for a Git Cheat Sheet.

However for a quick reference, the following summary of commands will "git" you far:

This graph diagrams the flow of making changes to a repo:

This is the most simple workflow, things get a bit more complex when you start sharing code and manage larger codebases.

IMPORTANT: Do not create a repo within an existing repo! If you find your computer very sluggish, it might be because you have "nested" repos. It's not uncommon for students to accidentally make their home folder (~) a repo - so start there if you suspect something is wrong.

Setup Instructions

1. Create a folder in your Desktop or any other designated location on your machine; you can name it git-github-and-terminal
2. Initialize a git repo inside that folder with the command git init
3. Create a repository on github.com - Your Github Enterprise Account
4. Add your remote from github to your local repo with the following command: git remote add origin https://www.github.com/YOURUSERNAME/git-github-and-terminal.git
5. Create a file called README.md inside your git-github-and-terminal folder
6. Write your answers to the questions below in your README.md file
7. Commit your work at each point when directed (remember to git add . and then git commit -m "your commit message")
8. when done run git branch -M main and then git push origin main, this will send it to https://www.github.com/YOURUSERNAME/git-github-and-terminal.git

Git & Github - Questions

Refer back to the notes from today and/or use the internet and google-fu to find the answers to the questions below:

Answer the following questions

1. What command do you use to setup a git repository inside of your folder?
2. What command do you use to ask git to start tracking a file?
3. What command do you use to ask git to move your file from the staging area to the repository?