Merge branch 'lh-git2VSCode-1' into 'git2VSCode'

revision of part 2

See merge request !132

2022/2022-06-07_git-trilogy-part-2/slides/VScodeGUI.md

-# VS Code User Interface
+# Visual Studio Code - Graphical User Interface (GUI)
 
-Make text shorter
+<img src="slides/img/icon-live-demo.png" height="100px"> GUI for VS code
 
-- **Activity Bar** - Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
-- **Side Bar** - Contains different views like the Explorer to assist you while working on your project.
-- **Editor** - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
-- **Panels** - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.
-- **Status Bar** - Information about the opened project and the files you edit.
+<div align="center">
+<img src="slides/img/VSCodeGUI.png" width="60%">
+</div>
 
 
-<div style="position:absolute;right:0%;top:10%">
-<img src="slides/img/VSCodeGUI.png" height="750px">
-</div>
 
-Text and image from VS Code documentation
\ No newline at end of file
+# Visual Studio Code - Graphical User Interface (GUI)
+
+
+- **Activity Bar** - Located on the left side, this lets you switch between views and gives you additional context-specific indicators, like the number of changes when Git is enabled.
+- **Side Bar** - Contains information to assist while working on your project.
+- **Editor** - The main area to edit files. You can open as many editors as you like side by side vertically and horizontally.
+- **Panels** - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal.
+- **Status Bar** - Information about the opened project and the files you edit.
+
+Source: VS code documentation
\ No newline at end of file

2022/2022-06-07_git-trilogy-part-2/slides/add-to-workspace.md

-# Add repository to VS Code workspace (separately from cloning)
-If you alredy have a copy of repository on your laptop (cloned using terminal) you can work on it and want to setup VS Code to simplify interaction with Git.
+# Add an already locally existing repository to workspace
 
-- Go to **File > Add Folder to Workspace**<br>
-<img height="230px" src="slides/img/add-root-folder.png">
-- Your project is in your Workspace now<br>
-<img height="370px" src="slides/img/hero.png">
\ No newline at end of file
+![bulb](slides/img/bulb.png) If you already have downloaded a repository, you can add it to VS code by following:
+
+- Go to **File > Add Folder to Workspace**
+
+<center>
+<img width="30%" src="slides/img/add-root-folder.png">
+</center>
\ No newline at end of file

2022/2022-06-07_git-trilogy-part-2/slides/best_practices.md

+# Best practices
+
+* Work on your <font color="red">own</font> branch (in your own fork), and **not** on `master` and **not** on `develop`
+* Do **not commit** to `master`/`develop`, but **submit a merge request (MR)**
+* Get your code **reviewed** by your peers (submit a merge request!)
+* Submit a merge request **often**! (as soon as the feature is ready)
+* Make commits often (keeps increments small)

2022/2022-06-07_git-trilogy-part-2/slides/branch.md

-# Create new branch
+# Create a new branch
 
-To encapsulate your changes, isolate your work from other and help Git to easile merge virsions later, we work on branches.
+As part of the workflow, create a branch before starting to work.
 
-- Click on branch symbol in side bat (bottom of VS Code window)<br>
-<img height="100px" src="slides/img/branch.png">
-- Choose "+ Create New Branch..."<br>
-<img height="230px" src="slides/img/newBranch.png">
-- Give the name to your new branch<br>
-<img height="100px" src="slides/img/newBranchSwitched.png">
\ No newline at end of file
+- Click on branch symbol (bottom left)
+
+   <img height="100px" src="slides/img/branch.png">
+
+- Choose "+ Create New Branch from..."
+- Give the name to your new branch
+- Select `origin/develop`
+
+<img src="slides/img/icon-live-demo.png" height="100px">

2022/2022-06-07_git-trilogy-part-2/slides/clone.md

-# Download your copy to your laptop - clone
+# Clone your fork
 
-Now you have your copy of the repository on server. You need to download it to your laptop.
-In git words: you need you *clone your fork*:
+Every repository is on the server. If you want to contribute using VS code, you need to download it to your laptop.
+
+In git jargon: you need you *clone your fork*:
 - Go to your projects (top left corner with LCSB logo)
-- Find **basic-practice-pages** project under your name and where you are the owner
-- Press *Clone* and then *Clone with SSH*. URL will be in your clipboard now.<br>
-<img height="300px" src="slides/img/clone.png">
-- Open VS Code. If you haven't opened a folder yet, the VS Code view will show you a buttor to Clone Repository. Otherwise, go to View > Command Pallete and type "clone":<br>
-<img height="230px" src="slides/img/firstrun-source-control.png">
+- Find **basic-practice-pages** project under your name (your fork)
+- Press *Clone* and then *Clone with SSH*. URL will be in your clipboard now.
+<img width="60%" src="slides/img/clone.png">
+- Switch to VS Code. Go to `View` > `Command Palette` and type "clone"
+
+
+
+
+# Clone your fork
 
