try 2

1. UNTANGLING THE WEB
CLASS 2 – GIT, GITHUB, VSCODE
THE HARDWARE AND PROTOCOLS THAT POWER THE WEB
INTERVIEW QUESTION: WHAT HAPPENS WHEN YOU TYPE A URL IN THE
SEARCH BAR?

2. AGENDA FOR TONIGHT
• Command line introduction
• Javascript intro + what is programming in general
• Text editors
• Online editors
• Source code control
• Project 1

3. FROM LAST WEEK
• Make a github account. This will be your developer’s portfolio,
so we’ll start populating it!
• Install git on your computer (install “git bash” from https://git-
scm.com/downloads)
• Please make sure you’ve gotten on the slack channel. Send me
email at derekja@gmail.com to get access.

4. SOFTWARE COMPONENTS OF A COMPUTER
Hardware and devices
Graphics
subsystem
BIOS
Operating system and device
drivers
Window
manager
Terminal and
utilities
Applications such as word processors,
browser, etc.

5. TERMINAL (COMMAND SHELL, BASH SHELL)
• We’ll be using the command line a lot in this class
• It is the lowest normally accessed level of interaction with the
computer
• In many ways it’s simpler than a graphical user interface
because it is so precisely defined
• But that definition isn’t obvious until you learn about it, unlike
a graphical user interface there is no easy discoverability of
commands and features

6. FILES AND DIRECTORIES
• Your hard drive contains files (packages with stuff in them, either text or
binary data) and directories (containers of files)
• There are also links, or shortcuts, but these are really just a special kind of file so
we’ll ignore those for now
• In the command window (otherwise known and the terminal, or shell) you
are always in a specific directory
• You can always tell what that directory is with the command “pwd” (which
stands for Present Working Directory)
• In windows, names are not case-sensitive, but on unix and mac they are, so
be careful of case

7. SOME TERMINAL COMMANDS
• We’ll all be using the git bash command window, which will be more
similar between mac and pc.
• A detailed command line reference is found at http://ss64.com/
• To get the directory listing, on mac it is “ls” and on the pc it is “dir”
• Once the git bash install has occurred we will use “ls” on both
systems, for example
• If you open a terminal on your computer other than
the git bash shell things will work differently than you
expect!

8. REDIRECTION OF COMMAND INPUT
• command > filename Redirect command output (stdout) into a file
• command >> filename Redirect command output and APPEND into
a file
• command < filename Redirect a file into a command
• command1 | command2 Redirect stdout of command1 to
command2
• These work the same on all shells, but after you install bash, use that
and reference the page here: http://ss64.com/bash/syntax-
redirection.html

9. EXAMPLES
• To put the listing of a directory into a new file on a pc
• “dir > output.txt”
• Or to append to an existing file (creating a new one if it doesn’t
exist)
• “ls >> output.txt”
• To get information about a computer
• On the PC, “systeminfo” or on the mac, “system_profiler”

10. EXERCISE 1
• Create a directory for the class in your git bash terminal
• Where did you put it?
• Navigate to the top of your home directory
• Can you get back?
• List the contents of your home directory and put them into a
file called directory_listing.txt

11. EDITING TEXT FILES
• Visual studio code is my preferred editor, it is on these lab
machines
• Can you edit the directory listing you just created?
• How does a text editor differ from Microsoft word?
• Is plain text, no formatting, no tables, no embedded images, etc.
• Is optimized for writing code rather than documents
• Is a different file format

12. GITHUB AND GITHUB PAGES
• Source code control is the essence of modern website
development
• Never develop anything that is not in a repository
• Safer – can track changes and prevent accidental loss
• Portable – can develop on multiple machines
• Workflow – can share development with other people
• Portfolio – employers look at github

13. INSTALLING GIT AND GIT BASH
• Windows
• Download from https://git-scm.com/download/win
• Run to install
• Open the “git bash” desktop app
• Mac
• Might already be there ($ git –version)
• If not, you can get an installed from https://sourceforge.net/projects/git-
osx-installer/files/
• Or use homebrew, “brew install git” then check the version

