finish lecture 0: git setup

main
borb 2 weeks ago
parent 9004fbb533
commit 324543ba94

@ -13,10 +13,10 @@
/* buutti.css */ /* buutti.css */
/* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)} /* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)}
/* @theme 6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> /* @theme galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h1 id="project-management-0-git-setup">Project management 0. Git setup</h1> <h1 id="project-management-0-git-setup">Project management 0. Git setup</h1>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="contents">Contents</h2> <h2 id="contents">Contents</h2>
<ul> <ul>
<li><a href="#contents">Contents</a></li> <li><a href="#contents">Contents</a></li>
@ -29,50 +29,82 @@
<li><a href="#btw-config">Btw: Config</a></li> <li><a href="#btw-config">Btw: Config</a></li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="what-is-git">What is Git?</h2> <h2 id="what-is-git">What is Git?</h2>
<ul> <ul>
<li data-marpit-fragment="1">Git is a version control tool originally created by Linus Torvalds in 2005</li> <li data-marpit-fragment="1">Git is a <em><strong>version control</strong></em> tool originally created by Linus Torvalds in 2005</li>
<li data-marpit-fragment="2">Keeps track of code changes</li> <li data-marpit-fragment="2">Keeps track of code changes</li>
<li data-marpit-fragment="3">Can be used to backup code in the cloud</li> <li data-marpit-fragment="3">Can be used to backup code in the cloud</li>
<li data-marpit-fragment="4">Enables cooperation with other team members</li> <li data-marpit-fragment="4">Enables cooperation with other team members</li>
<li data-marpit-fragment="5">Ubiquitous in software development</li> <li data-marpit-fragment="5">Ubiquitous in software development</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="8" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h3 id="why-version-control">Why version control?</h3>
<ul>
<li data-marpit-fragment="1">Without version control, only one version of your code exists
<ul>
<li data-marpit-fragment="2"><em>What happens when you realize you made a mistake and need to roll back changes you've made?</em></li>
</ul>
</li>
<li data-marpit-fragment="3">You could use manual backups, or a cloud storage service
<ul>
<li data-marpit-fragment="4"><em>What happens if two people connect to a cloud service and edit the same file?</em></li>
<li data-marpit-fragment="5">Or maybe not even the same file... <em>What happens when you and your teammate have made changes to code and you need to combine your work into a single, working version?</em></li>
</ul>
</li>
<li data-marpit-fragment="6">Version control handles all the problems above, and you can focus on the important part: programming!
<ul>
<li data-marpit-fragment="7">You can even try out some big changes that break your software completely</li>
<li data-marpit-fragment="8">If that doesn't work out, just roll back into the last working version!</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h3 id="git-vs-cloud-storage">Git vs cloud storage</h3> <h3 id="git-vs-cloud-storage">Git vs cloud storage</h3>
<ul> <ul>
<li data-marpit-fragment="1">Git is different from cloud storage services like Dropbox, Google Drive or OneDrive <li data-marpit-fragment="1">Git is different from cloud storage services like Dropbox, Google Drive or OneDrive
<ul> <ul>
<li data-marpit-fragment="2">Instead of automatic syncing, you deliberately <em>push to</em> and <em>pull from</em> the cloud</li> <li data-marpit-fragment="2">Instead of automatic syncing, you deliberately <em>push to</em> and <em>pull from</em> the cloud</li>
<li data-marpit-fragment="3">Cloud services are easier for starters</li> <li data-marpit-fragment="3">Cloud services are easier for beginners</li>
<li data-marpit-fragment="4">...but in projects of more than one person, tracking changes would be a pain</li> <li data-marpit-fragment="4">...but in projects of more than one person, tracking changes would be a pain</li>
</ul> </ul>
</li> </li>
<li data-marpit-fragment="5">Git has a steep learning curve <li data-marpit-fragment="5">Git is used via the <em><strong>terminal</strong></em> and has a steep learning curve
<ul> <ul>
<li data-marpit-fragment="6">To ease things, there are some visual tools like <strong>Sourcetree</strong> or <strong>Sublime Merge</strong></li> <li data-marpit-fragment="6">There are some visual tools like <strong>Sourcetree</strong> or <strong>Sublime Merge</strong></li>
<li data-marpit-fragment="7">To use them effectively, you still need to understand how Git works, though</li> <li data-marpit-fragment="7">To use them effectively, though, <em>you must still understand how Git works</em></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="github-and-other-developer-platforms">GitHub and other developer platforms</h2> <h2 id="remote-storage-services">Remote storage services</h2>
<div class='columns' style='grid-template-columns: 5fr 1fr;' markdown='1'>
<div markdown='1'>
<ul> <ul>
<li data-marpit-fragment="1">Git <em>could</em> be used locally, but its usage is almost always combined with a developer platform — a remote storage service like <a href="https://github.com/">GitHub</a>, <a href="https://gitlab.com/">GitLab</a> or <a href="https://bitbucket.com/">BitBucket</a> <li data-marpit-fragment="1">Git <em>could</em> be used locally, but its usage is almost always combined with a developer platform — a remote storage service like <a href="https://github.com/">GitHub</a>, <a href="https://gitlab.com/">GitLab</a> or <a href="https://bitbucket.com/">BitBucket</a>
<ul> <ul>
<li data-marpit-fragment="2">These services can also double as a programming portfolio</li> <li data-marpit-fragment="2">These services can also double as a programming portfolio that can help getting hired into the industry</li>
<li data-marpit-fragment="3">Commonly used in both open source and commercial projects</li> <li data-marpit-fragment="3">Commonly used in both open source and commercial projects</li>
</ul> </ul>
</li> </li>
<li data-marpit-fragment="4">In Buutti's trainings, GitLab is most commonly used</li> <li data-marpit-fragment="4">In Buutti's trainings, <em><strong>GitLab</strong></em> is most commonly used</li>
</ul> </ul>
</div>
<div markdown='1'>
<p><img src="imgs/git-basics_1.png" alt="" style="width:150px;" /></p>
<p><img src="imgs/git-basics_2.png" alt="" style="width:150px;" /></p>
<p><img src="imgs/git-basics_0.png" alt="" style="width:150px;" /></p>
</div>
</div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="setup">Setup</h2> <h2 id="setup">Setup</h2>
<p><img src="imgs/git-basics_3.png" alt="" style="width:450px;" /></p>
<ul> <ul>
<li data-marpit-fragment="1">Install Git <li data-marpit-fragment="1">Installing Git:
<ul> <ul>
<li data-marpit-fragment="2">Windows/Mac: <a href="https://git-scm.com">git-scm.com</a> <li data-marpit-fragment="2">Windows/Mac: <a href="https://git-scm.com">git-scm.com</a>
<ul> <ul>
@ -85,7 +117,7 @@
</li> </li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="git-setup-settings-for-windows">Git setup: Settings for Windows</h2> <h2 id="git-setup-settings-for-windows">Git setup: Settings for Windows</h2>
<div class="columns" markdown="1"> <div class="columns" markdown="1">
<div markdown="1"> <div markdown="1">
@ -93,17 +125,17 @@
</div> </div>
<div markdown="1"> <div markdown="1">
<p><img src="imgs/git3.png" alt="" /></p> <p><img src="imgs/git3.png" alt="" /></p>
<p>Set manually after setup with:</p> <p>To set manually after setup, use:</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global core.editor &quot;code --wait&quot; <pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global core.editor &quot;code --wait&quot;
</code></pre> </code></pre>
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<div class="columns" markdown="1"> <div class="columns" markdown="1">
<div markdown="1"> <div markdown="1">
<p><img src="imgs/git2.png" alt="" /></p> <p><img src="imgs/git2.png" alt="" /></p>
<p>Set manually after setup with:</p> <p>To set manually after setup, use:</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global init.defaultBranch main <pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global init.defaultBranch main
</code></pre> </code></pre>
</div> </div>
@ -112,7 +144,7 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<div class="columns" markdown="1"> <div class="columns" markdown="1">
<div markdown="1"> <div markdown="1">
<p><img src="imgs/git5.png" alt="" /></p> <p><img src="imgs/git5.png" alt="" /></p>
@ -122,11 +154,11 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<div class="columns" markdown="1"> <div class="columns" markdown="1">
<div markdown="1"> <div markdown="1">
<p><img src="imgs/git7.png" alt="" /></p> <p><img src="imgs/git7.png" alt="" /></p>
<p>Set manually after setup with:</p> <p>To set manually after setup, use:</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global credential.helper wincred <pre is="marp-pre" data-auto-scaling="downscale-only"><code>git config --global credential.helper wincred
</code></pre> </code></pre>
</div> </div>
@ -135,7 +167,7 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="command-line">Command line</h2> <h2 id="command-line">Command line</h2>
<ul> <ul>
<li data-marpit-fragment="1">Git is operated via the <em><strong>command line</strong></em>, a.k.a, the <em><strong>terminal</strong></em></li> <li data-marpit-fragment="1">Git is operated via the <em><strong>command line</strong></em>, a.k.a, the <em><strong>terminal</strong></em></li>
@ -145,11 +177,14 @@
<li data-marpit-fragment="4">Linux, (also included in the Windows Git install): <em><strong>bash</strong></em></li> <li data-marpit-fragment="4">Linux, (also included in the Windows Git install): <em><strong>bash</strong></em></li>
</ul> </ul>
</li> </li>
<li data-marpit-fragment="5">We're using PowerShell, which can be accessed inside VS Code</li> <li data-marpit-fragment="5">We're using PowerShell, which can be accessed inside <a href="https://code.visualstudio.com/docs/languages/powershell">VS Code</a> or <a href="https://learn.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell?view=vs-2022">Visual Studio</a>
<ul>
<li data-marpit-fragment="6">In VS Code, open/close terminal by pressing <em><strong>CTRL+Ö</strong></em> (in the Fin/Swe layout)</li> <li data-marpit-fragment="6">In VS Code, open/close terminal by pressing <em><strong>CTRL+Ö</strong></em> (in the Fin/Swe layout)</li>
</ul> </ul>
</li>
</ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="8" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-fragments="8" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h3 id="basic-commands-and-the-working-directory">Basic commands and the working directory</h3> <h3 id="basic-commands-and-the-working-directory">Basic commands and the working directory</h3>
<ul> <ul>
<li data-marpit-fragment="1">To do actions in Git, you don't press buttons, you write commands</li> <li data-marpit-fragment="1">To do actions in Git, you don't press buttons, you write commands</li>
@ -171,13 +206,13 @@
<li data-marpit-fragment="8"><em><strong>Note</strong></em>: <code>..</code> is a shorthand for to the parent directory, <code>.</code> for the current directory</li> <li data-marpit-fragment="8"><em><strong>Note</strong></em>: <code>..</code> is a shorthand for to the parent directory, <code>.</code> for the current directory</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-fragments="5" data-paginate="true" data-class="extra invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="extra invert" data-marpit-pagination="13" style="--paginate:true;--class:extra invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-marpit-fragments="5" data-paginate="true" data-class="extra invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="extra invert" data-marpit-pagination="14" style="--paginate:true;--class:extra invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="extra-help-this-is-horrible">Extra: Help, this is horrible!</h2> <h2 id="extra-help-this-is-horrible">Extra: Help, this is horrible!</h2>
<ul> <ul>
<li data-marpit-fragment="1">Do you feel more at home in graphical UIs? <li data-marpit-fragment="1">Do you feel more at home in graphical UIs?
<ul> <ul>
<li data-marpit-fragment="2">There are also graphical user interfaces for Git like <a href="https://www.gitkraken.com/">GitKraken</a>, <a href="https://www.sublimemerge.com/">Sublime Merge</a> or <a href="https://desktop.github.com/">GitHub Desktop</a> (GitHub only)</li> <li data-marpit-fragment="2">There are also graphical user interfaces for Git like <a href="https://www.sublimemerge.com/">Sublime Merge</a>, <a href="https://www.gitkraken.com/">GitKraken</a>, or <a href="https://desktop.github.com/">GitHub Desktop</a> (for use with GitHub only)</li>
<li data-marpit-fragment="3">VS Code also has very useful graphical tools for Git (more about them later!)</li> <li data-marpit-fragment="3">VS Code also has very useful graphical tools for Git (more about them later!)</li>
</ul> </ul>
</li> </li>
@ -188,10 +223,10 @@
</li> </li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:3;--theme:6utc5o5vxpmafzrv1zs1wd648slmexwsfa03v7jo4d8d;" data-marpit-pagination-total="14"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="3" data-theme="galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:3;--theme:galct98d0vpgve8tgk1a5752eek9u59mh4p0acv49fg;" data-marpit-pagination-total="15">
<h2 id="btw-config">Btw: Config</h2> <h2 id="note-config">Note: Config</h2>
<ul> <ul>
<li data-marpit-fragment="1">To configure your Git username for every project: <li data-marpit-fragment="1">After installation, you may configure your Git username for every project:
<ul> <ul>
<li data-marpit-fragment="2">Use <code>git config --global user.name &quot;myUserName&quot;</code></li> <li data-marpit-fragment="2">Use <code>git config --global user.name &quot;myUserName&quot;</code></li>
<li data-marpit-fragment="3">and <code>git config --global user.email &quot;my.email.address@domain.com&quot;</code></li> <li data-marpit-fragment="3">and <code>git config --global user.email &quot;my.email.address@domain.com&quot;</code></li>

@ -24,32 +24,65 @@ theme: buutti
## What is Git? ## What is Git?
* Git is a version control tool originally created by Linus Torvalds in 2005 * Git is a ***version control*** tool originally created by Linus Torvalds in 2005
* Keeps track of code changes * Keeps track of code changes
* Can be used to backup code in the cloud * Can be used to backup code in the cloud
* Enables cooperation with other team members * Enables cooperation with other team members
* Ubiquitous in software development * Ubiquitous in software development
### Why version control?
* Without version control, only one version of your code exists
* *What happens when you realize you made a mistake and need to roll back changes you've made?*
* You could use manual backups, or a cloud storage service
* *What happens if two people connect to a cloud service and edit the same file?*
* Or maybe not even the same file... *What happens when you and your teammate have made changes to code and you need to combine your work into a single, working version?*
* Version control handles all the problems above, and you can focus on the important part: programming!
* You can even try out some big changes that break your software completely
* If that doesn't work out, just roll back into the last working version!
### Git vs cloud storage ### Git vs cloud storage
* Git is different from cloud storage services like Dropbox, Google Drive or OneDrive * Git is different from cloud storage services like Dropbox, Google Drive or OneDrive
* Instead of automatic syncing, you deliberately *push to* and *pull from* the cloud * Instead of automatic syncing, you deliberately *push to* and *pull from* the cloud
* Cloud services are easier for starters * Cloud services are easier for beginners
* ...but in projects of more than one person, tracking changes would be a pain * ...but in projects of more than one person, tracking changes would be a pain
* Git has a steep learning curve * Git is used via the ***terminal*** and has a steep learning curve
* To ease things, there are some visual tools like **Sourcetree** or **Sublime Merge** * There are some visual tools like **Sourcetree** or **Sublime Merge**
* To use them effectively, you still need to understand how Git works, though * To use them effectively, though, *you must still understand how Git works*
## GitHub and other developer platforms ## Remote storage services
<div class='columns' style='grid-template-columns: 5fr 1fr;' markdown='1'>
<div markdown='1'>
* Git *could* be used locally, but its usage is almost always combined with a developer platform — a remote storage service like [GitHub](https://github.com/), [GitLab](https://gitlab.com/) or [BitBucket](https://bitbucket.com/) * Git *could* be used locally, but its usage is almost always combined with a developer platform — a remote storage service like [GitHub](https://github.com/), [GitLab](https://gitlab.com/) or [BitBucket](https://bitbucket.com/)
* These services can also double as a programming portfolio * These services can also double as a programming portfolio that can help getting hired into the industry
* Commonly used in both open source and commercial projects * Commonly used in both open source and commercial projects
* In Buutti's trainings, GitLab is most commonly used * In Buutti's trainings, ***GitLab*** is most commonly used
</div>
<div markdown='1'>
![w:150px](imgs/git-basics_1.png)
![w:150px](imgs/git-basics_2.png)
![w:150px](imgs/git-basics_0.png)
</div>
</div>
## Setup ## Setup
* Install Git ![w:450px](imgs/git-basics_3.png)
* Installing Git:
* Windows/Mac: [git-scm.com](https://git-scm.com) * Windows/Mac: [git-scm.com](https://git-scm.com)
* Installation instructions are included in the following slides. * Installation instructions are included in the following slides.
* If a setting is not mentioned in the instructions, you can leave it as the default option. * If a setting is not mentioned in the instructions, you can leave it as the default option.
@ -67,7 +100,7 @@ theme: buutti
![](imgs/git3.png) ![](imgs/git3.png)
Set manually after setup with: To set manually after setup, use:
``` ```
git config --global core.editor "code --wait" git config --global core.editor "code --wait"
``` ```
@ -82,7 +115,7 @@ git config --global core.editor "code --wait"
![](imgs/git2.png) ![](imgs/git2.png)
Set manually after setup with: To set manually after setup, use:
``` ```
git config --global init.defaultBranch main git config --global init.defaultBranch main
``` ```
@ -117,7 +150,7 @@ Set manually after setup with:
![](imgs/git7.png) ![](imgs/git7.png)
Set manually after setup with: To set manually after setup, use:
``` ```
git config --global credential.helper wincred git config --global credential.helper wincred
@ -137,8 +170,8 @@ git config --global credential.helper wincred
* There are many kinds of command line syntaxes out there. Some examples: * There are many kinds of command line syntaxes out there. Some examples:
* Windows: ***PowerShell*** (new), ***cmd*** (old) * Windows: ***PowerShell*** (new), ***cmd*** (old)
* Linux, (also included in the Windows Git install): ***bash*** * Linux, (also included in the Windows Git install): ***bash***
* We're using PowerShell, which can be accessed inside VS Code * We're using PowerShell, which can be accessed inside [VS Code](https://code.visualstudio.com/docs/languages/powershell) or [Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell?view=vs-2022)
* In VS Code, open/close terminal by pressing ***CTRL+Ö*** (in the Fin/Swe layout) * In VS Code, open/close terminal by pressing ***CTRL+Ö*** (in the Fin/Swe layout)
### Basic commands and the working directory ### Basic commands and the working directory
@ -158,14 +191,14 @@ git config --global credential.helper wincred
<!-- _class: "extra invert" --> <!-- _class: "extra invert" -->
* Do you feel more at home in graphical UIs? * Do you feel more at home in graphical UIs?
* There are also graphical user interfaces for Git like [GitKraken](https://www.gitkraken.com/), [Sublime Merge](https://www.sublimemerge.com/) or [GitHub Desktop](https://desktop.github.com/) (GitHub only) * There are also graphical user interfaces for Git like [Sublime Merge](https://www.sublimemerge.com/), [GitKraken](https://www.gitkraken.com/), or [GitHub Desktop](https://desktop.github.com/) (for use with GitHub only)
* VS Code also has very useful graphical tools for Git (more about them later!) * VS Code also has very useful graphical tools for Git (more about them later!)
* However, the GUIs make ***a lot*** more sense after you've understood the Git commands that those GUIs still execute under the hood * However, the GUIs make ***a lot*** more sense after you've understood the Git commands that those GUIs still execute under the hood
* There is no free lunch here * There is no free lunch here
## Btw: Config ## Note: Config
* To configure your Git username for every project: * After installation, you may configure your Git username for every project:
* Use `git config --global user.name "myUserName"` * Use `git config --global user.name "myUserName"`
* and `git config --global user.email "my.email.address@domain.com"` * and `git config --global user.email "my.email.address@domain.com"`
* If you do not do this, Git will ask to do it anyway at some point * If you do not do this, Git will ask to do it anyway at some point

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Loading…
Cancel
Save