workflow images

css/zoom.css

@@ -0,0 +1,33 @@
+img[data-action="zoom"] {
+  cursor: zoom-in;
+}
+.zoom-img,
+.zoom-img-wrap {
+  position: relative;
+  z-index: 666;
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+img.zoom-img {
+  cursor: zoom-out;
+}
+.zoom-overlay {
+  z-index: 420;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  -webkit-transition: opacity 300ms;
+  transition:      opacity 300ms;
+}
+.zoom-overlay-open .zoom-overlay {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL2Nzcy96b29tLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFnQjtDQUNqQjtBQUNEOztFQUVFLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2IsOEJBQXNCO0VBQXRCLHNCQUFzQjtDQUN2QjtBQUNEO0VBQ0UsaUJBQWlCO0NBQ2xCO0FBQ0Q7RUFDRSxhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLGdCQUFnQjtFQUNoQixPQUFPO0VBQ1AsUUFBUTtFQUNSLFNBQVM7RUFDVCxVQUFVO0VBQ1YscUJBQXFCO0VBQ3JCLDJCQUEyQjtFQUMzQixXQUFXO0VBQ1gsa0NBQStCO0VBQS9CLCtCQUErQjtDQUNoQztBQUNEO0VBQ0UsNkJBQTZCO0VBQzdCLFdBQVc7Q0FDWiIsImZpbGUiOiJ6b29tLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltZ1tkYXRhLWFjdGlvbj1cInpvb21cIl0ge1xuICBjdXJzb3I6IHpvb20taW47XG59XG4uem9vbS1pbWcsXG4uem9vbS1pbWctd3JhcCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgei1pbmRleDogNjY2O1xuICB0cmFuc2l0aW9uOiBhbGwgMzAwbXM7XG59XG5pbWcuem9vbS1pbWcge1xuICBjdXJzb3I6IHpvb20tb3V0O1xufVxuLnpvb20tb3ZlcmxheSB7XG4gIHotaW5kZXg6IDQyMDtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBmaWx0ZXI6IFwiYWxwaGEob3BhY2l0eT0wKVwiO1xuICBvcGFjaXR5OiAwO1xuICB0cmFuc2l0aW9uOiAgICAgIG9wYWNpdHkgMzAwbXM7XG59XG4uem9vbS1vdmVybGF5LW9wZW4gLnpvb20tb3ZlcmxheSB7XG4gIGZpbHRlcjogXCJhbHBoYShvcGFjaXR5PTEwMClcIjtcbiAgb3BhY2l0eTogMTtcbn1cbiJdfQ== */

git-crash-course.md

@@ -146,6 +146,8 @@ Clonare un repository remoto esistente:
 
 ---
 
+<!-- .slide: class="two-cols" -->
+
 ## Le basi: status
 
 Vedere lo stato del sistema:
@@ -164,7 +166,7 @@ Vedere lo stato del sistema:
 
 * **Staged**: nella staging area, pronti per il prossimo commit
 
-TODO: disegnino
+<img style="width:300px" src="images/file-states.png" data-action="zoom">
 
 ---
 
@@ -265,7 +267,7 @@ Per vedere quanto è stato posto in staging area:
 
 ## Aggiustare i danni
 
-Modificare l'ultimo commit (ad esempio per aggiungere un file, modificare il commit message o l'autore):
+Modificare l'ultimo commit (aggiungere un file, modificare il commit message o l'autore, ...):
 
     $ git commit --amend [--author="Name Surname <user@example.com>"]
 
@@ -354,12 +356,12 @@ Partendo da master:
     $ git add nuovofile.txt
     $ git commit
 
-TODO: immagine con lo stato corrente
+<img style="width:300px" src="images/branch-commit.png" data-action="zoom">
 
     $ git checkout master
     $ git merge fix/bug-123
 
-TODO: immagine con lo stato corrente
+<img style="width:300px" src="images/branch-ff.png" data-action="zoom">
 
 ---
 
@@ -387,6 +389,12 @@ Partendo da master:
     $ git add file.txt
     $ git commit
 
+<img style="width:300px" src="images/branch-conflict.png" data-action="zoom">
+
+-----
+
+## Risoluzione dei conflitti
+
 Mergiamo:
 
     $ git merge fix/bug-123