14. SOURCE CODE CONTROL
• Github, Gitlab, SVN +many, many proprietary solutions that you’ll
never use (if you’re lucky!)
• We will focus on github
• Gitlab is very similar, based on GIT
• “Global Information Tracker”? Other less savory acronyms
• May not stand for anything other than not having a UNIX command
named git previously and kind of sounding like “get”
• Written by Linus Torvalds (of Linux fame) to manage linux sources

15. USING GIT
• Avoid most of the GUI tools!
• They may be easier initially but they will eventually get in your way
• Technically called a “BASH” terminal in the version I’ll be having
you install

16. ESSENTIAL GIT COMMANDS
• In a bash shell, create a new directory (mkdir untangling)
• Create a new repository in the github.com website (or use git init if you want
to do it locally)
• Clone that repository to your local machine (git clone $projectpath)
• Edit or add a file using an editor (I like visual studio code -
http://code.visualstudio.com/)
• Make sure git picked up the change (git status)
• Add the file (git add $filename)
• Commit the add (git commit –m “message”)
• Push the commit to github (git push origin master)

17. THE GIT BASH TERMINAL
• Demo of git in a bash terminal (https://www.youtube.com/watch?v=DQUcmNO4diQ we’ll probably do
this live, but if you want a refresher later this video is decent. Longer one at
https://www.youtube.com/watch?v=HVsySz-h9r4 is even better)

18. SHORT GIT TUTORIAL WALKTHROUGH
• May or may not have time to walk through this in class
• https://www.atlassian.com/git/tutorials/using-branches

19. USING JSFIDDLE
• JSFiddle.net is a site where you can make quick sketches of
code and see them run. (good intro:
http://doc.jsfiddle.net/tutorial.html)
• It’s sometimes easier to use a site like this than to code from
scratch, but in the end developing locally and on github is more
useful
• Console.log is very useful, but it doesn’t print on the page!
Have to use the dev console.
Access DevTools On Windows On Mac
Open Developer
Tools
F12, Ctrl + Shift +
I
Cmd + Opt + I

20. WHAT IS JAVASCRIPT?
• A programming language
• - variables
• - APIs (Application Programming Interfaces)
• - control flow (if/then, while, switch, etc.)
• - objects and methods – JS is an Object Oriented programming language (OO)
• There is another class of language called functional programming that we may
introduce later. Neither is superior, but the require different ways of thinking,
and some problems are best suited to one or the other.

21. GITHUB PAGES
• Just an easy way to use a webserver for free!
• That is driven from a source-code controlled environment
• https://www.youtube.com/watch?v=FiOgz3nKpgk (again, we’ll
probably go through this live, but this if you don’t remember what
we did here’s a run-through)
• Personal and project pages, we’ll mostly use project pages
• Use by cloning or forking a project and then turning on github pages.
Whatever is in index.html will get served up!
• https://pages.github.com/

22. PROJECT 1
• Write a javascript program that will take a comma separated list
of words input, split those words up into individual variables,
alphabetize them, and present them back in proper
alphabetical order
• Your program should be able to accommodate anywhere
between 2 and 12 words to be alphabetized
• Submit this as a github repo showing a proper set of commit
messages and host it on github pages

23. HOMEWORK 2
• Create a new project in github, add a readme from the webpage
• Clone that project to your computer in a directory you set up
for this class
• Create a short javascript program to add 3 numbers that are
entered from prompts and are output to an alert box.
• Check that file into your github repo
• Send me your github repo link in email before next class

24. FOR NEXT CLASS
• Work on some javascript, look through https://www.teaching-
materials.org/javascript/
• Install the visual studio code editor on your computer,
instructions are here:
• https://code.visualstudio.com/download
• Work on your project so that you can get help next class!