+- You will be asked for the URL of the remote repository (you have it in your clipboard now)
 
+  <img height="100px" src="slides/img/clone-SSH.png">
+- and the place where to put files on your computer.
 
-# Download your copy to your laptop - clone
+  <img height="400px" src="slides/img/clone-folder.png">
+- To start working, you can now click on "Add to workspace"
 
-- You will be asked for the URL of the remote repository (you have it in your clipboard now)<br> 
-<img height="100px" src="slides/img/clone-SSH.png"><br>
-- and the place where to put files on your computer.<br>
-<img height="400px" src="slides/img/clone-folder.png">
-- To simplify your life you can click "Add to workplace" on next step<br>
-<img height="100px" src="slides/img/add-to-workspace.png">
+  <img height="100px" src="slides/img/add-to-workspace.png">

2022/2022-06-07_git-trilogy-part-2/slides/commit.md

 # Make changes and commit them
 
-When you change file/s VS Code with remind you of unsaved changes (left image) and saved by not commited changes (right image):<br>
-<img height="230px" src="slides/img/UnsavedChanges.png">
-<img height="230px" src="slides/img/SavedButUncommitedChanges.png">
+When you change a file, save them by clicking on `File > Save` or by hitting a shortcut (`CTRL + S` or `Command + S`).
 
+![bulb](slides/img/bulb.png)  On the left side, observe the git icon.
+
+<br>
 To commit your changes:
+
 1. Go to Source Control in Activity Bar
 2. Stage all changes you want to commit (press +)
 3. Describe your changes in commit message
 4. Commit your changes (press "tick")
 
-<img height="230px" src="slides/img/commit.png">
\ No newline at end of file
+<img src="slides/img/icon-live-demo.png" height="100px">
\ No newline at end of file

2022/2022-06-07_git-trilogy-part-2/slides/fork.md

-# Create your copy on server - fork
+# Fork the upstream repository
 
-As you already know it is not nice to work on original repository. 
 
-You need to create a copy of the repository for yourself.
+If you recently contributed to the upstream repository, please delete the fork and start over (`Settings` > `General` > `Advanced` > `Delete project`)
 
-In git words: you need to *fork*  repository.<br><br>
+<div class="fragment">
+<br>
+If you do not have write access to the `upstream` repository, you have to fork it (as seen in the previous course):
 
-Go to [https://gitlab.lcsb.uni.lu/R3/school/git/basic-practice-pages](https://gitlab.lcsb.uni.lu/R3/school/git/basic-practice-pages) and fork
-    
-- make it public or private depending on orginal repository) 
+- make it `public` or `private` depending on upstream repository
 - select your namespace
 
-<img height="330px" src="slides/img/fork.png">
+<center>
+<img width="50%" src="slides/img/fork.png">
+</center>
+
+<img src="slides/img/icon-live-demo.png" height="100px"> Go to [https://gitlab.lcsb.uni.lu/R3/school/git/basic-practice-pages](https://gitlab.lcsb.uni.lu/R3/school/git/basic-practice-pages) and fork.
\ No newline at end of file

2022/2022-06-07_git-trilogy-part-2/slides/ide.md

+# Integrated development environment (IDE)
+
+Most of you already know how to contribute to a repository directly online via Gitlab's Web IDE ([Trilogy of git, Part I](https://courses.lcsb.uni.lu/2022-05-31_git-trilogy-part-1/)).
+
+However, Gitlab's Web IDE is rather limited if you want to:
+
+- work efficiently
+- work with several repositories at the same time
+- work offline
+- make changes to several documents all at once
+- use find/replace features
+- ...
+
+In this course we will learn how to contribute to a common project working on you laptop via [Visual Studio Code](https://code.visualstudio.com/) (VS Code):
+- Available for macOS, Linux, and Windows
+- Open source (free)
+- Easy to contribute using `git`
+- Powerful tool and widely used

2022/2022-06-07_git-trilogy-part-2/slides/img/bulb.png

+../../../../2021/2021-03-18_basicGitTraining/slides/img/bulb.png
\ No newline at end of file

2022/2022-06-07_git-trilogy-part-2/slides/img/icon-live-demo.png

+../../../../2020/2020-03-30_basicGitTraining/slides/img/icon-live-demo.png
\ No newline at end of file