@@ -394,7 +402,7 @@ Mergiamo:
     $ git add file.txt
     $ git commit
 
-TODO: immagine con lo stato corrente
+<img style="width:300px" src="images/branch-conflict-solved.png" data-action="zoom">
 
 -----
 
@@ -503,24 +511,33 @@ Valide risorse:
 
 Vediamo il **forking workflow**. Non perché sia intrinsecamente il migliore, ma perché quello più diffuso nello sviluppo su piattaforme come Github. Presupposti:
 
-* esiste un repository ufficiale di riferimento su cui solo gli autori principali possono scrivere
+* esiste un repository ufficiale (chiamiamolo **upstream**) di riferimento su cui solo gli autori principali possono scrivere
 * i contributi di terzi sono accettati
 * ruolo di **project maintainer**: la persona che si occuperà di mergiare nel repository principale
 * ruolo di **developer**: chi sta sviluppando un fix o una nuova feature
-* ciascun developer avrà un fork remoto del repository ufficiale ed una copia locale su cui lavorare
+* ciascun developer avrà un fork remoto del repository upstream ed una copia locale su cui lavorare
 
 -----
 
-## Forking workflow: setup
+## Forking workflow: maintainer setup
 
-Partiamo dal presupposto che il project maintainer abbia creato il repository ufficiale remoto e il proprio clone locale.
+Il project maintainer ha creato il repository upstream remoto e il proprio clone locale.
+
+Maintainer:
+
+* git clone
+
+<img style="width:300px" src="images/worflow-maintainer-clone.png" data-action="zoom">
+
+-----
+
+## Forking workflow: developer setup
 
 Il developer ora:
 
-* crea un **fork** remoto del repository ufficiale
+* crea un **fork** remoto del repository upstream
-* fa un **clone** locale del proprio repository remoto
 
-<br />
+<img style="width:300px" src="images/worflow-developer-fork.png" data-action="zoom">
 
 ## Bonus track
 
@@ -528,28 +545,58 @@ Il developer ora:
 
 -----
 
+## Forking workflow: developer setup
+
+* fa un **clone** locale del proprio repository remoto
+
+<img style="width:300px" src="images/worflow-developer-clone.png" data-action="zoom">
+
+-----
+
 ## Forking workflow: iniziamo lo sviluppo
 
-Poniamo che developer voglia sviluppare un fix che andrà applicato sul branch master del repository ufficiale.
+Developer deve sviluppare un fix che andrà applicato sul branch master del repository upstream.
 
 Nel clone locale del *proprio* fork, farà:
 
     $ git checkout master
-    $ git pull
+    $ git pull upstream
+
+<img style="width:300px" src="images/worflow-developer-branch.png" data-action="zoom">
+
+-----
+
+## Forking workflow: nuovo branch
+
     $ git checkout -b fix/bug-123
-    $ # introduce il fix
+
+<img style="width:300px" src="images/worflow-developer-branch.png" data-action="zoom">
+
+-----
+
+## Forking workflow: lavoriamo
+
+    $ # introdurre il fix
     $ git commit
     $ git push --set-upstream origin fix/bug-123
 
+<img style="width:300px" src="images/worflow-developer-push.png" data-action="zoom">
+
+-----
+
+## Forking workflow: pull request
+
 Ora va sulla pagina web del proprio fork e crea una **pull request**.
 
+<img style="width:300px" src="images/worflow-developer-pull-request.png" data-action="zoom">
+
 -----
 
 ## Forking workflow: pull request
 
 Pull request **NON** è un concetto base di Git (non esattamente, almeno). È qualcosa che vi è stato costruito sopra per facilitare la collaborazione tra sviluppatori.
 
-La pull request creata in precedenza dice: "propongo di applicare i commit del branch *developer-fork:fix/bug-123* a *repository-ufficiale:master*"
+La pull request creata in precedenza dice: "propongo di applicare i commit del branch *developer-fork:fix/bug-123* a *repository-upstream:master*"
 Ora developer, project maintainer e altri possono discuterne.
 
 Se dovesse essere necessario, developer può aggiungere altri commit semplicemente con un nuovo push.
@@ -558,9 +605,11 @@ Se dovesse essere necessario, developer può aggiungere altri commit semplicemen
 
 ## Forking workflow: merging
 
