Merge branch '2022-05-31_TriologyOfGit-ContriguteUsingGitlab' into 'develop'

git part 1

See merge request !121

2022/2022-05-31_git-triology-part-1/slides/index.md

+# Trilogy of Git Part 1
+
+## May 31st, 2022
+
+<div style="top: 6em; left: 0%; position: absolute;">
+    <img src="theme/img/lcsb_bg.png">
+</div>
+
+<div style="top: 5em; left: 60%; position: absolute;">
+    <img src="slides/img/r3-training-logo.png" height="200px">
+    <br><br><br>
+    <h1>Contribute using Gitlab</h1>
+    <br><br><br>
+    <h4>
+        Laurent Heirendt<br><br>
+        laurent.heirendt@uni.lu<br><br>
+        <i>Luxembourg Centre for Systems Biomedicine</i>
+    </h4>
+</div>

2022/2022-05-31_git-triology-part-1/slides/list.json

+[
+    { "filename": "index.md" },
+    { "filename": "versioning.md" },
+    { "filename": "what_is_git.md" },
+    { "filename": "repository.md" },
+    { "filename": "gitlab.md" },
+    { "filename": "forks.md" },
+    { "filename": "commit.md"},
+    { "filename": "branches.md" },
+    { "filename": "web-ide.md" },
+    { "filename": "merge.md" },
+    { "filename": "syncFork.md" },
+    { "filename": "best_practices.md" },
+    { "filename": "thanks.md" }
+]

2022/2022-05-31_git-triology-part-1/slides/merge.md

+# New term: <font color="color:red">merge</font>
+
+* You have made changes on your branch
+* Now you want your changes to be reflected on another branch </br>(most probably `develop` or `master`)
+
+<div style="position:absolute;left:60%;top:1em">
+<img src="slides/img/branch_merge-detail.png" height="800px" >
+</div>
+
+You have to <font color="color:red">merge</font> the branches.
+
+**Remarks**: merging is directional - *Merge branch A to branch B*
+
+### The merge is initiated via so called **merge request**
+* *Requesting* someone (from the original repository) to *merge* your changes.
+* *merge request* is commonly abreviated as **MR**
+
+Your peers can comment on your changes in a merge request **review**!
+
+
+
+# Our state at the moment?
+
+<div style="position:absolute;top:2em" >
+<img src="slides/img/fork_branch-diagram-after-commit.png" height="600px" >
+</div>
+
+<div style="position:absolute;top:2em" class="fragment fade-in-then-out" data-fragment-index="1">
+<img src="slides/img/fork_branch-diagram-after-commit-with-back-arrow.png" height="600px" >
+</div>
+
+
+
+# Time to practice!
+
+* After hitting the Commit button, you get redirected to the submission page for your merge request
+* Please make sure that you see that you are proposing to merge your branch (version) into the develop branch. This is shown at the top of the page:
+<!-- .element: class="fragment" data-fragment-index="1" -->
+* Fill your merge request submission form and select an Assignee.
+<!-- .element: class="fragment" data-fragment-index="3" -->
+* Good practice is to select Delete source branch when merge request is accepted. (Why?)
+<!-- .element: class="fragment" data-fragment-index="4" -->
+* Under Changes tab, you can see your... changes :)
+<!-- .element: class="fragment" data-fragment-index="5" -->
+
+
+<div style="position:absolute;left:30%;top:4em" class="fragment fade-in-then-out" data-fragment-index="1">
+<img src="slides/img/merge_GUI_detail.png" height="720px" >
+</div>
+
+<div style="position:absolute;left:30%;top:6em" class="fragment fade-in-then-out" data-fragment-index="2">
+<img src="slides/img/merge_branch-to-branch.png" height="100px" >
+</div>
+
+<div style="position:absolute;left:5%;top:10em" class="fragment fade-in-then-out" data-fragment-index="5">
+<img src="slides/img/merge_changes.png" height="400px" >
+</div>

2022/2022-05-31_git-triology-part-1/slides/repository.md

+# New term:  <font color="color:red">repository</font>
+
+<div style="position:relative;text-align:center;top:10em">
+Project folder keeping all your files and their history
+</div>

2022/2022-05-31_git-triology-part-1/slides/syncFork.md

+# Synchronize your fork
+
+<!-- TODO: do we need this slide? -->
+<!-- Should it contain steps for deleting a branch -->
\ No newline at end of file

2022/2022-05-31_git-triology-part-1/slides/thanks.md

+# Thank you.
+
+<center><img src="slides/img/r3-training-logo.png" height="200px"></center>
+
+Contact us if you need help:
+
+<a href="mailto:lcsb-r3@uni.lu">lcsb-r3@uni.lu</a>
+

2022/2022-05-31_git-triology-part-1/slides/versioning.md

