https://varya.me/component---src-templates-post-js-content-file-pa…ith-git-index-en-md-1f0040c74e4b72a016a3.js

1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[2559],{5336:function(e,t,a){a.r(t),a.d(t,{default:function(){return b}});var n=a(8453),i=a(6540);function s(e){const t=Object.assign({p:"p",span:"span",h3:"h3",a:"a",ul:"ul",li:"li"},(0,n.RP)(),e.components);return i.createElement(i.Fragment,null,i.createElement("div",{"data-excerpt":!0},i.createElement(t.p,null,"My first task for new projects is to create a git repository. Whether it is a new app, or conference slides, or even an\narticle, I prefer to keep everything in Git. It is an excellent tool, and, personally, I enjoy its command line\ninterface."),i.createElement(t.p,null,"However, there is always room for improvement. Recently I found an idea how to make my git visualize the changes that\nI've done to the images in a repository.")),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="sh"><pre class="language-sh"><code class="language-sh">Varyas-MBP £ ~/path/to/project ⤳ master*\n  › <span class="token function">git</span> status\nOn branch master\nChanges not staged <span class="token keyword">for</span> commit:\n  <span class="token punctuation">(</span>use <span class="token string">"git add &lt;file>..."</span> to update what will be committed<span class="token punctuation">)</span>\n  <span class="token punctuation">(</span>use <span class="token string">"git checkout -- &lt;file>..."</span> to discard changes <span class="token keyword">in</span> working directory<span class="token punctuation">)</span>\n\n    modified:   desktop.blocks/social-ico/social-ico__rss.png\n    modified:   desktop.blocks/social-ico/social-ico__twitter.png\n\nno changes added to commit <span class="token punctuation">(</span>use <span class="token string">"git add"</span> and/or <span class="token string">"git commit -a"</span><span class="token punctuation">)</span>\nVaryas-MBP £ ~/path/to/project ⤳ master*</code></pre></div>'}}),"\n",i.createElement(t.p,null,"I can run ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">git diff</code>'}})," over each of the modified images to see the following:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 432px; width: 100%;"\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/46040b6f4a288812c1abdb04c0faf888/0e0c3/diff1.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 43.50000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAACdUlEQVR42jWR30tTARTH99oPqCh88KkIgiIIeqm3/oBeCnyLpB41QrSspPAhMiWpB7FIoqwktWmWQkFhaSKauel1NufmutvunG67zv1wd/fX7v10FfrCl8Ph8D1fzve4tvp7SS7P2MpiB57INB0rL4mIEcLhMMHlAB7PLF6Ph9/Tv/D7/fgWF5n9PYsgCEjRCOuJOGuJVVuWZdbW1lKu5JN2RGGC7Fwro8s/afTexycsMDU1xfjYOD1973c49GkE9+AHhj4O43YPMDAwwC+PQECME47EHPNlRFHEVcImLy0ge4cpRrzYpoWmaai6jlrIoUaDGNEQqrTCViaOphYxyxaGoZMLTbA5208h4Ucr26ilku0qTj4j13aKwoPjOzX3vdWxcGAYmKF5ysklrI0VrLgPZX4UU8li22Vyw43kW05QaDlJ9vEZFMG9rcKVbD5K6sVF0kP1yA9Pk7x3hFJ0GsvJxEz40Lq70AffOYuDmKIXazPLlm+I5J1K0u5a5J4rpJuPkXp0BiO3iktqOETi9SXk6BipkSak+gPkZ95QTq1jpAMot2+iVF1G7XmFkQpQltNkvrUi3ahg/et9NsRR1p9fIHarkpLzVFe4oYJo21lib6uRuqpYqdtPMTyOlU6jSQLqcD/K3Sa0D73oTm9nsmS9fYSu7SXWeZ5Yz1Wi7ecINx1Gz0rOyV8esHR9H4GaPfhrdpEYvLGTBduPCc6hxhfQ5CBqTKDg+YpZ3MSyDGLd1SzV7mapxmHdQdITXZjbGdq2ReHvJKnxTvKhH9iWyX+UlQJaPIQu+tGjAbTsKlZZ25lZpkruz2dH9xRlVUDTDTIbG/wDWzRaA4ahxGYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="diff1"\n        title=""\n        src="/static/46040b6f4a288812c1abdb04c0faf888/0e0c3/diff1.png"\n        srcset="/static/46040b6f4a288812c1abdb04c0faf888/e17e5/diff1.png 400w,\n/static/46040b6f4a288812c1abdb04c0faf888/0e0c3/diff1.png 432w"\n        sizes="(max-width: 432px) 100vw, 432px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 432px; width: 100%;"\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/cdaec8aed7a78f5fa4a8c7a6e4c41d24/0e0c3/diff2.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 43.50000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAACj0lEQVR42jWRW0iTARiGd1dkRBF0GdRVWaQlnSiCThqZQVR018FON9FVFFRehFFedNSUkWRWtmpbzmGlmYq1nLp/Rzedy7nNOX9LW6LZ/P9t/55+g96L7+b9eL+P59X8fv0KMSBk

1pn1V2MI2Hg4+IRwKEwwGCfj9CN092Lt66LFY8fn66PV6EWwCLrebcCTKSEwkFhvNTExMIIriD83YvbuMuFqR7CVY/J+45CjF4/Fg7eyko62dl/X16BrNNDR9wKDXYzKZeaM3ojcYcDntRCJDDEdCDAwEGAqF0KQzGXziFA39k7iHJ1FkBVmWmJUkEnKSH82fGdfqGG/tZGx6hunELEo6jZxM0uUMY2rpxR8UUZQUicRsRmPwfeeQaYiDDWEK64eosMXIqEfUQfTiTTxLNuJdthXv0k24L5TyS0qRURRua7+QX1zH3lMvKDqvw/SpnzlpCt/4OfR2kLONAU6/G2THMy/WnxKpli84s3LoW7mLgZU78a/YiXPRBuQuOy2OKJsPV3H4go7r9z5SUFzLvtO1RMVJNNueujlp9BCfmsHoiZGnFdCFppgpr8GxOI9AdgFyyR1GVu9BUAOlmtdoG73kHrjPict6npvs7D5ezZajlVhdETWw2sbBOicPLEGO6XvJrbDy+fsfks0dCPPW0K9+F91fjG/5DuxZ65A7unjfHWbV7jKKztVw5qqeLUcq2H7sEZFYHM1j1cyr/Er2Awvryi3caPGjzDFUOYXPXEOYvxZhwVocC3OwH7/CZEIinVa4dMtMdn4ZawrKWF90h6eGbpVgBs1cAa6ROHWOCF9D4yTV5f+S1UZHDU2It7WI5jbGVCyJVPqfJ8kp2q3fqDX24PGPkkzKxONx/gKjXjFcIXQ1LgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="diff2"\n        title=""\n        src="/static/cdaec8aed7a78f5fa4a8c7a6e4c41d24/0e0c3/diff2.png"\n        srcset="/static/cdaec8aed7a78f5fa4a8c7a6e4c41d24/e17e5/diff2.png 400w,\n/static/cdaec8aed7a78f5fa4a8c7a6e4c41d24/0e0c3/diff2.png 432w"\n        sizes="(max-width: 432px) 100vw, 432px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",i.createElement(t.p,null,"For every picture displayed, I can see a previous version (on the left side), a current version (on the right side) and\nvisually represented difference (in between). This feature is useful for tracking exact changes in the image. Now, I can\neasily spot if some particular details were shifted, some colors were changed, or a picture was accidentally blended\nwith another one."),"\n",i.createElement(t.p,null,"You can configure git to do the same. First, install ImageMagick to provide a visual comparison. Note that for the\nlatest versions of OS X you need to install a package with a support of X11. To install with ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">brew</code>'}}),", do the following:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">  › brew install imagemagick --with-x11</code></pre></div>'}}),"\n",i.createElement(t.p,null,"Then, create a script to compare two given images. Run ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">cat ~/bin/git-imgdiff</code>'}}),", and paste inside:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">#!/bin/sh\ncompare $2 $1 png:- | montage -geometry +4+4 $2 - $1 png:- | display -title "$1" -</code></pre></div>'}}),"\n",i.createElement(t.p,null,"Now, test the script. It should do the comparison of two processed images:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">  › ~/bin/git-imgdiff img1.png img2.png</code></pre></div>'}}),"\n",i.createElement(t.p,null,"At this step, you need to show git how to use compariing script. For that, define the image files their extensions\nin a special file. Run ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">cat ~/.gitattributes</code>'}})," and paste the following:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">*.gif diff=image\n*.jpg diff=image\n*.png diff=image</code></pre></div>'}}),"\n",i.createElement(t.p,null,"Provide git with this configuration by:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">  › git config --global core.attributesfile \'~/.gitattributes\'</code></pre></div>'}}),"\n",i.createElement(t.p,null,"The last step is to instruct git to use your script when ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">diff</code>'}})," command is applied to the matching files:"),"\n",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">  › git config --global diff.image.command \'~/bin/git-imgdiff\'</code></pre></div>'}}),"\n",i.createElement(t.p,null,"That's it. Now, running a ",i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">git diff</code>'}})," over your images you will get a human-friendly output. Enjoy!"),"\n",i.createElement(t.h3,{id:"references",style:{position:"relative"}}

1,i.createElement(t.a,{href:"#references","aria-label":"references permalink",className:"anchor before"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"References"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.a,{href:"http://www.akikoskinen.info/image-diffs-with-git/"},"1")),"\n",i.createElement(t.li,null,i.createElement(t.a,{href:"http://paulmestemaker.com/imagemagick-display-mac-os-x/"},"2")),"\n"))}var l=function(e={}){const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?i.createElement(t,e,i.createElement(s,e)):s(e)},r=a(5556),c=a.n(r),o=a(3433),g=a(9868),d=a(7037),p=a(3928),m=a(4449);const u={Box:o.a,Button:g.$,Text:d.E,Heading:p.DZ,Paragraph:p.fz,PatternJourney:p.Rl,PureHtml:p.Qi,Section:p.wn,Hero:p.lq,Widget:p.x0,PatternJourney:p.Rl,WidgetContainer:p.uM,Workshop:p.cR,ProjectRoles:p.JV,DsAspects:p.nD,Link:p.N_,Image:p._V,ImageBlock:p.Dq,Map:p.T5,YandexImage:p.zX,Instagram:p.pd},f=e=>({children:t})=>i.createElement(p.DZ,{level:e},t),h={h1:f(1),h2:f(2),h3:f(3),h4:f(4),h5:f(5),h6:f(6),p:({children:e})=>i.createElement(p.fz,{standout:!0},e),a:p.N_,ul:p.Ul,ol:p.Ol,div:({"data-excerpt":e,children:t,...a})=>e?i.createElement(p.fz,{as:"div",lead:!0},t):i.createElement("div",a,t)};h.h1.propTypes={children:c().node};const y=({data:{mdx:e,site:{siteMetadata:{siteUrl:t}}},children:a,pageContext:{next:s,prev:l,fileSourceUrl:r}})=>{const{readingTime:c,slug:g,disqusIdentifier:d}=e.fields,{date:f,title:y,subTitle:b,cover:E,tumblr:w}=e.frontmatter,k=e.frontmatter.tags&&e.frontmatter.tags.split(","),A=g.startsWith("blog/");return e?i.createElement(p.PE,null,i.createElement(p.I0,{imageUrl:E&&E.childImageSharp.gatsbyImageData.images.fallback.src,tags:k,date:f,readingTime:A&&parseInt(c.minutes)>0?`${Math.round(c.minutes).toFixed(1)} min read`:null,title:y,subTitle:b}),i.createElement(p.G$,{data:e}),i.createElement(o.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},i.createElement(n.xA,{components:{...h,...u}},a),i.createElement(o.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},k&&k.length>0&&k.map(e=>i.createElement(p.vw,{key:e,name:e.trim(),slug:(0,m.fX)(e),margin:"xsmall"}))),A&&i.createElement(i.Fragment,null,i.createElement(p.WB,{flex:!1,prevSlug:l&&`/${l.fields.slug}`,nextSlug:s&&`/${s.fields.slug}`,prevTitle:l&&l.frontmatter.title,nextTitle:s&&s.frontmatter.title,pad:{vertical:"medium"}}),i.createElement(p.Sn,{link:r}),i.createElement(p.Hw,{slug:g,title:y,disqusIdentifier:d,tumblr:w,siteUrl:t})))):null};function b(e){return i.createElement(y,e,i.createElement(l,e))}},8453:function(e,t,a){a.d(t,{RP:function(){return s},xA:function(){return r}});var n=a(6540);const i=n.createContext({});function s(e){const t=n.useContext(i);return n.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const l={};function r({components:e,children:t,disableParentContext:a}){let r;return r=a?"function"==typeof e?e({}):e||l:s(e),n.createElement(i.Provider,{value:r},t)}}}]);
2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-image-diffs-with-git-index-en-md-1f0040c74e4b72a016a3.js.map