-Una volta soddisfatti, project maintainer potrà effettuare il merge del codice su *repository-ufficiale:master*.
+Una volta soddisfatti, project maintainer potrà effettuare il merge del codice su *repository-upstream:master*.
 
-Se il merge non presenta conflitti, lo si può fare direttamente dalla GUI web sul repository ufficiale.  Altrimenti il project maintainer dovrà fare il fetch di developer-fork:fix/bug-123 sul proprio clone locale, effettuare il merge su master per poi farne il push sul repository ufficiale.
+Se il merge non presenta conflitti, lo si può fare direttamente dalla GUI web sul repository upstream.  Altrimenti il project maintainer dovrà fare il fetch di developer-fork:fix/bug-123 sul proprio clone locale, effettuare il merge su master per poi farne il push sul repository upstream.
+
+<img style="width:300px" src="images/worflow-maintainer-local-fix.png" data-action="zoom">
 
 ---
 
@@ -570,22 +619,37 @@ In cui forniremo una serie di strumenti avanzati.
 
 ---
 
-## Spostarsi tra i commit
+## Referenziare i commit
 
 Salire di 3 livelli, seguendo sempre il primo parent commit (in caso di merge):
 
-    $ git checkout HEAD~3
+    $ git log -1 HEAD~3
 
 Salire di un livello, seguendo il secondo parent commit (in caso di merge):
 
-    $ git checkout HEAD^2
+    $ git log -1 HEAD^2
 
 ### Bonus track
 
 * cosa è HEAD: reference al branch (o commit) corrente
 * **detached HEAD**: ci siamo spostati su un commit che non è l'head di un branch
 * questi operatori sono concatenabili: HEAD~~^2
-* double/tripe dot ranges: git log master..branch; git log --left-right master...branch: https://stackoverflow.com/questions/7251477/what-are-the-differences-between-double-dot-and-triple-dot-in-git-dif
+
+-----
+
+## Referenziare i commit: range
+
+double dot range:
+
+    $ git log master..branch
+
+triple dot range:
+
+    $ git log --left-right master...branch
+
+TODO: disegno
+
+https://stackoverflow.com/questions/7251477/what-are-the-differences-between-double-dot-and-triple-dot-in-git-dif
 
 ---
 
@@ -595,6 +659,8 @@ Salire di un livello, seguendo il secondo parent commit (in caso di merge):
     $ # in caso di conflitti:
     $ git cherry-pick --continue
 
+TODO: immagine con lo stato corrente
+
 ### Cosa è successo?
 
 Si sono prese le modifiche introdotte dai commit elencati, e sono state riapplicate sul branch corrente.
@@ -617,6 +683,8 @@ Poniamoci nella stessa situazione divergente dell'esempio in cui abbiamo usato m
     $ # risolviamo eventuali conflitti
     $ git rebase --continue
 
+TODO: immagine con lo stato corrente
+
 <br />
 
 ### Cosa è successo?
@@ -647,6 +715,8 @@ Creiamo un nuovo branch e committiamo 2 o 3 modifiche.  Poi:
 
     $ git rebase -i master
 
+TODO: immagine con lo stato corrente
+
 <br />
 
 ### Cosa è successo?
@@ -715,7 +785,7 @@ Per vedere tutto ciò che è successo:
 * a volte è utile capire come ci siamo mossi tra i branch
 * fondamentale per recuperare i **broken commits** (non referenziati da alcun branch)
 
------
+---
 
 ## Idee sparse
 
@@ -738,9 +808,9 @@ Per vedere tutto ciò che è successo:
 
 ### Per imparare
 
-* Pro Git: https://git-scm.com/book/en/v2
+* Pro Git: https://git-scm.com/book/en/
 * Reference: https://git-scm.com/docs
-* Learn Git Brancing: http://learngitbranching.js.org/
+* Learn Git Branching: http://learngitbranching.js.org/
 * Git ready: http://gitready.com/
 * Git Cookbook: https://git.seveas.net/
 * tutorial di Atlassian: https://www.atlassian.com/git/tutorials
@@ -759,3 +829,7 @@ Per vedere tutto ciò che è successo:
 <br />
 
 ## ?
+
+<br />
+<br />
+## Davide Alberani <da@erlug.linux.it>

index.html

