Jeremy Troy Suchanski

Web Frontend Development II

Gary James

April 18, 2022

Working With Groups (Notes)

Good communication is the key to success.

Good tools to use: #1 Slack or Teams #2 Trello #3 GitHub

Managing the Modern Frontend Workflow (Notes)

Development workflow for Wed development has become quite complicated so there are tools in 3 categories to help manage it. 

#1 Package managers (We’re using “npm”) 

#2 Bundlers (We’re using “Snowpack” others include: “Parcel” & “Webpack”)

#3 Task managers (We’re using “npm” others include: “Grunt” & “Gulp”)

We will be using a “NPM/Node-based workflow for this course this semester.”

Git It Together Course (Notes)

Version Control: a method of recording changes made to a file or set of files that allows you to come back to a specific version if desired.

Types of version control: #1 Centralized (Code is on central server)#2 Distributed (ex “Git”; Copy of code is distributed to programmers to work on privately before uploading)

Git: Distributed version control system that runs on the terminal & keeps track of modification of files in a local repository on your computer

- developed by Linus Torvald (who developed OS, Linux)

            Practical Uses

            #1 Keep copies of all versions in case you need to switch back to one

#2 Show potential employers code samples

#3 Showcase work to potential customers

#4 Collaborate with other developers

#5 Keep myself updated on trending repositories

#6 Fork repositories & play with the code to learn more 

• to configure: (git config --global user.name “JmmonJeremy”) & (git config --global user.email JeremySuchanski@hotmail.com) & +set up project commands (git config --global color.ui "auto") & (git init) & (git remote add origin + repo https address) & then to check if your remote repo has been added enter: (git remote -v) & then (git status) & then to add to repo (git add . or filename) the . stands for “everything” & (git status) shows everything in the staging area To undo a mistake staging: (git reset Head . or filename) My cmmd line shows you can use …(git restore --staged . or filename) & git commit -m “message for your commit in these quotes” & (commit status) to check it was all committed To undo a mistake commit snapshot: (git reset --soft Head~1 [the one resets back one commit]) & then (git push origin master) to upload it to the github repository To undo a mistake upload to github: (git revert Head) & then (git push origin master) to fix it in the github repository & (git log) to see history of commits or (git log --pretty=oneline) to see them all stacked together
• to avoid mistakes (git diff filename) to display the differences between the working file and the git repository’s previous version
• to get updates from teammates changes etc from github repository (git fetch) & then (git merge origin/master) or just (git pull origin master)
• if push is rejected because there are changes in repository from teammate: (git pull origin master) & then (git commit –amend) to change the commit message follow by (esc button & :x to exit and save) & this will let the push be accepted in git so then (git push origin master) to make it load into the github repository
• general good practice for git pushes: to pull any work before you push your latest changes to git, which avoids failed or rejected push requests to github
• if pull request is rejected because of a conflicting change made to same part by you & teammate: 1^st discuss and decide on which change to keep and erase the other & then (git add . or filename) & then (git commit -m “commit message”) & then (git push origin master)
• 3 file states in Git #1 “Modified” (current state of a file you’re still working on in your folder) #2 “Staged” (file you added to staging area of Git to take snapshot of * like a photo booth) #3 “Committed” (Git has taken a snapshot of the current state & are stored in the repo now)
• 3 sections of a Git project (A folder with all your code files that has been initialized with Git) #1 “Working Directory” (modified files) #2 “Staging Area” (staged files) #3 “Repository” (committed files)
• Git basic syntax #1 “git add” (adds file to the staging area) #2 “git commit” (takes a snapshot of the current state of your file & puts it in the repository) #3 “git push
• Git basic workflow (sequence of steps to complete a task) #1 Modifying files in the working directory, then “git add” = #2 adding files to the staging area, the “git commit” = #3 committing files to the repository, then “git push” = uploading to the repository
• Blue + sign under commits = space teammates can leave comments about commits in github

