Intro to the Dev Environment





Click here to access recording





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:

screenshot screenshot screenshot




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!