@@ -1,6 +1,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="css/reveal.css">
+		<link rel="stylesheet" href="css/zoom.css">
 		<link rel="stylesheet" href="css/theme/white.css">
         <title>Git crash course</title>
 
@@ -10,6 +11,10 @@
     margin-top: 5px !important;
 }
 
+.two-cols ul, .two-cols h3 {
+    float: left;
+}
+
         </style>
 	</head>
 	<body>
@@ -19,7 +24,11 @@
 			</div>
 		</div>
 		<script src="js/head.min.js"></script>
-		<script src="js/reveal.js"></script><script>
+		<script src="js/reveal.js"></script>
+		<script src="js/jquery-3.2.1.min.js"></script>
+		<script src="js/transition.js"></script>
+		<script src="js/zoom.min.js"></script>
+        <script>
 Reveal.initialize({
     width: "100%",
 	height: "100%",

js/transition.js

@@ -0,0 +1,59 @@
+/* ========================================================================
+ * Bootstrap: transition.js v3.3.7
+ * http://getbootstrap.com/javascript/#transitions
+ * ========================================================================
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
+  // ============================================================
+
+  function transitionEnd() {
+    var el = document.createElement('bootstrap')
+
+    var transEndEventNames = {
+      WebkitTransition : 'webkitTransitionEnd',
+      MozTransition    : 'transitionend',
+      OTransition      : 'oTransitionEnd otransitionend',
+      transition       : 'transitionend'
+    }
+
+    for (var name in transEndEventNames) {
+      if (el.style[name] !== undefined) {
+        return { end: transEndEventNames[name] }
+      }
+    }
+
+    return false // explicit for ie8 (  ._.)
+  }
+
+  // http://blog.alexmaccaw.com/css-transitions
+  $.fn.emulateTransitionEnd = function (duration) {
+    var called = false
+    var $el = this
+    $(this).one('bsTransitionEnd', function () { called = true })
+    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
+    setTimeout(callback, duration)
+    return this
+  }
+
+  $(function () {
+    $.support.transition = transitionEnd()
+
+    if (!$.support.transition) return
+
+    $.event.special.bsTransitionEnd = {
+      bindType: $.support.transition.end,
+      delegateType: $.support.transition.end,
+      handle: function (e) {
+        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
+      }
+    }
+  })
+
+}(jQuery);

js/zoom.min.js

@@ -0,0 +1,8 @@
+/**
+ * zoom.js - It's the best way to zoom an image
+ * @version v0.0.2
+ * @link https://github.com/fat/zoom.js
+ * @license MIT
+ */
+
++function(t){"use strict";function o(){this._activeZoom=this._initialScrollPosition=this._initialTouchPosition=this._touchMoveListener=null,this._$document=t(document),this._$window=t(window),this._$body=t(document.body),this._boundClick=t.proxy(this._clickHandler,this)}function i(o){this._fullHeight=this._fullWidth=this._overlay=this._targetImageWrap=null,this._targetImage=o,this._$body=t(document.body)}o.prototype.listen=function(){this._$body.on("click",'[data-action="zoom"]',t.proxy(this._zoom,this))},o.prototype._zoom=function(o){var e=o.target;if(e&&"IMG"==e.tagName&&!this._$body.hasClass("zoom-overlay-open"))return o.metaKey||o.ctrlKey?window.open(o.target.getAttribute("data-original")||o.target.src,"_blank"):void(e.width>=t(window).width()-i.OFFSET||(this._activeZoomClose(!0),this._activeZoom=new i(e),this._activeZoom.zoomImage(),this._$window.on("scroll.zoom",t.proxy(this._scrollHandler,this)),this._$document.on("keyup.zoom",t.proxy(this._keyHandler,this)),this._$document.on("touchstart.zoom",t.proxy(this._touchStart,this)),document.addEventListener?document.addEventListener("click",this._boundClick,!0):document.attachEvent("onclick",this._boundClick,!0),"bubbles"in o?o.bubbles&&o.stopPropagation():o.cancelBubble=!0))},o.prototype._activeZoomClose=function(t){this._activeZoom&&(t?this._activeZoom.dispose():this._activeZoom.close(),this._$window.off(".zoom"),this._$document.off(".zoom"),document.removeEventListener("click",this._boundClick,!0),this._activeZoom=null)},o.prototype._scrollHandler=function(o){null===this._initialScrollPosition&&(this._initialScrollPosition=t(window).scrollTop());var i=this._initialScrollPosition-t(window).scrollTop();Math.abs(i)>=40&&this._activeZoomClose()},o.prototype._keyHandler=function(t){27==t.keyCode&&this._activeZoomClose()},o.prototype._clickHandler=function(t){t.preventDefault?t.preventDefault():event.returnValue=!1,"bubbles"in t?t.bubbles&&t.stopPropagation():t.cancelBubble=!0,this._activeZoomClose()},o.prototype._touchStart=function(o){this._initialTouchPosition=o.touches[0].pageY,t(o.target).on("touchmove.zoom",t.proxy(this._touchMove,this))},o.prototype._touchMove=function(o){Math.abs(o.touches[0].pageY-this._initialTouchPosition)>10&&(this._activeZoomClose(),t(o.target).off("touchmove.zoom"))},i.OFFSET=80,i._MAX_WIDTH=2560,i._MAX_HEIGHT=4096,i.prototype.zoomImage=function(){var o=document.createElement("img");o.onload=t.proxy(function(){this._fullHeight=Number(o.height),this._fullWidth=Number(o.width),this._zoomOriginal()},this),o.src=this._targetImage.src},i.prototype._zoomOriginal=function(){this._targetImageWrap=document.createElement("div"),this._targetImageWrap.className="zoom-img-wrap",this._targetImage.parentNode.insertBefore(this._targetImageWrap,this._targetImage),this._targetImageWrap.appendChild(this._targetImage),t(this._targetImage).addClass("zoom-img").attr("data-action","zoom-out"),this._overlay=document.createElement("div"),this._overlay.className="zoom-overlay",this._targetImageWrap.parentNode.insertBefore(this._overlay, this._targetImageWrap),this._calculateZoom(),this._triggerAnimation()},i.prototype._calculateZoom=function(){this._targetImage.offsetWidth;var o=this._fullWidth,e=this._fullHeight,a=(t(window).scrollTop(),o/this._targetImage.width),s=t(window).height()-i.OFFSET,r=t(window).width()-i.OFFSET,n=o/e,h=r/s;this._imgScaleFactor=r>o&&s>e?a:h>n?s/e*a:r/o*a},i.prototype._triggerAnimation=function(){this._targetImage.offsetWidth;var o=t(this._targetImage).offset(),i=t(window).scrollTop(),e=i+t(window).height()/2,a=t(window).width()/2,s=o.top+this._targetImage.height/2,r=o.left+this._targetImage.width/2;this._translateY=e-s,this._translateX=a-r;var n="scale("+this._imgScaleFactor+")",h="translate("+this._translateX+"px, "+this._translateY+"px)";t.support.transition&&(h+=" translateZ(0)"),t(this._targetImage).css({"-webkit-transform":n,"-ms-transform":n,transform:n}),t(this._targetImageWrap).css({"-webkit-transform":h,"-ms-transform":h,transform:h}),this._$body.addClass("zoom-overlay-open")},i.prototype.close=function(){return this._$body.removeClass("zoom-overlay-open").addClass("zoom-overlay-transitioning"),t(this._targetImage).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t(this._targetImageWrap).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t.support.transition?void t(this._targetImage).one(t.support.transition.end,t.proxy(this.dispose,this)).emulateTransitionEnd(300):this.dispose()},i.prototype.dispose=function(){this._targetImageWrap&&this._targetImageWrap.parentNode&&(t(this._targetImage).removeClass("zoom-img").attr("data-action","zoom"),this._targetImageWrap.parentNode.replaceChild(this._targetImage,this._targetImageWrap),this._overlay.parentNode.removeChild(this._overlay),this._$body.removeClass("zoom-overlay-transitioning"))},t(function(){(new o).listen()})}(jQuery);

run.sh

@@ -3,7 +3,9 @@
 git submodule init
 git submodule update 2> /dev/null
 mkdir -p reveal.js/js/
-cp libs/head.min.js reveal.js/js/
+cp js/* reveal.js/js/
+cp css/* reveal.js/css/
+cp images/* reveal.js/images/
 rm -f reveal.js/index.html
 ln index.html git-crash-course.md reveal.js/ 2> /dev/null
 cd reveal.js