GitHub: Code sharing and publishing service that has a collection of repositories from other developers. – it has #1 clone, #2 pull requests, & #3 fork features

Git Branches Purpose: to provide a separate environment where you can experiment – such as adding or deleting features using the same git add git commit process. The code base on the master branch remains untouched. A branch by default contains all the code that is on the master. It is essentially a copy until you start making changes on that specific git branch.

Head: refers to the tip of the branch you are on (the most recent commit on that branch). It points to the most recent “snap shot”.

Branches Git commands: (git branch -a) lists all branches, *denotes which branch you are on (git branch name) creates a branch (git checkout name) to move to a branch or for 2 in one (git checkout -b name) to create and move to a branch in one command ( git branch -m name of branch to rename followed by new name) to rename a branch (git branch -d name) to delete a branch, you can’t be on a branch you are deleting | after switching to a branch with (git checkout name) make changes to file locally & then (git add .) to make a copy of all files to the branch & then (git commit -m “commit message”) & then (git push origin branch name) to load to github (git checkout -t origin/“remote_branch_name”) to bring download branch from GitHub.

Branches changes conflict: (git add filename) & then (git commit -m “commit message”) & then (git pull origin branch name) & then discuss which change to keep with teammate & make final changes & then (git add filename) & then (git commit -m “commit message”) & then (git push origin branch name)

Merging branches: (assuming no commit changes have happened to the main branch for #1 & #2) #1 fast forward merge = Head points to latest commit on the branch   #2 No fast forward merge “--no-ff ” a separate merge commit represents the merge #3 3 way merge 2 commits are generated for the two branches and then they are merged and another merge commit is generated. This happens when development is occurring on both branches simultaneously | The merge type is usually determined by an algorithm except for the “--no-ff “ where you enter (git merge --no-ff branch name)

Deleting branches: (git branch -d branch name) to delete it locally & then (git push origin –delete branch name)

Git Rebase: Moves a branch up to a new base commit, integrates changes from one branch to another. (git merge – creates a merge commit to represent the integration of one branch into another) rebase rebases the branch you are currently on to the base branch. It creates a linear history rewriting the history. It is not considered good practice to us rebase on repositories being shared with others.

Viewing Commit History: #1 (git log) #2 (git log --pretty=oneline) #3 (git log –author=github username) #4 (git log --graph --decorate --oneline) #5 (git log -n then number to limit by) #6 (git show commit number) shows what changed where in the file for that commit #7 (git diff branch 1 name branch 2 name) shows the differences between the two branches

GitHub Pages: URL for project page = username.github.io/RepoName 1^st (git checkout -b gh-pages) 2^nd (git push origin gh-pages) Any change you commit to gh-pages branch is picked up by github to build your github pages. 

Git Clone: 1^st click on the green code button in the repository. 2^nd copy the URL from the drop down that comes 3^rd change to the directory you want the folder in 4^th (git clone GitHub repository URL)

Git Fork: 1^st Click the fork button in the Repository 2^nd Clone to your computer for a local copy

GitHub Pull Request: Allows you to propose changes to someone else’s project. The owner of the original repository is notified. They can review the code and accept it and merge it or reject the proposed changes. 1^st Click the Pull Request button 2^nd Click on Labels button and select a category 3^rd Click on Milestones to help categorize your pull request 4^th Click on create pull request

SSH: Secure Shell (ssh-keygen -t rsa -C email address associated with GitHub) & then enter & confirm a passphrase & then (eval “$(ssh-agent -s)”) & then (ssh-add ~/.ssh/id_rsa) & then type in the passphrase from earlier copy & then Open your .pub file and copy the key & then Click on settings in your GitHub account & then Click on SSH keys & then Click on Add SSH key & then paste the contents of the .pub file & then Add Title “Adding Public Key” & then Click on Add key button

Comparing 2 commits: add /compare(then commit number)..(then commit number) after the browser while in the repository.

To pull down a teammates branch for testing: git checkout -t origin/remote branch name