+# Using versioning system?
+Basic feature:
+* Ability to recover old versions
+
+
+<div class="fragment">
+<div style="position:absolute; left:50%">
+<img src="slides/img/version-history_OneDrive.png" height="650px">
+</div>
+
+Common tools you are already using supporting "version control":
+- Owncloud
+- OneDrive
+- DropBox
+- ...
+
+Its clear **who** changed **which file** and **when** :) Huray!
+
+<div class="fragment">
+
+### But something is missing, right?
+- **What exactly** was changed? (which section or row?)
+- **Why** it was changed?
+
+
+
+# Using versioning system?
+## Manual file versioning + CHANGELOG
+
+<br>
+
+<div style="position:absolute; width:30%">
+
+Your folder:
+```
+my-document_v01.docx
+my-document_v02.docx
+...
+my-document_v12.docx
+CHANGELOG.txt
+```
+</div>
+<div style="position:relative; left:40%; width:60%"">
+
+CHANGELOG.txt:
+```
+v01 -> v02
+- Chapter 1 updated to contain last findings
+- fixing typo on page 3
+
+v02 -> v03
+- rephrasing section 2 to adhere to standard
+- add missing diagram
+...
+```
+</div>
+
+<br>
+<br>
+
+<div class="fragment">
+
+**What exactly** has changed? - Solved!
+
+**Why** it was changed? - Solved!
+</div>
+<div class="fragment">
+Really?
+
+note: overhead for doing this manually is huge
+</div>
+
+
+
+# Using versioning system?
+What happens if **3** people contribute?
+```
+my-document_v01_AK.docx
+my-document_v01_AK_BP.docx
+my-document_v02_revised.docx
+my-document_v02_LP_revised-and-approved.docx
+my-document_v002_draft_LP-AK_do-not-touch.docx
+...
+my-document_v12_we-made-it.docx
+CHANGELOG.txt
+```
+
+<div class="fragment">
+
+What happens when **10** people contribute?
+```
+          _ ._  _ , _ ._
+        (_ ' ( `  )_  .__)
+      ( (  (    )   `)  ) _)
+     (__ (_   (_ . _) _) ,__)
+         `~~`\ ' . /`~~`
+              ;   ;
+              /   \
+_____________/_ __ \_____________
+```

2022/2022-05-31_git-triology-part-1/slides/web-ide.md

+# Time to practice!
+To change content of a file:
+
+* Open Web IDE
+<!-- .element: class="fragment" data-fragment-index="1" -->
+* Select a branch you want to work on
+<!-- .element: class="fragment" data-fragment-index="2" -->
+* Edit file content
+<!-- .element: class="fragment" data-fragment-index="3" -->
+* Commit
+<!-- .element: class="fragment" data-fragment-index="4" -->
+  * Hit Commit
+  * Select **Create a new branch** and type your branch name
+  * Leave the **Start a new merge request** checked
+  * Hit Commit
+
+
+<div style="position:absolute;left:40%;top:1em" class="fragment fade-in-then-out" data-fragment-index="1">
+<img src="slides/img/commit_GUI_web-ide.png" height="600px" >
+</div>
+
+<div style="position:absolute;left:40%;top:1em" class="fragment fade-in-then-out" data-fragment-index="2">
+<img src="slides/img/web-ide_select-branch.png" height="600px" >
+</div>
+
+<div style="position:absolute;left:33%;top:1em" class="fragment fade-in-then-out" data-fragment-index="3">
+<img src="slides/img/web-ide_edit-file.png" height="400px" >
+</div>
+
+<div style="position:absolute;left:50%;top:1em" class="fragment fade-in-then-out" data-fragment-index="4">
+<img src="slides/img/web-ide_commit-button.png" height="200px" >
+</div>
+
+<div style="position:absolute;left:50%;top:10em" class="fragment fade-in-then-out" data-fragment-index="4">
+<img src="slides/img/web-ide_commit-detail.png" height="400px" >
+</div>
+
+
+
+# What have we done?
+
+<div style="position:absolute;top:2em" class="fragment fade-in-then-out" data-fragment-index="1">
+<img src="slides/img/fork_branch-diagram-after-commit.png" height="600px" >
+</div>

2022/2022-05-31_git-triology-part-1/slides/what_is_git.md

+# What is `git`?
+
+`git` is a **version control system** (VCS) for tracking changes in computer files and coordinating work on those files among multiple people [1].
+
+Designed and implemented in 2005 by **Linus Torvalds**
+
+<div style="position:relative; left:60%;">
+<img src="slides/img/linus.jpg">
+</div>
+
+<div style="position:absolute; left:50%;">
+
+[1] *https://en.wikipedia.org/wiki/Git*
+</div>
+
+<br>
+<div class="fragment">
+
+## The inventor of `git`
+
+<div align="center">
+<img src="slides/img/git_definition.png">
+</div>
+
+`I'm an egotistical bastard, and I name all my projects after myself.
+First Linux, now git.`
+Linus Torvald (2007-06-14)
+
+
+
+# What is the use of `git`?
+
+* Ability to recover old versions
+<div style="position:absolute;left:45%;top:75%">
+<img src="slides/img/Git-logo.png">
+</div>
+
+<div class="fragment">
+
+* Keep the changes you made over time (**history**) to every single line
+* Annotate each change with description
+* **Backtrack** (if necessary) and undo unwanted changes
+* Contribute content in parallel
+* Easily **add contributions** of your collaborators to the any version
+</div>
+
+note:
+
+Other points to mention:
+
+* comes from SW development domain with >100 of people contributing to one project
+* git shall not be considered as a nuisance, but as a tool that should help to track and trace the code.
+* git is not to track performance. Not using it shows exactly the opposite.