Untangling fall2017 week2
Download as PPTX, PDF•1 like•169 views
This document provides an agenda and overview for a class on using Git, GitHub, and VSCode. It introduces command line basics, files and directories, terminal commands, text editors, GitHub, Git basics, and a homework assignment to create a GitHub repository and JavaScript program. Key topics covered include the Git workflow, essential Git commands, using GitHub Pages to host websites, and an introduction to JavaScript programming.
Untangling fall2017 week2
- 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 [email protected] 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!